test(useResourceAttribute): close ResourceProvider coverage gaps

Adds four tests covering:
- URL re-hydration effect fires when router URL changes mid-session
- SERVICE_MAP filters fetched tag keys through whilelistedKeys
- In-flight GetTagKeys keeps loading=true and clears optionsData
- API error payload still flips loading=false and leaves options empty

.github/workflows/e2eci.yaml

@@ -1,91 +0,0 @@
-name: e2eci
-
-on:
-  pull_request:
-    types:
-      - labeled
-  pull_request_target:
-    types:
-      - labeled
-
-jobs:
-  fmtlint:
-    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
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-      - name: install
-        run: |
-          cd tests/e2e && yarn install --frozen-lockfile
-      - name: fmt
-        run: |
-          cd tests/e2e && yarn fmt:check
-      - name: lint
-        run: |
-          cd tests/e2e && yarn lint
-  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,24 +201,26 @@ docker-buildx-enterprise: go-build-enterprise js-build
 # python commands
 ##############################################################
 .PHONY: py-fmt
-py-fmt: ## Run ruff format across the shared tests project
-	@cd tests && uv run ruff format .
+py-fmt: ## Run black for integration tests
+	@cd tests/integration && uv run black .
 
 .PHONY: py-lint
-py-lint: ## Run ruff check across the shared tests project
-	@cd tests && uv run ruff check --fix .
+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

cmd/community/server.go

@@ -92,7 +92,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
 			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
 			if err != nil {
 				return nil, err

cmd/enterprise/server.go

@@ -137,12 +137,12 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
 			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
 			if err != nil {
 				return nil, err
 			}
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, dashboardModule), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, dashboardModule), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)

conf/example.yaml

@@ -407,11 +407,3 @@ cloudintegration:
   agent:
     # The version of the cloud integration agent.
     version: v0.0.8
-
-##################### Authz #################################
-authz:
-  # Specifies the authz provider to use.
-  provider: openfga
-  openfga:
-    # maximum tuples allowed per openfga write operation.
-    max_tuples_per_write: 100

docs/api/openapi.yml

@@ -2287,125 +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
     MetricsexplorertypesInspectMetricsRequest:
       properties:
         end:
@@ -7807,7 +7688,7 @@ paths:
       summary: Patch role
       tags:
       - role
-  /api/v1/roles/{id}/relations/{relation}/objects:
+  /api/v1/roles/{id}/relation/{relation}/objects:
     get:
       deprecated: false
       description: Gets all objects connected to the specified role via a given relation
@@ -9972,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/authz/openfgaauthz/provider.go

@@ -20,23 +20,20 @@ import (
 )
 
 type provider struct {
-	config             authz.Config
-	pkgAuthzService    authz.AuthZ
-	openfgaServer      *openfgaserver.Server
-	licensing          licensing.Licensing
-	store              authtypes.RoleStore
-	registry           []authz.RegisterTypeable
-	settings           factory.ScopedProviderSettings
-	onBeforeRoleDelete []authz.OnBeforeRoleDelete
+	pkgAuthzService authz.AuthZ
+	openfgaServer   *openfgaserver.Server
+	licensing       licensing.Licensing
+	store           authtypes.RoleStore
+	registry        []authz.RegisterTypeable
 }
 
-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
-		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, onBeforeRoleDelete, registry)
+		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, registry)
 	})
 }
 
-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
 	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
@@ -48,17 +45,12 @@ func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings,
 		return nil, err
 	}
 
-	scopedSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/authz/openfgaauthz")
-
 	return &provider{
-		config:             config,
-		pkgAuthzService:    pkgAuthzService,
-		openfgaServer:      openfgaServer,
-		licensing:          licensing,
-		store:              sqlauthzstore.NewSqlAuthzStore(sqlstore),
-		registry:           registry,
-		settings:           scopedSettings,
-		onBeforeRoleDelete: onBeforeRoleDelete,
+		pkgAuthzService: pkgAuthzService,
+		openfgaServer:   openfgaServer,
+		licensing:       licensing,
+		store:           sqlauthzstore.NewSqlAuthzStore(sqlstore),
+		registry:        registry,
 	}, nil
 }
 
@@ -86,18 +78,14 @@ func (provider *provider) BatchCheck(ctx context.Context, tupleReq map[string]*o
 	return provider.openfgaServer.BatchCheck(ctx, tupleReq)
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
+	return provider.openfgaServer.ListObjects(ctx, subject, relation, typeable)
 }
 
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
 
-func (provider *provider) ReadTuples(ctx context.Context, tupleKey *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error) {
-	return provider.openfgaServer.ReadTuples(ctx, tupleKey)
-}
-
 func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.Get(ctx, orgID, id)
 }
@@ -158,7 +146,7 @@ func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *a
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	return provider.store.Create(ctx, role)
+	return provider.store.Create(ctx, authtypes.NewStorableRoleFromRole(role))
 }
 
 func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
@@ -175,10 +163,10 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	}
 
 	if existingRole != nil {
-		return existingRole, nil
+		return authtypes.NewRoleFromStorableRole(existingRole), nil
 	}
 
-	err = provider.store.Create(ctx, role)
+	err = provider.store.Create(ctx, authtypes.NewStorableRoleFromRole(role))
 	if err != nil {
 		return nil, err
 	}
@@ -187,13 +175,14 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 }
 
 func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
-	resources := make([]*authtypes.Resource, 0)
+	typeables := make([]authtypes.Typeable, 0)
 	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-		}
+		typeables = append(typeables, register.MustGetTypeables()...)
 	}
-	for _, typeable := range provider.MustGetTypeables() {
+
+	typeables = append(typeables, provider.MustGetTypeables()...)
+	resources := make([]*authtypes.Resource, 0)
+	for _, typeable := range typeables {
 		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
 	}
 
@@ -212,23 +201,21 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 	}
 
 	objects := make([]*authtypes.Object, 0)
-	for _, objectType := range provider.getUniqueTypes() {
-		if !slices.Contains(authtypes.TypeableRelations[objectType], relation) {
-			continue
-		}
+	for _, resource := range provider.GetResources(ctx) {
+		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
+			resourceObjects, err := provider.
+				ListObjects(
+					ctx,
+					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
+					relation,
+					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
+				)
+			if err != nil {
+				return nil, err
+			}
 
-		resourceObjects, err := provider.
-			ListObjects(
-				ctx,
-				authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
-				relation,
-				objectType,
-			)
-		if err != nil {
-			return nil, err
+			objects = append(objects, resourceObjects...)
 		}
-
-		objects = append(objects, resourceObjects...)
 	}
 
 	return objects, nil
@@ -240,7 +227,7 @@ func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *au
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	return provider.store.Update(ctx, orgID, role)
+	return provider.store.Update(ctx, orgID, authtypes.NewStorableRoleFromRole(role))
 }
 
 func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
@@ -273,26 +260,17 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	role, err := provider.store.Get(ctx, orgID, id)
+	storableRole, err := provider.store.Get(ctx, orgID, id)
 	if err != nil {
 		return err
 	}
 
+	role := authtypes.NewRoleFromStorableRole(storableRole)
 	err = role.ErrIfManaged()
 	if err != nil {
 		return err
 	}
 
-	for _, cb := range provider.onBeforeRoleDelete {
-		if err := cb(ctx, orgID, id); err != nil {
-			return err
-		}
-	}
-
-	if err := provider.deleteTuples(ctx, role.Name, orgID); err != nil {
-		return errors.WithAdditionalf(err, "failed to delete tuples for the role: %s", role.Name)
-	}
-
 	return provider.store.Delete(ctx, orgID, id)
 }
 
@@ -368,62 +346,3 @@ func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]
 
 	return tuples, nil
 }
