feat: add total input tokens

.claude/skills/signoz-page-story/references/verify.md

@@ -58,10 +58,8 @@ console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
 await browser.close();
 ```
 
-Screenshots are worth taking for `Default` in both themes: text extraction does
-not catch an unstyled page. Take them with
-[sbshot](https://github.com/SigNoz/sbshot), e.g.
-`sbshot capture http://localhost:6006 --title <story title> --theme dark,light`.
+Screenshots are worth taking for `Default` in both themes
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
 
 ## Gates
 

.claude/skills/storybook-visual-diff/SKILL.md

@@ -0,0 +1,294 @@
+---
+name: storybook-visual-diff
+description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
+---
+
+# Storybook visual diff
+
+Two scripts under `frontend/scripts`:
+
+- `story-shots.mjs` — screenshots stories off a running Storybook dev server.
+- `story-shots-diff.mjs` — pixel-diffs two runs and paints what moved.
+
+Output goes to `frontend/.story-shots/` (gitignored), one directory per run.
+
+## 0. Settle what is being compared, first
+
+A diff is only worth taking when the two runs straddle something. Run twice over
+the same tree and the answer is zero, or the noise floor: true, and useless.
+So before starting a server, pin down four things. Whatever the prompt already
+says, take it and do not ask again; ask only for what is genuinely missing, in
+**one** `AskUserQuestion` call.
+
+| To settle | Ask | Options |
+| --- | --- | --- |
+| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
+| Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
+| Themes | "Which themes?" | dark · dark + light |
+| Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
+
+Skip a row when the prompt answers it, and skip the whole call when the prompt
+answers all of it ("shoot the pods tooltips in both themes" needs no question).
+Skip Read-out too whenever the job is *shoot only*, and take `none` for what it
+says: shoot both sides, report both paths, run no comparison. When the prompt
+says nothing at all, ask; a silent guess here burns ~6 min per sweep on the
+wrong stories.
+
+The job decides which loop below to run:
+
+| Job | Loop |
+| --- | --- |
+| **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
+| **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
+| **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
+| **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
+| **noise floor** | two runs, same tree, diff. The number is the harness's floor, not a finding. |
+| **config vs config** | same tree, two runs that differ only in flags: `--args`, `--clock`, `--width`, `--theme`, `--motion`. Filenames stay identical, so the pairs line up and the caption names what changed. |
+
+## The loop
+
+1. Capture the baseline **before touching anything**.
+2. Capture it a second time and diff the two. That is the noise floor: anything
+   it reports is what the harness cannot hold still, and no conclusion about the
+   change may rest on those stories. Cheap on a handful of stories, ~6 min per
+   32, so on a wide sweep run it over the two or three stories the change is
+   aimed at instead of all of them.
+3. Make the change.
+4. Capture again into a third directory.
+5. Diff, then read the tinted shot of the largest movers to judge the change.
+
+## 1. One dev server, on a free port
+
+`storybook dev` keys its Vite dep cache off the config dir, so two servers on the
+same `-c` serve mismatched prebundles and every story dies with `Invalid hook
+call`. Check what is already up first — port 6006 is often another repo's
+Storybook, and its `index.json` then indexes the wrong stories:
+
+```bash
+for port in 6006 6007; do
+  curl -s -m 2 "http://localhost:$port/index.json" | head -c 60 && echo "  <- $port"
+done
+```
+
+Start the SigNoz one on a free port, from the repo's own binary so no package
+manager shim is in the way:
+
+```bash
+cd frontend
+nohup ./node_modules/.bin/storybook dev -p 6007 --no-open --quiet \
+  > "${TMPDIR:-/tmp}/signoz-storybook.log" 2>&1 &
+```
+
+It is ready when `curl -s localhost:6007/index.json` returns JSON whose
+`entries` hold SigNoz story ids.
+
+## 2. Capture
+
+Playwright is not a frontend dependency. The script finds it in `tests/e2e`
+(`pnpm -C tests/e2e install`, `@playwright/test` is enough) or in a global
+install, and launches Playwright's own chromium, falling back to an installed
+Chrome. Two escape hatches when that is not what a machine has:
+
+```bash
+export PLAYWRIGHT_MODULE=/path/to/playwright   # a different install
+export CHROME_PATH=/path/to/chrome             # a specific browser binary
+```
+
+Then pick the stories. `--list` prints the selection without shooting anything:
+
+```bash
+# every tooltip story of every page
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --title Pages/ --name tooltip --theme dark
+
+# a handful of stories by id or by title/name substring, both themes
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --stories pages-noz,dashboards/detail --theme dark,light
+```
+
+| Flag | Meaning |
+| --- | --- |
+| `--stories <match>` | id or `Title/Name` substring, repeatable or comma-separated. Omit for every story. |
+| `--title <prefix>` | only titles starting with the prefix (`Pages/`, `Components/`) |
+| `--name <match>` | only story names containing the match |
+| `--theme dark,light` | one pass per theme; omit for the story's own default (dark) |
+| `--args <k:v;k2:v2>` | arg overrides, Storybook's own `?args=` syntax, repeatable. A dotted value is dropped by Storybook itself, so map it to a slug inside the story's mocks |
+| `--port` | dev server port, or `$SB_PORT` |
+| `--width <px>` | the only fixed dimension, default 1680 |
+| `--height <px>` | shortest the viewport may be, default 1200 |
+| `--max-height <px>` | tallest it may grow to, default 8000 |
+| `--grow <what>` | `scrollers` (default) grows the viewport until the page's own scrollers fit, `document` only follows the document height, `none` keeps `--height` |
+| `--settle <ms>` | wait after the page goes quiet, default 1500 |
+| `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
+| `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
+| `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
+| `--flat` | write `<out>/<id>.png`, no theme directory |
+| `--no-caption` | leave the caption band off the shots |
+| `--list` | print the matched stories and exit |
+
+Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
+what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
+rows) and how the run was configured (args, clock, width, height, grow, motion,
+settle, ignore). Keep the flags identical between the two runs or the diff pairs
+nothing.
+
+Every shot carries the caption band described below, so a single screenshot says
+what it is on its own. `--no-caption` leaves it off, and so does a machine
+without ImageMagick (with a warning). The band never changes the shot's width
+(long text wraps rather than widening the canvas) and its height is recorded, so
+the diff crops it back off and never reports one caption against another. Two
+runs whose captions are different heights still diff to zero. A story that never held still for two
+identical frames is logged `busy` instead of `ok` — treat its diff as suspect.
+
+Dark alone is enough while iterating on the harness; add `light` for the run you
+report.
+
+## 3. Diff
+
+```bash
+node scripts/story-shots-diff.mjs .story-shots/baseline .story-shots/capped .story-shots/diff
+```
+
+Prints `<changed pixels>  <theme>/<story>.png`, largest first, and writes one
+image per pair. Needs ImageMagick for PNG encode/decode (7's `magick`, or 6's
+`convert`/`identify`/`montage`); the comparison itself is in the script.
+
+| Flag | Meaning |
+| --- | --- |
+| `--mode green` | default. The after shot with the changed pixels painted over it, exactly the pixels that changed. What Chromatic shows. |
+| `--mode green-parallel` | `previous \| current \| diff` in one image, each tile labelled above it, on a gutter inverted from the theme. The diff tile is the `green` one, so the after shot stays readable underneath. |
+| `--mode red` | the after shot faded to 10%, changed pixels in red. A pixelmatch-style diff, easiest to read when the change is a thin edge. |
+| `--mode red-parallel` | the same three tiles, with the `red` diff. Best when the change is a thin edge that the unfaded shot would swallow. |
+| `--threshold <0..1>` | how far a pixel must move to count. Default 0.063, Chromatic's `diffThreshold`. |
+| `--include-aa` | count antialiasing changes too. Off by default, as in Chromatic. |
+| `--tint <#rrggbb>` | override the mode's colour. |
+| `--no-caption` | drop the caption band. |
+
+### The caption
+
+Both scripts stamp a band on top of what they write: `story-shots.mjs` on each
+shot, from the story and the run's own settings; `story-shots-diff.mjs` on each
+diff, read out of the two runs' `shots.json`. It carries the story's
+`Title/Name`, then its id, theme and `busy` flag, then the settings both runs
+shared, each reading `key:value`. Whatever the two runs did **differently** goes
+on the side it belongs to: under `previous` and `current` on the parallel tiles,
+on two lines of the band otherwise. So a pair that differs only in `--args` says
+so on its face, which is what makes several shots of one story tellable apart.
+
+The shots' own bands are cropped off before comparing and before going into the
+tiles, so nothing in the output is a diff of a caption. Type size follows the
+image width, so it stays readable with the whole image viewed at fit-to-width;
+the heading is set in an installed sans and the detail lines in a mono, falling
+back to ImageMagick's default when neither is on the machine. Without a manifest
+the band falls back to the file path, and a directory of captioned shots whose
+`shots.json` is missing has nothing to crop by, so its captions do land in the
+diff. Keep `shots.json` next to the shots.
+
+### How the comparison works
+
+Chromatic's own capture and diff run server-side — `chromatic-cli` uploads a
+built Storybook and contains no capture or comparison code at all. What is public
+is the parameter contract, and the numbers in it say what the comparison is:
+`diffThreshold` defaults to `0.063` on a 0-1 scale, which is pixelmatch's
+`threshold`, and `diffIncludeAntiAliasing` defaults to false, which is
+pixelmatch's `includeAA: false`. So the script implements that comparison:
+
+1. Both PNGs are read as raw RGBA through `magick … RGBA:-`.
+2. Per pixel, the squared YIQ distance between the two colours (weights
+   `0.5053 / 0.299 / 0.1957`), compared against `35215 * threshold²` — 35215 is
+   the largest distance two 8-bit colours can have. Chroma is included, so a
+   colour swap at equal brightness still counts.
+3. A pixel over the threshold is dropped when it is only antialiasing: it is the
+   darkest or lightest of its eight neighbours, and the other image has a pixel
+   around there doing the same job. This is what keeps a subpixel glyph edge from
+   reading as a change.
+4. What survives is painted at full opacity, one output pixel per changed input
+   pixel. No dilation, no blobs — a one-pixel shift shows as a one-pixel line.
+
+A pair whose shots are different sizes is compared over the overlap, and every
+row and column that exists in only one of them counts as changed.
+
+Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
+(new on the feature branch, renamed, retitled) has nothing to pair with and is
+skipped silently. On a branch-vs-branch run, compare the two runs' file lists
+before reading the numbers.
+
+## What makes a shot reproducible
+
+Most of it is in the preview, not in the script, so a Chromatic build in the
+cloud shoots the same page: `.storybook/preview-head.html` freezes the clock,
+and `settleForCapture` (the preview's `afterEach`, which runs after `play`)
+parks the animations and snaps the bottom-pinned lists. The script drives the
+rest:
+
+- **Storybook's own render phase is the readiness signal.** It waits for
+  `window.__STORYBOOK_PREVIEW__.storyRenders[].phase === 'finished'`, which is
+  reached only after the loaders, the decorators and the story's `play` are done.
+  A DOM check cannot see a `play` still running. (Storybook 10 spells the final
+  phase `finished`, not `completed`.)
+- **Network quiescence, not `networkidle`.** react-query retries and msw keep
+  requests going after load, and a few stories hang a request by design, so the
+  wait is "no request for 600ms", capped at 15s.
+- **The clock is frozen** (`2026-06-15T12:00:00Z`), by the preview itself. Chart windows, `4 mins ago`
+  labels and trial countdowns all derive from `now`; a live clock alone moved
+  8000 pixels on the dashboards list and redrew every chart axis.
+- **Animations are parked on their last frame** by `html.sb-still`, a
+  zero-length single iteration with `forwards` fill, plus `prefers-reduced-
+  motion`. The Motion toolbar item (`still` by default) turns it off. An infinite
+  spinner is otherwise caught at a random angle.
+- **`document.fonts.ready`**, because text reflows when a face lands late.
+- **Lists pinned to their bottom are snapped onto it**, once by the preview and
+  again by the script after the page goes quiet. A virtuoso list settles a
+  few pixels short of the end depending on the order its items were measured in.
+- **Two identical frames in a row**, because what a page is still waiting on is
+  often not observable from outside it.
+- **`[data-shot-ignore]`, `[data-chromatic="ignore"]` and `--ignore <selector>`**
+  hide a region that cannot be held still; Chromatic excludes the same attribute
+  from its comparison.
+- **The width is the only fixed dimension.** Chromatic's `viewports` are widths;
+  the height follows the page. `src/styles.scss` pins `html, body, #root` to
+  `height: 100%; overflow: hidden`, so the document never outgrows the viewport
+  and its height says nothing: what overflows are the shell's inner scrollers.
+  `--grow scrollers`, the default, grows the viewport until the tallest in-flow
+  scroller fits, so nothing is cut off and no scrollbar is left in the shot (the
+  dashboards list goes to 2226px in one round). Popups are skipped — they are out
+  of the flow, and a tall dropdown would otherwise drag the shot to a height
+  nothing on the page needs. A page that sizes a panel in `vh` grows its own
+  content as the viewport grows, so no height ever fits it and the rounds only
+  chase — `.alert-chart-container` is `57vh`, which puts Create Alert's fixed
+  point at 4344px with an empty band on top. Those pages are shot at `--height`
+  with their own scrollbar, which is what they look like in a browser, and the
+  log says `(viewport-sized content, stopped chasing Npx)`.
+
+With all of that, 29 of the 32 page tooltip stories are byte-identical across
+runs. The three that are not, and why:
+
+| Story | Residual | Cause |
+| --- | --- | --- |
+| `kubernetes-pods--tooltips-in-options-panel` | ~13k px | 24 tooltips held open in an overlapping cluster; they portal to `body` in mount order, and the drawer's own tooltips mount before or after the list's depending on when their data lands, so overlapping tooltips stack differently. Panel geometry itself is stable. |
+| `settings-role-editor--tooltips-in-json-editor` | ~2.5k px | monaco re-measures and lands one pixel off. |
+| `traces-trace-details--tooltips` | ~800 px | same class, one row of the waterfall. |
+
+Each is bimodal — two stable arrangements — so the same number reappears run
+after run. Diff a story against itself before believing its number, and reach
+for `--ignore` when a region cannot be settled.
+
+## Gotchas
+
+- **Zero pixels is a real answer.** A story whose tooltips are all short is
+  unaffected by a tooltip rule; it is not a broken capture.
+- **The selector matters more than the rule.** A global rule on
+  `[data-slot='…']` only reaches design-system components. antd's own tooltips
+  (`.ant-tooltip-inner`, e.g. the Create Alert help popups) are untouched, which
+  is why some stories show no diff at all.
+- **Global style overrides need `!important`.** `src/styles.scss` loads before
+  the design system injects its CSS-module styles at runtime, so a plain rule on
+  a `[data-slot='…']` element loses. A component-level `!important` of the same
+  specificity still wins over it — `PanelStatusPopover.module.scss` keeps its own
+  `max-width: 520px !important`.
+- **A fresh context per story** is why a full sweep takes ~6 min for 32 stories.
+  Reusing one page loses the msw service worker re-registration race and stories
+  start failing after a few navigations.
+- **Stories behind a hover, drawer or modal** only render what their `play`
+  reaches. If a state is missing from the shot, the story needs the `play`, not
+  the script.

.github/CODEOWNERS

@@ -296,3 +296,4 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
+/.claude/skills/storybook-visual-diff/ @H4ad

.github/workflows/e2eci.yaml

@@ -40,7 +40,6 @@ jobs:
       matrix:
         project:
           - chromium
-        shard: [1, 2, 3, 4]
     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')
@@ -49,33 +48,12 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
-      # Images bring-up-stack would otherwise pull, at the tests/conftest.py
-      # defaults. A stale tag only loses the head start.
-      - name: pull-images
-        id: pull-images
-        background: true
-        run: |
-          printf '%s\n' \
-            node:22-bookworm \
-            golang:1.25-bookworm \
-            python:3.13-slim \
-            postgres:15 \
-            clickhouse/clickhouse-server:25.12.5 \
-            clickhouse/clickhouse-keeper:25.12.5 \
-            signoz/signoz-schema-migrator:v0.144.9 \
-            wiremock/wiremock:2.35.1-1 \
-            | xargs -P 0 -n 1 docker pull -q
       - name: python
         uses: actions/setup-python@v5
         with:
           python-version: 3.13
       - name: uv
         uses: astral-sh/setup-uv@v4
-      - name: python-install
-        id: python-install
-        background: true
-        run: |
-          cd tests && uv sync
       - name: node
         uses: actions/setup-node@v4
         with:
@@ -84,9 +62,19 @@ jobs:
         uses: pnpm/action-setup@v6
         with:
           version: 10
+      - name: python-install
+        run: |
+          cd tests && uv sync
       - name: pnpm-install
         run: |
           cd tests/e2e && pnpm install --frozen-lockfile
+      - name: playwright-browsers
+        run: |
+          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
+          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
+          docker rm pw
+          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
+          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       # Restore-only: the cacheci workflow owns cache saves. Seeds the
       # BuildKit cache mounts so the in-test image build is incremental.
       - name: restore
@@ -111,19 +99,6 @@ jobs:
               tar -xf /restored/pnpm-store.tar -C /pnpm/store
           EOF
           docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
-      - name: wait-stack-deps
-        wait: [pull-images, python-install]
-      # Started after the pulls so its download overlaps the CPU-bound
-      # image build instead of competing for the network.
-      - name: playwright-browsers
-        id: playwright-browsers
-        background: true
-        run: |
-          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
-          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
-          docker rm pw
-          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
-          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       - name: bring-up-stack
         run: |
           cd tests && \
@@ -131,12 +106,10 @@ jobs:
             --basetemp=./tmp/ \
             -vv --reuse --with-web \
             e2e/bootstrap/setup.py::test_setup
-      - name: wait-playwright-browsers
-        wait: playwright-browsers
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            pnpm playwright test --project=${{ matrix.project }} --shard=${{ matrix.shard }}/4
+            pnpm playwright test --project=${{ matrix.project }}
       - name: teardown-stack
         if: always()
         run: |
@@ -149,6 +122,6 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
+          name: playwright-artifacts-${{ matrix.project }}
           path: tests/e2e/artifacts/
           retention-days: 5

.github/workflows/integrationci.yaml

@@ -60,7 +60,6 @@ jobs:
           - rawexportdata
           - promqlconformance
           - promapiconformance
-          - promote
           - querierauthz
           - role
           - rootuser

.gitignore

@@ -231,7 +231,5 @@ pyrightconfig.json
 
 # dev
 .dev/
-.deepsec/
-.deepsec.zip
 .claude/worktrees/
 .claude/settings.local.json

docs/api/openapi.yml

@@ -1,219 +1,5 @@
 components:
   schemas:
-    AiobservabilitytypesBlobPart:
-      properties:
-        content:
-          type: string
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - modality
-      - content
-      type: object
-    AiobservabilitytypesChatMessage:
-      properties:
-        name:
-          nullable: true
-          type: string
-        parts:
-          $ref: '#/components/schemas/AiobservabilitytypesParts'
-        role:
-          type: string
-      required:
-      - role
-      - parts
-      type: object
-    AiobservabilitytypesCompactionPart:
-      properties:
-        content:
-          nullable: true
-          type: string
-        id:
-          nullable: true
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      type: object
-    AiobservabilitytypesFilePart:
-      properties:
-        file_id:
-          type: string
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - modality
-      - file_id
-      type: object
-    AiobservabilitytypesGenericPart:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesGenericServerToolCall:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesGenericServerToolCallResponse:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesInputMessages:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesChatMessage'
-      type: array
-    AiobservabilitytypesOutputMessage:
-      properties:
-        finish_reason:
-          nullable: true
-          type: string
-        name:
-          nullable: true
-          type: string
-        parts:
-          $ref: '#/components/schemas/AiobservabilitytypesParts'
-        role:
-          type: string
-      required:
-      - role
-      - parts
-      type: object
-    AiobservabilitytypesOutputMessages:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesOutputMessage'
-      type: array
-    AiobservabilitytypesPart:
-      discriminator:
-        mapping:
-          blob: '#/components/schemas/AiobservabilitytypesBlobPart'
-          compaction: '#/components/schemas/AiobservabilitytypesCompactionPart'
-          file: '#/components/schemas/AiobservabilitytypesFilePart'
-          reasoning: '#/components/schemas/AiobservabilitytypesReasoningPart'
-          server_tool_call: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
-          server_tool_call_response: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
-          text: '#/components/schemas/AiobservabilitytypesTextPart'
-          tool_call: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
-          tool_call_response: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
-          uri: '#/components/schemas/AiobservabilitytypesUriPart'
-        propertyName: type
-      oneOf:
-      - $ref: '#/components/schemas/AiobservabilitytypesTextPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesBlobPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesFilePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesUriPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesReasoningPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesCompactionPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesGenericPart'
-      type: object
-    AiobservabilitytypesParts:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesPart'
-      type: array
-    AiobservabilitytypesReasoningPart:
-      properties:
-        content:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - content
-      type: object
-    AiobservabilitytypesServerToolCallPart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        name:
-          type: string
-        server_tool_call:
-          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCall'
-        type:
-          type: string
-      required:
-      - type
-      - name
-      - server_tool_call
-      type: object
-    AiobservabilitytypesServerToolCallResponsePart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        server_tool_call_response:
-          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCallResponse'
-        type:
-          type: string
-      required:
-      - type
-      - server_tool_call_response
-      type: object
-    AiobservabilitytypesTextPart:
-      properties:
-        content:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - content
-      type: object
-    AiobservabilitytypesToolCallRequestPart:
-      properties:
-        arguments: {}
-        id:
-          nullable: true
-          type: string
-        name:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - name
-      type: object
-    AiobservabilitytypesToolCallResponsePart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        response:
-          nullable: true
-        type:
-          type: string
-      required:
-      - type
-      - response
-      type: object
-    AiobservabilitytypesUriPart:
-      properties:
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-        uri:
-          type: string
-      required:
-      - type
-      - modality
-      - uri
-      type: object
     AlertmanagertypesChannel:
       properties:
         createdAt:
@@ -3581,69 +3367,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardtypesAIBuilderQuerySpec:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
-          nullable: true
-          type: array
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
-        cursor:
-          type: string
-        disabled:
-          type: boolean
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        functions:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
-          type: array
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        having:
-          $ref: '#/components/schemas/Querybuildertypesv5Having'
-        legend:
-          type: string
-        limit:
-          type: integer
-        limitBy:
-          $ref: '#/components/schemas/Querybuildertypesv5LimitBy'
-        name:
-          type: string
-        offset:
-          type: integer
-        order:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
-          type: array
-        secondaryAggregations:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
-          nullable: true
-          type: array
-        selectFields:
-          items:
-            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
-          type: array
-        signal:
-          enum:
-          - traces
-          type: string
-        source:
-          $ref: '#/components/schemas/TelemetrytypesSource'
-        stepInterval:
-          $ref: '#/components/schemas/Querybuildertypesv5Step'
-      required:
-      - signal
-      type: object
     DashboardtypesAreaChartAppearance:
       properties:
         fillMode:
@@ -4697,7 +4420,6 @@ components:
     DashboardtypesQueryPlugin:
       discriminator:
         mapping:
-          signoz/AIBuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
           signoz/BuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
           signoz/ClickHouseSQL: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
           signoz/CompositeQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
@@ -4707,7 +4429,6 @@ components:
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
-      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
@@ -4717,25 +4438,12 @@ components:
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
-      - signoz/AIBuilderQuery
       - signoz/CompositeQuery
       - signoz/Formula
       - signoz/PromQLQuery
       - signoz/ClickHouseSQL
       - signoz/TraceOperator
       type: string
-    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec:
-      properties:
-        kind:
-          enum:
-          - signoz/AIBuilderQuery
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesAIBuilderQuerySpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec:
       properties:
         kind:
@@ -8048,8 +7756,6 @@ components:
       type: object
     PromotetypesPromotePath:
       properties:
-        context:
-          type: string
         indexes:
           items:
             $ref: '#/components/schemas/PromotetypesWrappedIndex'
@@ -8058,12 +7764,6 @@ components:
           type: string
         promote:
           type: boolean
-        signal:
-          type: string
-      required:
-      - signal
-      - context
-      - path
       type: object
     PromotetypesWrappedIndex:
       properties:
@@ -10517,16 +10217,6 @@ components:
           items:
             $ref: '#/components/schemas/SpantypesEvent'
           type: array
-        formattedInput:
-          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
-        formattedOutput:
-          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
-        formatter:
-          type: string
-        formatterWarnings:
-          items:
-            type: string
-          type: array
         has_error:
           type: boolean
         kind_string:
@@ -10569,10 +10259,6 @@ components:
       - attributes
       - events
       - references
-      - formattedInput
-      - formattedOutput
-      - formatter
-      - formatterWarnings
       type: object
     SpantypesTraceAISummary:
       properties:
@@ -10600,6 +10286,9 @@ components:
         reasoning:
           minimum: 0
           type: integer
+        totalInput:
+          minimum: 0
+          type: integer
       required:
       - input
       - output
@@ -13746,6 +13435,110 @@ paths:
       tags:
       - llmpricingrules
       x-signoz-stability: alpha
+  /api/v1/logs/promote_paths:
+    get:
+      deprecated: false
+      description: This endpoints promotes and indexes paths
+      operationId: ListPromotedAndIndexedPaths
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      $ref: '#/components/schemas/PromotetypesPromotePath'
+                    nullable: true
+                    type: array
+                  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: Promote and index paths
+      tags:
+      - logs
+      x-signoz-stability: alpha
+    post:
+      deprecated: false
+      description: This endpoints promotes and indexes paths
+      operationId: HandlePromoteAndIndexPaths
+      requestBody:
+        content:
+          application/json:
+            schema:
+              items:
+                $ref: '#/components/schemas/PromotetypesPromotePath'
+              nullable: true
+              type: array
+      responses:
+        "201":
+          description: Created
+        "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:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Promote and index paths
+      tags:
+      - logs
+      x-signoz-stability: alpha
   /api/v1/org/preferences:
     get:
       deprecated: false
@@ -13917,156 +13710,6 @@ paths:
       tags:
       - preferences
       x-signoz-stability: alpha
-  /api/v1/promoted_paths:
-    get:
-      deprecated: false
-      description: This endpoint lists the promoted paths of every JSON column, each
-        annotated with its signal and context. The signal, context, promoted and indexes
-        query parameters filter the listing.
-      operationId: ListPromotedPaths
-      parameters:
-      - in: query
-        name: signal
-        schema:
-          type: string
-      - in: query
-        name: context
-        schema:
-          type: string
-      - in: query
-        name: promoted
-        schema:
-          nullable: true
-          type: boolean
-      - in: query
-        name: indexes
-        schema:
-          nullable: true
-          type: boolean
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/PromotetypesPromotePath'
-                    nullable: true
-                    type: array
-                  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:
-        - logs-field:list
-        - traces-field:list
-      - tokenizer:
-        - logs-field:list
-        - traces-field:list
-      summary: List promoted paths
-      tags:
-      - promote
-      x-signoz-stability: alpha
-    post:
-      deprecated: false
-      description: This endpoint promotes paths of JSON columns to their promoted
-        columns. Each path names its promotion target with its signal and context,
-        e.g. traces/attribute.
-      operationId: PromotePaths
-      requestBody:
-        content:
-          application/json:
-            examples:
-              logs_body:
-                summary: 'Logs body: promote a path and index it'
-                value:
-                - context: body
-                  indexes:
-                  - fieldDataType: string
-                    granularity: 1
-                    type: ngrambf_v1(4, 1024, 2, 0)
-                  path: user.name
-                  promote: true
-                  signal: logs
-              traces_attribute:
-                summary: 'Traces attribute: promote a path'
-                value:
-                - context: attribute
-                  path: http.method
-                  promote: true
-                  signal: traces
-            schema:
-              items:
-                $ref: '#/components/schemas/PromotetypesPromotePath'
-              nullable: true
-              type: array
-      responses:
-        "201":
-          description: Created
-        "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:
-        - logs-field:update
-        - traces-field:update
-      - tokenizer:
-        - logs-field:update
-        - traces-field:update
-      summary: Promote paths
-      tags:
-      - promote
-      x-signoz-stability: alpha
   /api/v1/roles:
     get:
       deprecated: false
@@ -16440,12 +16083,9 @@ paths:
   /api/v1/traces/{traceID}/thread:
     get:
       deprecated: false
-      description: Returns the spans carrying gen_ai input or output messages, or
-        a tool execution, in timestamp order. Messages already in the OTel GenAI shape
-        are decoded into formattedInput and formattedOutput, with formatter naming
-        the converter and formatterWarnings what it could not resolve. Pass nextCursor
-        as after or prevCursor as before to page, or spanId to open the page around
-        a span.
+      description: Returns the spans carrying gen_ai input or output messages in timestamp
+        order. Pass nextCursor as after or prevCursor as before to page, or spanId
+        to open the page around a span.
       operationId: GetTraceThread
       parameters:
       - description: Page size, at most 100. 0 means 20.

frontend/.gitignore

@@ -34,5 +34,5 @@ e2e/test-plan/user-preferences/
 /storybook-static/
 debug-storybook.log
 
-# Storybook screenshots (sbshot)
-/.sbshot/
+# Storybook screenshot sweeps (scripts/story-shots.mjs)
+/.story-shots/

frontend/.oxlintrc.json

@@ -338,10 +338,6 @@
             "name": "api/generated/services/dashboard",
             "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
             "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
-          },
-          {
-            "name": "motion/react-client",
-            "message": "[motion] motion/react-client is for React Server Components only. Use 'motion/react' instead — it provides the same exports and works correctly in client-side SPAs."
           }
         ]
       }