-
-func (provider *provider) deleteTuples(ctx context.Context, roleName string, orgID valuer.UUID) error {
-	subject := authtypes.MustNewSubject(authtypes.TypeableRole, roleName, orgID, &authtypes.RelationAssignee)
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.getUniqueTypes() {
-		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
-			User:   subject,
-			Object: objectType.StringValue() + ":",
-		})
-		if err != nil {
-			return err
-		}
-		tuples = append(tuples, typeTuples...)
-	}
-
-	if len(tuples) == 0 {
-		return nil
-	}
-
-	for idx := 0; idx < len(tuples); idx += provider.config.OpenFGA.MaxTuplesPerWrite {
-		end := idx + provider.config.OpenFGA.MaxTuplesPerWrite
-		if end > len(tuples) {
-			end = len(tuples)
-		}
-
-		err := provider.Write(ctx, nil, tuples[idx:end])
-		if err != nil {
-			return err
-		}
-	}
-
-	return nil
-}
-
-func (provider *provider) getUniqueTypes() []authtypes.Type {
-	seen := make(map[string]struct{})
-	uniqueTypes := make([]authtypes.Type, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			typeKey := typeable.Type().StringValue()
-			if _, ok := seen[typeKey]; ok {
-				continue
-			}
-			seen[typeKey] = struct{}{}
-			uniqueTypes = append(uniqueTypes, typeable.Type())
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		typeKey := typeable.Type().StringValue()
-		if _, ok := seen[typeKey]; ok {
-			continue
-		}
-		seen[typeKey] = struct{}{}
-		uniqueTypes = append(uniqueTypes, typeable.Type())
-	}
-
-	return uniqueTypes
-}

ee/authz/openfgaserver/server.go

@@ -110,14 +110,10 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
+	return server.pkgAuthzService.ListObjects(ctx, subject, relation, typeable)
 }
 
 func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return server.pkgAuthzService.Write(ctx, additions, deletions)
 }
-
-func (server *Server) ReadTuples(ctx context.Context, tupleKey *openfgav1.ReadRequestTupleKey) ([]*openfgav1.TupleKey, error) {
-	return server.pkgAuthzService.ReadTuples(ctx, tupleKey)
-}

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/e2e/test-plan/README.md

@@ -0,0 +1,29 @@
+# SigNoz E2E Test Plan
+
+This directory contains the structured test plan for the SigNoz application. Each subfolder corresponds to a main module or feature area, and contains scenario files for all user journeys, edge cases, and cross-module flows. These documents serve as the basis for generating Playwright MCP-driven E2E tests.
+
+## Structure
+
+- Each main module (e.g., logs, traces, dashboards, alerts, settings, etc.) has its own folder or markdown file.
+- Each file contains detailed scenario templates, including preconditions, step-by-step actions, and expected outcomes.
+- Use these documents to write, review, and update test cases as the application evolves.
+
+## Folders & Files
+
+- `logs/` — Logs module scenarios
+- `traces/` — Traces module scenarios
+- `metrics/` — Metrics module scenarios
+- `dashboards/` — Dashboards module scenarios
+- `alerts/` — Alerts module scenarios
+- `services/` — Services module scenarios
+- `settings/` — Settings and all sub-settings scenarios
+- `onboarding/` — Onboarding and signup flows
+- `navigation/` — Navigation, sidebar, and cross-module flows
+- `exceptions/` — Exception and error handling scenarios
+- `external-apis/` — External API monitoring scenarios
+- `messaging-queues/` — Messaging queue scenarios
+- `infrastructure/` — Infrastructure monitoring scenarios
+- `help-support/` — Help & support scenarios
+- `user-preferences/` — User preferences and personalization scenarios
+- `service-map/` — Service map scenarios
+- `saved-views/` — Saved views scenarios

frontend/e2e/test-plan/settings/README.md

@@ -0,0 +1,16 @@
+# Settings Module Test Plan
+
+This folder contains E2E test scenarios for the Settings module and all sub-settings.
+
+## Scenario Categories
+
+- General settings (org/workspace, branding, version info)
+- Billing settings
+- Members & SSO
+- Custom domain
+- Integrations
+- Notification channels
+- API keys
+- Ingestion
+- Account settings (profile, password, preferences)
+- Keyboard shortcuts

frontend/e2e/test-plan/settings/account-settings.md

@@ -0,0 +1,43 @@
+# Account Settings E2E Scenarios (Updated)
+
+## 1. Update Name
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Click 'Update name' button
+  2. Edit name field in the modal/dialog
+  3. Save changes
+- **Expected:** Name is updated in the UI
+
+## 2. Update Email
+
+- **Note:** The email field is not editable in the current UI.
+
+## 3. Reset Password
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Click 'Reset password' button
+  2. Complete reset flow (modal/dialog or external flow)
+- **Expected:** Password is reset
+
+## 4. Toggle 'Adapt to my timezone'
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle 'Adapt to my timezone' switch
+- **Expected:** Timezone adapts accordingly (UI feedback/confirmation should be checked)
+
+## 5. Toggle Theme (Dark/Light)
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle theme radio buttons ('Dark', 'Light Beta')
+- **Expected:** Theme changes
+
+## 6. Toggle Sidebar Always Open
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle 'Keep the primary sidebar always open' switch
+- **Expected:** Sidebar remains open/closed as per toggle

frontend/e2e/test-plan/settings/api-keys.md

@@ -0,0 +1,26 @@
+# API Keys E2E Scenarios (Updated)
+
+## 1. Create a New API Key
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'New Key' button
+  2. Enter details in the modal/dialog
+  3. Click 'Save'
+- **Expected:** API key is created and listed in the table
+
+## 2. Revoke an API Key
+
+- **Precondition:** API key exists
+- **Steps:**
+  1. In the table, locate the API key row
+  2. Click the revoke/delete button (icon button in the Action column)
+  3. Confirm if prompted
+- **Expected:** API key is revoked/removed from the table
+
+## 3. View API Key Usage
+
+- **Precondition:** API key exists
+- **Steps:**
+  1. View the 'Last used' and 'Expired' columns in the table
+- **Expected:** Usage data is displayed for each API key

frontend/e2e/test-plan/settings/billing.md

@@ -0,0 +1,17 @@
+# Billing Settings E2E Scenarios (Updated)
+
+## 1. View Billing Information
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Navigate to Billing Settings
+  2. Wait for the billing chart/data to finish loading
+- **Expected:**
+  - Billing heading and subheading are displayed
+  - Usage/cost table is visible with columns: Unit, Data Ingested, Price per Unit, Cost (Billing period to date)
+  - "Download CSV" and "Manage Billing" buttons are present and enabled after loading
+  - Test clicking "Download CSV" and "Manage Billing" for expected behavior (e.g., file download, navigation, or modal)
+
+> Note: If these features are expected to trigger specific flows, document the observed behavior for each button.
+
+

frontend/e2e/test-plan/settings/custom-domain.md

@@ -0,0 +1,18 @@
+# Custom Domain E2E Scenarios (Updated)
+
+## 1. Add or Update Custom Domain
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Customize team’s URL' button
+  2. In the 'Customize your team’s URL' dialog, enter the preferred subdomain
+  3. Click 'Apply Changes'
+- **Expected:** Domain is set/updated for the team (UI feedback/confirmation should be checked)
+
+## 2. Verify Domain Ownership
+
+- **Note:** No explicit 'Verify' button or flow is present in the current UI. If verification is required, it may be handled automatically or via support.
+
+## 3. Remove a Custom Domain
+
+- **Note:** No explicit 'Remove' button or flow is present in the current UI. The only available action is to update the subdomain.

frontend/e2e/test-plan/settings/general.md

@@ -0,0 +1,31 @@
+# General Settings E2E Scenarios
+
+## 1. View General Settings
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to General Settings
+- **Expected:** General settings are displayed
+
+## 2. Update Organization/Workspace Name
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Edit organization/workspace name
+  2. Save changes
+- **Expected:** Name is updated and visible
+
+## 3. Update Logo or Branding
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Upload new logo/branding
+  2. Save changes
+- **Expected:** Branding is updated
+
+## 4. View Version/Build Info
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. View version/build info section
+- **Expected:** Version/build info is displayed

frontend/e2e/test-plan/settings/ingestion.md

@@ -0,0 +1,20 @@
+# Ingestion E2E Scenarios (Updated)
+
+## 1. View Ingestion Sources
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Navigate to the Integrations page
+- **Expected:** List of available data sources/integrations is displayed
+
+## 2. Configure Ingestion Sources
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Configure' for a data source/integration
+  2. Complete the configuration flow (modal or page, as available)
+- **Expected:** Source is configured (UI feedback/confirmation should be checked)
+
+## 3. Disable/Enable Ingestion
+
+- **Note:** No visible enable/disable toggle for ingestion sources in the current UI. Ingestion is managed via the Integrations configuration flows.

frontend/e2e/test-plan/settings/integrations.md

@@ -0,0 +1,51 @@
+# Integrations E2E Scenarios (Updated)
+
+## 1. View List of Available Integrations
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to Integrations
+- **Expected:** List of integrations is displayed, each with a name, description, and 'Configure' button
+
+## 2. Search Integrations by Name/Type
+
+- **Precondition:** Integrations exist
+- **Steps:**
+  1. Enter search/filter criteria in the 'Search for an integration...' box
+- **Expected:** Only matching integrations are shown
+
+## 3. Connect a New Integration
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Configure' for an integration
+  2. Complete the configuration flow (modal or page, as available)
+- **Expected:** Integration is connected/configured (UI feedback/confirmation should be checked)
+
+## 4. Disconnect an Integration
+
+- **Note:** No visible 'Disconnect' button in the main list. This may be available in the configuration flow for a connected integration.
+
+## 5. Configure Integration Settings
+
+- **Note:** Configuration is handled in the flow after clicking 'Configure' for an integration.
+
+## 6. Test Integration Connection
+
+- **Note:** No visible 'Test Connection' button in the main list. This may be available in the configuration flow.
+
+## 7. View Integration Status/Logs
+
+- **Note:** No visible status/logs section in the main list. This may be available in the configuration flow.
+
+## 8. Filter Integrations by Category
+
+- **Note:** No explicit category filter in the current UI, only a search box.
+
+## 9. View Integration Documentation/Help
+
+- **Note:** No visible 'Help/Docs' button in the main list. This may be available in the configuration flow.
+
+## 10. Update Integration Configuration
+
+- **Note:** Configuration is handled in the flow after clicking 'Configure' for an integration.

frontend/e2e/test-plan/settings/keyboard-shortcuts.md

@@ -0,0 +1,19 @@
+# Keyboard Shortcuts E2E Scenarios (Updated)
+
+## 1. View Keyboard Shortcuts
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to Keyboard Shortcuts
+- **Expected:** Shortcuts are displayed in categorized tables (Global, Logs Explorer, Query Builder, Dashboard)
+
+## 2. Customize Keyboard Shortcuts (if supported)
+
+- **Note:** Customization is not available in the current UI. Shortcuts are view-only.
+
+## 3. Use Keyboard Shortcuts for Navigation/Actions
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Use shortcut for navigation/action (e.g., shift+s for Services, cmd+enter for running query)
+- **Expected:** Navigation/action is performed as per shortcut

frontend/e2e/test-plan/settings/members-sso.md

@@ -0,0 +1,49 @@
+# Members & SSO E2E Scenarios (Updated)
+
+## 1. Invite a New Member
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Invite Members' button
+  2. In the 'Invite team members' dialog, enter email address, name (optional), and select role
+  3. (Optional) Click 'Add another team member' to invite more
+  4. Click 'Invite team members' to send invite(s)
+- **Expected:** Pending invite appears in the 'Pending Invites' table
+
+## 2. Remove a Member
+
+- **Precondition:** User is admin, member exists
+- **Steps:**
+  1. In the 'Members' table, locate the member row
+  2. Click 'Delete' in the Action column
+  3. Confirm removal if prompted
+- **Expected:** Member is removed from the table
+
+## 3. Update Member Roles
+
+- **Precondition:** User is admin, member exists
+- **Steps:**
+  1. In the 'Members' table, locate the member row
+  2. Click 'Edit' in the Action column
+  3. Change role in the edit dialog/modal
+  4. Save changes
+- **Expected:** Member role is updated in the table
+
+## 4. Configure SSO
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. In the 'Authenticated Domains' section, locate the domain row
+  2. Click 'Configure SSO' or 'Edit Google Auth' as available
+  3. Complete SSO provider configuration in the modal/dialog
+  4. Save settings
+- **Expected:** SSO is configured for the domain
+
+## 5. Login via SSO
+
+- **Precondition:** SSO is configured
+- **Steps:**
+  1. Log out from the app
+  2. On the login page, click 'Login with SSO'
+  3. Complete SSO login flow
+- **Expected:** User is logged in via SSO

frontend/e2e/test-plan/settings/notification-channels.md

@@ -0,0 +1,39 @@
+# Notification Channels E2E Scenarios (Updated)
+
+## 1. Add a New Notification Channel
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'New Alert Channel' button
+  2. In the 'New Notification Channel' form, fill in required fields (Name, Type, Webhook URL, etc.)
+  3. (Optional) Toggle 'Send resolved alerts'
+  4. (Optional) Click 'Test' to send a test notification
+  5. Click 'Save' to add the channel
+- **Expected:** Channel is added and listed in the table
+
+## 2. Test Notification Channel
+
+- **Precondition:** Channel is being created or edited
+- **Steps:**
+  1. In the 'New Notification Channel' or 'Edit Notification Channel' form, click 'Test'
+- **Expected:** Test notification is sent (UI feedback/confirmation should be checked)
+
+## 3. Remove a Notification Channel
+
+- **Precondition:** Channel is added
+- **Steps:**
+  1. In the table, locate the channel row
+  2. Click 'Delete' in the Action column
+  3. Confirm removal if prompted
+- **Expected:** Channel is removed from the table
+
+## 4. Update Notification Channel Settings
+
+- **Precondition:** Channel is added
+- **Steps:**
+  1. In the table, locate the channel row
+  2. Click 'Edit' in the Action column
+  3. In the 'Edit Notification Channel' form, update fields as needed
+  4. (Optional) Click 'Test' to send a test notification
+  5. Click 'Save' to update the channel
+- **Expected:** Settings are updated

frontend/e2e/test-plan/validation-report.md