@@ -582,6 +578,17 @@
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"
       }
+    },
+    {
+      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
+      // algorithms that read worse when split up.
+      "files": [
+        "scripts/**"
+      ],
+      "rules": {
+        "no-console": "off",
+        "sonarjs/cognitive-complexity": "off"
+      }
     }
   ]
 }

frontend/.storybook/main.ts

@@ -43,11 +43,6 @@ const mockAliases = [
 		find: /^@signozhq\/ui\/tooltip$/,
 		replacement: `${srcPath}/storybook/mocks/tooltip.mock.tsx`,
 	},
-	{
-		// jest: not replaced, a test asserts on the toast it fires.
-		find: /^@signozhq\/ui\/sonner$/,
-		replacement: `${srcPath}/storybook/mocks/sonner.mock.tsx`,
-	},
 ];
 
 /**

frontend/.storybook/modes.ts

@@ -1,7 +1,7 @@
 /**
  * Chromatic modes: one snapshot per entry, per story. The globals in a mode are
  * Storybook's own, so `theme` is the toolbar's theme and the story renders the
- * way it does locally. The width matches sbshot's default `--width`,
+ * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
  * so a cloud snapshot and a local shot frame the same page.
  */
 export const allModes = {

frontend/.storybook/preview-head.html

@@ -70,49 +70,3 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
-
-<script>
-	// Storybook has no microphone. Chromium's recognizer asks for one and for
-	// Google's speech service, and the `not-allowed` or `network` it reports makes
-	// the assistant hide its mic for the rest of the tab. This one starts
-	// listening at once and hears only what a story passes to `hear`.
-	(() => {
-		class StorySpeechRecognition extends EventTarget {
-			static listening = null;
-			lang = 'en-US';
-			continuous = false;
-			interimResults = false;
-			onstart = null;
-			onresult = null;
-			onerror = null;
-			onend = null;
-
-			start() {
-				StorySpeechRecognition.listening = this;
-				setTimeout(() => this.onstart?.());
-			}
-
-			stop() {
-				if (StorySpeechRecognition.listening === this) {
-					StorySpeechRecognition.listening = null;
-				}
-				setTimeout(() => this.onend?.());
-			}
-
-			abort() {
-				this.stop();
-			}
-
-			/** An interim result: the words so far, still listening. */
-			hear(transcript) {
-				const result = Object.assign([{ transcript, confidence: 1 }], {
-					isFinal: false,
-				});
-				this.onresult?.({ resultIndex: 0, results: [result] });
-			}
-		}
-
-		window.SpeechRecognition = StorySpeechRecognition;
-		window.webkitSpeechRecognition = StorySpeechRecognition;
-	})();
-</script>

frontend/.storybook/preview.tsx

@@ -122,21 +122,7 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						[
-							'List',
-							'Detail',
-							[
-								'Overview',
-								'Settings',
-								'Variables',
-								'New Variable',
-								'Edit Variable',
-								'Authz',
-							],
-							'Panel Editor',
-							['Overview', 'Chart Options', 'Thresholds and Links'],
-							'Public',
-						],
+						['List', 'Detail', 'Panel Editor', 'Public'],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',

frontend/.storybook/test-runner.ts

@@ -23,13 +23,6 @@ const IGNORED_MESSAGES = [
 	// (YouTube embeds, the docs pane) so they hit the real network instead of
 	// an unanswered msw request; the block is the point, not a bug.
 	/violates the following Content Security Policy directive/,
-	// The filter editor's ANTLR parser reports every syntax error through
-	// `console.error` (`line 1:14 missing ...`), so each partial expression
-	// typed into it logs one; the editor shows the same errors on screen.
-	/^line \d+:\d+ /,
-	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
-	// already reports with its URL and the time its request left.
-	/^Failed to load resource: the server responded with a status of /,
 ];
 
 interface CapturedMessage {
@@ -93,9 +86,7 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					// The browser's clock, when the request left: a busy runner receives
-					// the outgoing story's responses after the next story has started.
-					at: response.request().timing().startTime,
+					at: Date.now(),
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}

frontend/scripts/story-shots-caption.mjs

@@ -0,0 +1,167 @@
+import { spawnSync } from 'node:child_process';
+
+/**
+ * The caption band both story-shots.mjs and story-shots-diff.mjs stamp on their
+ * output, and the ImageMagick plumbing under it. A shot records the band's
+ * height in `shots.json` so the diff can crop it back off before comparing:
+ * otherwise two runs whose captions differ would report the caption as a change.
+ */
+export const CONFIG_KEYS = [
+	'args',
+	'clock',
+	'width',
+	'height',
+	'grow',
+	'motion',
+	'settle',
+	'ignore',
+];
+
+let tools;
+
+const detect = () =>
+	(tools ??= {
+		seven: spawnSync('magick', ['-version']).status === 0,
+		six: spawnSync('convert', ['-version']).status === 0,
+	});
+
+export const hasMagick = () => {
+	const { seven, six } = detect();
+	return seven || six;
+};
+
+export const requireMagick = () => {
+	if (hasMagick()) {
+		return;
+	}
+	console.error(
+		'ImageMagick not found. Install it (brew install imagemagick, apt install imagemagick).',
+	);
+	process.exit(1);
+};
+
+export const magick = (args, input) => {
+	// ImageMagick 6 has no `magick`: its tools are separate binaries.
+	const [command, ...rest] = detect().seven
+		? ['magick', ...args]
+		: ['identify', 'montage'].includes(args[0])
+			? args
+			: ['convert', ...args];
+	const result = spawnSync(command, rest, {
+		input,
+		maxBuffer: 1024 * 1024 * 1024,
+	});
+	if (result.status !== 0) {
+		throw new Error(`${command} ${rest.join(' ')}: ${result.stderr}`);
+	}
+	return result.stdout;
+};
+
+/**
+ * ImageMagick's built-in default is a serif that reads as a book, not as a
+ * screenshot label, so the band asks for what is installed: a sans for the
+ * heading, a mono for the lines that carry ids, args and numbers. An
+ * unrecognised name is fatal to `convert`, hence the check against the list it
+ * reports; a machine with none of them keeps the default.
+ */
+const FONTS = {
+	heading: [
+		'Helvetica-Bold',
+		'DejaVu-Sans-Bold',
+		'Liberation-Sans-Bold',
+		'Arial-Bold',
+		'Noto-Sans-Bold',
+		'DejaVu-Sans',
+		'Liberation-Sans',
+	],
+	body: [
+		'Menlo',
+		'DejaVu-Sans-Mono',
+		'Liberation-Mono',
+		'JetBrainsMono-NF-Regular',
+		'Courier',
+	],
+};
+
+let installed;
+
+const fontArgs = (role) => {
+	installed ??= new Set(
+		[
+			...magick(['-list', 'font'])
+				.toString()
+				.matchAll(/^\s*Font:\s*(\S+)/gm),
+		].map(([, name]) => name),
+	);
+	const font = FONTS[role].find((name) => installed.has(name));
+	return font ? ['-font', font] : [];
+};
+
+/** Readable at fit-to-width, whatever the image is. */
+export const pointsize = (width) =>
+	Math.min(Math.max(Math.round(width / 45), 24), 140);
+
+// `label:` expands ImageMagick's own escapes and reads a file when the text
+// starts with @, so story names and arg values go through neither.
+export const bodyFont = () => fontArgs('body');
+
+export const literal = (text) => text.replaceAll('%', '%%').replace(/^@/, ' @');
+
+/** The gutter is the opposite of the theme, so the band keeps an edge. */
+export const palette = (theme) =>
+	theme === 'light'
+		? { background: '#101014', foreground: '#f4f4f5' }
+		: { background: '#f4f4f5', foreground: '#101014' };
+
+export const settingsLine = (config, keys = CONFIG_KEYS) =>
+	keys
+		.filter((key) => config?.[key])
+		.map((key) => `${key}:${config[key]}`)
+		.join('  ');
+
+const heightOf = (file) => Number(magick(['identify', '-format', '%h', file]));
+
+/**
+ * Writes `from` to `to` with `lines` above it, and returns how many rows that
+ * added — which is what a reader has to crop off to get the original back, so
+ * the band must never change the width. Each line is a `caption:` at the
+ * image's own width, wrapping instead of widening the canvas: a run whose
+ * caption is longer must still produce a shot the next run's shot pairs with.
+ * Type size follows the width, since a three-tile montage of 1680px shots is
+ * over 5000px wide and is read at fit-to-width.
+ */
+export const stamp = ({ lines, from, to, theme }) => {
+	const { background, foreground } = palette(theme);
+	const width = Number(magick(['identify', '-format', '%w', from]));
+	const heading = pointsize(width);
+	const before = heightOf(from);
+	const spacer = [
+		'-size',
+		`${width}x${Math.round(heading * 0.4)}`,
+		`xc:${background}`,
+	];
+
+	magick([
+		'-background',
+		background,
+		'-fill',
+		foreground,
+		'-gravity',
+		'center',
+		...spacer,
+		...lines.flatMap((line, index) => [
+			...fontArgs(index ? 'body' : 'heading'),
+			'-size',
+			`${width}x`,
+			'-pointsize',
+			String(index ? Math.round(heading * 0.62) : heading),
+			`caption:${literal(line)}`,
+		]),
+		...spacer,
+		from,
+		'-append',
+		to,
+	]);
+
+	return heightOf(to) - before;
+};

frontend/scripts/story-shots-diff.mjs

@@ -0,0 +1,460 @@
+#!/usr/bin/env node
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { parseArgs } from 'node:util';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	bodyFont,
+	CONFIG_KEYS,
+	literal,
+	magick,
+	palette,
+	pointsize,
+	requireMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
+ * moved, per pair, largest first.
+ *
+ * The comparison is Chromatic's: a pixel counts as changed when its YIQ
+ * distance from the baseline pixel is over `threshold` of the largest distance
+ * two colours can have, and pixels that are only antialiasing around an
+ * otherwise identical edge do not count. `threshold` is their `diffThreshold`
+ * and its default is theirs too.
+ */
+const MAX_YIQ_DELTA = 35_215;
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		mode: { type: 'string', default: 'green' },
+		threshold: { type: 'string', default: '0.063' },
+		'include-aa': { type: 'boolean', default: false },
+		tint: { type: 'string', default: '' },
+		'no-caption': { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const [baseDir, afterDir, outArg] = positionals;
+const MODES = new Set(['green', 'green-parallel', 'red', 'red-parallel']);
+
+if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
+	console.log(`usage: node scripts/story-shots-diff.mjs <baseline-dir> <after-dir> [diff-dir]
+
+  --mode green           the after shot, changed pixels painted over it (default)
+  --mode green-parallel  previous | current | green diff, side by side and labelled
+  --mode red             the after shot faded out, changed pixels painted red
+  --mode red-parallel    previous | current | red diff, side by side and labelled
+  --threshold <0..1>     YIQ distance a pixel must move to count (default 0.063)
+  --include-aa           count antialiasing changes too (default: ignore them)
+  --tint <#rrggbb>       override the mode's highlight colour
+  --no-caption           do not stamp the story and the run settings on top
+
+Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const outDir = outArg ?? path.join(path.dirname(baseDir), 'diff');
+const threshold = Number(opts.threshold);
+const maxDelta = MAX_YIQ_DELTA * threshold * threshold;
+const highlight = hexToRgb(
+	opts.tint || (opts.mode.startsWith('green') ? '#00e05a' : '#ff003a'),
+);
+
+function hexToRgb(hex) {
+	const value = Number.parseInt(hex.replace('#', ''), 16);
+	return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+}
+
+requireMagick();
+
+/**
+ * `top` rows are dropped: story-shots.mjs stamps a caption on its shots and
+ * records how tall it is, and a caption is not part of what the two runs are
+ * being compared on.
+ */
+const readRgba = (file, top = 0) => {
+	const [width, height] = magick(['identify', '-format', '%w %h', file])
+		.toString()
+		.split(' ')
+		.map(Number);
+	const data = magick([file, '-depth', '8', 'RGBA:-']);
+	return top > 0 && top < height
+		? { width, height: height - top, data: data.subarray(top * width * 4) }
+		: { width, height, data };
+};
+
+const writeRgba = ({ width, height, data }, file) =>
+	writeFile(
+		file,
+		magick(
+			['-depth', '8', '-size', `${width}x${height}`, 'RGBA:-', 'png:-'],
+			data,
+		),
+	);
+
+/* The pixelmatch colour maths, which is what Chromatic's threshold is scaled to. */
+const y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
+const i = (r, g, b) => r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
+const q = (r, g, b) => r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
+
+/** Squared YIQ distance, signed by which pixel is brighter. */
+const colorDelta = (a, b, posA, posB, yOnly = false) => {
+	let r1 = a[posA];
+	let g1 = a[posA + 1];
+	let b1 = a[posA + 2];
+	const a1 = a[posA + 3];
+	let r2 = b[posB];
+	let g2 = b[posB + 1];
+	let b2 = b[posB + 2];
+	const a2 = b[posB + 3];
+
+	if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) {
+		return 0;
+	}
+
+	// Anything translucent is composited over the same mid grey in both images,
+	// so a difference in alpha alone still registers.
+	if (a1 < 255) {
+		const alpha = a1 / 255;
+		r1 = r1 * alpha + 255 * (1 - alpha) * 0.5;
+		g1 = g1 * alpha + 255 * (1 - alpha) * 0.5;
+		b1 = b1 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+	if (a2 < 255) {
+		const alpha = a2 / 255;
+		r2 = r2 * alpha + 255 * (1 - alpha) * 0.5;
+		g2 = g2 * alpha + 255 * (1 - alpha) * 0.5;
+		b2 = b2 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+
+	const deltaY = y(r1, g1, b1) - y(r2, g2, b2);
+	if (yOnly) {
+		return deltaY;
+	}
+
+	const deltaI = i(r1, g1, b1) - i(r2, g2, b2);
+	const deltaQ = q(r1, g1, b1) - q(r2, g2, b2);
+	return (
+		0.5053 * deltaY * deltaY + 0.299 * deltaI * deltaI + 0.1957 * deltaQ * deltaQ
+	);
+};
+
+/**
+ * True when the pixel sits on an edge that is drawn one subpixel over rather
+ * than moved: it is the darkest or lightest of its neighbours in one image, and
+ * the other image has a pixel around there doing the same job.
+ */
+const antialiased = (a, x1, y1, width, height, b) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+	let min = 0;
+	let max = 0;
+	let minX = 0;
+	let minY = 0;
+	let maxX = 0;
+	let maxY = 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const delta = colorDelta(a, a, pos, (yy * width + x) * 4, true);
+			if (delta === 0) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return false;
+				}
+			} else if (delta < min) {
+				min = delta;
+				minX = x;
+				minY = yy;
+			} else if (delta > max) {
+				max = delta;
+				maxX = x;
+				maxY = yy;
+			}
+		}
+	}
+
+	if (min === 0 || max === 0) {
+		return false;
+	}
+
+	return (
+		(hasManySiblings(a, minX, minY, width, height) &&
+			hasManySiblings(b, minX, minY, width, height)) ||
+		(hasManySiblings(a, maxX, maxY, width, height) &&
+			hasManySiblings(b, maxX, maxY, width, height))
+	);
+};
+
+/** Whether the pixel has at least three identical neighbours. */
+const hasManySiblings = (img, x1, y1, width, height) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const other = (yy * width + x) * 4;
+			if (
+				img[pos] === img[other] &&
+				img[pos + 1] === img[other + 1] &&
+				img[pos + 2] === img[other + 2] &&
+				img[pos + 3] === img[other + 3]
+			) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return true;
+				}
+			}
+		}
+	}
+
+	return false;
+};
+
+/**
+ * The changed pixels of the pair, painted over the after shot. The `red` modes
+ * fade the shot out first, the way a pixelmatch diff reads; the `green` ones
+ * leave it alone, the way Chromatic's does.
+ */
+const diffPair = (base, after, mode) => {
+	const width = Math.min(base.width, after.width);
+	const height = Math.min(base.height, after.height);
+	const out = Buffer.from(after.data);
+	const fade = !mode.startsWith('green');
+	let changed = 0;
+
+	if (fade) {
+		for (let pos = 0; pos < out.length; pos += 4) {
+			const grey = y(out[pos], out[pos + 1], out[pos + 2]);
+			const value = 255 + (grey - 255) * 0.1;
+			out[pos] = value;
+			out[pos + 1] = value;
+			out[pos + 2] = value;
+			out[pos + 3] = 255;
+		}
+	}
+
+	for (let row = 0; row < height; row += 1) {
+		for (let column = 0; column < width; column += 1) {
+			const basePos = (row * base.width + column) * 4;
+			const afterPos = (row * after.width + column) * 4;
+			const delta = colorDelta(base.data, after.data, basePos, afterPos);
+			if (Math.abs(delta) <= maxDelta) {
+				continue;
+			}
+			if (
+				!opts['include-aa'] &&
+				(antialiased(base.data, column, row, base.width, base.height, after.data) ||
+					antialiased(after.data, column, row, after.width, after.height, base.data))
+			) {
+				continue;
+			}
+
+			changed += 1;
+			out[afterPos] = highlight[0];
+			out[afterPos + 1] = highlight[1];
+			out[afterPos + 2] = highlight[2];
+			out[afterPos + 3] = 255;
+		}
+	}
+
+	// A shot that grew or shrank has no counterpart for the extra rows and
+	// columns, so all of them are a change.
+	const extra =
+		after.width * after.height -
+		width * height +
+		(base.width * base.height - width * height);
+
+	return {
+		data: out,
+		width: after.width,
+		height: after.height,
+		changed: changed + extra,
+	};
+};
+
+/**
+ * What each run was and how it was configured, from the `shots.json`
+ * story-shots.mjs leaves beside its output. A run shot before that existed, or
+ * a directory assembled by hand, simply gets no caption.
+ */
+const manifest = async (dir) => {
+	try {
+		return JSON.parse(await readFile(path.join(dir, 'shots.json'), 'utf8'));
+	} catch {
+		return null;
+	}
+};
+
+const [baseRun, afterRun] = await Promise.all([
+	manifest(baseDir),
+	manifest(afterDir),
+]);
+
+/** The settings the two runs disagree on: what a difference in the shots may be. */
+const changedKeys = CONFIG_KEYS.filter(
+	(key) => (baseRun?.config?.[key] ?? '') !== (afterRun?.config?.[key] ?? ''),
+);
+
+const settings = (run, keys) => settingsLine(run?.config, keys);
+
+const shotOf = (run, rel) =>
+	run?.shots?.find((shot) => shot.file === rel.split(path.sep).join('/'));
+
+const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;
+
+/** ImageMagick's inline crop, so a tile shows the shot without its caption. */
+const withoutCaption = (file, { width, height }, top) =>
+	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
+
+/** Story, then the settings both runs shared. One line each, widest font first. */
+const header = (rel) => {
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const shared = settings(
+		afterRun,
+		CONFIG_KEYS.filter((key) => !changedKeys.includes(key)),
+	);
+	return [
+		shot ? `${shot.title}/${shot.name}` : rel.replace(/\.png$/, ''),
+		[shot?.id ?? '', shot?.theme ?? '', shot?.status === 'busy' ? '(busy)' : '']
+			.filter(Boolean)
+			.join('  '),
+		shared,
+	].filter(Boolean);
+};
+
+/** A tile's own line: which side it is, and where its run differed. */
+const sideLabel = (side, run) =>
+	[side, settings(run, changedKeys)].filter(Boolean).join('   ');
+
+const captionLines = (rel, lines) =>
+	opts['no-caption'] ? [] : [...header(rel), ...lines].filter(Boolean);
+
+const pngs = async (dir, prefix = '') => {
+	const entries = await readdir(path.join(dir, prefix), { withFileTypes: true });
+	const files = [];
+	for (const entry of entries) {
+		const rel = path.join(prefix, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...(await pngs(dir, rel)));
+		} else if (entry.name.endsWith('.png')) {
+			files.push(rel);
+		}
+	}
+	return files;
+};
+
+const results = [];
+await mkdir(outDir, { recursive: true });
+
+for (const rel of (await pngs(baseDir)).sort()) {
+	const afterFile = path.join(afterDir, rel);
+	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
+	let after;
+	try {
+		after = readRgba(afterFile, captionOf(afterRun, rel));
+	} catch {
+		console.error(`missing in after: ${rel}`);
+		continue;
+	}
+
+	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
+	const diff = diffPair(base, after, opts.mode);
+	const target = path.join(outDir, rel);
+	const parallel = opts.mode.endsWith('-parallel');
+	// With no tiles to label, a run's own settings go in the caption instead.
+	const caption = captionLines(
+		rel,
+		parallel || !changedKeys.length
+			? []
+			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
+	);
+	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
+	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);
+
+	// The gutter is the opposite of the theme's own background, so the tiles and
+	// the caption keep an edge instead of bleeding into it.
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const theme = shot?.theme ?? rel.split(path.sep)[0];
+	const { background, foreground } = palette(theme);
+
+	if (parallel) {
+		await writeRgba(diff, diffFile);
+		const tile = (label, file) => [
+			'(',
+			`label:${literal(label)}`,
+			file,
+			'-gravity',
+			'center',
+			'-append',
+			'-bordercolor',
+			background,
+			'-border',
+			'12',
+			')',
+		];
+		magick([
+			'-background',
+			background,
+			'-fill',
+			foreground,
+			...bodyFont(),
+			'-pointsize',
+			// The tiles end up side by side, so they are read at the montage's width.
+			String(Math.round(pointsize(after.width * 3) * 0.62)),
+			...tile(
+				sideLabel('previous', baseRun),
+				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
+			),
+			...tile(
+				sideLabel('current', afterRun),
+				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
+			),
+			...tile('diff', diffFile),
+			'-gravity',
+			'north',
+			'+append',
+			caption.length ? body : target,
+		]);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	} else {
+		await writeRgba(diff, caption.length ? body : target);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	}
+
+	results.push([diff.changed, rel]);
+}
+
+results
+	.sort((a, b) => b[0] - a[0])
+	.forEach(([changed, rel]) =>
+		console.log(`${String(changed).padStart(10)}  ${rel}`),
+	);
+
+console.error(`diffs in ${outDir}`);

frontend/scripts/story-shots.mjs

@@ -0,0 +1,514 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+import { mkdir, rename, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { parseArgs } from 'node:util';
+import { pathToFileURL } from 'node:url';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	CONFIG_KEYS,
+	hasMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * The wall clock every shot is taken at, passed to the preview as `storyClock`.
+ * `.storybook/preview-head.html` freezes the same instant by itself, so a
+ * Chromatic build reads the clock this run does.
+ */
+const FROZEN_CLOCK = '2026-06-15T12:00:00.000Z';
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		out: { type: 'string', short: 'o' },
+		stories: { type: 'string', multiple: true, default: [] },
+		title: { type: 'string', default: '' },
+		name: { type: 'string', default: '' },
+		theme: { type: 'string', multiple: true, default: [] },
+		args: { type: 'string', multiple: true, default: [] },
+		port: { type: 'string', default: process.env.SB_PORT ?? '6006' },
+		width: { type: 'string', default: '1680' },
+		height: { type: 'string', default: '1200' },
+		'max-height': { type: 'string', default: '8000' },
+		grow: { type: 'string', default: 'scrollers' },
+		settle: { type: 'string', default: '1500' },
+		clock: { type: 'string', default: FROZEN_CLOCK },
+		motion: { type: 'boolean', default: false },
+		ignore: { type: 'string', multiple: true, default: [] },
+		flat: { type: 'boolean', default: false },
+		'no-caption': { type: 'boolean', default: false },
+		list: { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const outDir = opts.out ?? positionals[0];
+const themes = opts.theme.flatMap((value) => value.split(',')).filter(Boolean);
+const storyArgs = opts.args.filter(Boolean).join(';');
+
+if (opts.help || (!outDir && !opts.list)) {
+	console.log(`usage: node scripts/story-shots.mjs <out-dir> [options]
+
+  --stories <match>   only stories whose id or title/name path contains <match>
+                      (repeatable, comma-separated; default: every story)
+  --title <prefix>    only stories whose title starts with <prefix>
+  --name <match>      only stories whose name contains <match>
+  --theme <themes>    themes to shoot, e.g. dark,light (default: story default)
+  --args <k:v;k2:v2>  arg overrides, storybook's own ?args= syntax (repeatable).
+                      A value containing a dot is dropped by storybook itself
+  --port <port>       storybook dev server port (default 6006, or $SB_PORT)
+  --width <px>        viewport width, the only fixed dimension (default 1680)
+  --height <px>       shortest the viewport may be (default 1200)
+  --max-height <px>   tallest the viewport may grow to (default 8000)
+  --grow <what>       scrollers (default) grows the viewport until the page's
+                      own scrollers fit, document only follows the document
+                      height (a no-op on any page with the app shell), none
+                      keeps --height
+  --settle <ms>       wait after the page goes quiet (default 1500)
+  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
+  --motion            keep animations and transitions running
+  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
+  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
+  --no-caption        do not stamp the story and the run settings on the shot
+  --list              print the matched stories and exit
+
+Screenshots land in <out-dir>/<theme>/<story-id>.png, alongside a shots.json
+recording what each shot is, how the run was configured, and how tall the
+caption on it is. story-shots-diff.mjs reads that to crop the caption off before
+comparing, so two runs never diff their own captions.
+
+Captioning needs ImageMagick; without it the shots are written bare.
+
+Playwright is looked up in tests/e2e, then in the global install; override with
+PLAYWRIGHT_MODULE. The browser is playwright's own chromium, else an installed
+Chrome; override with CHROME_PATH.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const base = `http://localhost:${opts.port}`;
+
+// `index.json` carries raw control characters from story jsdoc, so it is read as
+// text rather than piped through anything that revalidates it.
+const index = JSON.parse(await (await fetch(`${base}/index.json`)).text());
+
+const matches = opts.stories
+	.flatMap((value) => value.split(','))
+	.filter(Boolean);
+
+const stories = Object.values(index.entries)
+	.filter((entry) => {
+		if (entry.type !== 'story') {
+			return false;
+		}
+		if (opts.title && !entry.title.startsWith(opts.title)) {
+			return false;
+		}
+		if (
+			opts.name &&
+			!entry.name.toLowerCase().includes(opts.name.toLowerCase())
+		) {
+			return false;
+		}
+		if (!matches.length) {
+			return true;
+		}
+
+		const haystack = `${entry.id} ${entry.title}/${entry.name}`.toLowerCase();
+		return matches.some((match) => haystack.includes(match.toLowerCase()));
+	})
+	.sort((a, b) => a.id.localeCompare(b.id));
+
+if (opts.list) {
+	stories.forEach((story) =>
+		console.log(`${story.id}\t${story.title}/${story.name}`),
+	);
+	console.log(`${stories.length} stories`);
+	process.exit(0);
+}
+
+if (!stories.length) {
+	console.error('no story matched');
+	process.exit(1);
+}
+
+const ignoreSelectors = opts.ignore
+	.flatMap((value) => value.split(','))
+	.map((value) => value.trim())
+	.filter(Boolean);
+
+if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
+	console.error(`--clock: not a date: ${opts.clock}`);
+	process.exit(1);
+}
+
+/**
+ * `[data-shot-ignore]` and `--ignore` hide what cannot be settled, the local
+ * half of Chromatic's `data-chromatic="ignore"`. Everything else the shot needs
+ * held still - the frozen clock, the parked animations, the lists snapped onto
+ * their bottom - is done by the preview itself, so a Chromatic build and a shot
+ * from here see the same page.
+ */
+const ignoreCss = (
+	ignore,
+) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
+	.map((selector) => `, ${selector}`)
+	.join('')} {
+	visibility: hidden !important;
+}`;
+
+/**
+ * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
+ * or wherever `$PLAYWRIGHT_MODULE` points. `@playwright/test` re-exports
+ * `chromium`, so an e2e install alone is enough.
+ */
+const resolvePlaywright = () => {
+	const specifiers = process.env.PLAYWRIGHT_MODULE
+		? [process.env.PLAYWRIGHT_MODULE]
+		: ['playwright', '@playwright/test'];
+
+	const find = (roots) => {
+		for (const specifier of specifiers) {
+			for (const root of roots) {
+				try {
+					return createRequire(path.join(root, '-')).resolve(specifier);
+				} catch {
+					/* next candidate */
+				}
+			}
+		}
+		return null;
+	};
+
+	const local = find([
+		import.meta.dirname,
+		path.resolve(import.meta.dirname, '../../tests/e2e'),
+	]);
+	if (local) {
+		return local;
+	}
+
+	// `npm root -g` prints the global node_modules; resolution starts a level up.
+	const globalRoot = spawnSync('npm', ['root', '-g'], { encoding: 'utf8' });
+	const global =
+		globalRoot.status === 0 && find([path.dirname(globalRoot.stdout.trim())]);
+	if (global) {
+		return global;
+	}
+
+	console.error(
+		'playwright not found. Install it (pnpm -C tests/e2e install, or npm i -g playwright) or set PLAYWRIGHT_MODULE.',
+	);
+	return process.exit(1);
+};
+
+const pwModule = await import(pathToFileURL(resolvePlaywright()).href);
+const pw = pwModule.chromium ? pwModule : pwModule.default;
+
+console.log(
+	`${stories.length} stories x ${themes.length || 1} theme(s) -> ${outDir}`,
+);
+
+/**
+ * A playwright install carries no browser of its own, and the revision it wants
+ * is often not the one that was downloaded, so an installed Chrome is the
+ * fallback before giving up.
+ */
+const launch = async () => {
+	if (process.env.CHROME_PATH) {
+		return pw.chromium.launch({ executablePath: process.env.CHROME_PATH });
+	}
+	try {
+		return await pw.chromium.launch();
+	} catch (error) {
+		try {
+			return await pw.chromium.launch({ channel: 'chrome' });
+		} catch {
+			console.error(
+				`${error.message.split('\n')[0]}\nRun 'playwright install chromium' or set CHROME_PATH to a browser binary.`,
+			);
+			return process.exit(1);
+		}
+	}
+};
+
+const browser = await launch();
+
+const failures = [];
+const shots = [];
+
+const runConfig = {
+	args: storyArgs,
+	clock: opts.clock,
+	width: opts.width,
+	height: opts.height,
+	grow: opts.grow,
+	motion: opts.motion ? 'live' : 'still',
+	settle: opts.settle,
+	ignore: ignoreSelectors.join(', '),
+};
+
+const captioning = !opts['no-caption'] && hasMagick();
+
+if (!opts['no-caption'] && !captioning) {
+	console.error('ImageMagick not found: shots are written without a caption.');
+}
+
+const configLine = settingsLine(runConfig, CONFIG_KEYS);
+
+for (const theme of themes.length ? themes : [null]) {
+	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
+	await mkdir(dir, { recursive: true });
+	if (theme) {
+		console.log(`\n[${theme}]`);
+	}
+
+	for (const story of stories) {
+		// A context per story: reusing one page loses the msw worker
+		// re-registration race after a few navigations and the story then dies on
+		// a missing worker.
+		const context = await browser.newContext({
+			viewport: { width: Number(opts.width), height: Number(opts.height) },
+			reducedMotion: opts.motion ? 'no-preference' : 'reduce',
+		});
+		const page = await context.newPage();
+
+		// react-query retries and msw both keep requests going long after load, so
+		// the settle waits on the page being quiet rather than on a fixed delay.
+		let inFlight = 0;
+		let lastActivity = Date.now();
+		page.on('request', () => {
+			inFlight += 1;
+			lastActivity = Date.now();
+		});
+		const done = () => {
+			inFlight = Math.max(inFlight - 1, 0);
+			lastActivity = Date.now();
+		};
+		page.on('requestfinished', done);
+		page.on('requestfailed', done);
+
+		// The height the rounds had reached when the page turned out to grow with
+		// the viewport, kept only to flag the story in the log.
+		let chasing = 0;
+
+		const url = new URL(`${base}/iframe.html`);
+		url.searchParams.set('viewMode', 'story');
+		url.searchParams.set('id', story.id);
+		// The preview owns the clock and the motion state, so both are asked for in
+		// the URL rather than injected here: a Chromatic build gets the defaults.
+		url.searchParams.set('storyClock', opts.clock);
+		const globals = [theme && `theme:${theme}`, opts.motion && 'motion:live']
+			.filter(Boolean)
+			.join(';');
+		if (globals) {
+			url.searchParams.set('globals', globals);
+		}
+		if (storyArgs) {
+			url.searchParams.set('args', storyArgs);
+		}
+
+		try {
+			await page.goto(url.href, { waitUntil: 'domcontentloaded' });
+
+			// Storybook's own render phase is the readiness signal: it reaches
+			// `finished` only once the loaders, the decorators and the story's `play`
+			// are all done, which a DOM check cannot see. The dev server transforms
+			// each page module on first visit, so this is the slow wait.
+			await page.waitForFunction(
+				() =>
+					(window.__STORYBOOK_PREVIEW__?.storyRenders ?? []).some((render) =>
+						['finished', 'errored', 'aborted'].includes(render.phase),
+					) || document.body.classList.contains('sb-show-errordisplay'),
+				undefined,
+				{ timeout: 120_000 },
+			);
+
+			await page.addStyleTag({ content: ignoreCss(ignoreSelectors) });
+			if (!opts.motion) {
+				// Videos and GIFs are parked on their first frame, as Chromatic does.
+				await page.evaluate(() =>
+					document.querySelectorAll('video').forEach((video) => video.pause?.()),
+				);
+			}
+
+			// Text reflows when a webfont lands, so the shot waits for the faces the
+			// page asked for. Some stories keep a request open by design, hence the
+			// cap on the quiet wait rather than a plain networkidle.
+			await page.evaluate(() => document.fonts.ready);
+			const quietUntil = Date.now() + 15_000;
+			while (
+				Date.now() < quietUntil &&
+				(inFlight > 0 || Date.now() - lastActivity < 600)
+			) {
+				await page.waitForTimeout(200);
+			}
+			await page.waitForTimeout(Number(opts.settle));
+
+			// The width is the fixed dimension and the height follows the page, the
+			// way a Chromatic viewport does. `src/styles.scss` pins
+			// `html, body, #root` to `height: 100%; overflow: hidden`, so the
+			// document can never outgrow the viewport and its height says nothing
+			// about what is on the page: what overflows are the shell's inner
+			// scrollers. `scrollers` grows the viewport until the tallest of those
+			// fits, so nothing is cut off and no scrollbar is left in the shot.
+			// Growing changes the layout, hence the rounds. A page that sizes a panel
+			// in `vh` grows its own content as the viewport grows, so no height ever
+			// fits it and the rounds only chase: `.alert-chart-container` is `57vh`,
+			// which puts Create Alert's fixed point at 4344px with an empty band on
+			// top. Such a page is shot at `--height` with its own scrollbar instead,
+			// which is what it looks like in a browser.
+			if (opts.grow !== 'none') {
+				const maximum = Number(opts['max-height']);
+				const requested = Number(opts.height);
+				let height = requested;
+				let fits = false;
+				for (let round = 0; round < 3 && !fits; round += 1) {
+					const needed = Math.min(
+						maximum,
+						await page.evaluate((withScrollers) => {
+							const document_ = Math.max(
+								document.documentElement.scrollHeight,
+								document.body.scrollHeight,
+							);
+							if (!withScrollers) {
+								return document_;
+							}
+
+							// Popups are skipped: they are out of the flow, and a tall
+							// dropdown or tooltip would otherwise drag the shot to a
+							// height nothing on the page itself needs.
+							const inFlow = (element) => {
+								for (
+									let node = element;
+									node && node !== document.documentElement;
+									node = node.parentElement
+								) {
+									const { position } = getComputedStyle(node);
+									if (position === 'fixed' || position === 'absolute') {
+										return false;
+									}
+								}
+								return true;
+							};
+
+							return [...document.querySelectorAll('*')].reduce((tallest, element) => {
+								const { overflowY } = getComputedStyle(element);
+								if (
+									!['auto', 'scroll', 'overlay'].includes(overflowY) ||
+									element.scrollHeight - element.clientHeight <= 1 ||
+									!inFlow(element)
+								) {
+									return tallest;
+								}
+
+								const box = element.getBoundingClientRect();
+								const above = box.top + window.scrollY;
+								const below = Math.max(0, document_ - (box.bottom + window.scrollY));
+								return Math.max(tallest, above + element.scrollHeight + below);
+							}, document_);
+						}, opts.grow === 'scrollers'),
+					);
+					fits = needed <= height;
+					if (fits) {
+						break;
+					}
+
+					height = Math.ceil(needed);
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+
+				if (!fits && height !== requested) {
+					chasing = height;
+					height = requested;
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+			}
+
+			// The preview snapped its bottom-pinned lists at `afterEach`, before the
+			// page went quiet; a virtuoso list is usually still measuring then.
+			await page.evaluate(() => window.__signozSnapPinnedScrollers?.());
+
+			// A page that is still moving — a list scrolling itself to the bottom, a
+			// monaco editor re-measuring, a tooltip being repositioned — is shot
+			// twice in a row until two frames come back identical, since what the
+			// page is waiting on is not observable from here.
+			let shot = await page.screenshot();
+			let stable = false;
+			for (let attempt = 0; attempt < 8 && !stable; attempt += 1) {
+				await page.waitForTimeout(400);
+				const next = await page.screenshot();
+				stable = next.equals(shot);
+				shot = next;
+			}
+
+			const file = path.join(dir, `${story.id}.png`);
+			await writeFile(file, shot);
+
+			// The band goes on the shot itself so a single screenshot says what it
+			// is, and its height is recorded so a diff can take it back off.
+			let caption = 0;
+			if (captioning) {
+				const temporary = path.join(
+					os.tmpdir(),
+					`story-shots-caption-${process.pid}.png`,
+				);
+				caption = stamp({
+					lines: [
+						`${story.title}/${story.name}`,
+						[story.id, theme ?? 'default', stable ? '' : '(busy)']
+							.filter(Boolean)
+							.join('  '),
+						configLine,
+					].filter(Boolean),
+					from: file,
+					to: temporary,
+					theme: theme ?? 'dark',
+				});
+				await rename(temporary, file);
+			}
+
+			shots.push({
+				file: path.posix.join(
+					opts.flat ? '' : (theme ?? 'default'),
+					`${story.id}.png`,
+				),
+				id: story.id,
+				title: story.title,
+				name: story.name,
+				theme: theme ?? 'default',
+				status: stable ? 'ok' : 'busy',
+				caption,
+			});
+			console.log(
+				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
+					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
+				}`,
+			);
+		} catch (error) {
+			failures.push(`${theme ?? 'default'}/${story.id}`);
+			console.log(`  FAIL ${story.id}: ${error.message.split('\n')[0]}`);
+		} finally {
+			await context.close();
+		}
+	}
+}
+
+await browser.close();
+
+// The diff script captions its output from this, so the run's own settings sit
+// next to the shots they produced rather than only in the shell history.
+await writeFile(
+	path.join(outDir, 'shots.json'),
+	`${JSON.stringify({ config: runConfig, shots }, null, '\t')}\n`,
+);
+
+if (failures.length) {
+	console.error(`\n${failures.length} failed: ${failures.join(', ')}`);
+	process.exit(1);
+}

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

@@ -4,15 +4,23 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import type {
+	InvalidateOptions,
 	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
 } from 'react-query';
 
 import type {
 	HandleExportRawDataPOSTParams,
+	ListPromotedAndIndexedPaths200,
+	PromotetypesPromotePathDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -20,6 +28,26 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+const withQueryKey = <T extends object, K>(
+	query: T,
+	queryKey: K,
+): T & { queryKey: K } => {
+	const result = { queryKey } as T & { queryKey: K };
+	for (const key of Object.keys(query)) {
+		// The explicit queryKey always wins, matching the previous
+		// `{ ...query, queryKey }` spread where it was set last.
+		if (key === 'queryKey') {
+			continue;
+		}
+		Object.defineProperty(result, key, {
+			enumerable: true,
+			configurable: true,
+			get: () => (query as Record<string, unknown>)[key],
+		});
+	}
+	return result;
+};
+
 /**
  * This endpoints allows complex query exporting raw data for traces and logs
  * @summary Export raw data
@@ -121,3 +149,175 @@ export const useHandleExportRawDataPOST = <
 > => {
 	return useMutation(getHandleExportRawDataPOSTMutationOptions(options));
 };
+/**
+ * This endpoints promotes and indexes paths
+ * @summary Promote and index paths
+ */
+export const listPromotedAndIndexedPaths = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListPromotedAndIndexedPaths200>({
+		url: `/api/v1/logs/promote_paths`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListPromotedAndIndexedPathsQueryKey = () => {
+	return [`/api/v1/logs/promote_paths`] as const;
+};
+
+export const getListPromotedAndIndexedPathsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListPromotedAndIndexedPathsQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
+	> = ({ signal }) => listPromotedAndIndexedPaths(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListPromotedAndIndexedPathsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
+>;
+export type ListPromotedAndIndexedPathsQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Promote and index paths
+ */
+
+export function useListPromotedAndIndexedPaths<
+	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListPromotedAndIndexedPathsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Promote and index paths
+ */
+export const invalidateListPromotedAndIndexedPaths = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListPromotedAndIndexedPathsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoints promotes and indexes paths
+ * @summary Promote and index paths
+ */
+export const handlePromoteAndIndexPaths = (
+	promotetypesPromotePathDTONull?: BodyType<
+		PromotetypesPromotePathDTO[] | null
+	> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/logs/promote_paths`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: promotetypesPromotePathDTONull,
+		signal,
+	});
+};
+
+export const getHandlePromoteAndIndexPathsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+	TContext
+> => {
+	const mutationKey = ['handlePromoteAndIndexPaths'];
+	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 handlePromoteAndIndexPaths>>,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return handlePromoteAndIndexPaths(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type HandlePromoteAndIndexPathsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>
+>;
+export type HandlePromoteAndIndexPathsMutationBody =
+	| BodyType<PromotetypesPromotePathDTO[] | null>
+	| undefined;
+export type HandlePromoteAndIndexPathsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Promote and index paths
+ */
+export const useHandlePromoteAndIndexPaths = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+	TContext
+> => {
+	return useMutation(getHandlePromoteAndIndexPathsMutationOptions(options));
+};

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

@@ -1,232 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	ListPromotedPaths200,
-	ListPromotedPathsParams,
-	PromotetypesPromotePathDTO,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
-
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
-/**
- * This endpoint lists the promoted paths of every JSON column, each annotated with its signal and context. The signal, context, promoted and indexes query parameters filter the listing.
- * @summary List promoted paths
- */
-export const listPromotedPaths = (
-	params?: ListPromotedPathsParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListPromotedPaths200>({
-		url: `/api/v1/promoted_paths`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListPromotedPathsQueryKey = (
-	params?: ListPromotedPathsParams,
-) => {
-	return [`/api/v1/promoted_paths`, ...(params ? [params] : [])] as const;
-};
-
-export const getListPromotedPathsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listPromotedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListPromotedPathsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listPromotedPaths>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListPromotedPathsQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listPromotedPaths>>
-	> = ({ signal }) => listPromotedPaths(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listPromotedPaths>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListPromotedPathsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listPromotedPaths>>
->;
-export type ListPromotedPathsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List promoted paths
- */
-
-export function useListPromotedPaths<
-	TData = Awaited<ReturnType<typeof listPromotedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListPromotedPathsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listPromotedPaths>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListPromotedPathsQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary List promoted paths
- */
-export const invalidateListPromotedPaths = async (
-	queryClient: QueryClient,
-	params?: ListPromotedPathsParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListPromotedPathsQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint promotes paths of JSON columns to their promoted columns. Each path names its promotion target with its signal and context, e.g. traces/attribute.
- * @summary Promote paths
- */
-export const promotePaths = (
-	promotetypesPromotePathDTONull?: BodyType<
-		PromotetypesPromotePathDTO[] | null
-	> | null,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/promoted_paths`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: promotetypesPromotePathDTONull,
-		signal,
-	});
-};
-
-export const getPromotePathsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof promotePaths>>,
-		TError,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof promotePaths>>,
-	TError,
-	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-	TContext
-> => {
-	const mutationKey = ['promotePaths'];
-	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 promotePaths>>,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return promotePaths(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PromotePathsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof promotePaths>>
->;
-export type PromotePathsMutationBody =
-	| BodyType<PromotetypesPromotePathDTO[] | null>
-	| undefined;
-export type PromotePathsMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Promote paths
- */
-export const usePromotePaths = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof promotePaths>>,
-		TError,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof promotePaths>>,
-	TError,
-	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-	TContext
-> => {
-	return useMutation(getPromotePathsMutationOptions(options));
-};

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

@@ -4,264 +4,6 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-export enum AiobservabilitytypesBlobPartDTOType {
-	blob = 'blob',
-}
-export interface AiobservabilitytypesBlobPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum blob
-	 */
-	type: AiobservabilitytypesBlobPartDTOType;
-}
-
-export enum AiobservabilitytypesTextPartDTOType {
-	text = 'text',
-}
-export interface AiobservabilitytypesTextPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string
-	 * @enum text
-	 */
-	type: AiobservabilitytypesTextPartDTOType;
-}
-
-export enum AiobservabilitytypesToolCallRequestPartDTOType {
-	tool_call = 'tool_call',
-}
-export interface AiobservabilitytypesToolCallRequestPartDTO {
-	arguments?: unknown;
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @enum tool_call
-	 */
-	type: AiobservabilitytypesToolCallRequestPartDTOType;
-}
-
-export enum AiobservabilitytypesToolCallResponsePartDTOType {
-	tool_call_response = 'tool_call_response',
-}
-export type AiobservabilitytypesToolCallResponsePartDTOResponse =
-	| unknown
-	| null;
-
-export interface AiobservabilitytypesToolCallResponsePartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @nullable true
-	 */
-	response: AiobservabilitytypesToolCallResponsePartDTOResponse;
-	/**
-	 * @type string
-	 * @enum tool_call_response
-	 */
-	type: AiobservabilitytypesToolCallResponsePartDTOType;
-}
-
-export interface AiobservabilitytypesGenericServerToolCallDTO {
-	[key: string]: unknown;
-}
-
-export enum AiobservabilitytypesServerToolCallPartDTOType {
-	server_tool_call = 'server_tool_call',
-}
-export interface AiobservabilitytypesServerToolCallPartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	server_tool_call: AiobservabilitytypesGenericServerToolCallDTO;
-	/**
-	 * @type string
-	 * @enum server_tool_call
-	 */
-	type: AiobservabilitytypesServerToolCallPartDTOType;
-}
-
-export interface AiobservabilitytypesGenericServerToolCallResponseDTO {
-	[key: string]: unknown;
-}
-
-export enum AiobservabilitytypesServerToolCallResponsePartDTOType {
-	server_tool_call_response = 'server_tool_call_response',
-}
-export interface AiobservabilitytypesServerToolCallResponsePartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	server_tool_call_response: AiobservabilitytypesGenericServerToolCallResponseDTO;
-	/**
-	 * @type string
-	 * @enum server_tool_call_response
-	 */
-	type: AiobservabilitytypesServerToolCallResponsePartDTOType;
-}
-
-export enum AiobservabilitytypesFilePartDTOType {
-	file = 'file',
-}
-export interface AiobservabilitytypesFilePartDTO {
-	/**
-	 * @type string
-	 */
-	file_id: string;
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum file
-	 */
-	type: AiobservabilitytypesFilePartDTOType;
-}
-
-export enum AiobservabilitytypesUriPartDTOType {
-	uri = 'uri',
-}
-export interface AiobservabilitytypesUriPartDTO {
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum uri
-	 */
-	type: AiobservabilitytypesUriPartDTOType;
-	/**
-	 * @type string
-	 */
-	uri: string;
-}
-
-export enum AiobservabilitytypesReasoningPartDTOType {
-	reasoning = 'reasoning',
-}
-export interface AiobservabilitytypesReasoningPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string
-	 * @enum reasoning
-	 */
-	type: AiobservabilitytypesReasoningPartDTOType;
-}
-
-export enum AiobservabilitytypesCompactionPartDTOType {
-	compaction = 'compaction',
-}
-export interface AiobservabilitytypesCompactionPartDTO {
-	/**
-	 * @type string,null
-	 */
-	content?: string | null;
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 * @enum compaction
-	 */
-	type: AiobservabilitytypesCompactionPartDTOType;
-}
-
-export interface AiobservabilitytypesGenericPartDTO {
-	[key: string]: unknown;
-}
-
-export type AiobservabilitytypesPartDTO =
-	| AiobservabilitytypesTextPartDTO
-	| AiobservabilitytypesToolCallRequestPartDTO
-	| AiobservabilitytypesToolCallResponsePartDTO
-	| AiobservabilitytypesServerToolCallPartDTO
-	| AiobservabilitytypesServerToolCallResponsePartDTO
-	| AiobservabilitytypesBlobPartDTO
-	| AiobservabilitytypesFilePartDTO
-	| AiobservabilitytypesUriPartDTO
-	| AiobservabilitytypesReasoningPartDTO
-	| AiobservabilitytypesCompactionPartDTO
-	| AiobservabilitytypesGenericPartDTO;
-
-export type AiobservabilitytypesPartsDTO = AiobservabilitytypesPartDTO[];
-
-export interface AiobservabilitytypesChatMessageDTO {
-	/**
-	 * @type string,null
-	 */
-	name?: string | null;
-	parts: AiobservabilitytypesPartsDTO;
-	/**
-	 * @type string
-	 */
-	role: string;
-}
-
-export type AiobservabilitytypesInputMessagesDTO =
-	AiobservabilitytypesChatMessageDTO[];
-
-export interface AiobservabilitytypesOutputMessageDTO {
-	/**
-	 * @type string,null
-	 */
-	finish_reason?: string | null;
-	/**
-	 * @type string,null
-	 */
-	name?: string | null;
-	parts: AiobservabilitytypesPartsDTO;
-	/**
-	 * @type string
-	 */
-	role: string;
-}
-
-export type AiobservabilitytypesOutputMessagesDTO =
-	AiobservabilitytypesOutputMessageDTO[];
-
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -4469,10 +4211,195 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export enum DashboardtypesAIBuilderQuerySpecDTOSignal {
-	traces = 'traces',
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
 }
-export interface Querybuildertypesv5TraceAggregationDTO {
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
+export interface DashboardtypesAxesDTO {
+	/**
+	 * @type boolean
+	 */
+	isLogScale?: boolean;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export enum DashboardtypesPrecisionOptionDTO {
+	NUMBER_0 = '0',
+	NUMBER_1 = '1',
+	NUMBER_2 = '2',
+	NUMBER_3 = '3',
+	NUMBER_4 = '4',
+	full = 'full',
+}
+export interface DashboardtypesPanelFormattingDTO {
+	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
+export enum DashboardtypesLegendPositionDTO {
+	bottom = 'bottom',
+	right = 'right',
+}
+export type DashboardtypesLegendDTOCustomColorsAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type DashboardtypesLegendDTOCustomColors =
+	DashboardtypesLegendDTOCustomColorsAnyOf | null;
+
+export interface DashboardtypesLegendDTO {
+	/**
+	 * @type object,null
+	 */
+	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
+	position?: DashboardtypesLegendPositionDTO;
+}
+
+export interface DashboardtypesThresholdWithLabelDTO {
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
+export enum DashboardtypesTimePreferenceDTO {
+	global_time = 'global_time',
+	last_5_min = 'last_5_min',
+	last_15_min = 'last_15_min',
+	last_30_min = 'last_30_min',
+	last_1_hr = 'last_1_hr',
+	last_6_hr = 'last_6_hr',
+	last_1_day = 'last_1_day',
+	last_3_days = 'last_3_days',
+	last_1_week = 'last_1_week',
+	last_1_month = 'last_1_month',
+}
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
+export interface DashboardtypesBarChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	stackedBarChart?: boolean;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesBarChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBarChartVisualizationDTO;
+}
+
+export interface DashboardtypesBasicVisualizationDTO {
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface Querybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type string
 	 */
@@ -4711,274 +4638,13 @@ export interface TelemetrytypesTelemetryFieldKeyDTO {
 	unit?: string;
 }
 
+export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
+	logs = 'logs',
+}
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
 	'' = '',
 }
-export interface DashboardtypesAIBuilderQuerySpecDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/**
-	 * @type string
-	 */
-	cursor?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array,null
-	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	having?: Querybuildertypesv5HavingDTO;
-	/**
-	 * @type string
-	 */
-	legend?: string;
-	/**
-	 * @type integer
-	 */
-	limit?: number;
-	limitBy?: Querybuildertypesv5LimitByDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	/**
-	 * @type array,null
-	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
-	/**
-	 * @enum traces
-	 * @type string
-	 */
-	signal: DashboardtypesAIBuilderQuerySpecDTOSignal;
-	source?: TelemetrytypesSourceDTO;
-	stepInterval?: Querybuildertypesv5StepDTO;
-}
-
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
-}
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
-export interface DashboardtypesAxesDTO {
-	/**
-	 * @type boolean
-	 */
-	isLogScale?: boolean;
-	/**
-	 * @type number,null
-	 */
-	softMax?: number | null;
-	/**
-	 * @type number,null
-	 */
-	softMin?: number | null;
-}
-
-export enum DashboardtypesPrecisionOptionDTO {
-	NUMBER_0 = '0',
-	NUMBER_1 = '1',
-	NUMBER_2 = '2',
-	NUMBER_3 = '3',
-	NUMBER_4 = '4',
-	full = 'full',
-}
-export interface DashboardtypesPanelFormattingDTO {
-	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
-export enum DashboardtypesLegendPositionDTO {
-	bottom = 'bottom',
-	right = 'right',
-}
-export type DashboardtypesLegendDTOCustomColorsAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type DashboardtypesLegendDTOCustomColors =
-	DashboardtypesLegendDTOCustomColorsAnyOf | null;
-
-export interface DashboardtypesLegendDTO {
-	/**
-	 * @type object,null
-	 */
-	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
-	position?: DashboardtypesLegendPositionDTO;
-}
-
-export interface DashboardtypesThresholdWithLabelDTO {
-	/**
-	 * @type string
-	 */
-	color: string;
-	/**
-	 * @type string
-	 */
-	label?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	value: number;
-}
-
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
-export enum DashboardtypesTimePreferenceDTO {
-	global_time = 'global_time',
-	last_5_min = 'last_5_min',
-	last_15_min = 'last_15_min',
-	last_30_min = 'last_30_min',
-	last_1_hr = 'last_1_hr',
-	last_6_hr = 'last_6_hr',
-	last_1_day = 'last_1_day',
-	last_3_days = 'last_3_days',
-	last_1_week = 'last_1_week',
-	last_1_month = 'last_1_month',
-}
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
-export interface DashboardtypesBarChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	stackedBarChart?: boolean;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesBarChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesBarChartVisualizationDTO;
-}
-
-export interface DashboardtypesBasicVisualizationDTO {
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface Querybuildertypesv5LogAggregationDTO {
-	/**
-	 * @type string
-	 */
-	alias?: string;
-	/**
-	 * @type string
-	 */
-	expression?: string;
-}
-
-export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
-	logs = 'logs',
-}
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type array,null
@@ -5169,6 +4835,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
+export interface Querybuildertypesv5TraceAggregationDTO {
+	/**
+	 * @type string
+	 */
+	alias?: string;
+	/**
+	 * @type string
+	 */
+	expression?: string;
+}
+
 export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTOSignal {
 	traces = 'traces',
 }
@@ -5727,18 +5404,6 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBuilderQuerySpecDTO;
 }
 
-export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind {
-	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
-}
-export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO {
-	/**
-	 * @enum signoz/AIBuilderQuery
-	 * @type string
-	 */
-	kind: DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind;
-	spec: DashboardtypesAIBuilderQuerySpecDTO;
-}
-
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTOKind {
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 }
@@ -6030,7 +5695,6 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQu
 
 export type DashboardtypesQueryPluginDTO =
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTO
-	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormulaDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQueryDTO
@@ -6709,7 +6373,6 @@ export interface DashboardtypesPostablePublicDashboardDTO {
 
 export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
-	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 	'signoz/Formula' = 'signoz/Formula',
 	'signoz/PromQLQuery' = 'signoz/PromQLQuery',
@@ -9856,10 +9519,6 @@ export interface PromotetypesWrappedIndexDTO {
 }
 
 export interface PromotetypesPromotePathDTO {
-	/**
-	 * @type string
-	 */
-	context: string;
 	/**
 	 * @type array
 	 */
@@ -9867,15 +9526,11 @@ export interface PromotetypesPromotePathDTO {
 	/**
 	 * @type string
 	 */
-	path: string;
+	path?: string;
 	/**
 	 * @type boolean
 	 */
 	promote?: boolean;
-	/**
-	 * @type string
-	 */
-	signal: string;
 }
 
 export interface Querybuildertypesv5AggregationMetaDTO {
@@ -11706,6 +11361,11 @@ export interface SpantypesTraceAITokensDTO {
 	 * @minimum 0
 	 */
 	reasoning: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalInput?: number;
 }
 
 export interface SpantypesTraceAISummaryDTO {
@@ -11789,16 +11449,6 @@ export interface SpantypesThreadSpanDTO {
 	 * @type array
 	 */
 	events: SpantypesEventDTO[];
-	formattedInput: AiobservabilitytypesInputMessagesDTO;
-	formattedOutput: AiobservabilitytypesOutputMessagesDTO;
-	/**
-	 * @type string
-	 */
-	formatter: string;
-	/**
-	 * @type array
-	 */
-	formatterWarnings: string[];
 	/**
 	 * @type boolean
 	 */
@@ -13189,6 +12839,17 @@ export type ListUnmappedLLMModels200 = {
 	status: string;
 };
 
+export type ListPromotedAndIndexedPaths200 = {
+	/**
+	 * @type array,null
+	 */
+	data: PromotetypesPromotePathDTO[] | null;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListOrgPreferences200 = {
 	/**
 	 * @type array
@@ -13214,40 +12875,6 @@ export type GetOrgPreference200 = {
 export type UpdateOrgPreferencePathParameters = {
 	name: string;
 };
-export type ListPromotedPathsParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	signal?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	context?: string;
-	/**
-	 * @type boolean,null
-	 * @description undefined
-	 */
-	promoted?: boolean | null;
-	/**
-	 * @type boolean,null
-	 * @description undefined
-	 */
-	indexes?: boolean | null;
-};
-
-export type ListPromotedPaths200 = {
-	/**
-	 * @type array,null
-	 */
-	data: PromotetypesPromotePathDTO[] | null;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListRoles200 = {
 	/**
 	 * @type array

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

@@ -261,7 +261,7 @@ export const invalidateGetTraceSummary = async (
 };
 
 /**
- * Returns the spans carrying gen_ai input or output messages, or a tool execution, in timestamp order. Messages already in the OTel GenAI shape are decoded into formattedInput and formattedOutput, with formatter naming the converter and formatterWarnings what it could not resolve. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
  * @summary Get thread view for a trace
  */
 export const getTraceThread = (

frontend/src/assets/Logos/android-kotlin-monitoring.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 60 60"><linearGradient id="a" x1="15.959" x2="44.307" y1="-13.014" y2="15.333" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".097" style="stop-color:#0095d5"/><stop offset=".301" style="stop-color:#238ad9"/><stop offset=".621" style="stop-color:#557bde"/><stop offset=".864" style="stop-color:#7472e2"/><stop offset="1" style="stop-color:#806ee3"/></linearGradient><path d="m0 60 30.1-30.1L60 60z" style="fill:url(#a)"/><linearGradient id="b" x1="4.209" x2="20.673" y1="48.941" y2="65.405" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".118" style="stop-color:#0095d5"/><stop offset=".418" style="stop-color:#3c83dc"/><stop offset=".696" style="stop-color:#6d74e1"/><stop offset=".833" style="stop-color:#806ee3"/></linearGradient><path d="M0 0h30.1L0 32.5z" style="fill:url(#b)"/><linearGradient id="c" x1="-10.102" x2="45.731" y1="5.836" y2="61.669" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".107" style="stop-color:#c757bc"/><stop offset=".214" style="stop-color:#d0609a"/><stop offset=".425" style="stop-color:#e1725c"/><stop offset=".605" style="stop-color:#ee7e2f"/><stop offset=".743" style="stop-color:#f58613"/><stop offset=".823" style="stop-color:#f88909"/></linearGradient><path d="M30.1 0 0 31.7V60l30.1-30.1L60 0z" style="fill:url(#c)"/></svg>

frontend/src/assets/Logos/bun.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#9CA3AF" d="M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001ZM10.599 4.715c.334-.759.503-1.58.498-2.409 0-.145.202-.187.23-.029.658 2.783-.902 4.162-2.057 4.624-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977Zm2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172 1.962 2.111 1.307 4.067.556 5.051-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431Zm1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218 2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071.11.11 0 0 1-.153-.026.122.122 0 0 1-.022-.083 5.891 5.891 0 0 0-.737-2.331Zm-5.087.561c-.617.546-1.282.76-2.063 1-.117 0-.195-.078-.156-.181 1.752-.909 2.376-1.649 2.999-2.778 0 0 .155-.118.188.085 0 .304-.349 1.329-.968 1.874Zm4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62 2.955 2.955 0 0 1-.925-1.553.244.244 0 0 1 .064-.198.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197Zm-5.458-2.176a1.862 1.862 0 0 1-2.384-.245 1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114 1.931 1.931 0 0 1-.698.869v.001Zm8.495.005a1.86 1.86 0 0 1-2.381-.253 1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117 1.932 1.932 0 0 1-.702.868Z"/></svg>

frontend/src/assets/Logos/microsoft.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#F25022" d="M1 1h10.5v10.5H1z"/><path fill="#7FBA00" d="M12.5 1H23v10.5H12.5z"/><path fill="#00A4EF" d="M1 12.5h10.5V23H1z"/><path fill="#FFB900" d="M12.5 12.5H23V23H12.5z"/></svg>

frontend/src/components/Alerts/LabelColumn/stories/LabelColumn.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
-
-import { withCanvas } from '@/storybook/decorators/withCanvas';
-
-import LabelColumn from '../LabelColumn';
-
-const meta = {
-	title: 'Components/Label Column',
-	component: LabelColumn,
-	tags: ['play'],
-	decorators: [withCanvas({ maxWidth: 180 })],
-	args: {
-		labels: ['severity', 'team', 'service', 'environment'],
-		value: {
-			severity: 'critical',
-			team: 'payments',
-			service: 'checkout',
-			environment: 'production',
-		},
-	},
-} satisfies Meta<typeof LabelColumn>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** Labels that fit the column; the rest collapse into a `+N` chip. */
-export const Default: Story = {};
-
-/** Copying one label from its tooltip. */
-export const LabelCopiedToast: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.hover(
-			await within(canvasElement).findByTestId('label-tag-severity'),
-		);
-		await userEvent.click(
-			await screen.findByRole('button', { name: 'Copy to clipboard' }),
-		);
-		await waitFor(() =>
-			expect(screen.getByText(/copied! use in search/i)).toBeVisible(),
-		);
-	},
-};
-
-/** Copying the labels that overflow the column from the `+N` chip's tooltip. */
-export const OverflowLabelsCopiedToast: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.hover(
-			await within(canvasElement).findByTestId('label-overflow-badge'),
-		);
-		await userEvent.click(
-			await screen.findByRole('button', { name: 'Copy to clipboard' }),
-		);
-		await waitFor(() =>
-			expect(screen.getByText(/copied! use in search/i)).toBeVisible(),
-		);
-	},
-};

frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor } from 'storybook/test';
+import { screen, userEvent } from 'storybook/test';
 import { DataSource } from 'types/common/queryBuilder';
 
 import FieldsSelector from '../FieldsSelector';
@@ -56,21 +56,6 @@ export const UnsavedChanges: Story = {
 	},
 };
 
-/** Saving: the toast raised once the edited columns are applied. */
-export const SavedToast: Story = {
-	play: async (): Promise<void> => {
-		const [addField] = await screen.findAllByRole('button', { name: 'Add' });
-
-		await userEvent.click(addField);
-		await userEvent.click(
-			await screen.findByRole('button', { name: 'Save changes' }),
-		);
-		await waitFor(() =>
-			expect(screen.getByText('Saved successfully')).toBeVisible(),
-		);
-	},
-};
-
 /** Empty: the suggestion request succeeds with no columns to add. */
 export const NoResults: Story = {
 	parameters: {

frontend/src/components/HeaderRightSection/stories/HeaderRightSection.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { screen, userEvent } from 'storybook/test';
-
-import HeaderRightSection from '../HeaderRightSection';
-
-const meta = {
-	title: 'Components/Header Right Section',
-	component: HeaderRightSection,
-	tags: ['play'],
-	args: {
-		enableFeedback: true,
-		enableShare: true,
-		enableAnnouncements: false,
-	},
-} satisfies Meta<typeof HeaderRightSection>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** The top bar's actions: feedback and share. */
-export const Default: Story = {};
-
-/** A feedback note submitted from the popover, which toasts once it is sent. */
-export const FeedbackSubmittedToast: Story = {
-	play: async (): Promise<void> => {
-		await userEvent.click(
-			await screen.findByRole('button', { name: 'Feedback' }),
-		);
-		await userEvent.type(
-			await screen.findByPlaceholderText(/write your feedback here/i),
-			'The new explorer is great',
-		);
-		await userEvent.click(await screen.findByRole('button', { name: /submit/i }));
-		await screen.findByText(/feedback submitted successfully/i);
-	},
-};

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -36,7 +36,6 @@ import {
 	filterOptionsBySearch,
 	findOptionLabelText,
 	handleScrollToBottom,
-	findOptionLabel,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -74,7 +73,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	onDropdownVisibleChange,
 	showIncompleteDataMessage = false,
 	showLabels = false,
-	preserveOptionOrder = false,
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
@@ -313,7 +311,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			]);
 		} else {
 			setVisibleOptions(
-				selectedValues.length > 0 && isEmpty(searchText) && !preserveOptionOrder
+				selectedValues.length > 0 && isEmpty(searchText)
 					? prioritizeOrAddOptionForMultiSelect(filteredOptions, selectedValues)
 					: filteredOptions,
 			);
@@ -1477,7 +1475,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		const shouldPrioritize =
 			selectedValues.length > 0 &&
 			isEmpty(searchText) &&
-			!preserveOptionOrder &&
 			!(hasSections && (allOptionShown || isAllSelected));
 
 		const processedOptions = shouldPrioritize
@@ -1808,7 +1805,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDynamicVariable,
 		showRetryButton,
 		waitingMessage,
-		preserveOptionOrder,
 	]);
 
 	// Custom handler for dropdown visibility changes
@@ -1896,7 +1892,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label: labelProp, value, closable, onClose } = props;
 
 			const label = showLabels
-				? findOptionLabel(options, value) || labelProp
+				? options.find((option) => option.value === value)?.label || labelProp
 				: labelProp;
 
 			// If the display value is the special ALL value, render the ALL tag

frontend/src/components/NewSelect/__test__/findOptionLabel.test.ts

@@ -1,70 +0,0 @@
-import { findOptionLabel } from '../utils';
-
-describe('findOptionLabel', () => {
-	const sectioned = [
-		{
-			label: 'Lifecycle',
-			options: [
-				{ label: 'Running', value: 'running' },
-				{ label: 'Pending', value: 'pending' },
-			],
-		},
-		{
-			label: 'Error status',
-			options: [{ label: 'CrashLoopBackOff', value: 'crashloopbackoff' }],
-		},
-	];
-
-	it('resolves a label nested inside a section', () => {
-		expect(findOptionLabel(sectioned, 'crashloopbackoff')).toBe(
-			'CrashLoopBackOff',
-		);
-	});
-
-	it('resolves a label on a flat option list', () => {
-		expect(findOptionLabel([{ label: 'Ready', value: 'ready' }], 'ready')).toBe(
-			'Ready',
-		);
-	});
-
-	it('returns undefined for a value no option declares', () => {
-		expect(findOptionLabel(sectioned, 'nope')).toBeUndefined();
-	});
-});
-
-describe('findOptionLabel for overflow tags', () => {
-	// The `+N` tooltip and the visible tag both resolve labels this way, so a
-	// sectioned list must not fall back to the raw enum value in either.
-	it('resolves every value in a sectioned list', () => {
-		const sections = [
-			{
-				label: 'Lifecycle',
-				options: [
-					{ label: 'Running', value: 'running' },
-					{ label: 'ContainerCreating', value: 'containercreating' },
-				],
-			},
-			{
-				label: 'Error status',
-				options: [
-					{ label: 'OOMKilled', value: 'oomkilled' },
-					{ label: 'NodeAffinity', value: 'nodeaffinity' },
-				],
-			},
-		];
-
-		const resolved = [
-			'running',
-			'containercreating',
-			'oomkilled',
-			'nodeaffinity',
-		].map((value) => findOptionLabel(sections, value) ?? value);
-
-		expect(resolved).toStrictEqual([
-			'Running',
-			'ContainerCreating',
-			'OOMKilled',
-			'NodeAffinity',
-		]);
-	});
-});

frontend/src/components/NewSelect/types.ts

@@ -66,7 +66,6 @@ export interface CustomMultiSelectProps extends Omit<
 	maxTagTextLength?: number;
 	showIncompleteDataMessage?: boolean;
 	showLabels?: boolean;
-	preserveOptionOrder?: boolean;
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;

frontend/src/components/NewSelect/utils.ts

@@ -69,28 +69,6 @@ export const prioritizeOrAddOptionForSingleSelect = (
 	return [foundOption, ...filteredOptions];
 };
 
-/**
- * Options may be grouped into sections, so resolving a value's label has to look
- * one level down as well — a sectioned list has no label at the top level.
- */
-export const findOptionLabel = (
-	options: OptionData[],
-	value: string,
-): string | undefined => {
-	for (const option of options) {
-		if (option.value === value) {
-			return option.label;
-		}
-
-		const nested = option.options?.find((subOption) => subOption.value === value);
-		if (nested) {
-			return nested.label;
-		}
-	}
-
-	return undefined;
-};
-
 export const prioritizeOrAddOptionForMultiSelect = (
 	options: OptionData[],
 	values: string[], // Only supports multiple values (string[])

frontend/src/components/OverflowValuesTooltip/OverflowValuesTooltip.module.scss

@@ -1,7 +0,0 @@
-.overflowValues {
-	max-width: 360px;
-	margin: 0;
-	padding-left: 14px;
-	list-style: disc outside;
-	overflow-wrap: anywhere;
-}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -4,11 +4,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { getBuilderVariant } from 'lib/query/queryMode';
-import {
-	BuilderVariant,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { QueryBuilderField } from './queryBuilderFields.types';
@@ -64,16 +60,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[config],
 	);
 
-	const isAIQuery =
-		getBuilderVariant(currentQuery.builder) === BuilderVariant.AI;
-
 	useEffect(() => {
 		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
-			// AI queries are traces-only; BAR must not force metrics on them.
-			if (isAIQuery) {
-				handleSetConfig(newPanelType, DataSource.TRACES);
-				return;
-			}
 			if (newPanelType === PANEL_TYPES.BAR) {
 				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
 				return;
@@ -86,20 +74,15 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		initialDataSource,
 		currentDataSource,
 		newPanelType,
-		isAIQuery,
 	]);
 
 	useEffect(() => {
 		// always clear on mount and unmount to avoid stale data
-		// hosts opting into savePreviousQuery own the clear, as they may remount this builder mid-edit
-		if (savePreviousQuery) {
-			return undefined;
-		}
 		clearPreviousQuery();
 		return (): void => {
 			clearPreviousQuery();
 		};
-	}, [savePreviousQuery]);
+	}, []);
 
 	const resolvedConfig = useMemo(
 		() =>

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/stories/__story_mockdata__/querySearch.play.ts

@@ -1,229 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { userEvent, waitFor, within } from 'storybook/test';
-
-/** Suggestions wait on a 300ms debounce and a fetch, past the 1s default. */
-const untilLoaded = { timeout: 15_000 };
-
-/** Throws until `found` holds something, which is what `waitFor` retries on. */
-const present = <TValue>(
-	found: TValue | null | undefined,
-	what: string,
-): TValue => {
-	if (found === null || found === undefined) {
-		throw new Error(`${what} not found`);
-	}
-
-	return found;
-};
-
-const suggestionList = (canvasElement: HTMLElement): HTMLElement | null =>
-	canvasElement.querySelector<HTMLElement>('.cm-tooltip-autocomplete');
-
-const suggestionRow = (
-	canvasElement: HTMLElement,
-	text: string,
-): HTMLElement | undefined => {
-	const list = suggestionList(canvasElement);
-
-	return list
-		? within(list)
-				.queryAllByRole('option')
-				.find((option) => option.textContent?.includes(text))
-		: undefined;
-};
-
-/** Ctrl+Space, the editor's own shortcut for asking for suggestions. */
-const requestSuggestions = (editor: HTMLElement): void => {
-	editor.dispatchEvent(
-		new KeyboardEvent('keydown', {
-			key: ' ',
-			code: 'Space',
-			ctrlKey: true,
-			bubbles: true,
-		}),
-	);
-};
-
-const currentView = (
-	canvasElement: HTMLElement,
-): { editor: HTMLElement; view: EditorView } => {
-	// An explorer renders one editor per query; the first is the one on screen.
-	const editor = present(
-		canvasElement.querySelector<HTMLElement>(
-			'.code-mirror-where-clause .cm-content',
-		),
-		'filter editor',
-	);
-
-	return {
-		editor,
-		view: present(EditorView.findFromDOM(editor), 'editor view'),
-	};
-};
-
-/**
- * The explorers wrap the filter in `OverlayScrollbar`, which initialises when
- * the browser is idle. Initialising moves the content, the editor with it, and
- * focuses the editor again through the DOM, which puts the caret back at the
- * start and swaps the suggestions for the key list. Throws until every wrapper
- * around the filter has initialised.
- */
-const assertScrollbarsReady = (editor: HTMLElement): void => {
-	for (
-		let wrapper = editor.closest('.overlay-scrollbar');
-		wrapper;
-		wrapper = wrapper.parentElement?.closest('.overlay-scrollbar') ?? null
-	) {
-		if (!wrapper.hasAttribute('data-overlayscrollbars')) {
-			throw new Error('scrollbars around the filter still initialising');
-		}
-	}
-};
-
-/**
- * Waits until `text` shows in the suggestion list, asking for suggestions
- * whenever the list is shut. Focus and typing only open it once the keys have
- * loaded, and moving the caret never does.
- */
-const waitForSuggestion = (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<HTMLElement> =>
-	waitFor(
-		() => {
-			const { editor } = currentView(canvasElement);
-
-			if (!suggestionList(canvasElement)) {
-				requestSuggestions(editor);
-			}
-
-			return present(suggestionRow(canvasElement, text), `suggestion "${text}"`);
-		},
-		{ ...untilLoaded, interval: 250 },
-	);
-
-/**
- * Focuses the filter once the scrollbars around it have initialised, and waits
- * for its suggestion list.
- */
-const focusFilter = async (canvasElement: HTMLElement): Promise<EditorView> => {
-	await waitFor(
-		() => {
-			const { editor, view } = currentView(canvasElement);
-
-			assertScrollbarsReady(editor);
-
-			if (!view.hasFocus) {
-				view.focus();
-			}
-
-			if (!suggestionList(canvasElement)) {
-				requestSuggestions(editor);
-			}
-
-			return present(suggestionList(canvasElement), 'suggestion list');
-		},
-		{ ...untilLoaded, interval: 250 },
-	);
-
-	return currentView(canvasElement).view;
-};
-
-/** Waits for a row of the suggestion list. */
-export const findSuggestion = (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<HTMLElement> => waitForSuggestion(canvasElement, text);
-
-/** Focuses the empty filter: every key, with any recent filters above them. */
-export const openKeySuggestions = async (
-	canvasElement: HTMLElement,
-	row: string,
-): Promise<void> => {
-	await focusFilter(canvasElement);
-	await waitForSuggestion(canvasElement, row);
-};
-
-/**
- * Focuses the filter and types onto the end of it one character at a time,
- * each as the transaction a keystroke makes, leaving the caret at the end so
- * the suggestion list follows what was typed. Quotes and brackets are not
- * closed for it: type both.
- *
- * `userEvent.type` cannot be used: CodeMirror redraws the line as tokens are
- * highlighted, which strands the caret `userEvent` tracks.
- */
-export const typeFilter = async (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<void> => {
-	const view = await focusFilter(canvasElement);
-
-	for (const character of text) {
-		const at = view.state.doc.length;
-
-		view.dispatch({
-			changes: { from: at, insert: character },
-			selection: { anchor: at + character.length },
-			userEvent: 'input.type',
-		});
-	}
-};
-
-/**
- * Types an expression, then steps the caret back inside it, before a closing
- * bracket or parenthesis, where the suggestions are about what goes in there.
- */
-export const typeFilterWithCaretBack = async (
-	canvasElement: HTMLElement,
-	text: string,
-	stepsBack: number,
-	row: string,
-): Promise<void> => {
-	await typeFilter(canvasElement, text);
-
-	const { view } = currentView(canvasElement);
-
-	view.dispatch({
-		selection: { anchor: view.state.doc.length - stepsBack },
-		userEvent: 'select',
-	});
-	await waitForSuggestion(canvasElement, row);
-};
-
-/**
- * Moves focus off the filter, which is when the expression is validated and
- * the error marker can show.
- */
-export const blurFilter = async (canvasElement: HTMLElement): Promise<void> => {
-	await userEvent.keyboard('{Escape}');
-	await userEvent.click(canvasElement.ownerDocument.body);
-};
-
-/** Types an expression, leaves the filter and opens its validation errors. */
-export const showFilterErrors = async (
-	canvasElement: HTMLElement,
-	text: string,
-): Promise<void> => {
-	await typeFilter(canvasElement, text);
-	await blurFilter(canvasElement);
-
-	const marker = await waitFor(
-		() =>
-			present(
-				canvasElement.querySelector<HTMLElement>('.query-status-container button'),
-				'error marker',
-			),
-		untilLoaded,
-	);
-
-	await userEvent.hover(marker);
-	await waitFor(
-		() =>
-			present(
-				canvasElement.ownerDocument.querySelector('.query-validation-error'),
-				'validation error',
-			),
-		untilLoaded,
-	);
-};

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

@@ -35,7 +35,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--spacing-2) 10.5px;
+		padding: 10.5px;
 		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
@@ -46,9 +46,6 @@
 			justify-content: flex-start;
 
 			.text {
-				padding-left: var(--spacing-4);
-				white-space: nowrap;
-				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -81,8 +78,6 @@
 			}
 
 			.select-box {
-				--combobox-trigger-width: auto;
-
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -100,9 +95,10 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: var(--spacing-1);
-			flex-shrink: 0;
+			gap: 10px;
+			width: 100%;
 			justify-content: flex-end;
+			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;
@@ -110,8 +106,26 @@
 				background: var(--l1-background);
 			}
 
-			.active {
-				background: var(--l2-background);
+			.sync-icon {
+				cursor: pointer;
+			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--l1-background);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--l2-background);
+				}
 			}
 		}
 	}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
+	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -13,9 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -180,6 +180,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
+			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +217,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<TooltipSimple
+					<Tooltip
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</TooltipSimple>
+					</Tooltip>
 				)
 			)}
 		</section>
@@ -230,54 +231,51 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<TooltipSimple title="Reset All">
+			<Tooltip title="Reset All">
 				<Button
-					variant="ghost"
+					variant="link"
 					color="secondary"
-					size="icon"
 					aria-label="Reset All"
+					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw size={14} />}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
 				/>
-			</TooltipSimple>
+			</Tooltip>
 			{showFilterCollapse && (
-				<TooltipSimple title="Collapse Filters">
+				<Tooltip title="Collapse Filters">
 					<Button
-						variant="ghost"
+						variant="link"
 						color="secondary"
-						size="icon"
 						aria-label="Collapse Filters"
+						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
 					/>
-				</TooltipSimple>
+				</Tooltip>
+			)}
+			{isDynamicFilters && (
+				<AuthZButton
+					checks={QuickFilterManagePermissions}
+					variant="link"
+					color="secondary"
+					aria-label="Settings"
+					className={classNames('right-action-icon-container', {
+						active: isSettingsOpen,
+					})}
+					onClick={(): void => setIsSettingsOpen(true)}
+					testId="settings-icon-container"
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
-			{isDynamicFilters &&
-				(isSettingsDisabled ? (
-					<AuthZButton
-						checks={QuickFilterManagePermissions}
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						aria-label="Settings"
-						onClick={(): void => setIsSettingsOpen(true)}
-						testId="settings-icon-container"
-						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-					/>
-				) : (
-					<TooltipSimple title="Settings">
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							aria-label="Settings"
-							className={classNames({ active: isSettingsOpen })}
-							onClick={(): void => setIsSettingsOpen(true)}
-							data-testid="settings-icon-container"
-							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
-						/>
-					</TooltipSimple>
-				))}
 		</section>
 	);
 

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
 import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
-import SavedViewsRestore from 'container/SavedViews/SavedViewsRestore';
 import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
@@ -41,7 +40,7 @@ function QuickFiltersLayout({
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
-	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
 	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const hasQuickFilters = !!quickFilterProps;
@@ -49,23 +48,19 @@ function QuickFiltersLayout({
 
 	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
 
-	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
-	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
 
-	const isSliding = hasQuickFilters && isViewsListOpen;
+	const isSliding = hasQuickFilters && isViewsOpen;
 
 	const savedViewsHeader = hasSavedViews ? (
 		<SavedViewsHeader
 			{...savedViewProps}
-			onOpenViews={
-				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
-			}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(true)}
 		/>
 	) : undefined;
 
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{hasSavedViews && <SavedViewsRestore source={savedViewProps.source} />}
 			{showSidebar && (
 				<aside
 					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
@@ -85,12 +80,10 @@ function QuickFiltersLayout({
 						)}
 					</div>
 					<div className={styles.savedViews}>
-						{hasSavedViews && isViewsListVisible && (
+						{hasSavedViews && (isPanelPinned || isViewsOpen) && (
 							<SavedViewsPanel
 								{...savedViewProps}
-								onClose={
-									isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
-								}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
 							/>
 						)}
 					</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -23,13 +23,6 @@ jest.mock('hooks/useSavedViewEnabled', () => ({
 	useSavedViewEnabled: jest.fn(() => true),
 }));
 
-jest.mock('container/SavedViews/SavedViewsRestore', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="saved-views-restore" data-source={source} />
-	),
-}));
-
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
 	default: ({
@@ -94,10 +87,6 @@ describe('QuickFiltersLayout', () => {
 		).not.toBeInTheDocument();
 		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
 		expect(screen.getByText('content')).toBeInTheDocument();
-		expect(screen.getByTestId('saved-views-restore')).toHaveAttribute(
-			'data-source',
-			SavedviewtypesSourceDTO.traces,
-		);
 	});
 
 	it('renders no sidebar at all without quick filters or saved views', () => {
@@ -160,7 +149,6 @@ describe('QuickFiltersLayout', () => {
 			expect(
 				screen.queryByTestId('quick-filters-layout-filters'),
 			).not.toBeInTheDocument();
-			expect(screen.queryByTestId('saved-views-restore')).not.toBeInTheDocument();
 		});
 
 		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
@@ -188,14 +176,12 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
 			expect(drawer()).toHaveClass('isOpen');
 			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
 
 			await user.click(screen.getByTestId('saved-views-close'));
 
 			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
 			expect(drawer()).not.toHaveClass('isOpen');
 			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
-			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
 		});
 
 		it('hands the source to the header and the panel', async () => {

frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx

@@ -117,38 +117,3 @@ export const Tooltips: TooltipsStory = {
 		msw: { handlers: [attributeValuesHandler(LONG_FILTER_VALUES), ...handlers] },
 	},
 };
-
-const [firstQuery] = queryBuilder.currentQuery.builder.queryData;
-
-/** Interaction: the query picker lists every query the filters can follow. */
-export const QueryPickerOpen: Story = {
-	parameters: {
-		signoz: {
-			queryBuilder: {
-				...queryBuilder,
-				currentQuery: {
-					builder: {
-						queryData: [
-							{ ...firstQuery, queryName: 'A' },
-							{ ...firstQuery, queryName: 'B' },
-						],
-					},
-				},
-			},
-		},
-	},
-	play: async ({ canvasElement }): Promise<void> => {
-		const trigger = await waitFor(() => {
-			const element = canvasElement.querySelector<HTMLElement>(
-				'[data-slot="combobox-trigger"]',
-			);
-
-			expect(element).toBeInTheDocument();
-
-			return element as HTMLElement;
-		});
-
-		await userEvent.click(trigger);
-		await screen.findByRole('listbox');
-	},
-};

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -233,23 +233,12 @@ function TanStackTableInner<TData, TItemKey = string>(
 		[effectiveColumns],
 	);
 
-	// A rebuilt column def is a new cell component to React, which remounts every
-	// cell it renders. Read the row callbacks through refs so inline ones do not.
-	const isRowActiveRef = useRef(isRowActive);
-	isRowActiveRef.current = isRowActive;
-	const getRowKeyDataRef = useRef(getRowKeyData);
-	getRowKeyDataRef.current = getRowKeyData;
-
 	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
 		() =>
 			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef<TData, TItemKey>(
-					colDef,
-					(row) => isRowActiveRef.current?.(row) ?? false,
-					(index) => getRowKeyDataRef.current(index),
-				),
+				buildTanstackColumnDef<TData, TItemKey>(colDef, isRowActive, getRowKeyData),
 			),
-		[effectiveColumns],
+		[effectiveColumns, isRowActive, getRowKeyData],
 	);
 
 	const getRowId = useCallback(

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -1,16 +1,8 @@
-import { useEffect, useState } from 'react';
 import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UrlUpdateEvent } from 'nuqs/adapters/testing';
 
-import TanStackTable from '../index';
-import type { TableColumnDef } from '../types';
-import {
-	defaultData,
-	renderTanStackTable,
-	renderWithProviders,
-	type TestRow,
-} from './testUtils';
+import { renderTanStackTable } from './testUtils';
 
 jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
@@ -818,58 +810,6 @@ describe('TanStackTableView Integration', () => {
 		});
 	});
 
-	describe('cell identity', () => {
-		it('keeps cells mounted across re-renders that pass new inline row callbacks', async () => {
-			const user = userEvent.setup();
-			const onMount = jest.fn();
-
-			function MountTracker({ id }: { id: string }): JSX.Element {
-				useEffect(() => onMount(id), [id]);
-				return <span data-testid={`tracked-${id}`}>Row {id}</span>;
-			}
-
-			const columns: TableColumnDef<TestRow>[] = [
-				{
-					id: 'id',
-					header: 'ID',
-					accessorKey: 'id',
-					cell: ({ row }): JSX.Element => <MountTracker id={row.id} />,
-				},
-			];
-
-			function Harness(): JSX.Element {
-				const [, setRenders] = useState(0);
-
-				return (
-					<>
-						<button
-							type="button"
-							data-testid="rerender"
-							onClick={(): void => setRenders((count) => count + 1)}
-						>
-							Re-render
-						</button>
-						<TanStackTable<TestRow>
-							data={defaultData}
-							columns={columns}
-							getRowKey={(row): string => row.id}
-							isRowActive={(row): boolean => row.id === '1'}
-						/>
-					</>
-				);
-			}
-
-			renderWithProviders(<Harness />);
-			await screen.findByTestId('tracked-2');
-			onMount.mockClear();
-
-			await user.click(screen.getByTestId('rerender'));
-			await user.hover(screen.getByTestId('tracked-2'));
-
-			expect(onMount).not.toHaveBeenCalled();
-		});
-	});
-
 	describe('disableVirtualScroll', () => {
 		it('throws error when used with onEndReached', () => {
 			expect(() => {

frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx

@@ -143,19 +143,6 @@ export const Pagination: Story = {
 	},
 };
 
-/** Interaction: the page size menu lists the row counts a page can show. */
-export const PageSizeOpen: Story = {
-	args: {
-		pagination: { total: 42, defaultLimit: 10, showTotalCount: true },
-	},
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.click(
-			await within(canvasElement).findByTestId('pagination-page-size'),
-		);
-		await screen.findByRole('listbox');
-	},
-};
-
 /** Data: the supported empty result keeps the table structure without a fabricated empty state. */
 export const Empty: Story = {
 	args: { data: [], testId: 'tanstack-empty-table' },

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -5,10 +5,12 @@ import {
 import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { SavedViewSourcePage } from 'container/SavedViews/types';
-import { findSavedView } from 'container/SavedViews/utils/findSavedView';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
-import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/Home/Home.tsx

@@ -32,7 +32,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { UserPreference } from 'types/api/preferences/preference';

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

@@ -8,7 +8,7 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { getSavedViewQuery } from 'container/SavedViews/utils';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -5,7 +5,7 @@ import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/types';
+import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';

frontend/src/container/InfraMonitoringK8sV2/Base/EntityGroupHeader.module.scss

@@ -2,13 +2,6 @@
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5);
-
-	// A block span leaves the icon on the text baseline, a couple of pixels
-	// above the centre of the row it sits in
-	[data-slot='icon'] {
-		display: inline-flex;
-		align-items: center;
-	}
 }
 
 .infoIcon {

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.mocks.tsx

@@ -1,78 +0,0 @@
-import { rest } from 'msw';
-
-import { toggleControl } from '@/storybook/controls/controls';
-import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-
-export const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
-const POD_NAME = 'app-demo-loadgenerator-579fbdd749-q5kgd';
-export const NODE_NAME = 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7';
-
-const POD_META = {
-	'k8s.pod.uid': POD_UID,
-	'k8s.pod.name': POD_NAME,
-	'k8s.namespace.name': 'generator',
-	'k8s.cluster.name': 'mgmt',
-	'k8s.node.name': NODE_NAME,
-	'k8s.deployment.name': 'app-demo-loadgenerator',
-};
-
-const podRecord = {
-	podUID: POD_UID,
-	podCPU: 0.92,
-	podCPURequest: 31,
-	podCPULimit: 30.7,
-	podMemory: 148 * 1024 * 1024,
-	podMemoryRequest: 42,
-	podMemoryLimit: 38,
-	podStatus: 'running',
-	podRestarts: 0,
-	podAge: 49_000_000,
-	meta: POD_META,
-};
-
-const container = {
-	containerName: 'loadgenerator',
-	podName: POD_NAME,
-	status: 'running',
-	ready: true,
-	restarts: 0,
-	meta: POD_META,
-};
-
-const list = (records: unknown[]): Record<string, unknown> => ({
-	status: 'success',
-	data: { type: 'list', records, total: records.length },
-});
-
-export const drawerMocks = defineStoryMocks({
-	controls: {
-		openedFromANode: toggleControl('Opened from a node', {
-			group: 'Drawer',
-			value: true,
-		}),
-	},
-	handlers: () => [
-		rest.post('http://localhost/api/v2/infra_monitoring/pods', (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(list([podRecord]))),
-		),
-
-		rest.post(
-			'http://localhost/api/v2/infra_monitoring/kube_containers',
-			(_req, res, ctx) => res(ctx.status(200), ctx.json(list([container]))),
-		),
-
-		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-
-		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-	],
-});

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { storyMocks } from '@/storybook/controls/defineStoryMocks';
-import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-
-import { podEntityConfig } from '../Pods/entity.config';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-import K8sBaseDetails from './K8sBaseDetails';
-import {
-	drawerMocks,
-	NODE_NAME,
-	POD_UID,
-} from './K8sBaseDetails.stories.mocks';
-import type { K8sBaseDetailsProps } from './types';
-import {
-	getDrawerHistoryDepth,
-	pushDrawerHistory,
-	resetDrawerHistory,
-} from './useDrawerHistoryStore';
-
-type DrawerArgs = PageStoryArgs<typeof drawerMocks> &
-	K8sBaseDetailsProps<unknown>;
-
-const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
-
-const meta = {
-	title: 'Infra monitoring/Kubernetes drawer',
-	component: K8sBaseDetails as (props: DrawerArgs) => JSX.Element,
-	...storyMocks(drawerMocks, { route }),
-	decorators: [
-		(Story, context): JSX.Element => {
-			// The back control appears only for a resource opened from another
-			const depth = getDrawerHistoryDepth();
-			if (context.args.openedFromANode && depth === 0) {
-				pushDrawerHistory({
-					params: { selectedItem: NODE_NAME, category: InfraMonitoringEntity.NODES },
-					category: InfraMonitoringEntity.NODES,
-					label: NODE_NAME,
-					entity: { nodeName: NODE_NAME },
-					queryKeyPrefix: 'node',
-				});
-			}
-			if (!context.args.openedFromANode && depth > 0) {
-				resetDrawerHistory();
-			}
-
-			return <Story />;
-		},
-	],
-} satisfies Meta<DrawerArgs>;
-
-export default meta;
-
-type Story = StoryObj<DrawerArgs>;
-
-/** A pod opened from a node's overview tab, so the header leads with the way back. */
-export const Default: Story = {
-	args: { ...podEntityConfig.details } as Partial<DrawerArgs> as DrawerArgs,
-};

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { ArrowLeft, X } from '@signozhq/icons';
+import { X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
@@ -16,19 +16,12 @@ import {
 	useGlobalTimeStore,
 } from 'store/globalTime';
 
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	K8S_CATEGORY_SINGULAR_LABELS,
-} from '../constants';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
 import { useInfraMonitoringSelectedItemParams } from '../hooks';
 import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import LoadingContainer from '../LoadingContainer';
 
 import K8sBaseDetailsContent from './K8sBaseDetailsContent';
-import { CategoryIcon } from './categoryIcons';
-import { getEntityNameAttributeKey } from './relations';
-import { useDrawerHistoryStore } from './useDrawerHistoryStore';
-import { usePrimeEntityDetails } from './usePrimeEntityDetails';
 import { K8sBaseDetailsProps } from './types';
 import { useDrawerLifecycleStore } from './useDrawerLifecycleStore';
 
@@ -93,11 +86,6 @@ export default function K8sBaseDetails<T>({
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
 
-	const selectedItemExpression = useMemo(
-		() => getSelectedItemExpression(selectedItemParams),
-		[getSelectedItemExpression, selectedItemParams],
-	);
-
 	const entityQueryKey = useMemo(
 		() =>
 			getAutoRefreshQueryKey(
@@ -133,10 +121,9 @@ export default function K8sBaseDetails<T>({
 			const { minTime, maxTime } = getMinMaxTime();
 			const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
 			const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-			return fetchEntityData(
-				{ filter: { expression: selectedItemExpression }, start, end },
-				signal,
-			);
+			const expression = getSelectedItemExpression(selectedItemParams);
+
+			return fetchEntityData({ filter: { expression }, start, end }, signal);
 		},
 		cacheTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
 		staleTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
@@ -171,29 +158,9 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [selectedItem, markDrawerOpened, markDrawerClosed]);
 
-	const previousEntry = useDrawerHistoryStore(
-		(store) => store.entries[store.entries.length - 1] ?? null,
-	);
-	const popDrawerHistory = useDrawerHistoryStore((store) => store.pop);
-	const primeDetails = usePrimeEntityDetails();
-	const resetHistory = useDrawerHistoryStore((store) => store.reset);
-
 	const handleClose = useCallback((): void => {
-		resetHistory();
 		setSelectedItemParams(null);
-	}, [resetHistory, setSelectedItemParams]);
-
-	// Steps back through resources opened from an overview tab
-	const handleBack = useCallback((): void => {
-		const previous = popDrawerHistory();
-
-		if (!previous) {
-			return;
-		}
-
-		primeDetails(previous);
-		setSelectedItemParams(previous.params);
-	}, [popDrawerHistory, primeDetails, setSelectedItemParams]);
+	}, [setSelectedItemParams]);
 
 	const handleOpenChange = useCallback(
 		(open: boolean): void => {
@@ -205,25 +172,11 @@ export default function K8sBaseDetails<T>({
 	);
 
 	const handleCopyId = useCallback((): void => {
-		toast.success(
-			`${K8S_CATEGORY_SINGULAR_LABELS[category]} name copied to clipboard`,
-			{ position: 'bottom-left' },
-		);
-	}, [category]);
+		toast.success('ID copied to clipboard', { position: 'bottom-left' });
+	}, []);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
-	// meta carries the resource's parents; its own name comes from the config
-	const entityAttributes = useMemo((): Record<string, string> => {
-		const meta = (entity as { meta?: Record<string, string> | null } | null)
-			?.meta;
-
-		return {
-			...(meta ?? {}),
-			...(entityName ? { [getEntityNameAttributeKey(category)]: entityName } : {}),
-		};
-	}, [entity, entityName, category]);
-
 	useEffect(() => {
 		if (entity) {
 			void logEvent(InfraMonitoringEvents.PageVisited, {
@@ -234,48 +187,20 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
-	// Names the resource it returns to, so a drill several levels deep stays clear
-	const backTarget = previousEntry
-		? `Back to ${K8S_CATEGORY_SINGULAR_LABELS[previousEntry.category]}`
-		: '';
-	const backLabel = previousEntry ? `${backTarget}: ${previousEntry.label}` : '';
-
 	// TODO(H4ad): Improve this on component level
 	// DrawerWrapper types `title` as string but renders any ReactNode.
 	const drawerTitle = (
 		<>
-			{/* One control: step back where there is a trail, close otherwise.
-			    Clicking outside the drawer closes it either way. The label is text
-			    rather than a tooltip, which a click on the control would dismiss. */}
-			{previousEntry ? (
-				<Button
-					variant="ghost"
-					size="sm"
-					color="secondary"
-					onClick={handleBack}
-					data-testid="drawer-back-button"
-					className={styles.backButton}
-					aria-label={backLabel}
-					prefix={<ArrowLeft size={14} />}
-				>
-					{backTarget}
-				</Button>
-			) : (
-				<Button
-					variant="ghost"
-					size="sm"
-					color="secondary"
-					onClick={handleClose}
-					data-testid="close-drawer-button"
-					className={styles.closeButton}
-					prefix={<X />}
-				/>
-			)}
+			<Button
+				variant="ghost"
+				size="sm"
+				color="secondary"
+				onClick={handleClose}
+				data-testid="close-drawer-button"
+				className={styles.closeButton}
+				prefix={<X />}
+			/>
 			<Divider type="vertical" />
-			<span className={styles.entityKind} data-testid="drawer-entity-kind">
-				<CategoryIcon category={category} />
-				{K8S_CATEGORY_SINGULAR_LABELS[category]}
-			</span>
 			<Typography.Text className={styles.title}>
 				{entityName ||
 					((isEntityError || hasResponseError) && 'Failed to load entity details') ||
@@ -283,8 +208,8 @@ export default function K8sBaseDetails<T>({
 					'-'}
 			</Typography.Text>
 			<CopyButton
-				value={entityName || selectedItem || ''}
-				ariaLabel={`Copy ${K8S_CATEGORY_SINGULAR_LABELS[category]} name`}
+				value={selectedItem ?? ''}
+				ariaLabel="Copy ID"
 				className={styles.copyIdButton}
 				testId="copy-id-button"
 				onCopy={handleCopyId}
@@ -346,8 +271,6 @@ export default function K8sBaseDetails<T>({
 						customTabs={customTabs}
 						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
 						eventsInitialExpression={eventsInitialExpression}
-						entityAttributes={entityAttributes}
-						entityName={entityName}
 					/>
 				</GlobalTimeProvider>
 			)}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -4,7 +4,6 @@ import {
 	ChevronsLeftRight,
 	Compass,
 	DraftingCompass,
-	LayoutGrid,
 	ScrollText,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -32,7 +31,6 @@ import EntityEvents from '../EntityDetailsUtils/EntityEvents';
 import EntityLogs from '../EntityDetailsUtils/EntityLogs';
 import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
 import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
-import EntityOverview from '../EntityDetailsUtils/EntityOverview/EntityOverview';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
@@ -69,16 +67,12 @@ export default function K8sBaseDetailsContent<T>({
 	customTabs,
 	logsAndTracesInitialExpression,
 	eventsInitialExpression,
-	entityAttributes,
-	entityName,
 }: K8sBaseDetailsContentProps<T>): JSX.Element {
 	const { timeRange, selectedInterval, handleTimeChange } =
 		useEntityDetailsTime();
 
 	const tabVisibility = useMemo(
 		() => ({
-			// Declared per category, since only a kubernetes resource relates to others
-			showOverview: false,
 			showMetrics: true,
 			showLogs: true,
 			showTraces: true,
@@ -92,9 +86,6 @@ export default function K8sBaseDetailsContent<T>({
 
 	const validTabs = useMemo(() => {
 		const tabs: string[] = [];
-		if (tabVisibility.showOverview) {
-			tabs.push(VIEW_TYPES.OVERVIEW);
-		}
 		if (tabVisibility.showMetrics) {
 			tabs.push(VIEW_TYPES.METRICS);
 		}
@@ -113,28 +104,14 @@ export default function K8sBaseDetailsContent<T>({
 		return tabs;
 	}, [tabVisibility, customTabs]);
 
-	const defaultView = validTabs[0] || VIEW_TYPES.METRICS;
-
 	useEffect(() => {
-		if (
-			!hideDetailViewTabs &&
-			selectedView &&
-			!validTabs.includes(selectedView)
-		) {
-			void setSelectedView(defaultView);
+		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
+			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
+			void setSelectedView(firstValid);
 		}
-	}, [
-		hideDetailViewTabs,
-		selectedView,
-		validTabs,
-		defaultView,
-		setSelectedView,
-	]);
+	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
 
-	// An absent view param lands on the first tab the category offers
-	const effectiveView = hideDetailViewTabs
-		? VIEW_TYPES.METRICS
-		: (selectedView ?? defaultView);
+	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
 
 	// Wait until the view is a valid tab so we don't log a pending value before
 	// the validation effect above corrects an out-of-scope query param
@@ -192,20 +169,20 @@ export default function K8sBaseDetailsContent<T>({
 			entity: InfraMonitoringEvents.K8sEntity,
 			page: InfraMonitoringEvents.DetailedPage,
 			category: eventCategory,
-			view: effectiveView,
+			view: selectedView,
 		});
 
 		logInfraExplorerNavigatedEvent({
 			entityType: category,
 			destination:
-				effectiveView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
+				selectedView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
 			source: 'tab_cta_button',
-			tab: effectiveView,
+			tab: selectedView,
 			sourceKey: null,
 			drawerDurationMsAtNavigation: getDrawerDurationMs(),
 		});
 
-		if (effectiveView === VIEW_TYPES.LOGS) {
+		if (selectedView === VIEW_TYPES.LOGS) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userLogsExpression || '',
@@ -230,7 +207,7 @@ export default function K8sBaseDetailsContent<T>({
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
 			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (effectiveView === VIEW_TYPES.TRACES) {
+		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userTracesExpression || '',
@@ -287,7 +264,7 @@ export default function K8sBaseDetailsContent<T>({
 							filterExpression={getCountsFilterExpression(entity)}
 							closeDrawer={handleClose}
 							entityType={category}
-							activeTab={effectiveView}
+							activeTab={selectedView}
 						/>
 					)}
 			</div>
@@ -298,21 +275,8 @@ export default function K8sBaseDetailsContent<T>({
 						type="single"
 						className={styles.viewsTabs}
 						onChange={handleTabChange}
-						value={effectiveView}
+						value={selectedView}
 						items={[
-							...(tabVisibility.showOverview
-								? [
-										{
-											value: VIEW_TYPES.OVERVIEW,
-											label: (
-												<div className={styles.viewTitle}>
-													<LayoutGrid size={14} />
-													Overview
-												</div>
-											),
-										},
-									]
-								: []),
 							...(tabVisibility.showMetrics
 								? [
 										{
@@ -377,7 +341,7 @@ export default function K8sBaseDetailsContent<T>({
 						]}
 					/>
 
-					{effectiveView === VIEW_TYPES.LOGS && (
+					{selectedView === VIEW_TYPES.LOGS && (
 						<TooltipSimple title="Go to Logs Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -390,7 +354,7 @@ export default function K8sBaseDetailsContent<T>({
 							</Button>
 						</TooltipSimple>
 					)}
-					{effectiveView === VIEW_TYPES.TRACES && (
+					{selectedView === VIEW_TYPES.TRACES && (
 						<TooltipSimple title="Go to Traces Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -406,16 +370,6 @@ export default function K8sBaseDetailsContent<T>({
 				</div>
 			)}
 
-			{effectiveView === VIEW_TYPES.OVERVIEW && tabVisibility.showOverview && (
-				<EntityOverview
-					category={category}
-					eventEntity={eventCategory}
-					attributes={entityAttributes}
-					entity={entity}
-					entityName={entityName}
-					queryKeyPrefix={queryKeyPrefix}
-				/>
-			)}
 			{effectiveView === VIEW_TYPES.METRICS && (
 				<EntityMetrics<T>
 					entity={entity}
@@ -452,7 +406,7 @@ export default function K8sBaseDetailsContent<T>({
 				/>
 			)}
 			{customTabs?.map((tab) =>
-				effectiveView === tab.key ? (
+				selectedView === tab.key ? (
 					<Fragment key={tab.key}>
 						{tab.render({
 							entity,

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -28,9 +28,6 @@ import {
 	useInfraMonitoringOrderBy,
 	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringStatusFilter,
-	useInfraMonitoringPodStatusFilter,
-	useInfraMonitoringNodeReadinessFilter,
-	useInfraMonitoringContainerStatusFilter,
 } from '../hooks';
 import {
 	useInfraMonitoringFontSize,
@@ -42,7 +39,6 @@ import K8sOptionsSidePanel from './K8sOptionsSidePanel';
 import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
 import K8sTableToolbar from './K8sTableToolbar';
-import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
 import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
@@ -100,10 +96,6 @@ export type K8sBaseListProps<
 	detailsQueryKeyPrefix: string;
 };
 
-function emptyToUndefined<T>(values: T[]): T[] | undefined {
-	return values.length > 0 ? values : undefined;
-}
-
 export function K8sBaseList<
 	T extends K8sEntityData,
 	TItemKey extends string | SelectedItemParams = string,
@@ -127,9 +119,6 @@ export function K8sBaseList<
 	const [groupBy] = useInfraMonitoringGroupBy();
 	const [orderBy] = useInfraMonitoringOrderBy();
 	const [statusFilter] = useInfraMonitoringStatusFilter();
-	const [podStatusFilter] = useInfraMonitoringPodStatusFilter();
-	const [nodeReadinessFilter] = useInfraMonitoringNodeReadinessFilter();
-	const [containerStatusFilter] = useInfraMonitoringContainerStatusFilter();
 	const [selectedItemParams, setSelectedItemParams] =
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
@@ -181,9 +170,6 @@ export function K8sBaseList<
 			JSON.stringify(orderBy),
 			JSON.stringify(groupBy),
 			statusFilter,
-			podStatusFilter.join(),
-			nodeReadinessFilter.join(),
-			containerStatusFilter.join(),
 			...extraQueryKeyParts,
 		);
 	}, [
@@ -196,9 +182,6 @@ export function K8sBaseList<
 		orderBy,
 		groupBy,
 		statusFilter,
-		podStatusFilter,
-		nodeReadinessFilter,
-		containerStatusFilter,
 		extraQueryKeyParts,
 	]);
 
@@ -219,9 +202,6 @@ export function K8sBaseList<
 							statusFilter === 'active' || statusFilter === 'inactive'
 								? statusFilter
 								: undefined,
-						filterByPodStatus: emptyToUndefined(podStatusFilter),
-						filterByNodeReadiness: emptyToUndefined(nodeReadinessFilter),
-						filterByContainerStatus: emptyToUndefined(containerStatusFilter),
 					},
 					groupBy:
 						groupBy && groupBy.length > 0
@@ -321,8 +301,6 @@ export function K8sBaseList<
 					queryClient.setQueryData(detailQueryKey, { data: record });
 				}
 
-				// Opening from the list starts a fresh trail for the drawer's back control
-				resetDrawerHistory();
 				setSelectedItemParams(params);
 			}
 

frontend/src/container/InfraMonitoringK8sV2/Base/K8sDynamicList.tsx

@@ -1,9 +1,6 @@
 import { useMemo } from 'react';
 
-import {
-	useInfraMonitoringCategory,
-	useInfraMonitoringSelectedItemParams,
-} from '../hooks';
+import { useInfraMonitoringCategory } from '../hooks';
 import { getEntityConfig } from './entity.registry';
 import { K8sBaseList } from './K8sBaseList';
 import K8sBaseDetails from './K8sBaseDetails';
@@ -18,35 +15,27 @@ export function K8sDynamicList({
 	leftFilters,
 }: K8sDynamicListProps): JSX.Element | null {
 	const [selectedCategory] = useInfraMonitoringCategory();
-	const [selectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const config = useMemo(
 		() => getEntityConfig(selectedCategory),
 		[selectedCategory],
 	);
 
-	// A row opened from the drawer's overview tab belongs to another category
-	const drawerCategory = selectedItemParams.category ?? selectedCategory;
-	const drawerConfig = useMemo(
-		() => getEntityConfig(drawerCategory),
-		[drawerCategory],
-	);
-
 	if (!config) {
 		return null;
 	}
 
+	const { list, details } = config;
+
 	return (
 		<>
 			<K8sBaseList
-				{...config.list}
+				{...list}
 				controlListPrefix={controlListPrefix}
 				leftFilters={leftFilters}
 			/>
 
-			{/* No key: remounting would animate the drawer shut and open again
-			    for what is really a change of contents */}
-			{drawerConfig && <K8sBaseDetails {...drawerConfig.details} />}
+			<K8sBaseDetails {...details} />
 		</>
 	);
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -30,7 +30,6 @@ import {
 	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
-import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
 import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferencesStore';
@@ -220,8 +219,6 @@ export function K8sExpandedRow<
 				queryClient.setQueryData(detailQueryKey, { data: row });
 			}
 
-			// Opening from the list starts a fresh trail for the drawer's back control
-			resetDrawerHistory();
 			setSelectedItemParams(params);
 		},
 		[

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.backNavigation.test.tsx

@@ -1,152 +0,0 @@
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { InfraMonitoringEvents } from 'constants/events';
-import {
-	NuqsTestingAdapter,
-	type OnUrlUpdateFunction,
-} from 'nuqs/adapters/testing';
-import { act, render, waitFor } from 'tests/test-utils';
-
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-import K8sBaseDetails from '../K8sBaseDetails';
-import { useDrawerHistoryStore } from '../useDrawerHistoryStore';
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="mock-datetime" />,
-}));
-
-type TestEntity = { name: string };
-
-const mockEntity: TestEntity = { name: 'test-container' };
-
-const NODE_PARAMS = {
-	selectedItem: 'node-1',
-	category: InfraMonitoringEntity.NODES,
-	clusterName: null,
-	namespaceName: null,
-};
-
-/** What the drawer records before opening a resource from the node's overview */
-const NODE_ENTRY = {
-	params: NODE_PARAMS,
-	category: InfraMonitoringEntity.NODES,
-	label: 'node-1',
-	entity: { name: 'node-1' },
-	queryKeyPrefix: 'node',
-};
-
-function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
-	render(
-		<NuqsTestingAdapter
-			searchParams={{
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: 'container-1',
-			}}
-			onUrlUpdate={onUrlUpdate}
-		>
-			<K8sBaseDetails<TestEntity>
-				category={InfraMonitoringEntity.CONTAINERS}
-				eventCategory={InfraMonitoringEvents.Pod}
-				getSelectedItemExpression={(): string => "k8s.pod.uid = 'abc'"}
-				fetchEntityData={jest
-					.fn()
-					.mockResolvedValue({ data: mockEntity, error: null })}
-				getEntityName={(entity): string => entity.name}
-				getInitialLogTracesExpression={(): string => ''}
-				getInitialEventsExpression={(): string => ''}
-				metadataConfig={[
-					{ label: 'Name', getValue: (entity): string => entity.name },
-				]}
-				entityWidgetInfo={[{ title: 'CPU', yAxisUnit: 'percent' }]}
-				getEntityQueryPayload={jest.fn().mockReturnValue([])}
-				queryKeyPrefix="testContainer"
-			/>
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('K8sBaseDetails - back navigation', () => {
-	beforeEach(() => {
-		useDrawerHistoryStore.getState().reset();
-	});
-
-	it('closes rather than going back when opened from the list', async () => {
-		act(() => {
-			renderDrawer();
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-container').length).toBeGreaterThan(0);
-		});
-
-		expect(screen.queryByTestId('drawer-back-button')).not.toBeInTheDocument();
-		expect(screen.getByTestId('close-drawer-button')).toBeInTheDocument();
-	});
-
-	it('replaces the close control while there is somewhere to go back to', async () => {
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer();
-		});
-
-		const backButton = await screen.findByTestId('drawer-back-button');
-
-		// The destination is text rather than a tooltip, which a click would dismiss
-		expect(backButton).toHaveTextContent('Back to Node');
-		expect(backButton).toHaveAccessibleName('Back to Node: node-1');
-		expect(screen.queryByTestId('close-drawer-button')).not.toBeInTheDocument();
-	});
-
-	it('returns to the resource this one was opened from', async () => {
-		const user = userEvent.setup();
-		const onUrlUpdate = jest.fn();
-
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer(onUrlUpdate);
-		});
-
-		const backButton = await screen.findByTestId('drawer-back-button');
-		await user.click(backButton);
-
-		await waitFor(() => {
-			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
-			expect(
-				params.some(
-					(searchParams) =>
-						searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM) ===
-							'node-1' &&
-						searchParams.get(
-							INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY,
-						) === InfraMonitoringEntity.NODES,
-				),
-			).toBe(true);
-		});
-
-		// The trail is one step shorter, so a second back closes instead
-		expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
-	});
-
-	it('drops the trail when the drawer is dismissed', async () => {
-		const user = userEvent.setup();
-
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer();
-		});
-
-		await screen.findByTestId('drawer-back-button');
-		// Dismissing from outside the drawer, the way a click on the overlay does
-		await user.keyboard('{Escape}');
-
-		await waitFor(() => {
-			expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -21,7 +21,6 @@ type TestEntity = {
 	name: string;
 	namespace: string;
 	cluster: string;
-	meta?: Record<string, string>;
 };
 
 const mockEntity: TestEntity = {
@@ -30,22 +29,14 @@ const mockEntity: TestEntity = {
 	cluster: 'test-cluster',
 };
 
-/** The overview tab appears only for a resource whose meta relates it to others */
-const relatedEntity: TestEntity = {
-	...mockEntity,
-	meta: {
-		'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
-		'k8s.namespace.name': 'default',
-		'k8s.cluster.name': 'test-cluster',
-	},
-};
-
-function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
+function createBaseProps() {
 	return {
-		category,
+		category: InfraMonitoringEntity.PODS,
 		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
-		fetchEntityData: jest.fn().mockResolvedValue({ data: entity, error: null }),
+		fetchEntityData: jest
+			.fn()
+			.mockResolvedValue({ data: mockEntity, error: null }),
 		getEntityName: (e: TestEntity): string => e.name,
 		getInitialLogTracesExpression: (): string => 'k8s.pod.name = "test-pod"',
 		getInitialEventsExpression: (): string => 'k8s.pod.name = "test-pod"',
@@ -60,10 +51,7 @@ function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
 
 interface RenderOptions {
 	view?: string;
-	category?: InfraMonitoringEntity;
-	entity?: TestEntity;
 	tabsConfig?: {
-		showOverview?: boolean;
 		showMetrics?: boolean;
 		showLogs?: boolean;
 		showTraces?: boolean;
@@ -79,9 +67,6 @@ interface RenderOptions {
 
 function renderK8sBaseDetails({
 	view = VIEW_TYPES.METRICS,
-	// Volumes have no related resources, so they get no overview tab
-	category = InfraMonitoringEntity.VOLUMES,
-	entity = mockEntity,
 	tabsConfig,
 	customTabs,
 }: RenderOptions = {}) {
@@ -93,7 +78,7 @@ function renderK8sBaseDetails({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<K8sBaseDetails<TestEntity>
-				{...createBaseProps(category, entity)}
+				{...createBaseProps()}
 				tabsConfig={tabsConfig}
 				customTabs={customTabs}
 			/>
@@ -121,25 +106,6 @@ describe('K8sBaseDetails - Tab Validation', () => {
 		});
 	});
 
-	it('should land on the overview tab for a category with related resources', async () => {
-		act(() => {
-			renderK8sBaseDetails({
-				view: 'invalid-tab',
-				category: InfraMonitoringEntity.PODS,
-				entity: relatedEntity,
-				tabsConfig: { showOverview: true },
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Overview');
-		});
-	});
-
 	it('should reset to first available tab when METRICS is disabled and view is invalid', async () => {
 		act(() => {
 			renderK8sBaseDetails({

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -285,9 +285,6 @@ describe('K8sBaseList', () => {
 			expect(filters.filter).toStrictEqual({
 				expression: '',
 				filterByStatus: undefined,
-				filterByPodStatus: undefined,
-				filterByNodeReadiness: undefined,
-				filterByContainerStatus: undefined,
 			});
 			expect(filters.groupBy).toBeUndefined();
 			expect(filters.orderBy).toBeUndefined();
@@ -1671,61 +1668,3 @@ describe('K8sBaseList', () => {
 		});
 	});
 });
-
-describe('K8sBaseList status filters', () => {
-	const fetchListDataMock = jest.fn<
-		ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
-		Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
-	>();
-
-	function renderWithParams(queryParams: Record<string, string>): void {
-		fetchListDataMock.mockClear();
-		fetchListDataMock.mockResolvedValue({ data: [], total: 0, error: null });
-
-		renderComponent<TestItem>({
-			queryParams,
-			entity: InfraMonitoringEntity.PODS,
-			eventCategory: InfraMonitoringEvents.Pod,
-			fetchListData: fetchListDataMock,
-			tableColumns: createTestColumns(),
-			getRowKey: (row): string => row.id,
-			getItemKey: (row): string => row.id,
-		});
-	}
-
-	it('sends the statuses named in the URL', async () => {
-		renderWithParams({ podStatus: 'running,crashloopbackoff' });
-
-		await waitFor(() => {
-			expect(fetchListDataMock).toHaveBeenCalled();
-		});
-
-		const [filters] = fetchListDataMock.mock.calls[0];
-		expect(filters.filter.filterByPodStatus).toStrictEqual([
-			'running',
-			'crashloopbackoff',
-		]);
-	});
-
-	it('drops unknown statuses the API would reject', async () => {
-		renderWithParams({ podStatus: 'running,no_data,bogus' });
-
-		await waitFor(() => {
-			expect(fetchListDataMock).toHaveBeenCalled();
-		});
-
-		const [filters] = fetchListDataMock.mock.calls[0];
-		expect(filters.filter.filterByPodStatus).toStrictEqual(['running']);
-	});
-
-	it('omits the filter entirely when no status is selected', async () => {
-		renderWithParams({});
-
-		await waitFor(() => {
-			expect(fetchListDataMock).toHaveBeenCalled();
-		});
-
-		const [filters] = fetchListDataMock.mock.calls[0];
-		expect(filters.filter.filterByPodStatus).toBeUndefined();
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/relations.test.ts

@@ -1,154 +0,0 @@
-import { InfraMonitoringEntity } from '../../constants';
-import {
-	buildRelatedFilterExpression,
-	carryOverListFilters,
-	getRelatedCategories,
-} from '../relations';
-
-/** What /api/v2/infra_monitoring/pods returns as a pod's meta. */
-const POD_ATTRIBUTES = {
-	'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
-	'k8s.pod.name': 'checkout-7d9f',
-	'k8s.namespace.name': 'shop',
-	'k8s.cluster.name': 'prod',
-	'k8s.node.name': 'node-1',
-	'k8s.deployment.name': 'checkout',
-};
-
-const NODE_ATTRIBUTES = {
-	'k8s.node.name': 'node-1',
-	'k8s.cluster.name': 'prod',
-};
-
-describe('getRelatedCategories', () => {
-	it('offers every other kubernetes category, never itself', () => {
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.PODS, POD_ATTRIBUTES),
-		).toStrictEqual([
-			InfraMonitoringEntity.CONTAINERS,
-			InfraMonitoringEntity.DEPLOYMENTS,
-			InfraMonitoringEntity.STATEFULSETS,
-			InfraMonitoringEntity.DAEMONSETS,
-			InfraMonitoringEntity.JOBS,
-			InfraMonitoringEntity.VOLUMES,
-			InfraMonitoringEntity.NODES,
-			InfraMonitoringEntity.NAMESPACES,
-			InfraMonitoringEntity.CLUSTERS,
-		]);
-	});
-
-	it('scopes a category it has no relation to by what they share', () => {
-		// Not this pod's statefulsets, which it has none of: the ones beside it
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.STATEFULSETS,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop'");
-	});
-
-	it('falls back to the cluster where that is all two categories share', () => {
-		// Deployment metrics carry no node, so this relation is unexpressible
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.NODES,
-				InfraMonitoringEntity.DEPLOYMENTS,
-				NODE_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod'");
-	});
-
-	it('finds nothing for a host, which is not a kubernetes resource', () => {
-		// Host rows carry os.type and the host name, no kubernetes attribute
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.HOSTS, {
-				'host.name': 'ip-10-0-0-1',
-				'os.type': 'linux',
-			}),
-		).toStrictEqual([]);
-	});
-
-	it('lists pods first, which makes them the default for a node', () => {
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.NODES, NODE_ATTRIBUTES)[0],
-		).toBe(InfraMonitoringEntity.PODS);
-	});
-});
-
-describe('buildRelatedFilterExpression', () => {
-	it('scopes the pods of a node by the node, inside its cluster', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.NODES,
-				InfraMonitoringEntity.PODS,
-				NODE_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
-	});
-
-	it("scopes a pod's containers by the pod uid, which those rows carry", () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.CONTAINERS,
-				POD_ATTRIBUTES,
-			),
-		).toBe(
-			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.pod.uid = '63edbad0-398e-48e5-baba-f7ded7c73f1b'",
-		);
-	});
-
-	it("reaches a pod's deployment by name, the only key that endpoint has", () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.DEPLOYMENTS,
-				POD_ATTRIBUTES,
-			),
-		).toBe(
-			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.deployment.name = 'checkout'",
-		);
-	});
-
-	it('names the parent when the drawer resource belongs to it', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.NODES,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
-	});
-
-	it('asks a cluster list for the cluster alone', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.CLUSTERS,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod'");
-	});
-});
-
-describe('carryOverListFilters', () => {
-	it('keeps the clauses the target endpoint understands', () => {
-		expect(
-			carryOverListFilters(
-				"k8s.namespace.name = 'shop' AND k8s.node.condition_ready = true",
-				InfraMonitoringEntity.PODS,
-			),
-		).toBe("k8s.namespace.name = 'shop'");
-	});
-
-	it('drops a filter written against the source entity only', () => {
-		expect(
-			carryOverListFilters('k8s.node.cpu.usage > 0.5', InfraMonitoringEntity.PODS),
-		).toBe('');
-	});
-
-	it('returns nothing for an empty list filter', () => {
-		expect(carryOverListFilters('   ', InfraMonitoringEntity.PODS)).toBe('');
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/categoryIcons.tsx

@@ -1,48 +0,0 @@
-import type { ComponentProps } from 'react';
-import {
-	ArrowUpDown,
-	Bolt,
-	Box,
-	Boxes,
-	Computer,
-	Container,
-	FilePenLine,
-	Group,
-	HardDrive,
-	Server,
-	Workflow,
-} from '@signozhq/icons';
-
-import { InfraMonitoringEntity } from '../constants';
-
-/**
- * One icon per category, so the section tabs and the drawer that opens from
- * them show a resource the same way.
- */
-type IconSize = ComponentProps<typeof Container>['size'];
-
-const CATEGORY_ICONS: Record<InfraMonitoringEntity, typeof Container> = {
-	[InfraMonitoringEntity.HOSTS]: Server,
-	[InfraMonitoringEntity.PODS]: Container,
-	[InfraMonitoringEntity.CONTAINERS]: Box,
-	[InfraMonitoringEntity.NODES]: Workflow,
-	[InfraMonitoringEntity.NAMESPACES]: FilePenLine,
-	[InfraMonitoringEntity.CLUSTERS]: Boxes,
-	[InfraMonitoringEntity.DEPLOYMENTS]: Computer,
-	[InfraMonitoringEntity.STATEFULSETS]: ArrowUpDown,
-	[InfraMonitoringEntity.DAEMONSETS]: Group,
-	[InfraMonitoringEntity.JOBS]: Bolt,
-	[InfraMonitoringEntity.VOLUMES]: HardDrive,
-};
-
-export function CategoryIcon({
-	category,
-	size = 14,
-}: {
-	category: InfraMonitoringEntity;
-	size?: IconSize;
-}): JSX.Element {
-	const Icon = CATEGORY_ICONS[category];
-
-	return <Icon size={size} />;
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -3,11 +3,18 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
 import { TextNoData } from '../../../components/TextNoData';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import { Link } from 'react-router-dom';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
-import { InfraMonitoringEntity } from '../../../constants';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../../constants';
 import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
-import { buildK8sListNavigationUrl } from '../../utils';
 import styles from './EntityCountsSection.module.scss';
 import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
@@ -48,6 +55,70 @@ export function EntityCountsSection<T>({
 		closeDrawer();
 	};
 
+	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
+		const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+		const compositeQuery = {
+			...defaultQuery,
+			id: uuid(),
+			builder: {
+				...defaultQuery.builder,
+				queryData: defaultQuery.builder.queryData.map((query) => ({
+					...query,
+					filter: { expression: filterExpression },
+					filters: { items: [], op: 'AND' as const },
+				})),
+			},
+		};
+
+		const urlParams = new URLSearchParams();
+		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+		urlParams.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		const currentSearchParams = new URLSearchParams(window.location.search);
+		const detailRelativeTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+		);
+		const detailStartTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+		);
+		const detailEndTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+		);
+
+		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
+		const listStartTime = currentSearchParams.get(QueryParams.startTime);
+		const listEndTime = currentSearchParams.get(QueryParams.endTime);
+
+		if (listRelativeTime) {
+			urlParams.set(QueryParams.relativeTime, listRelativeTime);
+		} else if (listStartTime && listEndTime) {
+			urlParams.set(QueryParams.startTime, listStartTime);
+			urlParams.set(QueryParams.endTime, listEndTime);
+		}
+
+		if (detailRelativeTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+				detailRelativeTime,
+			);
+		} else if (detailStartTime && detailEndTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+				detailStartTime,
+			);
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+				detailEndTime,
+			);
+		}
+
+		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+	};
+
 	return (
 		<div className={styles.countsContainer}>
 			{countsConfig.map((config) => (
@@ -76,7 +147,7 @@ export function EntityCountsSection<T>({
 						<TextNoData type="typography" className={styles.countValue} />
 					)}
 					<Link
-						to={buildK8sListNavigationUrl(config.targetCategory, filterExpression)}
+						to={buildNavigationUrl(config.targetCategory)}
 						onClick={(): void => handleCardNavigate(config.label)}
 						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
 					>

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityStatusFilter/EntityStatusFilter.module.scss

@@ -1,21 +0,0 @@
-.statusFilterGroup {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.statusFilter {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.statusFilterLabel {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
-	white-space: nowrap;
-}
-
-.statusFilterControl {
-	min-width: 180px;
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityStatusFilter/EntityStatusFilter.tsx

@@ -1,121 +0,0 @@
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import {
-	FILTERABLE_CONTAINER_STATUSES,
-	FILTERABLE_NODE_CONDITIONS,
-	FILTERABLE_POD_STATUSES,
-	useInfraMonitoringCategory,
-	useInfraMonitoringContainerStatusFilter,
-	useInfraMonitoringNodeReadinessFilter,
-	useInfraMonitoringPodStatusFilter,
-} from 'container/InfraMonitoringK8sV2/hooks';
-
-import StatusMultiSelect from './StatusMultiSelect';
-import { StatusFilterKind } from '../StatusFilterCells/useStatusFilter';
-import {
-	CONTAINER_STATUS_FILTER_OPTIONS,
-	NODE_READINESS_FILTER_OPTIONS,
-	POD_STATUS_FILTER_OPTIONS,
-} from './statusFilterOptions';
-
-import styles from './EntityStatusFilter.module.scss';
-
-interface StatusFilterSpec {
-	kind: StatusFilterKind;
-	/** Matches the entity's own status column header, so filter and column agree. */
-	label: string;
-}
-
-const POD_STATUS_SPEC: StatusFilterSpec = { kind: 'pod', label: 'Pod Status' };
-const NODE_READINESS_SPEC: StatusFilterSpec = {
-	kind: 'node',
-	label: 'Node Readiness',
-};
-
-/**
- * Which secondary status filters each list accepts — mirrors the filter structs in
- * pkg/types/inframonitoringtypes. Volumes take none, so they are absent here.
- */
-const STATUS_FILTERS_BY_ENTITY: Partial<
-	Record<InfraMonitoringEntity, StatusFilterSpec[]>
-> = {
-	[InfraMonitoringEntity.PODS]: [{ kind: 'pod', label: 'Status' }],
-	[InfraMonitoringEntity.CONTAINERS]: [{ kind: 'container', label: 'Status' }],
-	[InfraMonitoringEntity.NODES]: [NODE_READINESS_SPEC, POD_STATUS_SPEC],
-	[InfraMonitoringEntity.CLUSTERS]: [NODE_READINESS_SPEC, POD_STATUS_SPEC],
-	[InfraMonitoringEntity.NAMESPACES]: [POD_STATUS_SPEC],
-	[InfraMonitoringEntity.DEPLOYMENTS]: [POD_STATUS_SPEC],
-	[InfraMonitoringEntity.DAEMONSETS]: [POD_STATUS_SPEC],
-	[InfraMonitoringEntity.STATEFULSETS]: [POD_STATUS_SPEC],
-	[InfraMonitoringEntity.JOBS]: [POD_STATUS_SPEC],
-};
-
-const FILTER_KEY_BY_KIND: Record<StatusFilterKind, string> = {
-	pod: 'pod_status',
-	node: 'node_readiness',
-	container: 'container_status',
-};
-
-const OPTIONS_BY_KIND = {
-	pod: POD_STATUS_FILTER_OPTIONS,
-	node: NODE_READINESS_FILTER_OPTIONS,
-	container: CONTAINER_STATUS_FILTER_OPTIONS,
-};
-
-const ALL_VALUES_BY_KIND = {
-	pod: FILTERABLE_POD_STATUSES,
-	node: FILTERABLE_NODE_CONDITIONS,
-	container: FILTERABLE_CONTAINER_STATUSES,
-};
-
-function EntityStatusFilter(): JSX.Element | null {
-	const [category] = useInfraMonitoringCategory();
-	const [podStatus, setPodStatus] = useInfraMonitoringPodStatusFilter();
-	const [nodeReadiness, setNodeReadiness] =
-		useInfraMonitoringNodeReadinessFilter();
-	const [containerStatus, setContainerStatus] =
-		useInfraMonitoringContainerStatusFilter();
-
-	const specs = STATUS_FILTERS_BY_ENTITY[category as InfraMonitoringEntity];
-	if (!specs) {
-		return null;
-	}
-
-	const selectedByKind: Record<StatusFilterKind, string[]> = {
-		pod: podStatus,
-		node: nodeReadiness,
-		container: containerStatus,
-	};
-
-	const setterByKind: Record<StatusFilterKind, (next: string[]) => void> = {
-		pod: (next): void =>
-			void setPodStatus(next.length > 0 ? (next as typeof podStatus) : null),
-		node: (next): void =>
-			void setNodeReadiness(
-				next.length > 0 ? (next as typeof nodeReadiness) : null,
-			),
-		container: (next): void =>
-			void setContainerStatus(
-				next.length > 0 ? (next as typeof containerStatus) : null,
-			),
-	};
-
-	return (
-		<div className={styles.statusFilterGroup}>
-			{specs.map((spec) => (
-				<StatusMultiSelect
-					key={spec.kind}
-					label={spec.label}
-					entity={category as InfraMonitoringEntity}
-					filterKey={FILTER_KEY_BY_KIND[spec.kind]}
-					options={OPTIONS_BY_KIND[spec.kind]}
-					allValues={ALL_VALUES_BY_KIND[spec.kind]}
-					selected={selectedByKind[spec.kind]}
-					onChange={setterByKind[spec.kind]}
-					testId={`${spec.kind}-status-filter`}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default EntityStatusFilter;

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityStatusFilter/StatusMultiSelect.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react';
-import { CustomMultiSelect } from 'components/NewSelect';
-import OverflowValuesTooltip from 'components/OverflowValuesTooltip/OverflowValuesTooltip';
-import { OptionData } from 'components/NewSelect/types';
-import { findOptionLabel } from 'components/NewSelect/utils';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { useInfraMonitoringPageListing } from 'container/InfraMonitoringK8sV2/hooks';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { logInfraFilterCustomizedEvent } from '../../events';
-
-import styles from './EntityStatusFilter.module.scss';
-
-interface StatusMultiSelectProps<T extends string> {
-	label: string;
-	entity: InfraMonitoringEntity;
-	/** Key reported to analytics for this control, e.g. `pod_status`. */
-	filterKey: string;
-	options: OptionData[];
-	allValues: T[];
-	selected: T[];
-	onChange: (next: T[]) => void;
-	testId: string;
-}
-
-function StatusMultiSelect<T extends string>({
-	label,
-	entity,
-	filterKey,
-	options,
-	allValues,
-	selected,
-	onChange,
-	testId,
-}: StatusMultiSelectProps<T>): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-
-	// No selection means no filter, which is every status — so show ALL as checked
-	// rather than an empty control that reads as "nothing matches".
-	const value = useMemo(
-		() => (selected.length > 0 ? selected : allValues),
-		[selected, allValues],
-	);
-
-	const handleChange = (next: string[] | string | undefined): void => {
-		const values = (Array.isArray(next) ? next : [next])
-			.filter((item): item is string => Boolean(item))
-			.filter((item): item is T => allValues.includes(item as T));
-
-		// Selecting everything is the same request as selecting nothing; store the
-		// empty form so the param drops out of the URL.
-		const isAll = values.length === allValues.length;
-		onChange(isAll ? [] : values);
-
-		logInfraFilterCustomizedEvent(
-			entity,
-			'status_filter',
-			currentQuery.builder.queryData[0]?.filter?.expression || '',
-			isAll ? [] : [filterKey],
-		);
-	};
-
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-
-	return (
-		<div className={styles.statusFilter}>
-			<span className={styles.statusFilterLabel}>{label}</span>
-			<CustomMultiSelect
-				className={styles.statusFilterControl}
-				data-testid={testId}
-				options={options}
-				value={value}
-				showSearch
-				showLabels
-				preserveOptionOrder
-				maxTagCount={1}
-				maxTagTextLength={12}
-				maxTagPlaceholder={(omitted): JSX.Element => (
-					<OverflowValuesTooltip
-						values={omitted.map((item) => {
-							// The omitted items carry the raw value as their label, since
-							// sections put the real one a level down.
-							const value = String(item.value ?? '');
-							return findOptionLabel(options, value) ?? value;
-						})}
-					/>
-				)}
-				placeholder={label}
-				onChange={(next): void => {
-					handleChange(next);
-					void setCurrentPage(1);
-				}}
-				onClear={(): void => {
-					onChange([]);
-					void setCurrentPage(1);
-				}}
-			/>
-		</div>
-	);
-}
-
-export default StatusMultiSelect;

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityStatusFilter/statusFilterOptions.ts

@@ -1,64 +0,0 @@
-import { BadgeColor } from '@signozhq/ui/badge';
-import {
-	InframonitoringtypesContainerStatusDTO,
-	InframonitoringtypesNodeConditionDTO,
-	InframonitoringtypesPodStatusDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { OptionData } from 'components/NewSelect/types';
-
-import {
-	FILTERABLE_CONTAINER_STATUSES,
-	FILTERABLE_NODE_CONDITIONS,
-	FILTERABLE_POD_STATUSES,
-} from '../../../hooks';
-import { POD_STATUS_COLORS, POD_STATUS_LABELS } from '../../../commonUtils';
-import {
-	CONTAINER_STATUS_COLORS,
-	CONTAINER_STATUS_LABELS,
-} from '../../../Containers/utils';
-import { NODE_CONDITION_LABELS } from '../../../Nodes/utils';
-
-const ERROR_BADGE_COLOR: BadgeColor = 'cherry';
-
-/**
- * Splits statuses into the two sections the dropdown renders. The badge colour is
- * already the severity signal in the table, so reusing it keeps the sections and
- * the status column from drifting apart.
- */
-function toSectionedOptions<T extends string>(
-	values: T[],
-	labels: Record<T, string>,
-	colors: Record<T, BadgeColor>,
-): OptionData[] {
-	const toOption = (value: T): OptionData => ({
-		label: labels[value],
-		value,
-	});
-
-	const lifecycle = values.filter(
-		(value) => colors[value] !== ERROR_BADGE_COLOR,
-	);
-	const errors = values.filter((value) => colors[value] === ERROR_BADGE_COLOR);
-
-	return [
-		{ label: 'Lifecycle', options: lifecycle.map(toOption) },
-		{ label: 'Error status', options: errors.map(toOption) },
-	].filter((section) => section.options.length > 0);
-}
-
-export const POD_STATUS_FILTER_OPTIONS = toSectionedOptions(
-	FILTERABLE_POD_STATUSES as InframonitoringtypesPodStatusDTO[],
-	POD_STATUS_LABELS,
-	POD_STATUS_COLORS,
-);
-
-export const CONTAINER_STATUS_FILTER_OPTIONS = toSectionedOptions(
-	FILTERABLE_CONTAINER_STATUSES as InframonitoringtypesContainerStatusDTO[],
-	CONTAINER_STATUS_LABELS,
-	CONTAINER_STATUS_COLORS,
-);
-
-/** Only two values, so sections would add a heading per row. */
-export const NODE_READINESS_FILTER_OPTIONS: OptionData[] = (
-	FILTERABLE_NODE_CONDITIONS as InframonitoringtypesNodeConditionDTO[]
-).map((value) => ({ label: NODE_CONDITION_LABELS[value], value }));

frontend/src/container/InfraMonitoringK8sV2/Base/components/StatusFilterCells/ClickableStatusBadge.module.scss

@@ -1,11 +0,0 @@
-.statusBadgeButton {
-	display: inline-flex;
-	padding: 0;
-	background: none;
-	border: none;
-	cursor: pointer;
-	font: inherit;
-
-	// The badge sets its own cursor, so the button's never reaches it.
-	--badge-cursor: pointer;
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/StatusFilterCells/ClickableStatusBadge.tsx

@@ -1,57 +0,0 @@
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
-import TanStackTable from 'components/TanStackTableView';
-
-import { StatusFilterKind, useStatusFilter } from './useStatusFilter';
-
-import styles from './ClickableStatusBadge.module.scss';
-
-interface ClickableStatusBadgeProps {
-	color: BadgeColor;
-	label: string;
-	/** The status this badge stands for, applied as the filter when clicked. */
-	status: string;
-	kind: StatusFilterKind;
-	rowId: string;
-}
-
-function ClickableStatusBadge({
-	color,
-	label,
-	status,
-	kind,
-	rowId,
-}: ClickableStatusBadgeProps): JSX.Element {
-	const { selected, setStatusFilter } = useStatusFilter(kind);
-
-	// Clicking the status the list is already narrowed to has nothing left to
-	// narrow, so it undoes the filter instead — but only when this status is the
-	// whole filter, else it would silently drop the other selected statuses.
-	const isWholeFilter = selected.length === 1 && selected[0] === status;
-
-	return (
-		<TanStackTable.HoverTooltip
-			rowId={rowId}
-			title={isWholeFilter ? `Clear ${label} filter` : `Filter by ${label}`}
-			arrow
-			align="start"
-			delayDuration={300}
-		>
-			<button
-				type="button"
-				className={styles.statusBadgeButton}
-				data-testid={`status-badge-${status}`}
-				onClick={(e): void => {
-					e.preventDefault();
-					e.stopPropagation();
-					setStatusFilter(isWholeFilter ? [] : [status]);
-				}}
-			>
-				<Badge color={color} variant="outline">
-					{label}
-				</Badge>
-			</button>
-		</TanStackTable.HoverTooltip>
-	);
-}
-
-export default ClickableStatusBadge;

frontend/src/container/InfraMonitoringK8sV2/Base/components/StatusFilterCells/ClickableStatusCounts.tsx

@@ -1,33 +0,0 @@
-import {
-	GroupedStatusCounts,
-	StatusCountItem,
-} from 'container/InfraMonitoringK8sV2/components';
-
-import { StatusFilterKind, useStatusFilter } from './useStatusFilter';
-
-interface ClickableStatusCountsProps {
-	items: StatusCountItem[];
-	rowId: string;
-	kind: StatusFilterKind;
-	showZeroValues?: boolean;
-}
-
-function ClickableStatusCounts({
-	items,
-	rowId,
-	kind,
-	showZeroValues,
-}: ClickableStatusCountsProps): JSX.Element {
-	const { setStatusFilter } = useStatusFilter(kind);
-
-	return (
-		<GroupedStatusCounts
-			items={items}
-			rowId={rowId}
-			showZeroValues={showZeroValues}
-			onSelectStatuses={setStatusFilter}
-		/>
-	);
-}
-
-export default ClickableStatusCounts;

frontend/src/container/InfraMonitoringK8sV2/Base/components/StatusFilterCells/__tests__/ClickableStatusBadge.test.tsx

@@ -1,67 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NuqsTestingAdapter, UrlUpdateEvent } from 'nuqs/adapters/testing';
-
-import ClickableStatusBadge from '../ClickableStatusBadge';
-
-function renderBadge(
-	searchParams: Record<string, string>,
-	onUrlUpdate: jest.Mock<void, [UrlUpdateEvent]>,
-): void {
-	render(
-		<NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
-			<ClickableStatusBadge
-				color="cherry"
-				label="CrashLoopBackOff"
-				status="crashloopbackoff"
-				kind="pod"
-				rowId="row-1"
-			/>
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('ClickableStatusBadge', () => {
-	const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-	beforeEach(() => {
-		onUrlUpdate.mockClear();
-	});
-
-	it('filters by its status when nothing is filtered', async () => {
-		renderBadge({}, onUrlUpdate);
-
-		await userEvent.click(screen.getByTestId('status-badge-crashloopbackoff'));
-
-		await waitFor(() => {
-			expect(onUrlUpdate.mock.calls[0][0].searchParams.get('podStatus')).toBe(
-				'crashloopbackoff',
-			);
-		});
-	});
-
-	it('clears the filter when its status is the whole filter', async () => {
-		renderBadge({ podStatus: 'crashloopbackoff' }, onUrlUpdate);
-
-		await userEvent.click(screen.getByTestId('status-badge-crashloopbackoff'));
-
-		await waitFor(() => {
-			expect(
-				onUrlUpdate.mock.calls[0][0].searchParams.get('podStatus'),
-			).toBeNull();
-		});
-	});
-
-	it('still filters when its status is only part of the filter', async () => {
-		// Clearing here would silently drop oomkilled, which the user also picked.
-		renderBadge({ podStatus: 'crashloopbackoff,oomkilled' }, onUrlUpdate);
-
-		await userEvent.click(screen.getByTestId('status-badge-crashloopbackoff'));
-
-		await waitFor(() => {
-			expect(onUrlUpdate.mock.calls[0][0].searchParams.get('podStatus')).toBe(
-				'crashloopbackoff',
-			);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/components/StatusFilterCells/useStatusFilter.ts

@@ -1,60 +0,0 @@
-import { useCallback } from 'react';
-import {
-	InframonitoringtypesContainerStatusDTO,
-	InframonitoringtypesNodeConditionDTO,
-	InframonitoringtypesPodStatusDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	useInfraMonitoringContainerStatusFilter,
-	useInfraMonitoringNodeReadinessFilter,
-	useInfraMonitoringPageListing,
-	useInfraMonitoringPodStatusFilter,
-} from '../../../hooks';
-
-export type StatusFilterKind = 'pod' | 'node' | 'container';
-
-interface StatusFilter {
-	selected: string[];
-	/**
-	 * Replaces the filter rather than adding to it — a click on a status means
-	 * "show me these", not "add these to what I already have". Empty clears it.
-	 */
-	setStatusFilter: (statuses: string[]) => void;
-}
-
-export function useStatusFilter(kind: StatusFilterKind): StatusFilter {
-	const [podStatus, setPodStatus] = useInfraMonitoringPodStatusFilter();
-	const [nodeStatus, setNodeStatus] = useInfraMonitoringNodeReadinessFilter();
-	const [containerStatus, setContainerStatus] =
-		useInfraMonitoringContainerStatusFilter();
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-
-	const setStatusFilter = useCallback(
-		(statuses: string[]): void => {
-			const next = statuses.length > 0 ? statuses : null;
-
-			if (kind === 'pod') {
-				void setPodStatus(next as InframonitoringtypesPodStatusDTO[] | null);
-			} else if (kind === 'node') {
-				void setNodeStatus(next as InframonitoringtypesNodeConditionDTO[] | null);
-			} else {
-				void setContainerStatus(
-					next as InframonitoringtypesContainerStatusDTO[] | null,
-				);
-			}
-
-			void setCurrentPage(1);
-		},
-		[kind, setPodStatus, setNodeStatus, setContainerStatus, setCurrentPage],
-	);
-
-	let selected: string[] = containerStatus;
-	if (kind === 'pod') {
-		selected = podStatus;
-	} else if (kind === 'node') {
-		selected = nodeStatus;
-	}
-
-	return { selected, setStatusFilter };
-}

frontend/src/container/InfraMonitoringK8sV2/Base/events.ts

@@ -6,7 +6,7 @@ import { isCustomTimeRange } from 'store/globalTime';
 
 export function logInfraFilterCustomizedEvent(
 	entityType: InfraMonitoringEntity,
-	source: 'quick_filter' | 'search' | 'host_status_toggle' | 'status_filter',
+	source: 'quick_filter' | 'search' | 'host_status_toggle',
 	expression: string,
 	extraKeys?: string[],
 ): void {
@@ -97,11 +97,7 @@ export function logInfraExplorerNavigatedEvent(params: {
 		| 'logs_explorer'
 		| 'traces_explorer'
 		| 'k8s_list';
-	source:
-		| 'chart_compass_icon'
-		| 'tab_cta_button'
-		| 'stats_card'
-		| 'overview_cta';
+	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
 	tab: string;
 	sourceKey: string | null;
 	drawerDurationMsAtNavigation: number | null;

frontend/src/container/InfraMonitoringK8sV2/Base/relations.ts

@@ -1,265 +0,0 @@
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { extractQueryPairs } from 'utils/queryContextUtils';
-
-import {
-	INFRA_MONITORING_ATTR_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-
-/** The attribute that names one record of a category. */
-const PRIMARY_KEY: Record<InfraMonitoringEntity, string> = {
-	[InfraMonitoringEntity.CLUSTERS]: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	[InfraMonitoringEntity.NAMESPACES]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-	[InfraMonitoringEntity.NODES]: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-	[InfraMonitoringEntity.CONTAINERS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
-	[InfraMonitoringEntity.DEPLOYMENTS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-	[InfraMonitoringEntity.STATEFULSETS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-	[InfraMonitoringEntity.DAEMONSETS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-	[InfraMonitoringEntity.JOBS]: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-	[InfraMonitoringEntity.VOLUMES]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	[InfraMonitoringEntity.HOSTS]: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
-};
-
-/**
- * Attributes each list endpoint can be filtered by, broadest first so a built
- * expression reads cluster to container. Only keys the category's metrics
- * actually carry belong here.
- */
-const FILTERABLE_KEYS: Record<InfraMonitoringEntity, string[]> = {
-	[InfraMonitoringEntity.CLUSTERS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	],
-	[InfraMonitoringEntity.NODES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-	],
-	[InfraMonitoringEntity.NAMESPACES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-	],
-	[InfraMonitoringEntity.DEPLOYMENTS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-	],
-	[InfraMonitoringEntity.STATEFULSETS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-	],
-	[InfraMonitoringEntity.DAEMONSETS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-	],
-	[InfraMonitoringEntity.JOBS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-	],
-	[InfraMonitoringEntity.VOLUMES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	],
-	[InfraMonitoringEntity.PODS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-	],
-	[InfraMonitoringEntity.CONTAINERS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
-	],
-	[InfraMonitoringEntity.HOSTS]: [],
-};
-
-/** Dropdown order: what a resource usually contains, then what contains it. */
-const DISPLAY_ORDER: InfraMonitoringEntity[] = [
-	InfraMonitoringEntity.PODS,
-	InfraMonitoringEntity.CONTAINERS,
-	InfraMonitoringEntity.DEPLOYMENTS,
-	InfraMonitoringEntity.STATEFULSETS,
-	InfraMonitoringEntity.DAEMONSETS,
-	InfraMonitoringEntity.JOBS,
-	InfraMonitoringEntity.VOLUMES,
-	InfraMonitoringEntity.NODES,
-	InfraMonitoringEntity.NAMESPACES,
-	InfraMonitoringEntity.CLUSTERS,
-];
-
-export type EntityAttributes = Record<string, string>;
-
-/** The attribute a category's display name belongs under. */
-const NAME_KEY: Partial<Record<InfraMonitoringEntity, string>> = {
-	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-};
-
-export function getEntityNameAttributeKey(
-	category: InfraMonitoringEntity,
-): string {
-	return NAME_KEY[category] ?? PRIMARY_KEY[category];
-}
-
-function matchingKeys(
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string[] {
-	return FILTERABLE_KEYS[target].filter((key) => !!attributes[key]);
-}
-
-/**
- * The attribute that ties a target to the drawer's resource: the resource
- * itself when the target's records belong to it (the containers of this pod),
- * otherwise the target's own name as the resource knows it (the node this pod
- * runs on). Null when neither holds, which leaves the target scoped only by
- * the ancestors the two share.
- */
-function relationKey(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string | null {
-	if (target === source) {
-		return null;
-	}
-
-	const keys = matchingKeys(target, attributes);
-
-	if (keys.includes(PRIMARY_KEY[source])) {
-		return PRIMARY_KEY[source];
-	}
-
-	return keys.includes(PRIMARY_KEY[target]) ? PRIMARY_KEY[target] : null;
-}
-
-/**
- * Every category the drawer's resource can scope a list of, which for a
- * kubernetes resource is all of them: where no closer relation exists the two
- * still share a cluster. A target is left out only when nothing is shared at
- * all, so a list is never asked for unscoped.
- */
-export function getRelatedCategories(
-	source: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): InfraMonitoringEntity[] {
-	return DISPLAY_ORDER.filter(
-		(target) =>
-			target !== source &&
-			buildRelatedFilterClauses(source, target, attributes).length > 0,
-	);
-}
-
-/**
- * Cluster and namespace ride along with the relation itself, the way other
- * observability tools scope these lists: a pod's deployment is read as that
- * deployment, in that namespace, in that cluster.
- */
-const SCOPE_KEYS = [
-	INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-];
-
-export interface RelatedFilterClause {
-	key: string;
-	value: string;
-}
-
-/**
- * Scope clauses, broadest first. The last carries the relation where one
- * exists; without one the list is scoped to the shared ancestors, which reads
- * as "beside this resource" rather than "belonging to it".
- */
-export function buildRelatedFilterClauses(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): RelatedFilterClause[] {
-	const key = relationKey(source, target, attributes);
-
-	const scope = SCOPE_KEYS.filter(
-		(scopeKey) =>
-			scopeKey !== key &&
-			FILTERABLE_KEYS[target].includes(scopeKey) &&
-			!!attributes[scopeKey],
-	);
-
-	return (key ? [...scope, key] : scope).map((clauseKey) => ({
-		key: clauseKey,
-		value: attributes[clauseKey] as string,
-	}));
-}
-
-export function formatRelatedFilterClause(clause: RelatedFilterClause): string {
-	return `${clause.key} = ${formatValueForExpression(clause.value)}`;
-}
-
-export function buildRelatedFilterExpression(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string {
-	return buildRelatedFilterClauses(source, target, attributes)
-		.map(formatRelatedFilterClause)
-		.join(' AND ');
-}
-
-export function resolveRelatedCategory(
-	source: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-	requested: string | null,
-): InfraMonitoringEntity | null {
-	const related = getRelatedCategories(source, attributes);
-	const match = related.find((target) => target === requested);
-
-	return match ?? related[0] ?? null;
-}
-
-export function carryOverListFilters(
-	expression: string,
-	target: InfraMonitoringEntity,
-): string {
-	if (!expression.trim()) {
-		return '';
-	}
-
-	const supported = new Set(FILTERABLE_KEYS[target]);
-
-	return extractQueryPairs(expression)
-		.filter((pair) => supported.has(pair.key))
-		.map((pair) => {
-			const start = pair.position.negationStart ?? pair.position.keyStart;
-			const lastValue = pair.valuesPosition?.[pair.valuesPosition.length - 1];
-			const end =
-				lastValue?.end ?? pair.position.valueEnd ?? pair.position.operatorEnd;
-
-			return expression.slice(start, end + 1).trim();
-		})
-		.filter(Boolean)
-		.join(' AND ');
-}

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -1,9 +1,4 @@
 import { ReactNode } from 'react';
-import {
-	InframonitoringtypesContainerStatusDTO,
-	InframonitoringtypesNodeConditionDTO,
-	InframonitoringtypesPodStatusDTO,
-} from 'api/generated/services/sigNoz.schemas';
 import {
 	CustomTimeType,
 	Time,
@@ -22,9 +17,6 @@ export type K8sBaseFilters = {
 	filter: {
 		expression: string;
 		filterByStatus?: 'active' | 'inactive' | '';
-		filterByPodStatus?: InframonitoringtypesPodStatusDTO[];
-		filterByNodeReadiness?: InframonitoringtypesNodeConditionDTO[];
-		filterByContainerStatus?: InframonitoringtypesContainerStatusDTO[];
 	};
 	groupBy?: Array<{ name: string }>;
 	offset?: number;
@@ -83,8 +75,6 @@ export type GetEntityQueryPayload<T> = (
 ) => GetQueryResultsProps[];
 
 export interface K8sDetailsTabsConfig {
-	/** Declared by categories whose resources relate to others; see relations.ts */
-	showOverview?: boolean;
 	showMetrics?: boolean;
 	showLogs?: boolean;
 	showTraces?: boolean;
@@ -151,10 +141,6 @@ export interface K8sBaseDetailsContentProps<T> {
 	customTabs?: K8sDetailsCustomTab<T>[];
 	logsAndTracesInitialExpression: string;
 	eventsInitialExpression: string;
-	/** The drawer entity's own attributes, used to find and scope related resources */
-	entityAttributes: Record<string, string>;
-	/** Name of the drawer entity, for the back control of a resource opened from it */
-	entityName: string;
 }
 
 // Aliases for backward compatibility

frontend/src/container/InfraMonitoringK8sV2/Base/useDrawerHistoryStore.ts

@@ -1,56 +0,0 @@
-import { create } from 'zustand';
-
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-
-export interface DrawerHistoryEntry {
-	params: SelectedItemParams;
-	/** Category of the resource that was open, which the back control names */
-	category: InfraMonitoringEntity;
-	/** Name of that resource, shown on hover */
-	label: string;
-	/**
-	 * The record the drawer was showing, and the prefix of the query that holds
-	 * it, so stepping back renders from it instead of fetching again.
-	 */
-	entity: unknown;
-	queryKeyPrefix: string;
-}
-
-export interface IDrawerHistoryStore {
-	entries: DrawerHistoryEntry[];
-	push: (entry: DrawerHistoryEntry) => void;
-	pop: () => DrawerHistoryEntry | null;
-	reset: () => void;
-}
-
-/**
- * The trail left by opening one resource from another's overview tab, so the
- * drawer can step back through it instead of only closing.
- */
-export const useDrawerHistoryStore = create<IDrawerHistoryStore>()(
-	(set, get) => ({
-		entries: [],
-		push: (entry): void => set({ entries: [...get().entries, entry] }),
-		pop: (): DrawerHistoryEntry | null => {
-			const { entries } = get();
-			const previous = entries[entries.length - 1] ?? null;
-
-			if (previous) {
-				set({ entries: entries.slice(0, -1) });
-			}
-
-			return previous;
-		},
-		reset: (): void => set({ entries: [] }),
-	}),
-);
-
-export const resetDrawerHistory = (): void =>
-	useDrawerHistoryStore.getState().reset();
-
-export const pushDrawerHistory = (entry: DrawerHistoryEntry): void =>
-	useDrawerHistoryStore.getState().push(entry);
-
-export const getDrawerHistoryDepth = (): number =>
-	useDrawerHistoryStore.getState().entries.length;

frontend/src/container/InfraMonitoringK8sV2/Base/usePrimeEntityDetails.ts

@@ -1,47 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useGlobalTimeStore } from 'store/globalTime';
-
-import { SelectedItemParams } from '../hooks';
-
-interface PrimeEntityDetailsParams {
-	params: SelectedItemParams;
-	queryKeyPrefix: string;
-	entity: unknown;
-}
-
-/**
- * Seeds the drawer's entity query with a record already in hand, so navigating
- * between resources renders straight away instead of passing through a loading
- * state. The list page does the same on a row click.
- */
-export function usePrimeEntityDetails(): (
-	params: PrimeEntityDetailsParams,
-) => void {
-	const queryClient = useQueryClient();
-	const selectedTime = useGlobalTimeStore((store) => store.selectedTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(store) => store.getAutoRefreshQueryKey,
-	);
-
-	return useCallback(
-		({ params, queryKeyPrefix, entity }): void => {
-			if (!queryKeyPrefix || !entity) {
-				return;
-			}
-
-			queryClient.setQueryData(
-				getAutoRefreshQueryKey(
-					selectedTime,
-					`${queryKeyPrefix}EntityDetails`,
-					params.selectedItem,
-					params.clusterName,
-					params.namespaceName,
-					params.containerName,
-				),
-				{ data: entity },
-			);
-		},
-		[queryClient, selectedTime, getAutoRefreshQueryKey],
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/utils.tsx

@@ -7,16 +7,7 @@ import {
 	formatValueForExpression,
 } from 'components/QueryBuilderV2/utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
-import {
-	INFRA_MONITORING_ATTR_KEYS,
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from 'container/InfraMonitoringK8sV2/constants';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
+import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 
 export function sortByColumnOrder<T>(
 	items: T[],
@@ -187,74 +178,3 @@ export function buildExpressionFromSelectedItemParams(
 
 	return clauses.join(' AND ');
 }
-
-/**
- * Link to the k8s list page for `targetCategory`, pre-filtered by `filterExpression`
- * and carrying whichever time range (list or drawer) the current URL holds.
- */
-export function buildK8sListNavigationUrl(
-	targetCategory: InfraMonitoringEntity,
-	filterExpression: string,
-): string {
-	const defaultQuery = initialQueriesMap[DataSource.METRICS];
-
-	const compositeQuery = {
-		...defaultQuery,
-		id: uuid(),
-		builder: {
-			...defaultQuery.builder,
-			queryData: defaultQuery.builder.queryData.map((query) => ({
-				...query,
-				filter: { expression: filterExpression },
-				filters: { items: [], op: 'AND' as const },
-			})),
-		},
-	};
-
-	const urlParams = new URLSearchParams();
-	urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
-	urlParams.set(
-		QueryParams.compositeQuery,
-		encodeURIComponent(JSON.stringify(compositeQuery)),
-	);
-
-	const currentSearchParams = new URLSearchParams(window.location.search);
-	const detailRelativeTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-	);
-	const detailStartTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-	);
-	const detailEndTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-	);
-
-	const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
-	const listStartTime = currentSearchParams.get(QueryParams.startTime);
-	const listEndTime = currentSearchParams.get(QueryParams.endTime);
-
-	if (listRelativeTime) {
-		urlParams.set(QueryParams.relativeTime, listRelativeTime);
-	} else if (listStartTime && listEndTime) {
-		urlParams.set(QueryParams.startTime, listStartTime);
-		urlParams.set(QueryParams.endTime, listEndTime);
-	}
-
-	if (detailRelativeTime) {
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-			detailRelativeTime,
-		);
-	} else if (detailStartTime && detailEndTime) {
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-			detailStartTime,
-		);
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-			detailEndTime,
-		);
-	}
-
-	return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
-}

frontend/src/container/InfraMonitoringK8sV2/Clusters/constants.ts

@@ -6,7 +6,10 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Clusters/entity.config.ts

@@ -38,11 +38,7 @@ async function fetchListData(
 	try {
 		const response = await listClusters(
 			{
-				filter: {
-					expression: filters.filter.expression,
-					filterByPodStatus: filters.filter.filterByPodStatus,
-					filterByNodeReadiness: filters.filter.filterByNodeReadiness,
-				},
+				filter: { expression: filters.filter.expression },
 				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
 				offset: filters.offset,
 				limit: filters.limit ?? 10,
@@ -127,7 +123,6 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 		details: {
 			category: InfraMonitoringEntity.CLUSTERS,
 			eventCategory: InfraMonitoringEvents.Cluster,
-			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'cluster',
 			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,
 			fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Clusters/table.config.tsx

@@ -1,19 +1,19 @@
 import { Color } from '@signozhq/design-tokens';
 import { Boxes } from '@signozhq/icons';
-import {
-	InframonitoringtypesClusterRecordDTO,
-	InframonitoringtypesNodeConditionDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { InframonitoringtypesClusterRecordDTO } from 'api/generated/services/sigNoz.schemas';
 import { TableColumnDef } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
-import ClickableStatusCounts from '../Base/components/StatusFilterCells/ClickableStatusCounts';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
-import { TextNoData, ValidateColumnValueWrapper } from '../components';
+import {
+	GroupedStatusCounts,
+	TextNoData,
+	ValidateColumnValueWrapper,
+} from '../components';
 import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
@@ -98,21 +98,18 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 			}
 
 			return (
-				<ClickableStatusCounts
-					kind="node"
+				<GroupedStatusCounts
 					rowId={rowId}
 					items={[
 						{
 							value: row.nodeCountsByReadiness.ready,
 							label: 'Ready',
 							color: Color.BG_FOREST_500,
-							statuses: [InframonitoringtypesNodeConditionDTO.ready],
 						},
 						{
 							value: row.nodeCountsByReadiness.notReady,
 							label: 'Not Ready',
 							color: Color.BG_AMBER_500,
-							statuses: [InframonitoringtypesNodeConditionDTO.not_ready],
 						},
 					]}
 				/>
@@ -138,8 +135,7 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 				return <TextNoData type="tanstack" />;
 			}
 			return (
-				<ClickableStatusCounts
-					kind="pod"
+				<GroupedStatusCounts
 					rowId={rowId}
 					items={getPodStatusItems(row.podCountsByStatus)}
 				/>

frontend/src/container/InfraMonitoringK8sV2/Containers/entity.config.ts

@@ -40,10 +40,7 @@ async function fetchListData(
 	try {
 		const response = await listContainers(
 			{
-				filter: {
-					expression: filters.filter.expression,
-					filterByContainerStatus: filters.filter.filterByContainerStatus,
-				},
+				filter: { expression: filters.filter.expression },
 				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
 				offset: filters.offset,
 				limit: filters.limit ?? 10,
@@ -130,7 +127,6 @@ export const containerEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.CONTAINERS,
 		eventCategory: InfraMonitoringEvents.Container,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'container',
 		getSelectedItemExpression: k8sContainerGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Containers/table.config.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@signozhq/icons';
+import { Container } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import {
 	InframonitoringtypesContainerReadyDTO,
@@ -9,8 +9,6 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
-import ClickableStatusBadge from '../Base/components/StatusFilterCells/ClickableStatusBadge';
-import ClickableStatusCounts from '../Base/components/StatusFilterCells/ClickableStatusCounts';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes } from '../commonUtils';
@@ -96,7 +94,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Container Name"
-				icon={<Box data-hide-expanded="true" size={14} />}
+				icon={<Container data-hide-expanded="true" size={14} />}
 				docPath={`${CONTAINERS_DOC_PATH}#container-name`}
 			/>
 		),
@@ -175,7 +173,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 		width: { min: STATUS_COLUMN_WIDTH },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ row, rowId }): React.ReactNode => {
+		cell: ({ row }): React.ReactNode => {
 			if (
 				!row.status ||
 				row.status === InframonitoringtypesContainerStatusDTO.no_data
@@ -184,13 +182,9 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 			}
 
 			return (
-				<ClickableStatusBadge
-					color={CONTAINER_STATUS_COLORS[row.status]}
-					label={CONTAINER_STATUS_LABELS[row.status]}
-					status={row.status}
-					kind="container"
-					rowId={rowId}
-				/>
+				<Badge color={CONTAINER_STATUS_COLORS[row.status]} variant="outline">
+					{CONTAINER_STATUS_LABELS[row.status]}
+				</Badge>
 			);
 		},
 	},
@@ -211,8 +205,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 				return <TextNoData type="tanstack" />;
 			}
 			return (
-				<ClickableStatusCounts
-					kind="container"
+				<GroupedStatusCounts
 					items={getContainerStatusItems(row.containerCountsByStatus)}
 					rowId={rowId}
 				/>

frontend/src/container/InfraMonitoringK8sV2/Containers/utils.ts

@@ -104,20 +104,6 @@ const CONTAINER_ERROR_STATUS_LABELS: Partial<
 	containerCannotRun: 'ContainerCannotRun',
 };
 
-const CONTAINER_STATUS_VALUES = new Set<string>(
-	Object.values(InframonitoringtypesContainerStatusDTO),
-);
-
-/** See countKeyToPodStatus in commonUtils — the counts DTO uses camelCase keys. */
-function countKeyToContainerStatus(
-	key: string,
-): InframonitoringtypesContainerStatusDTO | null {
-	const value = key.toLowerCase();
-	return CONTAINER_STATUS_VALUES.has(value)
-		? (value as InframonitoringtypesContainerStatusDTO)
-		: null;
-}
-
 export function getContainerStatusItems(
 	counts: InframonitoringtypesContainerCountsByStatusDTO,
 ): StatusCountItem[] {
@@ -125,67 +111,32 @@ export function getContainerStatusItems(
 		keyof typeof CONTAINER_ERROR_STATUS_LABELS
 	>;
 
-	const errorBreakdown = errorKeys.map((key) => ({
-		label: CONTAINER_ERROR_STATUS_LABELS[key] as string,
-		value: counts[key],
-		statuses: [countKeyToContainerStatus(key)].filter(
-			(status): status is InframonitoringtypesContainerStatusDTO =>
-				status !== null,
-		),
-	}));
-
 	return [
-		{
-			value: counts.running,
-			label: 'Running',
-			color: Color.BG_FOREST_500,
-			statuses: [InframonitoringtypesContainerStatusDTO.running],
-		},
-		{
-			value: counts.completed,
-			label: 'Completed',
-			color: Color.BG_ROBIN_500,
-			statuses: [InframonitoringtypesContainerStatusDTO.completed],
-		},
+		{ value: counts.running, label: 'Running', color: Color.BG_FOREST_500 },
+		{ value: counts.completed, label: 'Completed', color: Color.BG_ROBIN_500 },
 		{
 			value: counts.waiting + counts.containerCreating,
 			label: 'Waiting',
 			color: Color.BG_AMBER_500,
 			breakdown: [
-				{
-					label: 'Waiting',
-					value: counts.waiting,
-					statuses: [InframonitoringtypesContainerStatusDTO.waiting],
-				},
-				{
-					label: 'ContainerCreating',
-					value: counts.containerCreating,
-					statuses: [InframonitoringtypesContainerStatusDTO.containercreating],
-				},
-			],
-			statuses: [
-				InframonitoringtypesContainerStatusDTO.waiting,
-				InframonitoringtypesContainerStatusDTO.containercreating,
+				{ label: 'Waiting', value: counts.waiting },
+				{ label: 'ContainerCreating', value: counts.containerCreating },
 			],
 		},
 		{
 			value: counts.terminated,
 			label: 'Terminated',
 			color: Color.BG_SIENNA_500,
-			statuses: [InframonitoringtypesContainerStatusDTO.terminated],
-		},
-		{
-			value: counts.unknown,
-			label: 'Unknown',
-			color: Color.BG_SLATE_400,
-			statuses: [InframonitoringtypesContainerStatusDTO.unknown],
 		},
+		{ value: counts.unknown, label: 'Unknown', color: Color.BG_SLATE_400 },
 		{
 			value: errorKeys.reduce((sum, key) => sum + counts[key], 0),
 			label: 'Error Status',
 			color: Color.BG_CHERRY_500,
-			breakdown: errorBreakdown,
-			statuses: errorBreakdown.flatMap((item) => item.statuses),
+			breakdown: errorKeys.map((key) => ({
+				label: CONTAINER_ERROR_STATUS_LABELS[key] as string,
+				value: counts[key],
+			})),
 		},
 	];
 }

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/entity.config.ts

@@ -42,10 +42,7 @@ async function fetchListData(
 	try {
 		const response = await listDaemonSets(
 			{
-				filter: {
-					expression: filters.filter.expression,
-					filterByPodStatus: filters.filter.filterByPodStatus,
-				},
+				filter: { expression: filters.filter.expression },
 				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
 				offset: filters.offset,
 				limit: filters.limit ?? 10,
@@ -135,7 +132,6 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DAEMONSETS,
 		eventCategory: InfraMonitoringEvents.DaemonSet,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'daemonset',
 		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/table.config.tsx

@@ -4,7 +4,6 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
-import ClickableStatusCounts from '../Base/components/StatusFilterCells/ClickableStatusCounts';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
@@ -127,8 +126,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 				return <TextNoData type="tanstack" />;
 			}
 			return (
-				<ClickableStatusCounts
-					kind="pod"
+				<GroupedStatusCounts
 					rowId={rowId}
 					items={getPodStatusItems(podCountsByStatus)}
 				/>

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Deployments/entity.config.ts

@@ -46,10 +46,7 @@ async function fetchListData(
 	try {
 		const response = await listDeployments(
 			{
-				filter: {
-					expression: filters.filter.expression,
-					filterByPodStatus: filters.filter.filterByPodStatus,
-				},
+				filter: { expression: filters.filter.expression },
 				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
 				offset: filters.offset,
 				limit: filters.limit ?? 10,
@@ -150,7 +147,6 @@ export const deploymentEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DEPLOYMENTS,
 		eventCategory: InfraMonitoringEvents.Deployment,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'deployment',
 		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Deployments/table.config.tsx

@@ -4,7 +4,6 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
-import ClickableStatusCounts from '../Base/components/StatusFilterCells/ClickableStatusCounts';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
@@ -125,8 +124,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 					return <TextNoData type="tanstack" />;
 				}
 				return (
-					<ClickableStatusCounts
-						kind="pod"
+					<GroupedStatusCounts
 						rowId={rowId}
 						items={getPodStatusItems(podCountsByStatus)}
 					/>

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.module.scss

@@ -1,166 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	margin-top: var(--spacing-8);
-	min-width: 0;
-}
-
-.controls {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-3);
-	flex-wrap: wrap;
-}
-
-.tableHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4) var(--spacing-8);
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.resourcePicker {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	flex: 0 0 auto;
-}
-
-.resourceTrigger {
-	--select-trigger-width: 240px;
-	--select-trigger-height: 2rem;
-}
-
-.resourceOptions {
-	// The drawer is a dialog at z-index 50 and select content ships without one,
-	// so without this the dropdown paints behind the drawer.
-	z-index: 60;
-
-	// Radix measures the trigger for us; without this the list is narrower than it
-	min-width: var(--radix-select-trigger-width);
-}
-
-.filterRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	padding-left: var(--spacing-3);
-	min-width: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-	background: var(--l1-background);
-
-	// The row draws the field outline, so the editor inside it draws none
-	--query-builder-v2-border-color: transparent;
-	--query-builder-v2-background-color: transparent;
-}
-
-.scopeChip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	flex: 0 1 auto;
-	min-width: 0;
-	max-width: 420px;
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: 2px;
-	background: var(--l3-background);
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 20px;
-	cursor: default;
-}
-
-.scopeMore {
-	flex: none;
-	color: var(--l3-foreground);
-}
-
-// The editor beside it is CodeMirror on the copilot theme in dark and
-// githubLight in light; the chip borrows those token colours so one filter
-// does not read as two
-.scopeKey {
-	color: #939da5;
-}
-
-.scopeOperator {
-	color: #939da5;
-}
-
-.scopeValue {
-	color: #5bec95;
-}
-
-:global(.lightMode) {
-	.scopeKey,
-	.scopeOperator {
-		color: #005cc5;
-	}
-
-	.scopeValue {
-		color: #032f62;
-	}
-}
-
-.scopeExpression {
-	font-family: var(--font-mono, monospace);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.filterInput {
-	flex: 1 1 auto;
-	min-width: 0;
-
-	// The locked scope is already shown as a chip, so drop the editor's own
-	// scope marker and the room it reserves for it
-	:global(.query-search-initial-scope-label) {
-		display: none;
-	}
-
-	:global(
-		.query-where-clause-editor.hasInitialExpression .cm-editor .cm-content
-	) {
-		padding-left: 0 !important;
-	}
-
-	// Its page-width minimum would force the filter row to overflow the drawer
-	:global(.code-mirror-where-clause .query-where-clause-editor) {
-		min-width: 0;
-	}
-}
-
-.tableCard {
-	display: flex;
-	flex-direction: column;
-	min-height: 480px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	min-width: 0;
-}
-
-.table {
-	flex: 1 1 auto;
-	min-height: 0;
-	--typography-color: var(--l2-foreground);
-}
-
-.noRelations {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 240px;
-	margin-top: var(--spacing-8);
-}
-
-.emptyState {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 180px;
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.mocks.tsx

@@ -1,76 +0,0 @@
-import { rest } from 'msw';
-
-import { countControl } from '@/storybook/controls/controls';
-import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-
-function buildContainers(count: number): unknown[] {
-	return Array.from({ length: count }, (_, index) => ({
-		containerName: index === 0 ? 'loadgenerator' : `sidecar-${index}`,
-		containerID: `containerd://${index}`,
-		podName: 'app-demo-loadgenerator-579fbdd749-q5kgd',
-		status: 'running',
-		ready: true,
-		restarts: index,
-		image: 'ghcr.io/open-telemetry/demo:1.14.0-loadgenerator',
-		cpuUsage: 0.12,
-		memoryUsage: 148 * 1024 * 1024,
-		meta: {
-			'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
-			'k8s.namespace.name': 'generator',
-			'k8s.cluster.name': 'mgmt',
-			'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
-		},
-	}));
-}
-
-export const overviewMocks = defineStoryMocks({
-	controls: {
-		containers: countControl('Containers', {
-			group: 'Overview tab',
-			value: 12,
-			max: 40,
-		}),
-	},
-	handlers: (values) => [
-		// The filter's suggestions ask for these; without them the search box
-		// logs a failed request and the story's smoke test fails on it
-		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-
-		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-
-		rest.post(
-			'http://localhost/api/v2/infra_monitoring/kube_containers',
-			async (req, res, ctx) => {
-				const { offset = 0, limit = 10 } = (await req.json()) as {
-					offset?: number;
-					limit?: number;
-				};
-
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							type: 'list',
-							records: buildContainers(values.containers).slice(
-								offset,
-								offset + limit,
-							),
-							total: values.containers,
-						},
-					}),
-				);
-			},
-		),
-	],
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { GlobalTimeProvider } from 'store/globalTime';
-
-import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-import { storyMocks } from '@/storybook/controls/defineStoryMocks';
-
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-import EntityOverview, { EntityOverviewProps } from './EntityOverview';
-import { overviewMocks } from './EntityOverview.stories.mocks';
-
-import drawerStyles from '../entityDetails.module.scss';
-
-const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
-
-/** The meta /api/v2/infra_monitoring/pods returns for one pod. */
-const POD_ATTRIBUTES = {
-	'k8s.pod.uid': POD_UID,
-	'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
-	'k8s.namespace.name': 'generator',
-	'k8s.cluster.name': 'mgmt',
-	'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
-	'k8s.deployment.name': 'app-demo-loadgenerator',
-};
-
-const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
-
-type OverviewArgs = PageStoryArgs<typeof overviewMocks> & EntityOverviewProps;
-
-const meta = {
-	title: 'Infra monitoring/Drawer overview tab',
-	component: EntityOverview,
-	...storyMocks(overviewMocks, { route }),
-	decorators: [
-		(Story): JSX.Element => (
-			<DrawerWrapper
-				open
-				direction="right"
-				title="app-demo-loadgenerator-579fbdd749-q5kgd"
-				onOpenChange={(): void => undefined}
-				className={drawerStyles.entityDetailDrawer}
-			>
-				<GlobalTimeProvider>
-					<Story />
-				</GlobalTimeProvider>
-			</DrawerWrapper>
-		),
-	],
-} satisfies Meta<OverviewArgs>;
-
-export default meta;
-
-type Story = StoryObj<OverviewArgs>;
-
-export const Default: Story = {
-	args: {
-		category: InfraMonitoringEntity.PODS,
-		eventEntity: 'pod',
-		attributes: POD_ATTRIBUTES,
-		entity: { podUID: POD_UID },
-		entityName: POD_ATTRIBUTES['k8s.pod.name'],
-		queryKeyPrefix: 'pod',
-	},
-};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.tsx

@@ -1,343 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Compass } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '@signozhq/ui/select';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInputExpression,
-	useQuerySearchInitialExpressionProp,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-	useUserExpression,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import { getEntityConfig } from '../../Base/entity.registry';
-import { logInfraExplorerNavigatedEvent } from '../../Base/events';
-import {
-	buildRelatedFilterClauses,
-	EntityAttributes,
-	formatRelatedFilterClause,
-	RelatedFilterClause,
-	getEntityNameAttributeKey,
-	getRelatedCategories,
-	resolveRelatedCategory,
-} from '../../Base/relations';
-import { getDrawerDurationMs } from '../../Base/useDrawerLifecycleStore';
-import { buildK8sListNavigationUrl } from '../../Base/utils';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-	K8S_CATEGORY_LABELS,
-	K8S_CATEGORY_SINGULAR_LABELS,
-	METRIC_NAMESPACE_BY_ENTITY,
-	VIEW_TYPES,
-} from '../../constants';
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
-import { logInfraDrawerFilterCustomizedEvent } from '../events';
-import { RelatedEntitiesTable } from './RelatedEntitiesTable';
-import { ScopeChip } from './ScopeChip';
-import { useCarriedOverFilters } from './useCarriedOverFilters';
-import { useRelatedEntities } from './useRelatedEntities';
-
-import styles from './EntityOverview.module.scss';
-
-export interface EntityOverviewProps {
-	category: InfraMonitoringEntity;
-	eventEntity: string;
-	/** The drawer entity's own attributes, which scope every related query */
-	attributes: EntityAttributes;
-	/** The drawer's own record and query prefix, so a row click can leave a
-	 * trail that steps back without fetching again */
-	entity: unknown;
-	entityName: string;
-	queryKeyPrefix: string;
-}
-
-interface ContentProps extends EntityOverviewProps {
-	targetCategory: InfraMonitoringEntity;
-	lockedExpression: string;
-	lockedClauses: RelatedFilterClause[];
-	onCategoryChange: (category: string) => void;
-}
-
-function EntityOverviewContent({
-	category,
-	eventEntity,
-	attributes,
-	entity,
-	entityName,
-	queryKeyPrefix,
-	targetCategory,
-	lockedExpression,
-	lockedClauses,
-	onCategoryChange,
-}: ContentProps): JSX.Element | null {
-	const { timeRange } = useEntityDetailsTime();
-	const expression = useExpression();
-	const userExpression = useUserExpression();
-	const inputExpression = useInputExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
-
-	const targetConfig = getEntityConfig(targetCategory);
-
-	useCarriedOverFilters(targetCategory);
-
-	const {
-		records,
-		total,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-		endTimeBeforeRetention,
-		setPage,
-		setLimit,
-		refetch,
-		cancel,
-	} = useRelatedEntities({
-		fetchListData: targetConfig?.list.fetchListData,
-		queryKey: `${targetCategory}RelatedEntities`,
-		expression,
-		timeRange,
-	});
-
-	// The editor holds only what the user typed; the locked scope is shown beside it
-	const queryData = useMemo(
-		(): IBuilderQuery =>
-			({
-				aggregateOperator: 'noop',
-				filter: { expression: userExpression },
-			}) as IBuilderQuery,
-		[userExpression],
-	);
-
-	const handleCategoryChange = useCallback(
-		(value: string | string[]): void => {
-			if (typeof value === 'string') {
-				onCategoryChange(value);
-			}
-		},
-		[onCategoryChange],
-	);
-
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const newUserExpression = updatedExpression
-				? getUserExpressionFromCombined(lockedExpression, updatedExpression)
-				: inputExpression;
-
-			const validation = validateQuery(
-				combineInitialAndUserExpression(lockedExpression, newUserExpression || ''),
-			);
-
-			if (!validation.isValid) {
-				return;
-			}
-
-			querySearchOnRun(newUserExpression);
-			logInfraDrawerFilterCustomizedEvent(
-				category,
-				VIEW_TYPES.OVERVIEW,
-				newUserExpression || '',
-				'search',
-			);
-			refetch();
-		},
-		[lockedExpression, inputExpression, querySearchOnRun, category, refetch],
-	);
-
-	const handleNavigate = useCallback((): void => {
-		logInfraExplorerNavigatedEvent({
-			entityType: category,
-			destination: 'k8s_list',
-			source: 'overview_cta',
-			tab: VIEW_TYPES.OVERVIEW,
-			sourceKey: targetCategory,
-			drawerDurationMsAtNavigation: getDrawerDurationMs(),
-		});
-
-		openInNewTab(buildK8sListNavigationUrl(targetCategory, expression));
-	}, [category, targetCategory, expression]);
-
-	if (!targetConfig) {
-		return null;
-	}
-
-	const targetLabel = K8S_CATEGORY_LABELS[targetCategory];
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.controls}>
-				<EntityDateTimeSelector
-					eventEntity={eventEntity}
-					category={category}
-					view={VIEW_TYPES.OVERVIEW}
-				/>
-
-				<RunQueryBtn
-					isLoadingQueries={isFetching}
-					onStageRunQuery={(): void => handleRunQuery()}
-					handleCancelQuery={cancel}
-				/>
-			</div>
-
-			<div className={styles.filterRow}>
-				<ScopeChip clauses={lockedClauses} expression={lockedExpression} />
-
-				<div className={styles.filterInput}>
-					<QuerySearch
-						queryData={queryData}
-						dataSource={DataSource.METRICS}
-						onChange={querySearchOnChange}
-						onRun={handleRunQuery}
-						signalSource=""
-						showFilterSuggestionsWithoutMetric
-						placeholder={`Filter these ${targetLabel.toLowerCase()}`}
-						metricNamespace={METRIC_NAMESPACE_BY_ENTITY[targetCategory]}
-						initialExpression={querySearchInitialExpressionProp}
-					/>
-				</div>
-			</div>
-
-			<RelatedEntitiesTable
-				key={targetCategory}
-				targetCategory={targetCategory}
-				header={
-					<div className={styles.resourcePicker}>
-						<Typography.Text color="muted" size="small">
-							Showing
-						</Typography.Text>
-
-						<Select value={targetCategory} onChange={handleCategoryChange}>
-							<SelectTrigger
-								className={styles.resourceTrigger}
-								data-testid="overview-resource-select"
-							>
-								<SelectValue>{targetLabel}</SelectValue>
-							</SelectTrigger>
-							{/* The drawer sits at z-index 50 and select content ships without one */}
-							<SelectContent className={styles.resourceOptions}>
-								{getRelatedCategories(category, attributes).map((relatedCategory) => (
-									<SelectItem
-										key={relatedCategory}
-										value={relatedCategory}
-										testId={`overview-resource-option-${relatedCategory}`}
-									>
-										{K8S_CATEGORY_LABELS[relatedCategory]}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-
-						<TooltipSimple
-							title={`View on ${targetLabel.toLowerCase()} page`}
-							side="top"
-							arrow
-						>
-							<Button
-								variant="ghost"
-								size="icon"
-								color="secondary"
-								onClick={handleNavigate}
-								data-testid="overview-view-on-list-page"
-								prefix={<Compass size={16} />}
-							/>
-						</TooltipSimple>
-					</div>
-				}
-				listConfig={targetConfig.list}
-				records={records}
-				total={total}
-				isLoading={isLoading}
-				isError={isError}
-				error={error}
-				endTimeBeforeRetention={endTimeBeforeRetention}
-				source={{ category, label: entityName, entity, queryKeyPrefix }}
-				onPageChange={setPage}
-				onLimitChange={setLimit}
-			/>
-		</div>
-	);
-}
-
-export default function EntityOverview(
-	props: EntityOverviewProps,
-): JSX.Element | null {
-	const { category, attributes } = props;
-
-	// Tied to the resource it was picked on, so another drawer starts at its
-	// own default instead of inheriting the last pick
-	const [selection, setSelection] = useState<{
-		identity: string;
-		category: string;
-	} | null>(null);
-
-	const identity = `${category}:${
-		attributes[getEntityNameAttributeKey(category)] ?? ''
-	}`;
-
-	const targetCategory = resolveRelatedCategory(
-		category,
-		attributes,
-		selection?.identity === identity ? selection.category : null,
-	);
-
-	const handleCategoryChange = useCallback(
-		(value: string): void => setSelection({ identity, category: value }),
-		[identity],
-	);
-
-	const lockedClauses = targetCategory
-		? buildRelatedFilterClauses(category, targetCategory, attributes)
-		: [];
-	const lockedExpression = lockedClauses
-		.map(formatRelatedFilterClause)
-		.join(' AND ');
-
-	if (!targetCategory) {
-		return (
-			<div className={styles.noRelations}>
-				<Typography.Text color="muted">
-					{`Nothing related to this ${K8S_CATEGORY_SINGULAR_LABELS[category]} was reported in this time range.`}
-				</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION}
-			initialExpression={lockedExpression}
-		>
-			<EntityOverviewContent
-				{...props}
-				targetCategory={targetCategory}
-				lockedExpression={lockedExpression}
-				lockedClauses={lockedClauses}
-				onCategoryChange={handleCategoryChange}
-			/>
-		</QuerySearchV2Provider>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/RelatedEntitiesTable.tsx

@@ -1,142 +0,0 @@
-import { ReactNode, useCallback } from 'react';
-import cx from 'classnames';
-import TanStackTable from 'components/TanStackTableView';
-import APIError from 'types/api/error';
-
-import {
-	K8sEntityData,
-	K8sEntityListConfig,
-} from '../../Base/entity.config.types';
-import { K8sEmptyState } from '../../Base/K8sEmptyState';
-import {
-	DrawerHistoryEntry,
-	useDrawerHistoryStore,
-} from '../../Base/useDrawerHistoryStore';
-import {
-	useInfraMonitoringFontSize,
-	useInfraMonitoringLineClamp,
-} from '../../Base/useInfraMonitoringTablePreferencesStore';
-import { InfraMonitoringEntity, K8S_CATEGORY_LABELS } from '../../constants';
-import {
-	SelectedItemParams,
-	useInfraMonitoringSelectedItemParams,
-} from '../../hooks';
-import { usePrimeEntityDetails } from '../../Base/usePrimeEntityDetails';
-import { RELATED_ENTITIES_PAGE_SIZE } from './useRelatedEntities';
-
-import listStyles from '../../Base/K8sBaseList.module.scss';
-import styles from './EntityOverview.module.scss';
-
-interface RelatedEntitiesTableProps {
-	targetCategory: InfraMonitoringEntity;
-	listConfig: K8sEntityListConfig<K8sEntityData, string | SelectedItemParams>;
-	records: K8sEntityData[];
-	total: number;
-	isLoading: boolean;
-	isError: boolean;
-	error?: APIError | null;
-	endTimeBeforeRetention?: boolean;
-	onPageChange: (page: number) => void;
-	onLimitChange: (limit: number) => void;
-	/** Rendered in the card's header strip, above the rows it describes */
-	header: ReactNode;
-	/** The drawer's own resource, so a row click can leave a trail back to it */
-	source: Omit<DrawerHistoryEntry, 'params'>;
-}
-
-export function RelatedEntitiesTable({
-	targetCategory,
-	listConfig,
-	records,
-	total,
-	isLoading,
-	isError,
-	error,
-	endTimeBeforeRetention,
-	onPageChange,
-	onLimitChange,
-	header,
-	source,
-}: RelatedEntitiesTableProps): JSX.Element {
-	const [selectedItemParams, setSelectedItemParams] =
-		useInfraMonitoringSelectedItemParams();
-	const pushDrawerHistory = useDrawerHistoryStore((store) => store.push);
-	const primeDetails = usePrimeEntityDetails();
-	const lineClamp = useInfraMonitoringLineClamp();
-	const fontSize = useInfraMonitoringFontSize();
-
-	// Opens the clicked resource in its own drawer, overview tab included
-	const handleRowClick = useCallback(
-		(record: K8sEntityData, itemKey: string | SelectedItemParams): void => {
-			const params: SelectedItemParams =
-				typeof itemKey === 'object'
-					? itemKey
-					: { selectedItem: itemKey, clusterName: null, namespaceName: null };
-
-			pushDrawerHistory({ ...source, params: selectedItemParams });
-
-			// The row already carries the record the drawer is about to fetch
-			primeDetails({
-				params,
-				queryKeyPrefix: listConfig.detailsQueryKeyPrefix,
-				entity: record,
-			});
-			setSelectedItemParams({ ...params, category: targetCategory });
-		},
-		[
-			primeDetails,
-			pushDrawerHistory,
-			selectedItemParams,
-			source,
-			setSelectedItemParams,
-			targetCategory,
-			listConfig.detailsQueryKeyPrefix,
-		],
-	);
-
-	const isEmpty = !isLoading && records.length === 0;
-
-	return (
-		<div className={styles.tableCard}>
-			<div className={styles.tableHeader}>{header}</div>
-
-			{isEmpty ? (
-				<div className={styles.emptyState}>
-					<K8sEmptyState
-						isError={isError}
-						error={error}
-						isLoading={isLoading}
-						endTimeBeforeRetention={endTimeBeforeRetention}
-					/>
-				</div>
-			) : (
-				<TanStackTable<K8sEntityData, string | SelectedItemParams>
-					data={records}
-					columns={listConfig.tableColumns}
-					columnStorageKey={`k8s-overview-${targetCategory}-columns`}
-					isLoading={isLoading}
-					getRowKey={listConfig.getRowKey}
-					getItemKey={listConfig.getItemKey}
-					onRowClick={handleRowClick}
-					className={cx(listStyles.k8SListTable, styles.table)}
-					testId={`related-entities-table-${targetCategory}`}
-					// A page of rows is short enough to render whole, which keeps the card
-					// at the height of its rows instead of stretching down the drawer
-					disableVirtualScroll
-					pagination={{
-						total,
-						defaultLimit: RELATED_ENTITIES_PAGE_SIZE,
-						showTotalCount: true,
-						totalCountLabel: K8S_CATEGORY_LABELS[targetCategory],
-						onPageChange,
-						onLimitChange,
-					}}
-					plainTextCellLineClamp={lineClamp}
-					cellTypographySize={fontSize}
-					paginationClassname={listStyles.paginationContainer}
-					resetScrollKey={targetCategory}
-				/>
-			)}
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/ScopeChip.tsx

@@ -1,42 +0,0 @@
-import { Lock } from '@signozhq/icons';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-
-import { RelatedFilterClause } from '../../Base/relations';
-
-import styles from './EntityOverview.module.scss';
-
-interface ScopeChipProps {
-	clauses: RelatedFilterClause[];
-	/** The clauses as one expression, shown in full on hover */
-	expression: string;
-}
-
-/**
- * The locked half of the filter. It reads like the editor beside it: the last
- * clause carries the relation, the ones scoping it are counted instead.
- */
-export function ScopeChip({
-	clauses,
-	expression,
-}: ScopeChipProps): JSX.Element {
-	const relation = clauses[clauses.length - 1];
-
-	return (
-		<TooltipSimple title={expression} side="top" arrow>
-			<span className={styles.scopeChip} data-testid="overview-locked-scope">
-				<Lock size={12} />
-				<span className={styles.scopeExpression}>
-					<span className={styles.scopeKey}>{relation.key}</span>
-					<span className={styles.scopeOperator}> = </span>
-					<span className={styles.scopeValue}>
-						{formatValueForExpression(relation.value)}
-					</span>
-				</span>
-				{clauses.length > 1 && (
-					<span className={styles.scopeMore}>{`+${clauses.length - 1}`}</span>
-				)}
-			</span>
-		</TooltipSimple>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/__tests__/EntityOverview.test.tsx

@@ -1,242 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
-
-import { TableColumnDef } from 'components/TanStackTableView';
-
-import { InfraMonitoringEntity } from '../../../constants';
-import EntityOverview from '../EntityOverview';
-
-window.ResizeObserver =
-	window.ResizeObserver ||
-	jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="mock-datetime" />,
-}));
-
-const mockQuerySearchProps = jest.fn();
-
-jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
-	__esModule: true,
-	default: (props: {
-		queryData?: { filter?: { expression?: string } };
-		initialExpression?: string;
-	}): JSX.Element => {
-		mockQuerySearchProps(props);
-		return <div data-testid="mock-query-search" />;
-	},
-}));
-
-type TestRecord = { name: string; meta?: Record<string, string> | null };
-
-const mockFetchListData = jest.fn();
-
-const mockTableColumns: TableColumnDef<TestRecord>[] = [
-	{
-		id: 'name',
-		header: 'Name',
-		accessorKey: 'name',
-		cell: ({ value }): string => String(value),
-	},
-];
-
-jest.mock('../../../Base/entity.registry', () => ({
-	getEntityConfig: (category: string) => ({
-		list: {
-			entity: category,
-			tableColumns: mockTableColumns,
-			fetchListData: mockFetchListData,
-			getRowKey: (record: TestRecord): string => record.name,
-			getItemKey: (record: TestRecord): string => record.name,
-		},
-	}),
-}));
-
-const NODE_ATTRIBUTES = {
-	'k8s.node.name': 'node-1',
-	'k8s.cluster.name': 'prod',
-};
-
-const LOCKED_EXPRESSION =
-	"k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'";
-
-interface RenderOptions {
-	onUrlUpdate?: OnUrlUpdateFunction;
-	attributes?: Record<string, string>;
-}
-
-function overviewTree(
-	attributes: Record<string, string>,
-	queryClient: QueryClient,
-	onUrlUpdate?: OnUrlUpdateFunction,
-): JSX.Element {
-	return (
-		<MemoryRouter>
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
-					<VirtuosoMockContext.Provider
-						value={{ viewportHeight: 800, itemHeight: 50 }}
-					>
-						<TooltipProvider>
-							<EntityOverview
-								category={InfraMonitoringEntity.NODES}
-								eventEntity="node"
-								attributes={attributes}
-								entity={{ nodeName: attributes['k8s.node.name'] }}
-								entityName={attributes['k8s.node.name']}
-								queryKeyPrefix="node"
-							/>
-						</TooltipProvider>
-					</VirtuosoMockContext.Provider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		</MemoryRouter>
-	);
-}
-
-function renderOverview({
-	onUrlUpdate,
-	attributes = NODE_ATTRIBUTES,
-}: RenderOptions = {}): {
-	openAnotherResource: (next: Record<string, string>) => void;
-} {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-
-	const { rerender } = render(
-		overviewTree(attributes, queryClient, onUrlUpdate),
-	);
-
-	return {
-		openAnotherResource: (next): void =>
-			rerender(overviewTree(next, queryClient, onUrlUpdate)),
-	};
-}
-
-describe('EntityOverview', () => {
-	beforeEach(() => {
-		mockQuerySearchProps.mockReset();
-		mockFetchListData.mockReset();
-		mockFetchListData.mockResolvedValue({
-			type: 'list',
-			records: [{ name: 'pod-1' }],
-			total: 1,
-		});
-	});
-
-	it('lists the first related resource scoped by the locked expression', async () => {
-		renderOverview();
-
-		await waitFor(() => {
-			expect(mockFetchListData).toHaveBeenCalled();
-		});
-
-		expect(mockFetchListData.mock.calls[0][0].filter.expression).toBe(
-			LOCKED_EXPRESSION,
-		);
-		await expect(
-			screen.findByTestId('related-entities-table-pods'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('keeps the locked scope out of the editable filter', async () => {
-		renderOverview();
-
-		// The chip leads with the relation and counts the scope behind it
-		const chip = await screen.findByTestId('overview-locked-scope');
-		expect(chip).toHaveTextContent("k8s.node.name = 'node-1'");
-		expect(chip).toHaveTextContent('+1');
-
-		// The editor is handed the user's own expression, never the locked scope
-		const lastProps = mockQuerySearchProps.mock.calls.at(-1)?.[0];
-		expect(lastProps.queryData.filter.expression).toBe('');
-		expect(lastProps.initialExpression).toBe(LOCKED_EXPRESSION);
-	});
-
-	it('opens the clicked resource in its own drawer', async () => {
-		const user = userEvent.setup();
-		const onUrlUpdate = jest.fn();
-
-		renderOverview({ onUrlUpdate });
-
-		const row = await screen.findByText('pod-1');
-		await user.click(row);
-
-		await waitFor(() => {
-			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
-			expect(
-				params.some(
-					(searchParams) =>
-						searchParams.get('selectedItem') === 'pod-1' &&
-						searchParams.get('selectedItemCategory') === 'pods',
-				),
-			).toBe(true);
-		});
-	});
-
-	it("forgets the previous drawer's resource when another one opens", async () => {
-		const user = userEvent.setup();
-
-		const { openAnotherResource } = renderOverview();
-
-		await user.click(screen.getByTestId('overview-resource-select'));
-		await user.click(
-			await screen.findByTestId('overview-resource-option-containers'),
-		);
-		await expect(
-			screen.findByTestId('related-entities-table-containers'),
-		).resolves.toBeInTheDocument();
-
-		openAnotherResource({ ...NODE_ATTRIBUTES, 'k8s.node.name': 'node-2' });
-
-		// Back to pods, this node's default, rather than the containers just picked
-		await expect(
-			screen.findByTestId('related-entities-table-pods'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('says so when the resource relates to nothing', async () => {
-		renderOverview({ attributes: { 'os.type': 'linux' } });
-
-		await expect(
-			screen.findByText(/Nothing related to this Node/),
-		).resolves.toBeInTheDocument();
-		expect(mockFetchListData).not.toHaveBeenCalled();
-	});
-
-	it('switches the listed resource from the dropdown', async () => {
-		const user = userEvent.setup();
-
-		renderOverview();
-
-		await waitFor(() => {
-			expect(mockFetchListData).toHaveBeenCalled();
-		});
-
-		await user.click(screen.getByTestId('overview-resource-select'));
-
-		// Every resource related to a node is offered, the listed one included
-		await expect(
-			screen.findByTestId('overview-resource-option-pods'),
-		).resolves.toBeInTheDocument();
-
-		await user.click(
-			await screen.findByTestId('overview-resource-option-containers'),
-		);
-
-		await expect(
-			screen.findByTestId('related-entities-table-containers'),
-		).resolves.toBeInTheDocument();
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useCarriedOverFilters.ts

@@ -1,51 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useQuerySearchOnRun } from 'components/QueryBuilderV2';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { parseAsString, useQueryState } from 'nuqs';
-
-import { carryOverListFilters } from '../../Base/relations';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-
-/**
- * Seeds the editable half of the filter with whatever the list page was
- * filtered by, reduced to the clauses the listed resource understands. Runs
- * once per resource, so it never overwrites what the user types, and stands
- * aside for a drawer opened from a link that already carries a filter.
- */
-export function useCarriedOverFilters(
-	targetCategory: InfraMonitoringEntity,
-): void {
-	const { currentQuery } = useQueryBuilder();
-	const listExpression =
-		currentQuery.builder.queryData[0]?.filter?.expression || '';
-	const querySearchOnRun = useQuerySearchOnRun();
-
-	const [urlExpression] = useQueryState(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION,
-		parseAsString,
-	);
-
-	const seededFor = useRef<string | null>(null);
-	const hadUrlExpressionOnMount = useRef<boolean | null>(null);
-	if (hadUrlExpressionOnMount.current === null) {
-		hadUrlExpressionOnMount.current = !!urlExpression;
-	}
-
-	useEffect(() => {
-		if (seededFor.current === targetCategory) {
-			return;
-		}
-
-		const isFirstResource = seededFor.current === null;
-		seededFor.current = targetCategory;
-
-		if (isFirstResource && hadUrlExpressionOnMount.current) {
-			return;
-		}
-
-		querySearchOnRun(carryOverListFilters(listExpression, targetCategory));
-	}, [targetCategory, listExpression, querySearchOnRun]);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useRelatedEntities.ts

@@ -1,113 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import APIError from 'types/api/error';
-
-import {
-	K8sEntityData,
-	K8sEntityListConfig,
-} from '../../Base/entity.config.types';
-import { SelectedItemParams } from '../../hooks';
-
-type FetchRelatedEntities = K8sEntityListConfig<
-	K8sEntityData,
-	string | SelectedItemParams
->['fetchListData'];
-
-interface UseRelatedEntitiesParams {
-	/** Absent while the target category is still unresolved; the query stays idle */
-	fetchListData?: FetchRelatedEntities;
-	queryKey: string;
-	expression: string;
-	/** Time range in seconds — see useEntityDetailsTime */
-	timeRange: { startTime: number; endTime: number };
-}
-
-interface UseRelatedEntitiesResult {
-	records: K8sEntityData[];
-	total: number;
-	page: number;
-	limit: number;
-	setPage: (page: number) => void;
-	setLimit: (limit: number) => void;
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error?: APIError | null;
-	endTimeBeforeRetention?: boolean;
-	refetch: () => void;
-	cancel: () => void;
-}
-
-export const RELATED_ENTITIES_PAGE_SIZE = 10;
-
-const SECOND_IN_MS = 1000;
-
-export function useRelatedEntities({
-	fetchListData,
-	queryKey,
-	expression,
-	timeRange,
-}: UseRelatedEntitiesParams): UseRelatedEntitiesResult {
-	const queryClient = useQueryClient();
-	const [page, setPage] = useState(1);
-	const [limit, setLimit] = useState(RELATED_ENTITIES_PAGE_SIZE);
-
-	useEffect(() => {
-		setPage(1);
-	}, [expression, queryKey]);
-
-	const reactQueryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-			page,
-			limit,
-		],
-		[queryKey, timeRange.startTime, timeRange.endTime, expression, page, limit],
-	);
-
-	const { data, isLoading, isFetching, isError, refetch } = useQuery({
-		queryKey: reactQueryKey,
-		queryFn: ({ signal }) =>
-			(fetchListData as FetchRelatedEntities)(
-				{
-					filter: { expression },
-					offset: (page - 1) * limit,
-					limit,
-					// The list APIs take milliseconds, useEntityDetailsTime gives seconds
-					start: timeRange.startTime * SECOND_IN_MS,
-					end: timeRange.endTime * SECOND_IN_MS,
-				},
-				signal,
-			),
-		enabled: !!fetchListData && !!expression.trim(),
-	});
-
-	const cancel = useCallback((): void => {
-		void queryClient.cancelQueries({ queryKey: reactQueryKey });
-	}, [queryClient, reactQueryKey]);
-
-	const handleRefetch = useCallback((): void => {
-		void refetch();
-	}, [refetch]);
-
-	return {
-		records: data?.records ?? data?.data ?? [],
-		total: data?.total ?? 0,
-		page,
-		limit,
-		setPage,
-		setLimit,
-		isLoading,
-		isFetching,
-		isError,
-		error: data?.error,
-		endTimeBeforeRetention: data?.endTimeBeforeRetention,
-		refetch: handleRefetch,
-		cancel,
-	};
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -2,7 +2,7 @@ import { Container } from '@signozhq/icons';
 import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
-import { CustomTab } from '../Base/types';
+import { CustomTab } from '../Base/K8sBaseDetails';
 import {
 	InfraMonitoringEntity,
 	podUtilizationByPodWidgetInfo,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.module.scss

@@ -26,10 +26,7 @@
 		overflow-y: auto;
 		padding: var(--spacing-8);
 		margin: 0;
-		// On a 13" screen the drawer itself is narrower than 900px, and a flat
-		// minimum there clips the right edge of every tab
-		box-sizing: border-box;
-		min-width: min(900px, 100%);
+		min-width: 900px;
 	}
 }
 
@@ -37,29 +34,6 @@
 	--button-padding: var(--spacing-2);
 }
 
-.backButton {
-	--button-padding: var(--spacing-2) var(--spacing-3);
-
-	flex: none;
-	white-space: nowrap;
-}
-
-// The kind reads as a label on the name, not as part of it
-.entityKind {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	flex: none;
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: 2px;
-	background: var(--l3-background);
-	color: var(--l2-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}
-
 .title {
 	font-family: var(--periscope-font-family-mono);
 

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/events.ts

@@ -1,7 +1,4 @@
-import type {
-	InfraMonitoringEntity,
-	VIEWS,
-} from 'container/InfraMonitoringK8sV2/constants';
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import logEvent from 'api/common/logEvent';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { isCustomTimeRange } from 'store/globalTime';
@@ -18,7 +15,7 @@ export function logInfraDrawerTimeRangeCustomizedEvent(
 
 export function logInfraDrawerFilterCustomizedEvent(
 	entityType: InfraMonitoringEntity,
-	tab: `${VIEWS}`,
+	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
 	expression: string,
 	filterSource: 'search' | 'logs',
 ): void {