@@ -0,0 +1,199 @@
+# SigNoz Test Plan Validation Report
+
+This report documents the validation of the E2E test plan against the current live application using Playwright MCP. Each module is reviewed for coverage, gaps, and required updates.
+
+---
+
+## Home Module
+
+- **Coverage:**
+  - Widgets for logs, traces, metrics, dashboards, alerts, services, saved views, onboarding checklist
+  - Quick access buttons: Explore Logs, Create dashboard, Create an alert
+- **Gaps/Updates:**
+  - Add scenarios for checklist interactions (e.g., “I’ll do this later”, progress tracking)
+  - Add scenarios for Saved Views and cross-module links
+  - Add scenario for onboarding checklist completion
+
+---
+
+## Logs Module
+
+- **Coverage:**
+  - Explorer, Pipelines, Views tabs
+  - Filtering by service, environment, severity, host, k8s, etc.
+  - Search, save view, create alert, add to dashboard, export, view mode switching
+- **Gaps/Updates:**
+  - Add scenario for quick filter customization
+  - Add scenario for “Old Explorer” button
+  - Add scenario for frequency chart toggle
+  - Add scenario for “Stage & Run Query” workflow
+
+---
+
+## Traces Module
+
+- **Coverage:**
+  - Tabs: Explorer, Funnels, Views
+  - Filtering by name, error status, duration, environment, function, service, RPC, status code, HTTP, trace ID, etc.
+  - Search, save view, create alert, add to dashboard, export, view mode switching (List, Traces, Time Series, Table)
+  - Pagination, quick filter customization, group by, aggregation
+- **Gaps/Updates:**
+  - Add scenario for quick filter customization
+  - Add scenario for “Stage & Run Query” workflow
+  - Add scenario for all view modes (List, Traces, Time Series, Table)
+  - Add scenario for group by/aggregation
+  - Add scenario for trace detail navigation (clicking on trace row)
+  - Add scenario for Funnels tab (create/edit/delete funnel)
+  - Add scenario for Views tab (manage saved views)
+
+---
+
+## Metrics Module
+
+- **Coverage:**
+  - Tabs: Summary, Explorer, Views
+  - Filtering by metric, type, unit, etc.
+  - Search, save view, add to dashboard, export, view mode switching (chart, table, proportion view)
+  - Pagination, group by, aggregation, custom queries
+- **Gaps/Updates:**
+  - Add scenario for Proportion View in Summary
+  - Add scenario for all view modes (chart, table, proportion)
+  - Add scenario for group by/aggregation
+  - Add scenario for custom queries in Explorer
+  - Add scenario for Views tab (manage saved views)
+
+---
+
+## Dashboards Module
+
+- **Coverage:**
+  - List, search, and filter dashboards
+  - Create new dashboard (button and template link)
+  - Edit, delete, and view dashboard details
+  - Add/edit/delete widgets (implied by dashboard detail)
+  - Pagination through dashboards
+- **Gaps/Updates:**
+  - Add scenario for browsing dashboard templates (external link)
+  - Add scenario for requesting new template
+  - Add scenario for dashboard owner and creation info
+  - Add scenario for dashboard tags and filtering by tags
+  - Add scenario for dashboard sharing (if available)
+  - Add scenario for dashboard image/preview
+
+---
+
+## Messaging Queues Module
+
+- **Coverage:**
+  - Overview tab: queue metrics, filters (Service Name, Span Name, Msg System, Destination, Kind)
+  - Search across all columns
+  - Pagination of queue data
+  - Sync and Share buttons
+  - Tabs for Kafka and Celery
+- **Gaps/Updates:**
+  - Add scenario for Kafka tab (detailed metrics, actions)
+  - Add scenario for Celery tab (detailed metrics, actions)
+  - Add scenario for filter combinations and edge cases
+  - Add scenario for sharing queue data
+  - Add scenario for time range selection
+
+---
+
+## External APIs Module
+
+- **Coverage:**
+  - Accessed via side navigation under MORE
+  - Explorer tab: domain, endpoints, last used, rate, error %, avg. latency
+  - Filters: Deployment Environment, Service Name, Rpc Method, Show IP addresses
+  - Table pagination
+  - Share and Stage & Run Query buttons
+- **Gaps/Updates:**
+  - Add scenario for customizing quick filters
+  - Add scenario for running and staging queries
+  - Add scenario for sharing API data
+  - Add scenario for edge cases in filters and table data
+
+---
+
+## Alerts Module
+
+- **Coverage:**
+  - Alert Rules tab: list, search, create (New Alert), edit, delete, enable/disable, severity, labels, actions
+  - Triggered Alerts tab (visible in tablist)
+  - Configuration tab (visible in tablist)
+  - Table pagination
+- **Gaps/Updates:**
+  - Add scenario for triggered alerts (view, acknowledge, resolve)
+  - Add scenario for alert configuration (settings, integrations)
+  - Add scenario for edge cases in alert creation and management
+  - Add scenario for searching and filtering alerts
+
+---
+
+## Integrations Module
+
+- **Coverage:**
+  - Integrations tab: list, search, configure (e.g., AWS), request new integration
+  - One-click setup for AWS monitoring
+  - Request more integrations (form)
+- **Gaps/Updates:**
+  - Add scenario for configuring integrations (step-by-step)
+  - Add scenario for searching and filtering integrations
+  - Add scenario for requesting new integrations
+  - Add scenario for edge cases (e.g., failed configuration)
+
+---
+
+## Exceptions Module
+
+- **Coverage:**
+  - All Exceptions: list, search, filter (Deployment Environment, Service Name, Host Name, K8s Cluster/Deployment/Namespace, Net Peer Name)
+  - Table: Exception Type, Error Message, Count, Last Seen, First Seen, Application
+  - Pagination
+  - Exception detail links
+  - Share and Stage & Run Query buttons
+- **Gaps/Updates:**
+  - Add scenario for exception detail view
+  - Add scenario for advanced filtering and edge cases
+  - Add scenario for sharing and running queries
+  - Add scenario for error grouping and navigation
+
+---
+
+## Service Map Module
+
+- **Coverage:**
+  - Service Map visualization (main graph)
+  - Filters: environment, resource attributes
+  - Time range selection
+  - Sync and Share buttons
+- **Gaps/Updates:**
+  - Add scenario for interacting with the map (zoom, pan, select service)
+  - Add scenario for filtering and edge cases
+  - Add scenario for sharing the map
+  - Add scenario for time range and environment combinations
+
+---
+
+## Billing Module
+
+- **Coverage:**
+  - Billing overview: cost monitoring, invoices, CSV download (disabled), manage billing (disabled)
+  - Teams Cloud section
+  - Billing table: Unit, Data Ingested, Price per Unit, Cost (Billing period to date)
+- **Gaps/Updates:**
+  - Add scenario for invoice download and management (when enabled)
+  - Add scenario for cost monitoring and edge cases
+  - Add scenario for billing table data validation
+  - Add scenario for permissions and access control
+
+---
+
+## Usage Explorer Module
+
+- **Status:**
+  - Not accessible in the current environment. Removing from test plan flows.
+
+---
+
+## [Next modules will be filled as validation proceeds]

frontend/e2e/tests/settings/account-settings/account-settings-settings.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Account Settings - View and Assert Static Controls', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Assert General section and controls (confirmed by DOM)
+	await expect(
+		page.getByLabel('My Settings').getByText('General'),
+	).toBeVisible();
+	await expect(page.getByText('Manage your account settings.')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Update name' })).toBeVisible();
+	await expect(
+		page.getByRole('button', { name: 'Reset password' }),
+	).toBeVisible();
+
+	// Assert User Preferences section and controls (confirmed by DOM)
+	await expect(page.getByText('User Preferences')).toBeVisible();
+	await expect(
+		page.getByText('Tailor the SigNoz console to work according to your needs.'),
+	).toBeVisible();
+	await expect(page.getByText('Select your theme')).toBeVisible();
+
+	const themeSelector = page.getByTestId('theme-selector');
+
+	await expect(themeSelector.getByText('Dark')).toBeVisible();
+	await expect(themeSelector.getByText('Light')).toBeVisible();
+	await expect(themeSelector.getByText('System')).toBeVisible();
+
+	await expect(page.getByTestId('timezone-adaptation-switch')).toBeVisible();
+	await expect(page.getByTestId('side-nav-pinned-switch')).toBeVisible();
+});

frontend/e2e/tests/settings/api-keys/api-keys-settings.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('API Keys Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click API Keys tab in the settings sidebar (by data-testid)
+	await page.getByTestId('api-keys').click();
+
+	// Assert heading and subheading
+	await expect(page.getByRole('heading', { name: 'API Keys' })).toBeVisible();
+	await expect(
+		page.getByText('Create and manage API keys for the SigNoz API'),
+	).toBeVisible();
+
+	// Assert presence of New Key button
+	const newKeyBtn = page.getByRole('button', { name: 'New Key' });
+	await expect(newKeyBtn).toBeVisible();
+
+	// Assert table columns
+	await expect(page.getByText('Last used').first()).toBeVisible();
+	await expect(page.getByText('Expired').first()).toBeVisible();
+
+	// Assert at least one API key row with action buttons
+	// Select the first action cell's first button (icon button)
+	const firstActionCell = page.locator('table tr').nth(1).locator('td').last();
+	const deleteBtn = firstActionCell.locator('button').first();
+	await expect(deleteBtn).toBeVisible();
+});

frontend/e2e/tests/settings/billing/billing-settings.spec.ts

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+// E2E: Billing Settings - View Billing Information and Button Actions
+
+test('View Billing Information and Button Actions', async ({
+	page,
+	context,
+}) => {
+	// Ensure user is logged in
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Billing tab in the settings sidebar (by data-testid)
+	await page.getByTestId('billing').click();
+
+	// Wait for billing chart/data to finish loading
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert visibility of subheading (unique)
+	await expect(
+		page.getByText(
+			'Manage your billing information, invoices, and monitor costs.',
+		),
+	).toBeVisible();
+	// Assert visibility of Teams Cloud heading
+	await expect(page.getByRole('heading', { name: 'Teams Cloud' })).toBeVisible();
+
+	// Assert presence of summary and detailed tables
+	await expect(page.getByText('TOTAL SPENT')).toBeVisible();
+	await expect(page.getByText('Data Ingested')).toBeVisible();
+	await expect(page.getByText('Price per Unit')).toBeVisible();
+	await expect(page.getByText('Cost (Billing period to date)')).toBeVisible();
+
+	// Assert presence of alert and note
+	await expect(
+		page.getByText('Your current billing period is from', { exact: false }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Billing metrics are updated once every 24 hours.'),
+	).toBeVisible();
+
+	// Test Download CSV button
+	const [download] = await Promise.all([
+		page.waitForEvent('download'),
+		page.getByRole('button', { name: 'cloud-download Download CSV' }).click(),
+	]);
+	// Optionally, check download file name
+	expect(download.suggestedFilename()).toContain('billing_usage');
+
+	// Test Manage Billing button (opens Stripe in new tab)
+	const [newPage] = await Promise.all([
+		context.waitForEvent('page'),
+		page.getByTestId('header-billing-button').click(),
+	]);
+	await newPage.waitForLoadState();
+	expect(newPage.url()).toContain('stripe.com');
+	await newPage.close();
+});

frontend/e2e/tests/settings/custom-domain/custom-domain-settings.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Custom Domain Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Custom Domain tab in the settings sidebar (by data-testid)
+	await page.getByTestId('custom-domain').click();
+
+	// Wait for custom domain chart/data to finish loading
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert heading and subheading
+	await expect(
+		page.getByRole('heading', { name: 'Custom Domain Settings' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Personalize your workspace domain effortlessly.'),
+	).toBeVisible();
+
+	// Assert presence of Customize team’s URL button
+	const customizeBtn = page.getByRole('button', {
+		name: 'Customize team’s URL',
+	});
+	await expect(customizeBtn).toBeVisible();
+	await customizeBtn.click();
+
+	// Assert modal/dialog fields and buttons
+	await expect(
+		page.getByRole('dialog', { name: 'Customize your team’s URL' }),
+	).toBeVisible();
+	await expect(page.getByLabel('Team’s URL subdomain')).toBeVisible();
+	await expect(
+		page.getByRole('button', { name: 'Apply Changes' }),
+	).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Close' })).toBeVisible();
+	// Close the modal
+	await page.getByRole('button', { name: 'Close' }).click();
+});

frontend/e2e/tests/settings/general/general-settings.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('View General Settings', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click General tab in the settings sidebar (by data-testid)
+	await page.getByTestId('general').click();
+
+	// Wait for General tab to be visible
+	await page.getByRole('tabpanel', { name: 'General' }).waitFor();
+
+	// Assert visibility of definitive/static elements
+	await expect(page.getByRole('heading', { name: 'Metrics' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Traces' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Logs' })).toBeVisible();
+	await expect(page.getByText('Please')).toBeVisible();
+	await expect(page.getByRole('link', { name: 'email us' })).toBeVisible();
+});

frontend/e2e/tests/settings/ingestion/ingestion-settings.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Ingestion Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Ingestion tab in the settings sidebar (by data-testid)
+	await page.getByTestId('ingestion').click();
+
+	// Assert heading and subheading (Integrations page)
+	await expect(
+		page.getByRole('heading', { name: 'Integrations' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Manage Integrations for this workspace'),
+	).toBeVisible();
+
+	// Assert presence of search box
+	await expect(
+		page.getByPlaceholder('Search for an integration...'),
+	).toBeVisible();
+
+	// Assert at least one data source with Configure button
+	const configureBtn = page.getByRole('button', { name: 'Configure' }).first();
+	await expect(configureBtn).toBeVisible();
+
+	// Assert Request more integrations section
+	await expect(
+		page.getByText(
+			"Can't find what you’re looking for? Request more integrations",
+		),
+	).toBeVisible();
+	await expect(page.getByPlaceholder('Enter integration name...')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+});

frontend/e2e/tests/settings/integrations/integrations-settings.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Integrations Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Integrations tab in the settings sidebar (by data-testid)
+	await page.getByTestId('integrations').click();
+
+	// Assert heading and subheading
+	await expect(
+		page.getByRole('heading', { name: 'Integrations' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Manage Integrations for this workspace'),
+	).toBeVisible();
+
+	// Assert presence of search box
+	await expect(
+		page.getByPlaceholder('Search for an integration...'),
+	).toBeVisible();
+
+	// Assert at least one integration with Configure button
+	const configureBtn = page.getByRole('button', { name: 'Configure' }).first();
+	await expect(configureBtn).toBeVisible();
+
+	// Assert Request more integrations section
+	await expect(
+		page.getByText(
+			"Can't find what you’re looking for? Request more integrations",
+		),
+	).toBeVisible();
+	await expect(page.getByPlaceholder('Enter integration name...')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+});

frontend/e2e/tests/settings/members-sso/members-sso-settings.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Members & SSO Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Members & SSO tab in the settings sidebar (by data-testid)
+	await page.getByTestId('members-sso').click();
+
+	// Assert headings and tables
+	await expect(
+		page.getByRole('heading', { name: /Members \(\d+\)/ }),
+	).toBeVisible();
+	await expect(
+		page.getByRole('heading', { name: /Pending Invites \(\d+\)/ }),
+	).toBeVisible();
+	await expect(
+		page.getByRole('heading', { name: 'Authenticated Domains' }),
+	).toBeVisible();
+
+	// Assert Invite Members button is visible and clickable
+	const inviteBtn = page.getByRole('button', { name: /Invite Members/ });
+	await expect(inviteBtn).toBeVisible();
+	await inviteBtn.click();
+	// Assert Invite Members modal/dialog appears (modal title is unique)
+	await expect(page.getByText('Invite team members').first()).toBeVisible();
+	// Close the modal (use unique 'Close' button)
+	await page.getByRole('button', { name: 'Close' }).click();
+
+	// Assert Edit and Delete buttons are present for at least one member
+	const editBtn = page.getByRole('button', { name: /Edit/ }).first();
+	const deleteBtn = page.getByRole('button', { name: /Delete/ }).first();
+	await expect(editBtn).toBeVisible();
+	await expect(deleteBtn).toBeVisible();
+
+	// Assert Add Domains button is visible
+	await expect(page.getByRole('button', { name: /Add Domains/ })).toBeVisible();
+	// Assert Configure SSO or Edit Google Auth button is visible for at least one domain
+	const ssoBtn = page
+		.getByRole('button', { name: /Configure SSO|Edit Google Auth/ })
+		.first();
+	await expect(ssoBtn).toBeVisible();
+});

frontend/e2e/tests/settings/notification-channels/notification-channels-settings.spec.ts

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Notification Channels Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Notification Channels tab in the settings sidebar (by data-testid)
+	await page.getByTestId('notification-channels').click();
+
+	// Wait for loading to finish
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert presence of New Alert Channel button
+	const newChannelBtn = page.getByRole('button', { name: /New Alert Channel/ });
+	await expect(newChannelBtn).toBeVisible();
+
+	// Assert table columns
+	await expect(page.getByText('Name')).toBeVisible();
+	await expect(page.getByText('Type')).toBeVisible();
+	await expect(page.getByText('Action')).toBeVisible();
+
+	// Click New Alert Channel and assert modal fields/buttons
+	await newChannelBtn.click();
+	await expect(
+		page.getByRole('heading', { name: 'New Notification Channel' }),
+	).toBeVisible();
+	await expect(page.getByLabel('Name')).toBeVisible();
+	await expect(page.getByLabel('Type')).toBeVisible();
+	await expect(page.getByLabel('Webhook URL')).toBeVisible();
+	await expect(
+		page.getByRole('switch', { name: 'Send resolved alerts' }),
+	).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Test' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
+	// Close modal
+	await page.getByRole('button', { name: 'Back' }).click();
+
+	// Assert Edit and Delete buttons for at least one channel
+	const editBtn = page.getByRole('button', { name: 'Edit' }).first();
+	const deleteBtn = page.getByRole('button', { name: 'Delete' }).first();
+	await expect(editBtn).toBeVisible();
+	await expect(deleteBtn).toBeVisible();
+});

frontend/e2e/utils/login.util.ts

@@ -0,0 +1,35 @@
+import { Page } from '@playwright/test';
+
+// Read credentials from environment variables
+const username = process.env.LOGIN_USERNAME;
+const password = process.env.LOGIN_PASSWORD;
+const baseURL = process.env.BASE_URL;
+
+/**
+ * Ensures the user is logged in. If not, performs the login steps.
+ * Follows the MCP process step-by-step.
+ */
+export async function ensureLoggedIn(page: Page): Promise<void> {
+	// if already in home page, return
+	if (await page.url().includes('/home')) {
+		return;
+	}
+
+	if (!username || !password) {
+		throw new Error(
+			'E2E_EMAIL and E2E_PASSWORD environment variables must be set.',
+		);
+	}
+
+	await page.goto(`${baseURL}/login`);
+	await page.getByTestId('email').click();
+	await page.getByTestId('email').fill(username);
+	await page.getByTestId('initiate_login').click();
+	await page.getByTestId('password').click();
+	await page.getByTestId('password').fill(password);
+	await page.getByRole('button', { name: 'Login' }).click();
+
+	await page
+		.getByText('Hello there, Welcome to your')
+		.waitFor({ state: 'visible' });
+}

frontend/package.json

@@ -44,6 +44,7 @@
     "@mdx-js/loader": "2.3.0",
     "@mdx-js/react": "2.3.0",
     "@monaco-editor/react": "^4.3.1",
+    "@playwright/test": "1.55.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
@@ -51,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",
@@ -265,4 +266,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/playwright.config.ts

@@ -0,0 +1,95 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+// Read from ".env" file.
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './e2e/tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Run tests in parallel even in CI - optimized for GitHub Actions free tier */
+	workers: process.env.CI ? 2 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL:
+			process.env.SIGNOZ_E2E_BASE_URL || 'https://app.us.staging.signoz.cloud',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+		colorScheme: 'dark',
+		locale: 'en-US',
+		viewport: { width: 1280, height: 720 },
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				launchOptions: { args: ['--start-maximized'] },
+				viewport: null,
+				colorScheme: 'dark',
+				locale: 'en-US',
+				baseURL: 'https://app.us.staging.signoz.cloud',
+				trace: 'on-first-retry',
+			},
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	// webServer: {
+	//   command: 'npm run start',
+	//   url: 'http://localhost:3000',
+	//   reuseExistingServer: !process.env.CI,
+	// },
+});

frontend/prompts/generate-e2e-test.md

@@ -0,0 +1,16 @@
+RULE: All test code for this repo must be generated by following the step-by-step Playwright MCP process as described below.
+
+- You are a playwright test generator.
+- You are given a scenario and you need to generate a playwright test for it.
+- Use login util if not logged in.
+- DO NOT generate test code based on the scenario alone.
+- DO run steps one by one using the tools provided by the Playwright MCP.
+- Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test based on message history
+- Gather correct selectors before writing the test
+- DO NOT valiate for dynamic content in the tests, only validate for the correctness with meta data
+- Always inspect the DOM at each navigation or interaction step to determine the correct selector for the next action. Do not assume selectors, confirm via inspection before proceeding.
+- Assert visibility of definitive/static elements in the UI (such as labels, headings, or section titles) rather than dynamic values or content that may change between runs.
+- Save generated test file in the tests directory
+- Execute the test file and iterate until the test passes
+
+

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/role/index.ts

@@ -471,7 +471,7 @@ export const getObjects = (
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetObjects200>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
+		url: `/api/v1/roles/${id}/relation/${relation}/objects`,
 		method: 'GET',
 		signal,
 	});
@@ -481,7 +481,7 @@ export const getGetObjectsQueryKey = ({
 	id,
 	relation,
 }: GetObjectsPathParameters) => {
-	return [`/api/v1/roles/${id}/relations/${relation}/objects`] as const;
+	return [`/api/v1/roles/${id}/relation/${relation}/objects`] as const;
 };
 
 export const getGetObjectsQueryOptions = <
@@ -574,7 +574,7 @@ export const patchObjects = (
 	authtypesPatchableObjectsDTO: BodyType<AuthtypesPatchableObjectsDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
+		url: `/api/v1/roles/${id}/relation/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
 		data: authtypesPatchableObjectsDTO,

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

@@ -3053,131 +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 interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -6763,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/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/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -17,7 +17,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import {
 	useGlobalTimeQueryInvalidate,
 	useIsGlobalTimeQueryRefreshing,
-} from 'store/globalTime';
+} from 'hooks/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -128,33 +128,35 @@ function DateTimeSelection({
 		}
 	}, [modalInitialStartTime, modalInitialEndTime]);
 
-	const { localstorageStartTime, localstorageEndTime } =
-		((): LocalStorageTimeRange => {
-			const routes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+	const {
+		localstorageStartTime,
+		localstorageEndTime,
+	} = ((): LocalStorageTimeRange => {
+		const routes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
 
-			if (routes !== null) {
-				const routesObject = JSON.parse(routes || '{}');
-				const selectedTime = routesObject[location.pathname];
+		if (routes !== null) {
+			const routesObject = JSON.parse(routes || '{}');
+			const selectedTime = routesObject[location.pathname];
 
-				if (selectedTime) {
-					let parsedSelectedTime: TimeRange;
-					try {
-						parsedSelectedTime = JSON.parse(selectedTime);
-					} catch {
-						parsedSelectedTime = selectedTime;
-					}
-
-					if (isObject(parsedSelectedTime)) {
-						return {
-							localstorageStartTime: parsedSelectedTime.startTime,
-							localstorageEndTime: parsedSelectedTime.endTime,
-						};
-					}
-					return { localstorageStartTime: null, localstorageEndTime: null };
+			if (selectedTime) {
+				let parsedSelectedTime: TimeRange;
+				try {
+					parsedSelectedTime = JSON.parse(selectedTime);
+				} catch {
+					parsedSelectedTime = selectedTime;
 				}
+
+				if (isObject(parsedSelectedTime)) {
+					return {
+						localstorageStartTime: parsedSelectedTime.startTime,
+						localstorageEndTime: parsedSelectedTime.endTime,
+					};
+				}
+				return { localstorageStartTime: null, localstorageEndTime: null };
 			}
-			return { localstorageStartTime: null, localstorageEndTime: null };
-		})();
+		}
+		return { localstorageStartTime: null, localstorageEndTime: null };
+	})();
 
 	const getTime = useCallback((): [number, number] | undefined => {
 		if (searchEndTime && searchStartTime) {
@@ -181,8 +183,9 @@ function DateTimeSelection({
 
 	const [options, setOptions] = useState(getOptions(location.pathname));
 	const [refreshButtonHidden, setRefreshButtonHidden] = useState<boolean>(false);
-	const [customDateTimeVisible, setCustomDTPickerVisible] =
-		useState<boolean>(false);
+	const [customDateTimeVisible, setCustomDTPickerVisible] = useState<boolean>(
+		false,
+	);
 
 	const { stagedQuery, currentQuery, initQueryBuilderData } = useQueryBuilder();
 

frontend/src/hooks/globalTime/index.ts

@@ -0,0 +1,2 @@
+export { useGlobalTimeQueryInvalidate } from './useGlobalTimeQueryInvalidate';
+export { useIsGlobalTimeQueryRefreshing } from './useIsGlobalTimeQueryRefreshing';

frontend/src/hooks/globalTime/useGlobalTimeQueryInvalidate.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to invalida any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY}
+ */
+export function useGlobalTimeQueryInvalidate(): () => Promise<void> {
+	const queryClient = useQueryClient();
+
+	return useCallback(async () => {
+		return await queryClient.invalidateQueries({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		});
+	}, [queryClient]);
+}

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/hooks/useResourceAttribute/__tests__/ResourceProvider.test.tsx

@@ -0,0 +1,716 @@
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Router } from 'react-router-dom';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
+import ROUTES from 'constants/routes';
+import { createMemoryHistory, MemoryHistory } from 'history';
+import { encode } from 'js-base64';
+import { AppContext } from 'providers/App/App';
+import { IAppContext } from 'providers/App/types';
+import { getAppContextMock } from 'tests/test-utils';
+
+import ResourceProvider from '../ResourceProvider';
+import useResourceAttribute from '../useResourceAttribute';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+			pathname: '/',
+		},
+	},
+}));
+
+jest.mock('api/metrics/getResourceAttributes', () => ({
+	getResourceAttributesTagKeys: jest.fn(),
+	getResourceAttributesTagValues: jest.fn(),
+}));
+
+// eslint-disable-next-line import/first, import/order
+import {
+	getResourceAttributesTagKeys,
+	getResourceAttributesTagValues,
+	// eslint-disable-next-line import/newline-after-import
+} from 'api/metrics/getResourceAttributes';
+// eslint-disable-next-line import/first, import/order
+import history from 'lib/history';
+
+const mockTagKeys = getResourceAttributesTagKeys as jest.MockedFunction<
+	typeof getResourceAttributesTagKeys
+>;
+const mockTagValues = getResourceAttributesTagValues as jest.MockedFunction<
+	typeof getResourceAttributesTagValues
+>;
+
+function createWrapper({
+	routerHistory,
+	appContextOverrides,
+}: {
+	routerHistory: MemoryHistory;
+	appContextOverrides?: Partial<IAppContext>;
+}): ({ children }: { children: ReactNode }) => JSX.Element {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QueryClientProvider client={queryClient}>
+				<AppContext.Provider value={getAppContextMock('ADMIN', appContextOverrides)}>
+					<Router history={routerHistory}>
+						<ResourceProvider>{children}</ResourceProvider>
+					</Router>
+				</AppContext.Provider>
+			</QueryClientProvider>
+		);
+	};
+}
+
+function mockLibHistory(search = '', pathname = '/'): void {
+	(history.location as { search: string; pathname: string }).search = search;
+	(history.location as { search: string; pathname: string }).pathname = pathname;
+}
+
+type TagKeysPayload = Parameters<typeof mockTagKeys.mockResolvedValue>[0];
+type TagValuesPayload = Parameters<typeof mockTagValues.mockResolvedValue>[0];
+
+function successTagKeysPayload(keys: string[]): TagKeysPayload {
+	return ({
+		statusCode: 200,
+		error: null,
+		message: 'ok',
+		payload: {
+			data: {
+				attributeKeys: keys.map((key) => ({
+					key,
+					dataType: 'string',
+					type: 'resource',
+					isColumn: false,
+				})),
+			},
+		},
+	} as unknown) as TagKeysPayload;
+}
+
+function successTagValuesPayload(values: string[]): TagValuesPayload {
+	return ({
+		statusCode: 200,
+		error: null,
+		message: 'ok',
+		payload: {
+			data: {
+				stringAttributeValues: values,
+			},
+		},
+	} as unknown) as TagValuesPayload;
+}
+
+describe('ResourceProvider', () => {
+	beforeEach(() => {
+		mockSafeNavigate.mockReset();
+		mockTagKeys.mockReset();
+		mockTagValues.mockReset();
+		mockLibHistory('', '/');
+	});
+
+	describe('initial state', () => {
+		it('starts loading with empty staging, selectedQuery, and queries', () => {
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.loading).toBe(true);
+			expect(result.current.queries).toStrictEqual([]);
+			expect(result.current.staging).toStrictEqual([]);
+			expect(result.current.selectedQuery).toStrictEqual([]);
+			expect(result.current.optionsData).toStrictEqual({ mode: undefined, options: [] });
+		});
+
+		it('hydrates queries from the resourceAttribute URL param on mount', () => {
+			const seeded = [
+				{
+					id: 'abc',
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['frontend'],
+				},
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.queries).toStrictEqual(seeded);
+		});
+	});
+
+	describe('state-machine transitions via handleFocus / handleChange', () => {
+		it('Idle → TagKey fetches tag keys and populates options', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+
+			await waitFor(() => {
+				expect(mockTagKeys).toHaveBeenCalledTimes(1);
+				expect(result.current.loading).toBe(false);
+				expect(result.current.optionsData.options).toStrictEqual([
+					{ label: 'service.name', value: 'resource_service_name' },
+				]);
+			});
+		});
+
+		it('TagKey → Operator sets OperatorSchema on handleChange (no mode)', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+
+			act(() => {
+				result.current.handleChange('resource_service_name');
+			});
+
+			expect(result.current.staging).toStrictEqual(['resource_service_name']);
+			expect(result.current.optionsData.options).toStrictEqual([
+				{ label: 'IN', value: 'IN' },
+				{ label: 'Not IN', value: 'Not IN' },
+			]);
+		});
+
+		it('Operator → TagValue fetches values using staging[0]', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend', 'backend']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+			act(() => {
+				result.current.handleChange('resource_service_name');
+			});
+			act(() => {
+				result.current.handleChange('IN');
+			});
+
+			await waitFor(() => {
+				expect(mockTagValues).toHaveBeenCalledWith(
+					expect.objectContaining({ tagKey: 'resource_service_name' }),
+				);
+				expect(result.current.optionsData.mode).toBe('multiple');
+				expect(result.current.optionsData.options).toStrictEqual([
+					{ label: 'frontend', value: 'frontend' },
+					{ label: 'backend', value: 'backend' },
+				]);
+			});
+		});
+
+		it('handleChange with mode updates selectedQuery instead of staging', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+			act(() => {
+				result.current.handleChange('resource_service_name');
+			});
+			act(() => {
+				result.current.handleChange('IN');
+			});
+			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
+
+			act(() => {
+				// In multiple mode, handleChange treats value as iterable of selected values.
+				result.current.handleChange(('frontend' as unknown) as string);
+			});
+
+			expect(result.current.selectedQuery).toStrictEqual([
+				'f',
+				'r',
+				'o',
+				'n',
+				't',
+				'e',
+				'n',
+				'd',
+			]);
+			// Staging not advanced by mode-mode handleChange
+			expect(result.current.staging).toStrictEqual(['resource_service_name', 'IN']);
+		});
+	});
+
+	describe('handleBlur', () => {
+		it('commits a query when TagValue staging is complete and selectedQuery non-empty', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/svc'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+			act(() => result.current.handleChange('resource_service_name'));
+			act(() => result.current.handleChange('IN'));
+			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
+			act(() => {
+				// Build selectedQuery = ['frontend']
+				result.current.handleChange((['frontend'] as unknown) as string);
+			});
+
+			act(() => {
+				result.current.handleBlur();
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries).toHaveLength(1);
+				expect(result.current.queries[0]).toMatchObject({
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['frontend'],
+				});
+				expect(result.current.staging).toStrictEqual([]);
+				expect(result.current.selectedQuery).toStrictEqual([]);
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+		});
+
+		it('resets state without committing when staging is incomplete', async () => {
+			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+			act(() => result.current.handleChange('resource_service_name'));
+
+			act(() => {
+				result.current.handleBlur();
+			});
+
+			expect(result.current.queries).toStrictEqual([]);
+			expect(result.current.staging).toStrictEqual([]);
+			expect(mockSafeNavigate).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('handleClose / handleClearAll', () => {
+		it('handleClose removes the matching query and navigates', async () => {
+			const seeded = [
+				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
+				{ id: 'b', tagKey: 'resource_b', operator: 'IN', tagValue: ['y'] },
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.queries).toHaveLength(2);
+
+			act(() => {
+				result.current.handleClose('a');
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries).toStrictEqual([seeded[1]]);
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+		});
+
+		it('handleClearAll wipes queries, staging, selectedQuery, options', async () => {
+			const seeded = [
+				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleClearAll();
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries).toStrictEqual([]);
+				expect(result.current.staging).toStrictEqual([]);
+				expect(result.current.optionsData).toStrictEqual({
+					mode: undefined,
+					options: [],
+				});
+			});
+		});
+	});
+
+	describe('handleEnvironmentChange', () => {
+		it('adds an environment query when envs are provided', async () => {
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleEnvironmentChange(['production']);
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries).toHaveLength(1);
+				expect(result.current.queries[0]).toMatchObject({
+					tagKey: 'resource_deployment_environment',
+					operator: 'IN',
+					tagValue: ['production'],
+				});
+			});
+		});
+
+		it('clears the environment query when an empty array is passed', async () => {
+			const seeded = [
+				{
+					id: 'env',
+					tagKey: 'resource_deployment_environment',
+					operator: 'IN',
+					tagValue: ['production'],
+				},
+				{
+					id: 'svc',
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['frontend'],
+				},
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleEnvironmentChange([]);
+			});
+
+			await waitFor(() => {
+				const tagKeys = result.current.queries.map((q) => q.tagKey);
+				expect(tagKeys).not.toContain('resource_deployment_environment');
+				expect(tagKeys).toContain('resource_service_name');
+			});
+		});
+
+		it('replaces an existing environment query rather than appending', async () => {
+			const seeded = [
+				{
+					id: 'env',
+					tagKey: 'resource_deployment_environment',
+					operator: 'IN',
+					tagValue: ['production'],
+				},
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleEnvironmentChange(['staging']);
+			});
+
+			await waitFor(() => {
+				const envQueries = result.current.queries.filter(
+					(q) => q.tagKey === 'resource_deployment_environment',
+				);
+				expect(envQueries).toHaveLength(1);
+				expect(envQueries[0].tagValue).toStrictEqual(['staging']);
+			});
+		});
+
+		it('uses the dotted deployment env key when DOT_METRICS_ENABLED is active', async () => {
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({
+					routerHistory,
+					appContextOverrides: {
+						featureFlags: [
+							{
+								name: FeatureKeys.DOT_METRICS_ENABLED,
+								active: true,
+								usage: 0,
+								usage_limit: -1,
+								route: '',
+							},
+						],
+					},
+				}),
+			});
+
+			act(() => {
+				result.current.handleEnvironmentChange(['production']);
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries[0].tagKey).toBe(
+					'resource_deployment.environment',
+				);
+			});
+		});
+
+		it('preserves unrelated query params when dispatching', async () => {
+			const routerHistory = createMemoryHistory({
+				initialEntries: ['/?tab=overview'],
+			});
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleEnvironmentChange(['production']);
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+				const calledWith = mockSafeNavigate.mock.calls[0][0] as string;
+				expect(calledWith).toContain('tab=overview');
+				expect(calledWith).toContain('resourceAttribute=');
+			});
+		});
+	});
+
+	describe('getVisibleQueries (SERVICE_MAP filtering)', () => {
+		it('filters queries down to whitelisted keys on SERVICE_MAP', () => {
+			const seeded = [
+				{
+					id: 'a',
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['frontend'],
+				},
+				{
+					id: 'b',
+					tagKey: 'resource_k8s_cluster_name',
+					operator: 'IN',
+					tagValue: ['prod'],
+				},
+			];
+			mockLibHistory(
+				`?resourceAttribute=${encode(JSON.stringify(seeded))}`,
+				ROUTES.SERVICE_MAP,
+			);
+
+			const routerHistory = createMemoryHistory({
+				initialEntries: [ROUTES.SERVICE_MAP],
+			});
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.queries).toStrictEqual([seeded[1]]);
+		});
+
+		it('returns all queries on non-SERVICE_MAP routes', () => {
+			const seeded = [
+				{
+					id: 'a',
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['frontend'],
+				},
+				{
+					id: 'b',
+					tagKey: 'resource_k8s_cluster_name',
+					operator: 'IN',
+					tagValue: ['prod'],
+				},
+			];
+			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/services');
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/services'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.queries).toHaveLength(2);
+		});
+
+		it('filters fetched tag keys through whilelistedKeys on SERVICE_MAP', async () => {
+			mockTagKeys.mockResolvedValue(
+				successTagKeysPayload([
+					'resource_service_name',
+					'resource_k8s_cluster_name',
+				]),
+			);
+			mockLibHistory('', ROUTES.SERVICE_MAP);
+
+			const routerHistory = createMemoryHistory({
+				initialEntries: [ROUTES.SERVICE_MAP],
+			});
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+
+			await waitFor(() => {
+				expect(result.current.loading).toBe(false);
+				expect(result.current.optionsData.options).toStrictEqual([
+					{
+						label: 'k8s.cluster.name',
+						value: 'resource_k8s_cluster_name',
+					},
+				]);
+			});
+		});
+	});
+
+	describe('URL re-hydration and in-flight loading', () => {
+		it('re-hydrates queries when the router URL changes mid-session', async () => {
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			expect(result.current.queries).toStrictEqual([]);
+
+			const seeded = [
+				{
+					id: 'z',
+					tagKey: 'resource_service_name',
+					operator: 'IN',
+					tagValue: ['api'],
+				},
+			];
+			const encoded = encode(JSON.stringify(seeded));
+
+			// The useEffect that re-hydrates reads from lib/history (mocked singleton)
+			// but is triggered by urlQuery, which comes from the router.
+			// Update both to simulate a real URL change.
+			mockLibHistory(`?resourceAttribute=${encoded}`, '/');
+			act(() => {
+				routerHistory.push(`/?resourceAttribute=${encoded}`);
+			});
+
+			await waitFor(() => {
+				expect(result.current.queries).toStrictEqual(seeded);
+			});
+		});
+
+		it('clears optionsData and keeps loading=true while GetTagKeys is in flight', async () => {
+			// First cycle: complete a fetch so we have non-empty options to prove clearing later.
+			mockTagKeys.mockResolvedValueOnce(
+				successTagKeysPayload(['resource_service_name']),
+			);
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+			expect(result.current.optionsData.options).toHaveLength(1);
+
+			// Reset step back to Idle via blur.
+			act(() => {
+				result.current.handleBlur();
+			});
+			await waitFor(() => expect(result.current.staging).toStrictEqual([]));
+
+			// Second cycle: pending promise — capture state while in flight.
+			let resolveTagKeys: (v: TagKeysPayload) => void = (): void => {};
+			const pending = new Promise<TagKeysPayload>((resolve) => {
+				resolveTagKeys = resolve;
+			});
+			mockTagKeys.mockReturnValueOnce(
+				(pending as unknown) as ReturnType<typeof mockTagKeys>,
+			);
+
+			act(() => {
+				result.current.handleFocus();
+			});
+
+			expect(result.current.loading).toBe(true);
+			expect(result.current.optionsData).toStrictEqual({
+				mode: undefined,
+				options: [],
+			});
+
+			// Clean up so the pending promise doesn't leak past the test.
+			await act(async () => {
+				resolveTagKeys(successTagKeysPayload(['resource_service_name']));
+				await pending;
+			});
+			await waitFor(() => expect(result.current.loading).toBe(false));
+		});
+
+		it('flips loading back to false when the API returns an error payload', async () => {
+			// getResourceAttributesTagKeys catches axios errors internally and
+			// returns an ErrorResponse with payload null. GetTagKeys then returns [].
+			// This exercises the actually-reachable API-error path.
+			mockTagKeys.mockResolvedValueOnce(({
+				statusCode: 500,
+				error: 'server error',
+				message: 'boom',
+				payload: null,
+			} as unknown) as TagKeysPayload);
+
+			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
+			const { result } = renderHook(() => useResourceAttribute(), {
+				wrapper: createWrapper({ routerHistory }),
+			});
+
+			act(() => {
+				result.current.handleFocus();
+			});
+
+			await waitFor(() => {
+				expect(result.current.loading).toBe(false);
+				expect(result.current.optionsData.options).toStrictEqual([]);
+			});
+		});
+	});
+});

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();
-	});
-});