chore: simplify PR template and add agent rules

- replace the multi-section PR template with four concise headings
- add .claude/rules/ covering comments (repo-wide, Go, Python) and pull requests
- ignore .dev/ and .claude/worktrees/ in .gitignore

.claude/rules/comments.md

@@ -0,0 +1,11 @@
+# Comments
+
+Applies to everything in the repo — code, config, workflows.
+
+- **No unnecessary comments.** Do not comment where the code is self-explanatory; never restate what the code already says.
+- **Document only** non-obvious behavior, constraints, formats, and edge cases.
+- **Rationale goes in prose, not source.** Why a version is pinned, why a job exists, how a subsystem fits together — that belongs in the README or the PR.
+- **Never remove pre-existing comments** when editing code. The bar above applies to comments you write, not comments already there.
+- **Never talk to the reviewer.** No comments about where a change came from, what was changed, or why the change is correct — that belongs in the PR description and is noise the moment it merges.
+
+Language rules build on this one: [`go-comments`](go-comments.md), [`py-comments`](py-comments.md).

.claude/rules/go-comments.md

@@ -0,0 +1,12 @@
+---
+paths:
+  - "**/*.go"
+---
+
+# Go comments
+
+The bar is the [`comments`](comments.md) rule: nothing where the code is self-explanatory.
+
+- **Names carry the meaning.** Make function, type, and variable names self-explanatory so the comment is unnecessary in the first place. If a comment is needed to explain what a function does, fix the name, not the comment.
+- **Godoc**: Skip comments that merely restate the identifier. Document only non-obvious behavior, constraints, formats, and edge cases.
+- **Generated code**: If the comment is emitted by an external codegen tool, leave it as-is — do not add or trim comments in generated files.

.claude/rules/pull-requests.md

@@ -0,0 +1,7 @@
+# Pull requests
+
+- **Follow the template** (`.github/pull_request_template.md`): fill in its headings (Description / Issues closed by this PR / Screenshots / Additional Information). Don't add sections the template doesn't have.
+- **Keep only the headings that apply.** Delete every heading that has nothing under it, along with its `<!--...-->` placeholder comment. The body must never contain an empty heading — if only Description applies, the body has exactly that one heading.
+- **Keep the description concise and human-readable.** A few plain bullets saying what changed and why, for a reviewer skimming it — not a wall of text, not a restatement of the diff, not generated boilerplate.
+- **Reference issues with `Closes #issue-number`** under "Issues closed by this PR" so they auto-close on merge. This goes in the PR description only — never in commit messages.
+- **AI assistance in commits may optionally be disclosed with an `Assisted-by:` trailer** naming the model (e.g. `Assisted-by: Claude Opus 4.5`) — do NOT use a `Co-authored-by:` trailer for this.

.claude/rules/py-comments.md

@@ -0,0 +1,13 @@
+---
+paths:
+  - "**/*.py"
+---
+
+# Python comments
+
+The bar is the [`comments`](comments.md) rule: nothing where the code is self-explanatory.
+
+- **Names carry the meaning.** Make function and variable names self-explanatory so the comment or docstring is unnecessary in the first place. If a docstring is needed to explain what a function does, fix the name, not the docstring.
+- **No file-level docstring.** The filename says what the module is for — `tool_bin.py` gets the tool binary. A module docstring restating that is noise, and a paragraph of design prose at the top of a file goes stale where nobody is looking. A constraint belongs next to the code it constrains, not in a preamble.
+- **Docstrings**: only when they say something the name and signature don't — drop them otherwise. Keep them short. A contract that genuinely needs a few lines (interacting flags, retry semantics, an edge case) is fine; a narrative is not.
+- **No song and dance.** Comment the constraint or the edge case. Not the narrative, not the rationale, not what the next line does.

.github/pull_request_template.md

@@ -1,85 +1,13 @@
-## Pull Request
-
----
-
-### 📄 Summary
-> Why does this change exist?  
-> What problem does it solve, and why is this the right approach?
-
-
-
-#### Screenshots / Screen Recordings (if applicable)
-> Include screenshots or screen recordings that clearly show the behavior before the change and the result after the change. This helps reviewers quickly understand the impact and verify the update.
-
+<!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.-->
+#### Description
 
+<!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. -->
 #### Issues closed by this PR
-> Reference issues using `Closes #issue-number` to enable automatic closure on merge.
 
----
+<!--If applicable, include screenshots or screen recordings that clearly show the behavior before the change and the result after the change. -->
+#### Screenshots / Screen Recordings
 
-### ✅ Change Type
-_Select all that apply_
+<!--Anything reviewers should keep in mind while reviewing -->
+#### Additional Information
 
-- [ ] ✨ Feature
-- [ ] 🐛 Bug fix
-- [ ] ♻️ Refactor
-- [ ] 🛠️ Infra / Tooling
-- [ ] 🧪 Test-only
-
----
-
-### 🐛 Bug Context
-> Required if this PR fixes a bug
-
-#### Root Cause
-> What caused the issue?  
-> Regression, faulty assumption, edge case, refactor, etc.
-
-#### Fix Strategy
-> How does this PR address the root cause?
-
----
-
-### 🧪 Testing Strategy
-> How was this change validated?
-
-- Tests added/updated:
-- Manual verification:
-- Edge cases covered:
-
----
-
-### ⚠️ Risk & Impact Assessment
-> What could break? How do we recover?
-
-- Blast radius:
-- Potential regressions:
-- Rollback plan:
-
----
-
-### 📝 Changelog
-> Fill only if this affects users, APIs, UI, or documented behavior  
-> Use **N/A** for internal or non-user-facing changes
-
-| Field | Value |
-|------|-------|
-| Deployment Type | Cloud / OSS / Enterprise |
-| Change Type | Feature / Bug Fix / Maintenance |
-| Description | User-facing summary |
-
----
-
-### 📋 Checklist
-- [ ] Tests added or explicitly not required
-- [ ] Manually tested
-- [ ] Breaking changes documented
-- [ ] Backward compatibility considered
-
----
-
-## 👀 Notes for Reviewers
-
-<!-- Anything reviewers should keep in mind while reviewing -->
-
----
+<!--Please delete paragraphs that you did not use before submitting.-->

.github/workflows/cacheci.yml

@@ -0,0 +1,92 @@
+name: cacheci
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  actions: write
+
+# Cancelling mid-rotation is safe: the sequential delete-then-save order
+# leaves at most one key missing at any moment.
+concurrency:
+  group: cacheci
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: restore
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
+      - name: build
+        run: |
+          docker build -f cmd/enterprise/Dockerfile.integration --build-arg TARGETARCH=amd64 --build-arg ZEUSURL=http://zeus:8080 .
+          docker build -f cmd/enterprise/Dockerfile.with-web.integration --build-arg TARGETARCH=amd64 --build-arg ZEUSURL=http://zeus:8080 .
+      # docker cp instead of --output type=local (the local exporter stalls on
+      # multi-GB outputs); tarballs instead of raw trees so the host never hits
+      # the permission and symlink semantics that broke docker cp.
+      - name: extract
+        run: |
+          rm -rf "$RUNNER_TEMP/cacheci"
+          mkdir -p "$RUNNER_TEMP/cacheci" "$RUNNER_TEMP/extract-context"
+          cat > "$RUNNER_TEMP/extract.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              mkdir -p /out && \
+              tar -cf /out/go-build.tar -C /root/.cache/go-build . && \
+              tar -cf /out/go-mod.tar -C /go/pkg/mod . && \
+              tar -cf /out/pnpm-store.tar -C /pnpm/store .
+          EOF
+          docker build -f "$RUNNER_TEMP/extract.Dockerfile" -t cacheci-extract "$RUNNER_TEMP/extract-context"
+          id=$(docker create cacheci-extract)
+          docker cp "$id":/out/. "$RUNNER_TEMP/cacheci/"
+          docker rm "$id"
+      # Fixed cache keys are immutable, so each key must be deleted before it
+      # can be saved again. Rotating primary and secondary one after the other
+      # keeps at least one key restorable for concurrent test runs.
+      - name: delete-primary
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh cache delete tests-primary --repo "$GITHUB_REPOSITORY" || true
+      - name: save-primary
+        uses: actions/cache/save@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+      - name: delete-secondary
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh cache delete tests-secondary --repo "$GITHUB_REPOSITORY" || true
+      - name: save-secondary
+        uses: actions/cache/save@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-secondary

.github/workflows/e2eci.yaml

@@ -75,6 +75,30 @@ jobs:
           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
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
       - name: bring-up-stack
         run: |
           cd tests && \

.github/workflows/integrationci.yaml

@@ -39,6 +39,8 @@ jobs:
       matrix:
         suite:
           - alerts
+          - alertmanager
+          - alertmanagerrotation
           - basepath
           - callbackauthn
           - cloudintegrations
@@ -53,6 +55,7 @@ jobs:
           - queriermetrics
           - querierscalar
           - queriercommon
+          - querierai
           - rawexportdata
           - promqlconformance
           - querierauthz
@@ -110,6 +113,30 @@ jobs:
           sudo mv chromedriver-linux64/chromedriver /usr/local/bin/chromedriver
           chromedriver -version
           google-chrome-stable --version
+      # Restore-only: the cacheci workflow owns cache saves. Seeds the
+      # BuildKit cache mounts so the in-test image build is incremental.
+      - name: restore
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
       - name: run
         run: |
           cd tests && \

.gitignore

@@ -90,8 +90,6 @@ queries.active
 .devenv/**/tmp/**
 .qodo
 
-.dev
-
 ### Python ###
 # Byte-compiled / optimized / DLL files
 __pycache__/
@@ -231,4 +229,6 @@ cython_debug/
 # LSP config files
 pyrightconfig.json
 
-
+# dev
+.dev/
+.claude/worktrees/

Makefile

@@ -209,8 +209,8 @@ py-lint: ## Run ruff check across the shared tests project
 	@cd tests && uv run ruff check --fix .
 
 .PHONY: py-test-setup
-py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests, rebuilding signoz from the current sources
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no integration/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
 py-test-teardown: ## Tear down the shared SigNoz backend

cmd/enterprise/Dockerfile.integration

@@ -4,9 +4,13 @@ ARG OS="linux"
 ARG TARGETARCH
 ARG ZEUSURL
 
+# HOME comes from the build user, not the image config; declare it so the
+# /root paths below trace to it.
+ENV HOME=/root
+
 # This path is important for stacktraces
 WORKDIR $GOPATH/src/github.com/signoz/signoz
-WORKDIR /root
+WORKDIR $HOME
 
 RUN set -eux; \
 	apt-get update; \
@@ -14,23 +18,36 @@ RUN set -eux; \
 		g++ \
 		gcc \
 		libc6-dev \
-		make \
 		pkg-config \
 	; \
 	rm -rf /var/lib/apt/lists/*
 
+# Keep the literal cache-mount targets below in sync with these. The caches
+# are shared with Dockerfile.with-web.integration (same target paths).
+ENV GOCACHE=$HOME/.cache/go-build
+ENV GOMODCACHE=$GOPATH/pkg/mod
+
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
-COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
-RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+# Invoked directly instead of via make so Makefile changes don't invalidate
+# this layer; the Makefile's git-derived ldflags resolve to empty in here
+# anyway (.git is dockerignored).
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	GOARCH=${TARGETARCH} GOOS=${OS} go build -C ./cmd/enterprise -race -tags timetzdata -o /root/signoz \
+	-ldflags "-s -w \
+		-X github.com/SigNoz/signoz/pkg/version.version=integration \
+		-X github.com/SigNoz/signoz/pkg/version.variant=enterprise \
+		-X github.com/SigNoz/signoz/ee/zeus.url=${ZEUSURL} \
+		-X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=${ZEUSURL}/api/v1"
 
 RUN chmod 755 /root /root/signoz
 

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,10 +1,23 @@
 FROM node:22-bookworm AS build
 
 WORKDIR /opt/
-COPY ./frontend/ ./
+
+# HOME comes from the build user, not the image config.
+ENV HOME=/root
+# pnpm's store lives at $PNPM_HOME/store — a dedicated directory pnpm
+# manages. Keep the literal cache-mount targets below in sync.
+ENV PNPM_HOME=/pnpm
 ENV NODE_OPTIONS=--max-old-space-size=8192
+
 RUN CI=1 npm i -g pnpm@10
-RUN CI=1 pnpm install
+
+# pnpm fetch resolves from the lockfile alone and runs no lifecycle scripts;
+# the repo's postinstall needs source files that are not copied yet.
+COPY ./frontend/package.json ./frontend/pnpm-lock.yaml ./frontend/pnpm-workspace.yaml ./
+RUN --mount=type=cache,target=/pnpm/store CI=1 pnpm fetch
+
+COPY ./frontend/ ./
+RUN --mount=type=cache,target=/pnpm/store CI=1 pnpm install --offline
 RUN CI=1 pnpm build
 
 FROM golang:1.25-bookworm
@@ -13,9 +26,13 @@ ARG OS="linux"
 ARG TARGETARCH
 ARG ZEUSURL
 
+# HOME comes from the build user, not the image config; declare it so the
+# /root paths below trace to it.
+ENV HOME=/root
+
 # This path is important for stacktraces
 WORKDIR $GOPATH/src/github.com/signoz/signoz
-WORKDIR /root
+WORKDIR $HOME
 
 RUN set -eux; \
 	apt-get update; \
@@ -23,23 +40,36 @@ RUN set -eux; \
 		g++ \
 		gcc \
 		libc6-dev \
-		make \
 		pkg-config \
 	; \
 	rm -rf /var/lib/apt/lists/*
 
+# Keep the literal cache-mount targets below in sync with these. The caches
+# are shared with Dockerfile.integration (same target paths).
+ENV GOCACHE=$HOME/.cache/go-build
+ENV GOMODCACHE=$GOPATH/pkg/mod
+
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
-COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
-RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+# Invoked directly instead of via make so Makefile changes don't invalidate
+# this layer; the Makefile's git-derived ldflags resolve to empty in here
+# anyway (.git is dockerignored).
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	GOARCH=${TARGETARCH} GOOS=${OS} go build -C ./cmd/enterprise -race -tags timetzdata -o /root/signoz \
+	-ldflags "-s -w \
+		-X github.com/SigNoz/signoz/pkg/version.version=integration \
+		-X github.com/SigNoz/signoz/pkg/version.variant=enterprise \
+		-X github.com/SigNoz/signoz/ee/zeus.url=${ZEUSURL} \
+		-X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=${ZEUSURL}/api/v1"
 
 COPY --from=build /opt/build ./web/
 

docs/api/openapi.yml

@@ -6902,6 +6902,7 @@ components:
     Querybuildertypesv5QueryEnvelope:
       discriminator:
         mapping:
+          builder_ai_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
           builder_formula: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
           builder_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
           builder_trace_operator: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
@@ -6910,6 +6911,7 @@ components:
         propertyName: type
       oneOf:
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
@@ -6924,6 +6926,15 @@ components:
       required:
       - type
       type: object
+    Querybuildertypesv5QueryEnvelopeBuilderAI:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      required:
+      - type
+      type: object
     Querybuildertypesv5QueryEnvelopeClickHouseSQL:
       properties:
         spec:
@@ -7037,6 +7048,7 @@ components:
     Querybuildertypesv5QueryType:
       enum:
       - builder_query
+      - builder_ai_query
       - builder_formula
       - builder_trace_operator
       - clickhouse_sql
@@ -7430,6 +7442,8 @@ components:
       - below
       - equal
       - not_equal
+      - above_or_equal
+      - below_or_equal
       - outside_bounds
       type: string
     RuletypesCumulativeSchedule:
@@ -10233,9 +10247,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Delete public dashboard
       tags:
       - dashboard
@@ -10284,9 +10298,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:read
       - tokenizer:
-        - ADMIN
+        - dashboard:read
       summary: Get public dashboard
       tags:
       - dashboard
@@ -10341,9 +10355,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Create public dashboard
       tags:
       - dashboard
@@ -10385,9 +10399,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Update public dashboard
       tags:
       - dashboard
@@ -14725,9 +14739,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboard saved views
       tags:
       - dashboard
@@ -14782,9 +14796,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Create dashboard saved view
       tags:
       - dashboard
@@ -14835,9 +14849,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Delete dashboard saved view
       tags:
       - dashboard
@@ -14903,9 +14917,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Update dashboard saved view
       tags:
       - dashboard
@@ -14980,9 +14994,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboards (v2)
       tags:
       - dashboard
@@ -15037,9 +15051,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:create
       - tokenizer:
-        - EDITOR
+        - dashboard:create
       summary: Create dashboard (v2)
       tags:
       - dashboard
@@ -15090,9 +15104,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:delete
       - tokenizer:
-        - EDITOR
+        - dashboard:delete
       summary: Delete dashboard (v2)
       tags:
       - dashboard
@@ -15153,9 +15167,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:read
       - tokenizer:
-        - VIEWER
+        - dashboard:read
       summary: Get dashboard (v2)
       tags:
       - dashboard
@@ -15227,9 +15241,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Patch dashboard (v2)
       tags:
       - dashboard
@@ -15296,9 +15310,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Update dashboard (v2)
       tags:
       - dashboard
@@ -15364,9 +15378,11 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:read
+        - dashboard:create
       - tokenizer:
-        - EDITOR
+        - dashboard:read
+        - dashboard:create
       summary: Clone dashboard (v2)
       tags:
       - dashboard
@@ -15417,9 +15433,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Unlock dashboard (v2)
       tags:
       - dashboard
@@ -15469,12 +15485,78 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Lock dashboard (v2)
       tags:
       - dashboard
+  /api/v2/dashboards/{id}/migrate:
+    post:
+      deprecated: false
+      description: 'This endpoint retries the v1→v2 (Perses) migration on a dashboard
+        still stored in the v1 schema and returns the v2-shape result. It is idempotent:
+        a dashboard already in the v2 schema is returned unchanged.'
+      operationId: MigrateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  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
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - dashboard:update
+      - tokenizer:
+        - dashboard:update
+      summary: Migrate dashboard to v2
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false
@@ -23615,9 +23697,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboards for the current user (v2)
       tags:
       - dashboard
@@ -23662,9 +23744,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: Unpin a dashboard for the current user (v2)
       tags:
       - dashboard
@@ -23721,9 +23803,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: Pin a dashboard for the current user (v2)
       tags:
       - dashboard

docs/contributing/prometheus.md

@@ -0,0 +1,377 @@
+# PromQL Serving — clickhouseprometheusv2
+
+This document gives the context for `pkg/prometheus/clickhouseprometheusv2`.
+This package is the second-generation ClickHouse-backed Prometheus provider.
+The document tells you why the package exists. It tells you the correctness
+rules that shaped it. It shows how we prove that each construct does not
+change results. Keep these invariants when you change the provider. If your
+change breaks an invariant, flag it and discuss it first.
+
+---
+
+## Why a second provider
+
+The v1 provider (`pkg/prometheus/clickhouseprometheus`) serves the promql
+engine through the remote-read protobuf adapter. It fetches every raw sample
+of a query's union window. It serializes all of them and gives them to the
+engine. The cost follows the ingested data, not the question. This is how a
+dashboard of PromQL panels can take an instance down.
+
+In v2, each query runs in one of two ways. The classifier decides per query:
+
+- **Transpiled**: ClickHouse evaluates the query. Only final (or near-final)
+  per-group grid arrays come back. The statements use the
+  `timeSeries*ToGrid` aggregate functions. The supported ClickHouse floor is
+  25.6 or later, so these functions are assumed available.
+- **Engine**: the stock promql engine evaluates over this package's native
+  `storage.Querier`. Every shape that does not transpile takes this path.
+
+**The core rule: a PromQL result that differs from upstream Prometheus is a
+lost user. A construct that cannot reproduce engine semantics exactly falls
+back. It does not approximate.** The conformance suite
+(`tests/integration/tests/promqlconformance/`) replays Prometheus' own test
+corpus against both providers. It is the arbiter. The classification golden
+(`testdata/classification_golden.json`) freezes the route of each corpus
+expression. The rest of this document is the PromQL-to-SQL story. That
+mapping is where correctness is won or lost.
+
+---
+
+## The evaluation model the SQL must reproduce
+
+A PromQL range query is an instant query evaluated at each grid point
+`t_i = start + i*step`, for `i = 0..(end-start)/step`. At each `t_i`:
+
+- An instant selector resolves to the latest sample in the left-open
+  lookback window `(t_i - lookback, t_i]`. If that latest sample is a stale
+  marker, the selector resolves to nothing. Older real samples in the window
+  do not change this.
+- A range selector `[r]` collects every sample in `(t_i - r, t_i]`. Stale
+  markers are excluded.
+- `offset d` shifts both windows to `(t_i - d - w, t_i - d]`.
+
+The transpilation invariant follows from this model. Each transpiled
+construct produces one array per output series. The array has exactly one
+slot per grid point. Slot `i` holds the value at `t_i`. NULL means absent.
+This makes composition correct, not only convenient. The engine evaluates
+these operators independently per `t_i`. A representation that gets every
+slot right gets the whole query right. Spatial aggregation over arrays is
+sound because it combines values that belong to the same `t_i` by
+construction. Scan time maps slot `i` back to `t_i = start + i*step`
+(`toMatrix`). The sections below fill those slots with exactly the numbers
+the engine computes. We validated each equivalence against the vendored
+engine on live data before its shape entered the allowlist. An unproven
+shape stays on the engine path.
+
+## Classification: finding what a statement can answer
+
+`classify` walks the parsed AST and looks for "core units". A core unit is a
+maximal subtree of this shape:
+
+	[agg by/without (...)] [fn(] selector[range] [offset d] [)] [op scalar]...
+
+`classifyCore` peels that chain from the outside in. It takes an optional
+sum/min/max/avg/count aggregation. It then takes one allowlisted function or
+a bare instant selector. It then takes the selector with its offset. On the
+way out, it collects number-literal arithmetic, comparisons (including
+`bool`), and unary minus into a scalar-op pipeline. A node qualifies only if
+its type, arguments, and children are in the proven set. This is an
+allowlist. An overlooked construct becomes a fallback, not a wrong number.
+
+Three unit kinds come out. Each kind has its own SQL form:
+
+- `unitRange`: rate, irate, increase, delta, idelta over a range selector.
+- `unitInstant`: instant vector selection, bare or comparison-filtered.
+- `unitOverTime`: avg/min/max/sum/count/last `_over_time`.
+
+If the whole tree is one unit, the plan is "full". The statement's rows are
+the query result. Otherwise, `rewrite` cuts out each maximal unit and puts a
+synthetic selector `__signoz_transpiled_N__` in its place. The engine then
+runs the rewritten expression over the units' materialized results. This is
+a "hybrid" plan. `histogram_quantile`, `topk`, `or`/`and`/`unless`, and
+vector matching keep exact engine semantics. Their expensive inputs were
+aggregated server-side.
+
+Classification refuses a shape when it cannot guarantee exact semantics
+server-side:
+
+- The `@` modifier, anywhere.
+- Default-resolution subqueries. Their resolution is a server runtime
+  setting that the transpiler cannot see.
+- Duration expressions (`offset step()`, `[range()]`, ...), anywhere. The
+  engine resolves them into the selector's static fields only at evaluation
+  time. At classification time those fields hold zero values. A transpile
+  would silently use the wrong offset or range.
+- Steps or ranges that are not whole seconds. The grid functions take
+  whole-second parameters.
+- Grouping by `__name__`, or matching on it, in hybrid plans. The synthetic
+  name would leak into results.
+- Name-keeping units in hybrid plans. Bare and comparison-filtered instant
+  selectors and `last_over_time` keep their real `__name__` (`keepsName`).
+  Substitution would replace that name. These units transpile only as full
+  plans.
+- Every function outside the allowlist: changes, resets,
+  quantile_over_time, absent, native-histogram functions, and more.
+
+Units inside a fixed-resolution subquery evaluate on the subquery's own
+grid, not the query grid. That grid is the set of epoch-aligned multiples of
+the resolution strictly after `outerStart - offset - range`, ending at
+`outer end - offset`. This is the exact derivation the engine uses. A grid
+shifted by one step changes which samples every window sees.
+
+## From one unit to one statement
+
+`buildUnitSQL` renders each unit as one statement. For
+`sum by (pod) (rate(m{job="api"}[5m]))` the skeleton is:
+
+	SELECT g0, sumForEach(grid) AS grid FROM (
+	    SELECT any(series.g0) AS g0,
+	           timeSeriesRateToGrid(<start>, <end>, <step>, <range>)(fromUnixTimestamp64Milli(unix_milli), value) AS grid
+	    FROM signoz_metrics.distributed_samples_v4 AS points
+	    INNER JOIN (
+	        SELECT fingerprint, JSONExtractString(labels, 'pod') AS g0
+	        FROM signoz_metrics.time_series_v4
+	        WHERE <series predicates>
+	        GROUP BY fingerprint, g0
+	    ) AS series ON points.fingerprint = series.fingerprint
+	    WHERE metric_name = ? AND temporality IN ['Cumulative', 'Unspecified']
+	      AND unix_milli > <start - range> AND unix_milli <= <end>
+	      AND bitAnd(flags, 1) = 0
+	    GROUP BY points.fingerprint
+	) GROUP BY g0
+	SETTINGS allow_experimental_ts_to_grid_aggregate_function = 1
+
+Read it from the inside out.
+
+**The time window** is the selector's semantics, verbatim. Strict `>` on the
+lower bound and `<=` on the upper bound is the left-open `(t - w, t]` rule.
+The offset shifts the whole window. `bitAnd(flags, 1) = 0` drops stale
+markers. PromQL excludes them from range vectors.
+
+**The inner GROUP BY** computes one grid array per series.
+`timeSeriesRateToGrid(start, end, step, range)` is a parametric aggregate.
+It takes (timestamp, value) pairs and produces `Array(Nullable(Float64))`
+with one slot per grid point. It is correct because it implements the
+engine's `extrapolatedRate`, decision for decision: counter resets, the
+zero-point clamp, the extrapolation thresholds, the two-samples rule, and
+the left-open window. We verified this: we fed identical samples to both and
+compared slot for slot. The only observed difference is the last bit.
+ClickHouse's C++ and Go round the same formula differently. That is the
+floating-point floor, not a semantic gap. irate/delta/idelta map to their
+own `timeSeries*ToGrid` functions, with the same verification. `increase`
+has no function of its own. We emit
+`arrayMap(x -> x * <range seconds>, <rate expr>)`. This is exact by
+definition: `extrapolatedRate` computes the same extrapolated delta for both
+and divides by the range only when `isRate`. The multiplication reverses it
+exactly. The grid parameters render as literals, not bound args. They are
+aggregate-function parameters. The experimental gate rides as a SETTINGS
+clause on the statement itself, so telemetrystore hooks cannot remove it.
+
+The group key is functionally dependent on the fingerprint: one fingerprint
+is the hash of one labelset. So the inner query groups by the fingerprint
+alone and reads the key columns with `any()`. This is exact, and it makes
+the per-row hash key smaller.
+
+**The join** gives each series its group key, in one of two forms.
+`by (...)` extracts each listed label as a plain column
+(`JSONExtractString(labels, 'pod') AS g0`) and groups on the columns. The
+projection is a known short list, and the label names live in Go. To build,
+sort, and stringify every label pair per row would be waste. This is correct
+because column-tuple equality is label-set equality on the projection. An
+extracted `''` means the label is absent. That is Prometheus semantics for
+`by()` over missing labels. The empties are skipped when the columns turn
+back into labels. `without` and no-aggregation project a label set that
+varies per series. They get the canonical key: `toJSONString` of the sorted
+[label, value] pairs that the unit projects. `without` excludes the listed
+labels plus `__name__`. No-aggregation keeps everything; the name comes off
+in Go, per the engine's name-dropping rules. Here the sort is load-bearing.
+Stored JSON key order is not canonical across fingerprints. Two orderings of
+the same labels must land in one group. Empty values are filtered for the
+same absent-label reason. The same string parses back into the output label
+set (`labelsFromGroupKey`).
+
+**The outer GROUP BY** is the spatial aggregation. sum/min/max/avg/count
+by/without become the `-ForEach` combinators. Element-wise aggregation over
+grid arrays is the engine's per-`t_i` aggregation: slot `i` of every input
+array refers to the same `t_i`. The combinators skip NULLs. That is the
+engine aggregating only the series present at `t_i`. An index where every
+series is absent stays NULL. Two edges need explicit handling. First,
+`countForEach` wraps in a map of 0 back to NULL. A count over an all-absent
+index is an absent point, not 0. Second, a unit without aggregation still
+passes through `maxForEach`. That is the identity for the common
+one-fingerprint group. It is a deterministic NULL-skipping merge when a
+regex `__name__` selector collapses distinct metrics onto one projected
+label set. One caveat is inherent: the summation order over series differs
+from the engine's. Spatial aggregates can differ in the last ULP. Float
+addition is not associative. No ordering reproduces the engine's result
+bit-exactly from inside a GROUP BY.
+
+## Instant selectors: staleness needs two aggregates
+
+`unitInstant` uses window = lookback. It must reproduce the shadowing rule:
+the point is absent when the latest in-window sample is a stale marker.
+`timeSeriesLastToGrid` alone cannot express that. To skip stale rows in
+WHERE would resurrect the older real sample that the marker buried. So stale
+rows stay in the scan for this kind only. The grid expression compares three
+aggregates per slot:
+
+	arrayMap((tall, tok, vok) -> if(tall IS NULL OR tok IS NULL OR tall != tok, NULL, vok),
+	         timeSeriesLastToGrid(...)(ts, toFloat64(unix_milli)),                           -- last sample overall
+	         timeSeriesLastToGridIf(...)(ts, toFloat64(unix_milli), bitAnd(flags, 1) = 0),   -- last non-stale, its timestamp
+	         timeSeriesLastToGridIf(...)(ts, value, bitAnd(flags, 1) = 0))                   -- last non-stale, its value
+
+This is correct by cases on a slot's window. No samples at all: both
+timestamp aggregates are NULL, so the slot is NULL. That is absent, as the
+engine says. Latest sample non-stale: it is the latest overall and the
+latest non-stale. The timestamps agree. The slot takes its value. That is
+the engine's pick. Latest sample stale: the last-overall timestamp is the
+marker's. The last-non-stale timestamp is older, or NULL when the window
+holds only markers. They disagree. The slot is NULL. The marker shadows,
+exactly as the engine's rule says. Timestamps are unique per series (ingest
+dedups). So timestamp equality identifies "the same sample" without
+ambiguity. We probed the `-If` combinator against these experimental
+aggregates before we trusted it.
+
+## Windowed *_over_time: whole buckets instead of a grid function
+
+avg/min/max/sum/count `_over_time` aggregate every raw sample in the window.
+No `timeSeries*ToGrid` function computes them. (`last_over_time` is the
+exception. The last sample of a range vector is exactly
+`timeSeriesLastToGrid`. PromQL excludes stale markers from range vectors; we
+exclude them in WHERE.) These shapes transpile only when the range is a
+whole multiple of the step. Then the window needs no per-sample fan-out.
+With `W = range/step`, the window `(t_k - range, t_k]` is exactly the union
+of W step buckets. Both are left-open on the same boundaries. So bucket
+membership fully determines window membership. Each sample lands in exactly
+one bucket:
+
+	intDiv(unix_milli - <start> + <range> - 1, <step>)
+
+This is `ceil((ts - start)/step)` shifted by W-1, so the earliest in-window
+sample sits at 0. Slot k's window is buckets in `[k, k+W-1]`. The
+alternative fans each sample into all W windows that cover it. That
+multiplies rows by W. For a long range over a short step, that is a row
+explosion measured in billions. The bucketed form's row count is
+series × buckets: the size of the output, for any W.
+
+Each series aggregates in one group. The `-Resample` combinator
+(`sumResample`, `countResample`) holds the dense per-bucket partials inside
+one group state: a bucket count, plus the function's value aggregate (sum
+for sum/avg, min, max). An earlier form grouped by (series, bucket) and
+assembled with `groupArrayInsertAt`. At scale that made 37M hash groups, and
+per-thread partials scaled memory with the thread count. The slide then
+combines each slot's at-most-W bucket partials by direct aggregation
+(`arraySum(arraySlice(...))`). Window sums are added the way the engine adds
+them. There is no prefix-sum differencing: its large-minus-large
+cancellation would drift past the shadow tolerance on counter-sized values.
+This is correct per slot because the bucket union is the exact window
+multiset, and avg/min/max/sum/count are order-insensitive on a multiset
+(sum/avg up to summation order; see the float caveat above). A slot with
+zero window count is absent. min/max filter their slices on the bucket
+counts. An empty bucket's default can never look like a value: a real sample
+can legitimately be +Inf.
+
+Two shapes fall back to the engine path, which is exact: a range that does
+not divide the step, and a window wider than `maxWindowBuckets` buckets (the
+slide costs W combines per slot). A range narrower than the step needs
+neither gate: the windows are pairwise disjoint, one bucket per slot, no
+slide. That form is exact only together with the window-sliver predicate
+below.
+
+## Scalar ops, full plans, hybrid plans
+
+The scalar-op pipeline runs in Go on the returned arrays
+(`applyScalarOps`), slot by slot. Arithmetic operators compute. Comparisons
+filter: the slot keeps the vector-side value or becomes NULL. Under `bool`
+they return 0/1. This is trivially correct. It is the same float64 operation
+the engine applies, to the same slot value, in the same operator order the
+AST dictates. Go instead of another SQL layer changes where, not what.
+
+A full plan's arrays map straight to the result matrix. A hybrid plan
+materializes each unit's arrays as synthetic series under its
+`__signoz_transpiled_N__` name. The engine evaluates the rewritten
+expression over a storage that serves synthetic names from memory and
+everything else live. Substitution is sound because a unit's output is a
+plain instant vector to the engine: same values at same timestamps, under a
+different name. The name cannot matter. Plans that group by or match on
+`__name__` were refused at classification. Name-keeping units are never
+substituted. One subtlety makes it exact: we write stale markers at absent
+grid points. Without them, the engine's lookback would resurrect a point
+from up to `lookback` earlier. The marker encodes "absent here" the way the
+engine itself encodes it. Units evaluate concurrently. Each unit is one
+series lookup plus one grid statement. A step of 0 is an instant query: a
+single evaluation at `end`.
+
+A note on the window sliver: when the window is narrower than the step, the
+grid windows cover only `window/step` of the timeline. A sample in a gap
+belongs to no window. It cannot move any grid point, but the grid aggregate
+would buffer it. A WHERE predicate keeps only the in-window rows:
+`positiveModulo(selStart - unix_milli, step) < window`, with the scan capped
+at the last grid point. The lattice anchors at the selector start, because
+the end can sit off-lattice on unaligned grids. This cut a 36k-series
+one-week rate from 74s/28GiB to 16s/4.3GiB on fleet data. Over slivered
+rows, `timeSeriesLastToGrid`'s window widening is harmless, so instant
+selectors and `last_over_time` transpile at window < step too.
+
+## Series lookup
+
+Both paths resolve matchers the same way, once per selector
+(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
+at 1h/6h/1d/1w granularities. The shared schema package
+(`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
+fits the window. It rounds the window start down to the bucket boundary, so
+a window that begins mid-bucket still matches the bucket's row. How matchers
+become SQL, and why regexes are anchored, is documented at
+`applySeriesConditions`. Empty-valued labels come off at this boundary. An
+empty value means "label absent" in Prometheus, but stored attribute JSON
+can carry them.
+
+## The engine path
+
+Queries that do not transpile run in the stock engine over this package's
+`storage.Querier`. This is still not the v1 path. Samples are fetched per
+selector with the engine's per-selector hints, not the query-wide union
+window. So `foo / foo offset 1d` reads two narrow windows, not the widest
+one twice. Instant selectors of subquery-free queries fetch only the last
+sample per step bucket (`lastSamplePerStep`). Buckets anchor at the
+selector's first evaluation timestamp. The code recovers it from the hints
+as `hints.Start + lookback - 1ms`, the inverse of how the engine derives
+`hints.Start`. Bucket boundaries then coincide with evaluation timestamps.
+A non-final sample of a bucket can never be the latest sample in
+`(t - lookback, t]` for any grid `t`. Real timestamps are preserved, so the
+engine's own lookback and staleness handling stay exact. Range selectors
+always fetch raw: every sample feeds the range function. The subquery-free
+proof travels in the context as `prometheus.QueryTraits`. Subquery selectors
+evaluate at the subquery's step, while the hints carry the top-level step.
+Row assembly maps stale flags to the engine's StaleNaN. It merges series
+with identical label sets (`sortAndMerge`): the engine assumes storages
+never emit duplicates.
+
+## Sharding
+
+`samples_v4` and `time_series_v4` (and all their rollups) shard on the same
+key: `cityHash64(env, temporality, metric_name, fingerprint)`. So a series'
+samples and catalog rows live on the same shard. The transpiled statement
+exploits that. The distributed samples table at the top-level FROM makes
+ClickHouse rewrite the whole inner query per shard. The join against the
+shard-local series table and the per-series grid aggregation run next to
+the data. The initiator only merges aggregate states and applies the
+spatial `-ForEach` step. This is the same layout as the telemetrymetrics
+statement builder. The group-key join alone restricts the transpiled scan
+to the matched series. The engine path's samples fetch restricts by the
+same predicates as a shard-local semi-join, not a GLOBAL broadcast of the
+matched set. The temporality filter on every samples statement is a
+semantic no-op: the matched fingerprints already come from those
+temporalities. It engages the leading samples primary-key column.
+Delta-temporality series stay invisible to PromQL here, exactly as in v1.
+The rollout gate is parity with v1. To make Delta visible is its own change
+with its own semantics to design. A Delta stream fed to `rate()`
+as-if-cumulative would be wrong, not just new.
+
+## Observability
+
+Every statement carries a `log_comment` with
+`code.namespace=clickhouse-prometheus-v2` and `code.function.name` naming
+the call site (`selectSeries`, `selectSamples`, `transpiledUnit`,
+`LabelValues`, `LabelNames`). This provider's work is attributable in
+`system.query_log` without guessing from query text.

docs/contributing/tests/e2e.md

@@ -30,11 +30,11 @@ yarn install:browsers   # one-time Playwright browser install
 
 ### Starting the Test Environment
 
-To spin up the backend stack (SigNoz, ClickHouse, Postgres, Zookeeper, Zeus mock, gateway mock, seeder, migrator-with-web) and keep it running:
+To spin up the backend stack (SigNoz, ClickHouse, Postgres, ClickHouse Keeper, Zeus mock, gateway mock, seeder, migrator-with-web) and keep it running:
 
 ```bash
 cd tests
-uv run pytest --basetemp=./tmp/ -vv --reuse --with-web \
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --with-web \
   e2e/bootstrap/setup.py::test_setup
 ```
 
@@ -45,8 +45,13 @@ This command will:
 - Start the HTTP seeder container (`tests/seeder/` — exposing `/telemetry/{traces,logs,metrics}` POST + DELETE)
 - Write backend coordinates to `tests/e2e/.env.local` (loaded by `playwright.config.ts` via dotenv)
 - Keep containers running via the `--reuse` flag
+- Rebuild the SigNoz container from the current sources via the `--rebuild` flag
 
-The `--with-web` flag builds the frontend into the SigNoz container — required for E2E. The build takes ~4 mins on a cold start.
+The `--with-web` flag builds the frontend into the SigNoz container — required for E2E. The build takes ~4 mins on a cold start; later builds are incremental.
+
+### Rebuilding After Source Changes
+
+The `--with-web` image bakes the built frontend in, so neither backend nor frontend changes are picked up while `--reuse` keeps the container running. `--rebuild` fixes that for both: it kills the SigNoz container, rebuilds the image incrementally (go build cache + pnpm store — a frontend-only change rebuilds in about a minute), and starts a fresh one while databases, mocks, migrations, and the seeder stay reused. The setup command above passes it, so the iteration loop is: change code → re-run the setup command → re-run your specs. `--rebuild` requires `--reuse` and cannot be combined with `--teardown` or `--clean`.
 
 ### Stopping the Test Environment
 
@@ -281,13 +286,16 @@ The full `playwright.config.ts` is the source of truth. Common things to tweak:
 The same pytest flags integration tests expose work here, since E2E reuses the shared fixture graph:
 
 - `--reuse` — keep containers warm between runs (required for all iteration).
+- `--rebuild` — recreate the SigNoz container from the current sources (backend and, with `--with-web`, frontend) while the rest of the stack stays up. Requires `--reuse`.
 - `--teardown` — tear everything down.
+- `--clean` — prune the docker build caches, forcing the next image build to start cold.
 - `--with-web` — build the frontend into the SigNoz container. **Required for E2E**; integration tests don't need it.
-- `--sqlstore-provider`, `--postgres-version`, `--clickhouse-version`, etc. — see `docs/contributing/integration.md`.
+- `--sqlstore-provider`, `--postgres-version`, `--clickhouse-version`, etc. — see `docs/contributing/tests/integration.md`.
 
 ## What should I remember?
 
-- **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build; you only want to pay that once.
+- **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build on a cold start; later builds are incremental.
+- **Changed backend or frontend code? Re-run the setup command** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Don't teardown before setup.** `--reuse` correctly handles partially-set-up state, so chaining teardown → setup wastes time.
 - **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Drop to `page.request.*` only when the UI can't reach what you need.
 - **Use `page.waitForResponse` on UI clicks** to assert BE contracts — it still exercises the UI trigger path.

docs/contributing/tests/integration.md

@@ -37,13 +37,34 @@ make py-test-setup
 Under the hood this runs, from `tests/`:
 
 ```bash
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/bootstrap/setup.py::test_setup
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no integration/bootstrap/setup.py::test_setup
 ```
 
 This command will:
-- Start all required services (ClickHouse, PostgreSQL, Zookeeper, SigNoz, Zeus mock, gateway mock)
+- Start all required services (ClickHouse, PostgreSQL, ClickHouse Keeper, SigNoz, Zeus mock, gateway mock)
 - Register an admin user
 - Keep containers running via the `--reuse` flag
+- Rebuild the SigNoz container from the current sources via the `--rebuild` flag
+
+### Rebuilding After Source Changes
+
+`--reuse` keeps the running SigNoz container, which means backend source changes are not picked up. `--rebuild` fixes exactly that: it kills the existing SigNoz container, rebuilds the image (incremental — only changed packages recompile thanks to the build cache), and starts a fresh one, while everything else (databases, mocks, migrations) stays reused. `make py-test-setup` passes it by default, so the iteration loop is simply:
+
+```bash
+make py-test-setup      # (re)build signoz from your current sources
+uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/<suite>/
+# ... edit backend code or tests ...
+make py-test-setup      # pick up the backend changes
+uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/<suite>/
+```
+
+The same applies to the e2e stack. `--rebuild` requires `--reuse` and cannot be combined with `--teardown` or `--clean`.
+
+Some suites define their own SigNoz variant in a suite-local `conftest.py` (`create_signoz(..., cache_key=...)` — e.g. `basepath`, `metricreduction`, `querier_json_body`). Those containers are not touched by `make py-test-setup`, which only rebuilds the default instance. For such suites, pass `--rebuild` on the suite run itself — it rebuilds every SigNoz variant the run instantiates:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild integration/tests/<suite>/
+```
 
 ### Stopping the Test Environment
 
@@ -56,11 +77,21 @@ make py-test-teardown
 Which runs:
 
 ```bash
-uv run pytest --basetemp=./tmp/ -vv --teardown integration/bootstrap/setup.py::test_teardown
+uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no integration/bootstrap/setup.py::test_teardown
 ```
 
 This destroys the running integration test setup and cleans up resources.
 
+### Cleaning the Image Build Cache
+
+The `signoz:integration` image build keeps its Go build and module caches in BuildKit cache mounts, so rebuilds only recompile what changed. These caches survive `--teardown` (they belong to the Docker builder, not to any container). If a cache ever needs to be nuked — suspected corruption, disk pressure, or to force a genuinely cold build — pass the `--clean` flag:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --teardown --clean integration/bootstrap/setup.py::test_teardown
+```
+
+`--clean` prunes the docker build artifacts backing the incremental image build at session start, so the next build starts from a clean slate. Images and regular layer cache stay intact, but note the pruning is host-wide — it clears build caches for other projects too, not just SigNoz's. The flag composes with any invocation — passing it on a normal `--reuse` run simply makes the next image build start cold (~3–4 minutes instead of seconds).
+
 ## Understanding the Integration Test Framework
 
 Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. WireMock is used to spin up **test doubles** of external services (Zeus cloud API, gateway, etc.).
@@ -99,7 +130,7 @@ tests/
 │       ├── passwordauthn/
 │       ├── querier/
 │       └── ...
-└── e2e/                     # Playwright suite (see docs/contributing/e2e.md)
+└── e2e/                     # Playwright suite (see docs/contributing/tests/e2e.md)
 ```
 
 Each test suite follows these principles:
@@ -224,9 +255,9 @@ Tests can be configured using pytest options:
 - `--sqlstore-provider` — Choose the SQL store provider (default: `postgres`)
 - `--sqlite-mode` — SQLite journal mode: `delete` or `wal` (default: `delete`). Only relevant when `--sqlstore-provider=sqlite`.
 - `--postgres-version` — PostgreSQL version (default: `15`)
-- `--clickhouse-version` — ClickHouse version (default: `25.5.6`)
-- `--zookeeper-version` — Zookeeper version (default: `3.7.1`)
-- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.2`)
+- `--clickhouse-version` — ClickHouse version, also used for ClickHouse Keeper (default: `25.12.5`)
+- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.6`)
+- `--with-web` — Build the frontend into the SigNoz image (required for e2e)
 
 Example:
 
@@ -239,6 +270,7 @@ uv run pytest --basetemp=./tmp/ -vv --reuse \
 ## What should I remember?
 
 - **Always use the `--reuse` flag** when setting up the environment or running tests to keep containers warm. Without it every run rebuilds the stack (~4 mins).
+- **Changed backend code? Re-run `make py-test-setup`** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Use the `--teardown` flag** only when cleaning up — mixing `--teardown` with `--reuse` is a contradiction.
 - **Do not pre-emptively teardown before setup.** If the stack is partially up, `--reuse` picks up from wherever it is. `make py-test-teardown` then `make py-test-setup` wastes minutes.
 - **Follow the naming convention** with two-digit numeric prefixes (`01_`, `02_`) for ordered test execution within a suite.
@@ -247,5 +279,5 @@ uv run pytest --basetemp=./tmp/ -vv --reuse \
 - **Use descriptive test names** that clearly indicate what is being tested.
 - **Leverage fixtures** for common setup. The shared fixture package is at `tests/fixtures/` — reuse before adding new ones.
 - **Test both success and failure scenarios** (4xx / 5xx paths) to ensure robust functionality.
-- **Run `make py-fmt` and `make py-lint` before committing** Python changes — black + isort + autoflake + pylint.
+- **Run `make py-fmt` and `make py-lint` before committing** Python changes — ruff format + ruff check.
 - **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

ee/modules/dashboard/impldashboard/module.go

@@ -276,6 +276,10 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) MigrateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.MigrateV2(ctx, orgID, id)
+}
+
 func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
 }

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

@@ -80,15 +80,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	fineGrainedAuthz := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseFineGrainedAuthz, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
-		Active:     fineGrainedAuthz,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
 	featureSet = append(featureSet, &licensetypes.Feature{
 		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),
@@ -107,15 +98,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	infraMonitoringV2 := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseInfraMonitoringV2, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureUseInfraMonitoringV2.String()),
-		Active:     infraMonitoringV2,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

frontend/public/locales/en-GB/channels.json

@@ -24,6 +24,8 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -24,6 +24,8 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

frontend/src/AppRoutes/index.tsx

@@ -354,6 +354,16 @@ function App(): JSX.Element {
 					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
+					// A tab that outlived a deploy requests hashed assets the new build no longer
+					// has. `lazyRetry` recovers by reloading once, so this class is not worth
+					// reporting. The stylesheet message is Vite's own; the module ones are the
+					// same failure worded differently by Chromium, Firefox and Safari.
+					ignoreErrors: [
+						/Unable to preload CSS for/,
+						/Failed to fetch dynamically imported module/,
+						/error loading dynamically imported module/,
+						/Importing a module script failed/,
+					],
 					integrations: [
 						// Kept for the `transaction` tag used in routing, even though
 						// tracing is disabled. Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055

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

@@ -52,6 +52,8 @@ import type {
 	ListDashboardsV2200,
 	ListDashboardsV2Params,
 	LockDashboardV2PathParameters,
+	MigrateDashboardV2200,
+	MigrateDashboardV2PathParameters,
 	PatchDashboardV2200,
 	PatchDashboardV2PathParameters,
 	PinDashboardV2PathParameters,
@@ -1804,6 +1806,85 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
+/**
+ * This endpoint retries the v1→v2 (Perses) migration on a dashboard still stored in the v1 schema and returns the v2-shape result. It is idempotent: a dashboard already in the v2 schema is returned unchanged.
+ * @summary Migrate dashboard to v2
+ */
+export const migrateDashboardV2 = (
+	{ id }: MigrateDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<MigrateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}/migrate`,
+		method: 'POST',
+		signal,
+	});
+};
+
+export const getMigrateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof migrateDashboardV2>>,
+		TError,
+		{ pathParams: MigrateDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof migrateDashboardV2>>,
+	TError,
+	{ pathParams: MigrateDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['migrateDashboardV2'];
+	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 migrateDashboardV2>>,
+		{ pathParams: MigrateDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return migrateDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type MigrateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof migrateDashboardV2>>
+>;
+
+export type MigrateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Migrate dashboard to v2
+ */
+export const useMigrateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof migrateDashboardV2>>,
+		TError,
+		{ pathParams: MigrateDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof migrateDashboardV2>>,
+	TError,
+	{ pathParams: MigrateDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getMigrateDashboardV2MutationOptions(options));
+};
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -4301,6 +4301,18 @@ export interface Querybuildertypesv5QueryEnvelopeBuilderDTO {
 	type: Querybuildertypesv5QueryEnvelopeBuilderDTOType;
 }
 
+export enum Querybuildertypesv5QueryEnvelopeBuilderAIDTOType {
+	builder_ai_query = 'builder_ai_query',
+}
+export interface Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO;
+	/**
+	 * @type string
+	 * @enum builder_ai_query
+	 */
+	type: Querybuildertypesv5QueryEnvelopeBuilderAIDTOType;
+}
+
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	/**
 	 * @type boolean
@@ -4484,6 +4496,7 @@ export interface Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO {
 
 export type Querybuildertypesv5QueryEnvelopeDTO =
 	| Querybuildertypesv5QueryEnvelopeBuilderDTO
+	| Querybuildertypesv5QueryEnvelopeBuilderAIDTO
 	| Querybuildertypesv5QueryEnvelopeFormulaDTO
 	| Querybuildertypesv5QueryEnvelopeTraceOperatorDTO
 	| Querybuildertypesv5QueryEnvelopePromQLDTO
@@ -8287,6 +8300,7 @@ export interface Querybuildertypesv5QueryRangeResponseDTO {
 
 export enum Querybuildertypesv5QueryTypeDTO {
 	builder_query = 'builder_query',
+	builder_ai_query = 'builder_ai_query',
 	builder_formula = 'builder_formula',
 	builder_trace_operator = 'builder_trace_operator',
 	clickhouse_sql = 'clickhouse_sql',
@@ -8479,6 +8493,8 @@ export enum RuletypesCompareOperatorDTO {
 	below = 'below',
 	equal = 'equal',
 	not_equal = 'not_equal',
+	above_or_equal = 'above_or_equal',
+	below_or_equal = 'below_or_equal',
 	outside_bounds = 'outside_bounds',
 }
 export interface RuletypesBasicRuleThresholdDTO {
@@ -11162,6 +11178,17 @@ export type UnlockDashboardV2PathParameters = {
 export type LockDashboardV2PathParameters = {
 	id: string;
 };
+export type MigrateDashboardV2PathParameters = {
+	id: string;
+};
+export type MigrateDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/assets/Logos/amazon-bedrock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>AWS</title><path d="M6.763 11.212q.002.446.088.71c.064.176.144.368.256.576.04.063.056.127.056.183q.002.12-.152.24l-.503.335a.4.4 0 0 1-.208.072q-.12-.002-.239-.112a2.5 2.5 0 0 1-.287-.375 6 6 0 0 1-.248-.471q-.934 1.101-2.347 1.101c-.67 0-1.205-.191-1.596-.574-.39-.384-.59-.894-.59-1.533 0-.678.24-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583q-.001-.908-.375-1.277c-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103s-.583.16-.862.272a2 2 0 0 1-.28.104.5.5 0 0 1-.127.023q-.168.002-.168-.247v-.391c0-.128.016-.224.056-.28a.6.6 0 0 1 .224-.167 4.6 4.6 0 0 1 1.005-.36 4.8 4.8 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647q.661.646.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144a1.8 1.8 0 0 0 .758-.51 1.3 1.3 0 0 0 .272-.512c.047-.191.08-.423.08-.694v-.335a7 7 0 0 0-.735-.136 6 6 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296m6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 6.726a1.4 1.4 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783q.227-.001.31.08c.065.048.113.16.16.312l1.342 5.284 1.245-5.284q.058-.24.151-.312a.55.55 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348q.074-.24.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1 1 0 0 1-.056.2l-1.923 6.17q-.072.24-.168.311a.5.5 0 0 1-.303.08h-.687c-.15 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32L12.32 7.747l-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.6.6 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247q.072 0 .144.024c.048.016.12.048.2.08q.408.181.878.279c.32.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.78.78 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.9 1.9 0 0 1-.4-1.158q0-.502.216-.886c.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .36.008.535.032.183.024.35.056.518.088q.24.058.455.127.216.072.336.144a.7.7 0 0 1 .24.2.43.43 0 0 1 .071.263v.375q-.002.254-.184.256a.8.8 0 0 1-.303-.096 3.65 3.65 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223s-.375.383-.375.71c0 .224.08.416.24.567.16.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767s.367.702.367 1.117c0 .343-.072.655-.207.926a2.2 2.2 0 0 1-.583.703c-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167"/><path fill="#f90" d="M.378 15.475c3.384 1.963 7.56 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.44-.2.814.287.383.607-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351m23.531-.2c.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151l.175-.439c.343-.88.802-2.198.52-2.555-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#9CA3AF" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>AWS</title><path d="M6.763 11.212q.002.446.088.71c.064.176.144.368.256.576.04.063.056.127.056.183q.002.12-.152.24l-.503.335a.4.4 0 0 1-.208.072q-.12-.002-.239-.112a2.5 2.5 0 0 1-.287-.375 6 6 0 0 1-.248-.471q-.934 1.101-2.347 1.101c-.67 0-1.205-.191-1.596-.574-.39-.384-.59-.894-.59-1.533 0-.678.24-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583q-.001-.908-.375-1.277c-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103s-.583.16-.862.272a2 2 0 0 1-.28.104.5.5 0 0 1-.127.023q-.168.002-.168-.247v-.391c0-.128.016-.224.056-.28a.6.6 0 0 1 .224-.167 4.6 4.6 0 0 1 1.005-.36 4.8 4.8 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647q.661.646.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144a1.8 1.8 0 0 0 .758-.51 1.3 1.3 0 0 0 .272-.512c.047-.191.08-.423.08-.694v-.335a7 7 0 0 0-.735-.136 6 6 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296m6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 6.726a1.4 1.4 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783q.227-.001.31.08c.065.048.113.16.16.312l1.342 5.284 1.245-5.284q.058-.24.151-.312a.55.55 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348q.074-.24.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1 1 0 0 1-.056.2l-1.923 6.17q-.072.24-.168.311a.5.5 0 0 1-.303.08h-.687c-.15 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32L12.32 7.747l-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.6.6 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247q.072 0 .144.024c.048.016.12.048.2.08q.408.181.878.279c.32.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.78.78 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.9 1.9 0 0 1-.4-1.158q0-.502.216-.886c.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .36.008.535.032.183.024.35.056.518.088q.24.058.455.127.216.072.336.144a.7.7 0 0 1 .24.2.43.43 0 0 1 .071.263v.375q-.002.254-.184.256a.8.8 0 0 1-.303-.096 3.65 3.65 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223s-.375.383-.375.71c0 .224.08.416.24.567.16.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767s.367.702.367 1.117c0 .343-.072.655-.207.926a2.2 2.2 0 0 1-.583.703c-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167"/><path fill="#f90" d="M.378 15.475c3.384 1.963 7.56 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.44-.2.814.287.383.607-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351m23.531-.2c.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151l.175-.439c.343-.88.802-2.198.52-2.555-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399"/></svg>

frontend/src/assets/Logos/apache-druid.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
+  <path fill="#29F1FB" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
 </svg>

frontend/src/assets/Logos/apache.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#D22128" d="M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z"/>
+</svg>

frontend/src/assets/Logos/auth0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#EB5424" d="M21.98 7.448 19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z"/></svg>

frontend/src/assets/Logos/baseten.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="34" viewBox="0 0 131 34">
-  <path fill="currentColor" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" height="34" viewBox="0 0 131 34">
+  <path fill="#9CA3AF" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
 </svg>

frontend/src/assets/Logos/cohere.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#355146" fill-rule="evenodd" d="M6.82 11.908c.525 0 1.57-.03 3.013-.639 1.682-.71 5.029-2 7.443-3.323 1.689-.926 2.429-2.151 2.429-3.8 0-2.29-1.81-4.146-4.043-4.146H6.307C3.1 0 .5 2.666.5 5.954s2.434 5.954 6.32 5.954" clip-rule="evenodd"/><path fill="#d18ee2" fill-rule="evenodd" d="M8.402 16.01c0-1.611.947-3.064 2.399-3.682l2.946-1.254c2.98-1.268 6.26.977 6.26 4.286 0 2.563-2.027 4.64-4.527 4.64l-3.19-.002c-2.147 0-3.888-1.785-3.888-3.987" clip-rule="evenodd"/><path fill="#ff7759" d="M3.848 12.691C1.998 12.691.5 14.228.5 16.124v.444C.5 18.464 1.999 20 3.848 20s3.347-1.536 3.347-3.432v-.444c0-1.896-1.499-3.433-3.347-3.433"/></svg>

frontend/src/assets/Logos/dbos.svg

@@ -1,9 +1,9 @@
 <svg width="109" height="24" viewBox="0 0 109 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_125_22125)">
-<path d="M0 -2.08616e-07V24H17.9352C22.9911 24 26.0999 21.0858 26.0999 17.04V6.96C26.0999 2.91432 22.9911 -2.08616e-07 17.9352 -2.08616e-07H0ZM6.76413 5.82864H19.1992V18.1714H6.76413V5.82864Z" fill="currentColor"/>
-<path d="M46.7659 18.6172H35.0824V14.16H46.7659V18.6172ZM46.595 5.38296V9.5658H35.0824V5.38296H46.595ZM50.2846 12.1373V11.5886C52.5734 10.5258 53.7008 8.8458 53.7008 6.13728C53.7008 2.64012 50.9337 0.000116183 45.5361 0.000116183H28.3184V24H45.7752C51.1728 24 53.9399 21.8401 53.9399 18.0685C53.9399 15.0172 52.6418 13.2001 50.2846 12.1373Z" fill="currentColor"/>
-<path d="M62.397 18.1714H74.8319V5.82864H62.397V18.1714ZM63.6609 24C58.6049 24 55.4961 21.0858 55.4961 17.04V6.96012C55.4961 2.91432 58.6049 0.000116183 63.6609 0.000116183H73.568C78.6238 0.000116183 81.7326 2.91432 81.7326 6.96012V17.04C81.7326 21.0858 78.6238 24 73.568 24H63.6609Z" fill="currentColor"/>
-<path d="M101.66 15.12L90.8995 14.3658C85.5361 13.9886 83.418 11.1772 83.418 7.47432V6.96012C83.418 2.91432 86.5266 0.000116183 91.5827 0.000116183H100.157C105.214 0.000116183 108.323 2.91432 108.323 6.96012V7.98864H101.968V5.14284H90.2504V8.43432L100.601 9.18864C105.999 9.56568 108.493 12.8572 108.493 16.5257V17.04C108.493 20.7428 105.384 24 100.328 24H91.5827C86.5266 24 83.418 20.7428 83.418 17.04V16.0115H89.7722V18.8572H101.66V15.12Z" fill="currentColor"/>
+<path d="M0 -2.08616e-07V24H17.9352C22.9911 24 26.0999 21.0858 26.0999 17.04V6.96C26.0999 2.91432 22.9911 -2.08616e-07 17.9352 -2.08616e-07H0ZM6.76413 5.82864H19.1992V18.1714H6.76413V5.82864Z" fill="#9CA3AF"/>
+<path d="M46.7659 18.6172H35.0824V14.16H46.7659V18.6172ZM46.595 5.38296V9.5658H35.0824V5.38296H46.595ZM50.2846 12.1373V11.5886C52.5734 10.5258 53.7008 8.8458 53.7008 6.13728C53.7008 2.64012 50.9337 0.000116183 45.5361 0.000116183H28.3184V24H45.7752C51.1728 24 53.9399 21.8401 53.9399 18.0685C53.9399 15.0172 52.6418 13.2001 50.2846 12.1373Z" fill="#9CA3AF"/>
+<path d="M62.397 18.1714H74.8319V5.82864H62.397V18.1714ZM63.6609 24C58.6049 24 55.4961 21.0858 55.4961 17.04V6.96012C55.4961 2.91432 58.6049 0.000116183 63.6609 0.000116183H73.568C78.6238 0.000116183 81.7326 2.91432 81.7326 6.96012V17.04C81.7326 21.0858 78.6238 24 73.568 24H63.6609Z" fill="#9CA3AF"/>
+<path d="M101.66 15.12L90.8995 14.3658C85.5361 13.9886 83.418 11.1772 83.418 7.47432V6.96012C83.418 2.91432 86.5266 0.000116183 91.5827 0.000116183H100.157C105.214 0.000116183 108.323 2.91432 108.323 6.96012V7.98864H101.968V5.14284H90.2504V8.43432L100.601 9.18864C105.999 9.56568 108.493 12.8572 108.493 16.5257V17.04C108.493 20.7428 105.384 24 100.328 24H91.5827C86.5266 24 83.418 20.7428 83.418 17.04V16.0115H89.7722V18.8572H101.66V15.12Z" fill="#9CA3AF"/>
 </g>
 <defs>
 <clipPath id="clip0_125_22125">

frontend/src/assets/Logos/dspy.svg

@@ -0,0 +1,9 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" stroke="#EF4136" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="2.2" y="2.2" width="19.6" height="19.6" rx="0.6"/>
+    <path d="M12 2.2V4.7a1.75 1.75 0 1 0 0 3.5V12"/>
+    <path d="M12 12v2.5a1.75 1.75 0 1 1 0 3.5v3.8"/>
+    <path d="M2.2 12h2.5a1.75 1.75 0 1 0 3.5 0H12"/>
+    <path d="M12 12h2.8a1.75 1.75 0 1 1 3.5 0h3.5"/>
+  </g>
+</svg>

frontend/src/assets/Logos/elasticsearch.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#00BFB3" d="M13.394 0C8.683 0 4.609 2.716 2.644 6.667h15.641a4.77 4.77 0 0 0 3.073-1.11c.446-.375.864-.785 1.247-1.243l.001-.002A11.974 11.974 0 0 0 13.394 0zM1.804 8.889a12.009 12.009 0 0 0 0 6.222h14.7a3.111 3.111 0 1 0 0-6.222zm.84 8.444C4.61 21.283 8.684 24 13.395 24c3.701 0 7.011-1.677 9.212-4.312l-.001-.002a9.958 9.958 0 0 0-1.247-1.243 4.77 4.77 0 0 0-3.073-1.11z"/>
+</svg>

frontend/src/assets/Logos/groq.svg

@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>
+<svg fill="#F55036" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>

frontend/src/assets/Logos/haproxy.svg

@@ -0,0 +1,74 @@
+<svg role="img" viewBox="0 0 102.04 102.04" xmlns="http://www.w3.org/2000/svg">
+  <rect x="45.34" y="23.92" width=".41" height="15.95" transform="translate(-9.7 38.24) rotate(-41.55)" fill="#106DA9"/>
+  <rect x="32.04" y="45.06" width="11.92" height="11.92" transform="translate(-13.28 88.67) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="45.04" y="32.06" width="11.92" height="11.92" transform="translate(12.63 88.76) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="45.04" y="58.06" width="11.92" height="11.92" transform="translate(-13.37 114.58) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="58.04" y="45.06" width="11.92" height="11.92" transform="translate(12.54 114.67) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="57.03" y="22.05" width="7.94" height="7.94" transform="translate(34.56 86.84) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="36.03" y="22.05" width="7.94" height="7.94" transform="translate(13.7 65.84) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="22.03" y="37.05" width="7.94" height="7.94" transform="translate(-15.2 66.73) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="22.03" y="58.05" width="7.94" height="7.94" transform="translate(-36.2 87.59) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="72.03" y="58.05" width="7.94" height="7.94" transform="translate(13.45 137.58) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="72.03" y="37.05" width="7.94" height="7.94" transform="translate(34.45 116.73) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="15.02" y="26.04" width="5.96" height="5.96" transform="translate(-11.15 46.82) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="25.02" y="14.04" width="5.96" height="5.96" transform="translate(10.79 44.9) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="40.02" y="9.04" width="5.96" height="5.96" transform="translate(30.68 54.94) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="11.02" y="41.04" width="5.96" height="5.96" transform="translate(-30.12 57.71) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="81.98" y="26" width="5.04" height="5.04" transform="translate(-.2 .59) rotate(-.4)" fill="#106DA9"/>
+  <rect x="70.98" y="15" width="5.04" height="5.04" transform="translate(-.12 .51) rotate(-.4)" fill="#106DA9"/>
+  <rect x="55.98" y="9" width="5.04" height="5.04" transform="translate(-.08 .41) rotate(-.4)" fill="#106DA9"/>
+  <rect x="84.98" y="41" width="5.04" height="5.03" transform="translate(-.3 .6) rotate(-.4)" fill="#106DA9"/>
+  <rect x="36.03" y="72.05" width="7.94" height="7.94" transform="translate(-36.3 115.49) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="57.03" y="72.05" width="7.94" height="7.94" transform="translate(-15.44 136.49) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="81.02" y="70.04" width="5.96" height="5.96" transform="translate(10.39 156.51) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="70.02" y="82.04" width="5.96" height="5.96" transform="translate(-12.52 157.43) rotate(-89.6)" fill="#106DA9"/>
+  <rect x="56.02" y="87.04" width="5.96" height="5.96" transform="translate(-31.44 148.37) rotate(-89.59)" fill="#106DA9"/>
+  <rect x="84.02" y="55.04" width="5.96" height="5.96" transform="translate(28.35 144.6) rotate(-89.59)" fill="#106DA9"/>
+  <rect x="14.98" y="71" width="5.04" height="5.04" transform="translate(-.51 .12) rotate(-.4)" fill="#106DA9"/>
+  <rect x="25.98" y="82" width="5.03" height="5.04" transform="translate(-.61 .21) rotate(-.41)" fill="#106DA9"/>
+  <rect x="40.98" y="87" width="5.04" height="5.04" transform="translate(-.62 .3) rotate(-.4)" fill="#106DA9"/>
+  <rect x="11.98" y="55" width="5.04" height="5.04" transform="translate(-.4 .1) rotate(-.4)" fill="#106DA9"/>
+  <rect x="18.01" y="12.03" width="2.98" height="2.98" transform="translate(5.85 32.93) rotate(-89.61)" fill="#106DA9"/>
+  <rect x=".01" y="45.03" width="2.98" height="2.98" transform="translate(-45.03 47.71) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="2.01" y="35.03" width="2.98" height="2.98" transform="translate(-33.04 39.77) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="35.01" y="2.03" width="2.98" height="2.98" transform="translate(32.73 40) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="6.01" y="26.03" width="2.98" height="2.98" transform="translate(-20.07 34.83) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="11.01" y="18.03" width="2.98" height="2.98" transform="translate(-7.11 31.89) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="25.99" y="6.01" width="3.02" height="3.02" transform="translate(-.05 .19) rotate(-.39)" fill="#106DA9"/>
+  <rect x="44.01" y=".03" width="2.98" height="2.98" transform="translate(0 .31) rotate(-.39)" fill="#106DA9"/>
+  <rect x="93.01" y="26.03" width="2.98" height="2.98" transform="translate(66.34 121.83) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="97.01" y="35.03" width="2.98" height="2.98" transform="translate(61.31 134.77) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="88.01" y="18.03" width="2.98" height="2.98" transform="translate(69.37 108.89) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="98.01" y="45.03" width="2.98" height="2.98" transform="translate(52.3 145.7) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="53.99" y=".01" width="3.02" height="3.02" transform="translate(53.6 57.01) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="64.01" y="2.03" width="2.98" height="2.98" transform="translate(61.53 69) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="18.01" y="12.03" width="2.98" height="2.98" transform="translate(5.85 32.93) rotate(-89.61)" fill="#106DA9"/>
+  <rect x=".01" y="45.03" width="2.98" height="2.98" transform="translate(-45.03 47.71) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="81.01" y="12.03" width="2.98" height="2.98" transform="translate(68.42 95.93) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="2.01" y="35.03" width="2.98" height="2.98" transform="translate(-33.04 39.77) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="35.01" y="2.03" width="2.98" height="2.98" transform="translate(32.73 40) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="6.01" y="26.03" width="2.98" height="2.98" transform="translate(-20.07 34.83) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="11.01" y="18.03" width="2.98" height="2.98" transform="translate(-7.11 31.89) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="25.99" y="6.01" width="3.02" height="3.02" transform="translate(-.05 .19) rotate(-.39)" fill="#106DA9"/>
+  <rect x="44.01" y=".03" width="2.98" height="2.98" transform="translate(0 .31) rotate(-.39)" fill="#106DA9"/>
+  <rect x="73.01" y="6.03" width="2.98" height="2.98" transform="translate(66.47 81.97) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="98.01" y="45.03" width="2.98" height="2.98" transform="translate(52.3 145.7) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="53.99" y=".01" width="3.02" height="3.02" transform="translate(53.6 57.01) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="64.01" y="2.03" width="2.98" height="2.98" transform="translate(61.53 69) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="81.01" y="88.03" width="2.98" height="2.98" transform="translate(-7.58 171.41) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="98.01" y="54.03" width="2.98" height="2.98" transform="translate(43.31 154.64) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="18.01" y="88.03" width="2.98" height="2.98" transform="translate(-70.15 108.42) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="97.01" y="64.03" width="2.98" height="2.98" transform="translate(32.32 163.58) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="64.01" y="97.04" width="2.97" height="2.97" transform="translate(-33.67 163.03) rotate(-89.43)" fill="#106DA9"/>
+  <rect x="93.01" y="73.03" width="2.98" height="2.98" transform="translate(19.31 168.49) rotate(-89.59)" fill="#106DA9"/>
+  <rect x="88.01" y="81.03" width="2.98" height="2.98" transform="translate(6.37 171.45) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="72.99" y="93.01" width="3.02" height="3.02" transform="translate(-.65 .51) rotate(-.39)" fill="#106DA9"/>
+  <rect x="53.99" y="99.01" width="3.02" height="3.02" transform="translate(-.68 .38) rotate(-.39)" fill="#106DA9"/>
+  <rect x="26.01" y="93.03" width="2.98" height="2.98" transform="translate(-67.21 121.37) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="6.01" y="73.03" width="2.98" height="2.98" transform="translate(-67.07 81.51) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="2.01" y="64.03" width="2.98" height="2.98" transform="translate(-62.04 68.57) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="11.01" y="81.03" width="2.98" height="2.98" transform="translate(-70.1 94.46) rotate(-89.61)" fill="#106DA9"/>
+  <rect x=".01" y="54.03" width="2.98" height="2.98" transform="translate(-54.03 56.65) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="45.01" y="99.03" width="2.98" height="2.98" transform="translate(-54.33 146.34) rotate(-89.61)" fill="#106DA9"/>
+  <rect x="35.01" y="97.03" width="2.98" height="2.98" transform="translate(-62.27 134.34) rotate(-89.61)" fill="#106DA9"/>
+</svg>

frontend/src/assets/Logos/hcp-vault.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFEC6E" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>

frontend/src/assets/Logos/langflow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9CA3AF" d="M9.755 1.52h-.001c-.31 0-.608.124-.828.343L4.037 6.752a1.17 1.17 0 0 1-.827.343H1.17A1.17 1.17 0 0 0 0 8.295l.052 1.984a1.17 1.17 0 0 0 1.17 1.14h2.37c.31 0 .607-.124.827-.344l4.93-4.93c.22-.22.517-.343.827-.343h2.874a1.17 1.17 0 0 0 1.17-1.17V2.69a1.17 1.17 0 0 0-1.17-1.17zm9.78 2.503c-.31 0-.608.123-.828.343l-4.889 4.889a1.17 1.17 0 0 1-.827.342h-2.756c-.31 0-.608.124-.827.344L4.15 15.197a1.17 1.17 0 0 1-.827.343H1.32a1.17 1.17 0 0 0-1.17 1.17v1.996c0 .646.524 1.17 1.17 1.17h2.017c.302 0 .592-.116.81-.325l5.535-5.304a1.17 1.17 0 0 1 .81-.326h2.88c.31 0 .607-.123.827-.342l4.93-4.93c.22-.22.517-.344.827-.344h2.873A1.17 1.17 0 0 0 24 7.135V5.193a1.17 1.17 0 0 0-1.17-1.17h-3.294zm0 8.559c-.31 0-.608.123-.828.343l-4.889 4.889a1.17 1.17 0 0 1-.827.343h-2.04a1.17 1.17 0 0 0-1.17 1.2l.052 1.984a1.17 1.17 0 0 0 1.17 1.14h2.37c.31 0 .607-.124.827-.343l4.93-4.93c.22-.22.517-.343.827-.343h2.873a1.17 1.17 0 0 0 1.17-1.17v-1.943a1.17 1.17 0 0 0-1.17-1.17h-3.294Z"/></svg>

frontend/src/assets/Logos/open-webui.svg

@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.34" y="2.34" width="19.27" height="19.27" rx="4.69" fill="#fff"/>
+  <circle cx="10.41" cy="11.95" r="2.77" fill="none" stroke="#000" stroke-width="1.36"/>
+  <rect x="15" y="8.53" width="1.36" height="6.94" fill="#000"/>
+</svg>

frontend/src/assets/Logos/planetscale.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>

frontend/src/assets/Logos/rabbitmq.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FF6600" d="M23.035 9.601h-7.677a.956.956 0 01-.962-.962V.962a.956.956 0 00-.962-.956H10.56a.956.956 0 00-.962.956V8.64a.956.956 0 01-.962.962H5.762a.956.956 0 01-.961-.962V.962A.956.956 0 003.839 0H.959a.956.956 0 00-.956.962v22.076A.956.956 0 00.965 24h22.07a.956.956 0 00.962-.962V10.58a.956.956 0 00-.962-.98zm-3.86 8.152a1.437 1.437 0 01-1.437 1.443h-1.924a1.437 1.437 0 01-1.436-1.443v-1.917a1.437 1.437 0 011.436-1.443h1.924a1.437 1.437 0 011.437 1.443z"/>
+</svg>

frontend/src/assets/Logos/railway.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
+  <path fill="#9CA3AF" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
 </svg>

frontend/src/assets/Logos/scala.svg

@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 270">
-<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="#de3423" fill-rule="evenodd"/>
 <path d="M138.66,28.78C107.2,37.87,57.29,43,30.4,43h0V94.35a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.4a129,129,0,0,0,17.49-5.81c4.18-1.88,6.88-3.86,6.88-5.92V15.91C164.1,20.79,151.39,25.11,138.66,28.78Z" fill="#de3423" fill-rule="evenodd"/>
 <path d="M138.66,95.37c-18.83,5.43-44.24,9.47-67.39,11.83-15.54,1.59-30.06,2.42-40.87,2.42h0v51.31a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.39a130.38,130.38,0,0,0,17.49-5.81c4.18-1.89,6.88-3.86,6.88-5.92V82.5C164.1,87.37,151.39,91.69,138.66,95.37Z" fill="#de3423" fill-rule="evenodd"/>
 <path d="M138.66,162c-18.83,5.43-44.24,9.46-67.39,11.83-15.56,1.59-30.1,2.42-40.91,2.42V228c18.16,0,75.1-5.95,109.37-15.39,12.63-3.48,24.37-7.44,24.37-11.74V149.08C164.1,154,151.39,158.28,138.66,162Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="currentColor" fill-rule="evenodd"/>
-<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="currentColor" fill-rule="evenodd"/>
-<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="currentColor"/>
-<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="currentColor"/>
-<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="currentColor"/>
-<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="currentColor"/>
-<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="currentColor"/>
+<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="#de3423"/>
+<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="#de3423"/>
+<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="#de3423"/>
+<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="#de3423"/>
+<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="#de3423"/>
 </svg>

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -20,6 +21,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
 import './CreateServiceAccountModal.styles.scss';
+import { Skeleton } from 'antd';
 
 interface FormValues {
 	name: string;
@@ -95,33 +97,39 @@ function CreateServiceAccountModal(): JSX.Element {
 			testId="create-service-account-modal"
 		>
 			<div className="create-sa-modal__content">
-				<form
-					id="create-sa-form"
-					className="create-sa-form"
-					onSubmit={handleSubmit(handleCreate)}
+				<AuthZGuardContent
+					checks={[SACreatePermission]}
+					fallbackOnLoading={<Skeleton active paragraph={{ rows: 1 }} />}
 				>
-					<div className="create-sa-form__item">
-						<label htmlFor="sa-name">Name</label>
-						<Controller
-							name="name"
-							control={control}
-							rules={{ required: 'Name is required' }}
-							render={({ field }): JSX.Element => (
-								<Input
-									id="sa-name"
-									placeholder="Enter a name"
-									className="create-sa-form__input"
-									value={field.value}
-									onChange={field.onChange}
-									onBlur={field.onBlur}
-								/>
+					<form
+						id="create-sa-form"
+						className="create-sa-form"
+						onSubmit={handleSubmit(handleCreate)}
+					>
+						<div className="create-sa-form__item">
+							<label htmlFor="sa-name">Name</label>
+							<Controller
+								name="name"
+								control={control}
+								rules={{ required: 'Name is required' }}
+								render={({ field }): JSX.Element => (
+									<Input
+										id="sa-name"
+										placeholder="Enter a name"
+										className="create-sa-form__input"
+										value={field.value}
+										onChange={field.onChange}
+										onBlur={field.onBlur}
+										data-testid="create-sa-name-input"
+									/>
+								)}
+							/>
+							{errors.name && (
+								<p className="create-sa-form__error">{errors.name.message}</p>
 							)}
-						/>
-						{errors.name && (
-							<p className="create-sa-form__error">{errors.name.message}</p>
-						)}
-					</div>
-				</form>
+						</div>
+					</form>
+				</AuthZGuardContent>
 			</div>
 
 			<DialogFooter className="create-sa-modal__footer">
@@ -130,6 +138,7 @@ function CreateServiceAccountModal(): JSX.Element {
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
+					data-testid="create-sa-cancel-btn"
 				>
 					<X size={12} />
 					Cancel
@@ -137,12 +146,14 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<AuthZButton
 					checks={[SACreatePermission]}
+					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
+					data-testid="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

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

@@ -1,19 +1,14 @@
 import { toast } from '@signozhq/ui/sonner';
+import {
+	setupAuthzAdmin,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
-	__esModule: true,
-	default: ({
-		children,
-	}: {
-		children: React.ReactElement;
-	}): React.ReactElement => children,
-}));
-
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
@@ -45,6 +40,7 @@ describe('CreateServiceAccountModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		server.use(
+			setupAuthzAdmin(),
 			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json({ status: 'success', data: {} })),
 			),
@@ -55,23 +51,41 @@ describe('CreateServiceAccountModal', () => {
 		server.resetHandlers();
 	});
 
-	it('submit button is disabled when form is empty', () => {
+	it('submit button is disabled while the form is empty', async () => {
 		renderModal();
 
-		expect(
-			screen.getByRole('button', { name: /Create Service Account/i }),
-		).toBeDisabled();
+		// The form only renders once the create check resolves, and the name field
+		// registers its `required` rule on mount, so the empty-form invalid state
+		// settles a tick later.
+		await screen.findByTestId('create-sa-name-input');
+
+		await waitFor(() =>
+			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
+		);
+	});
+
+	it('submit button becomes disabled after clearing the name field', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
+
+		await user.type(nameInput, 'test');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+
+		await user.clear(nameInput);
+		await waitFor(() => expect(submitBtn).toBeDisabled());
 	});
 
 	it('successful submit shows toast.success and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Deploy Bot');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		await user.type(nameInput, 'Deploy Bot');
 
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
 		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
@@ -102,11 +116,10 @@ describe('CreateServiceAccountModal', () => {
 
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Dupe Bot');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		await user.type(nameInput, 'Dupe Bot');
 
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
 		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
@@ -131,8 +144,45 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByTestId('create-service-account-modal');
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+		const cancelBtn = await screen.findByTestId('create-sa-cancel-btn');
+		await user.click(cancelBtn);
+
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('create-service-account-modal'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows inline permission denial and hides the form when create permission is denied', async () => {
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('create-sa-name-input')).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId('create-service-account-modal'),
+		).toBeInTheDocument();
+	});
+
+	it('keeps the footer usable when create permission is denied', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		// The footer lives outside the guard: submit is gated, Cancel still works.
+		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
+
+		await user.click(screen.getByTestId('create-sa-cancel-btn'));
 
 		await waitFor(() => {
 			expect(
@@ -145,7 +195,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = screen.getByPlaceholderText('Enter a name');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -5,6 +5,7 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -36,91 +37,104 @@ function KeyFormPhase({
 	onClose,
 	accountId,
 }: KeyFormPhaseProps): JSX.Element {
+	const checks = accountId
+		? [APIKeyCreatePermission, buildSAAttachPermission(accountId)]
+		: [];
+
 	return (
 		<>
 			<form id={FORM_ID} className="add-key-modal__form" onSubmit={onSubmit}>
-				<div className="add-key-modal__field">
-					<label className="add-key-modal__label" htmlFor="key-name">
-						Name <span style={{ color: 'var(--destructive)' }}>*</span>
-					</label>
-					<Input
-						id="key-name"
-						placeholder="Enter key name e.g.: Service Owner"
-						className="add-key-modal__input"
-						{...register('keyName', {
-							required: true,
-							validate: (v) => !!v.trim(),
-						})}
-					/>
-				</div>
-
-				<div className="add-key-modal__field">
-					<span className="add-key-modal__label">Expiration</span>
-					<Controller
-						name="expiryMode"
-						control={control}
-						render={({ field }): JSX.Element => (
-							<ToggleGroupSimple
-								type="single"
-								value={field.value}
-								onChange={(val: string): void => {
-									if (val) {
-										field.onChange(val);
-									}
-								}}
-								size="sm"
-								className="add-key-modal__expiry-toggle"
-								items={[
-									{ value: ExpiryMode.NONE, label: 'No Expiration' },
-									{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
-								]}
+				<AuthZGuardContent checks={checks}>
+					<>
+						<div className="add-key-modal__field">
+							<label className="add-key-modal__label" htmlFor="key-name">
+								Name <span style={{ color: 'var(--destructive)' }}>*</span>
+							</label>
+							<Input
+								id="key-name"
+								placeholder="Enter key name e.g.: Service Owner"
+								className="add-key-modal__input"
+								testId="add-key-name-input"
+								{...register('keyName', {
+									required: true,
+									validate: (v) => !!v.trim(),
+								})}
 							/>
-						)}
-					/>
-				</div>
+						</div>
 
-				{expiryMode === ExpiryMode.DATE && (
-					<div className="add-key-modal__field">
-						<label className="add-key-modal__label" htmlFor="expiry-date">
-							Expiration Date
-						</label>
-						<div className="add-key-modal__datepicker">
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Expiration</span>
 							<Controller
-								name="expiryDate"
+								name="expiryMode"
 								control={control}
 								render={({ field }): JSX.Element => (
-									<DatePicker
-										id="expiry-date"
+									<ToggleGroupSimple
+										type="single"
 										value={field.value}
-										onChange={field.onChange}
-										popupClassName="add-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
+										onChange={(val: string): void => {
+											if (val) {
+												field.onChange(val);
+											}
+										}}
+										size="sm"
+										className="add-key-modal__expiry-toggle"
+										items={[
+											{ value: ExpiryMode.NONE, label: 'No Expiration' },
+											{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
+										]}
 									/>
 								)}
 							/>
 						</div>
-					</div>
-				)}
+
+						{expiryMode === ExpiryMode.DATE && (
+							<div className="add-key-modal__field">
+								<label className="add-key-modal__label" htmlFor="expiry-date">
+									Expiration Date
+								</label>
+								<div className="add-key-modal__datepicker">
+									<Controller
+										name="expiryDate"
+										control={control}
+										render={({ field }): JSX.Element => (
+											<DatePicker
+												id="expiry-date"
+												value={field.value}
+												onChange={field.onChange}
+												popupClassName="add-key-modal-datepicker-popup"
+												getPopupContainer={popupContainer}
+												disabledDate={disabledDate}
+											/>
+										)}
+									/>
+								</div>
+							</div>
+						)}
+					</>
+				</AuthZGuardContent>
 			</form>
 
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
-					<Button variant="solid" color="secondary" onClick={onClose}>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onClose}
+						testId="add-key-cancel-btn"
+					>
 						Cancel
 					</Button>
 					<AuthZButton
-						checks={[
-							APIKeyCreatePermission,
-							buildSAAttachPermission(accountId ?? ''),
-						]}
+						checks={checks}
 						authZEnabled={!!accountId}
+						withPortal={false}
 						type="submit"
 						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSubmitting}
 						disabled={!isValid}
+						testId="add-key-submit-btn"
 					>
 						Create Key
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -92,6 +92,7 @@ function DeleteAccountModal(): JSX.Element {
 				loading={isDeleting}
 				onClick={handleConfirm}
 				data-testid="confirm-delete-btn"
+				withPortal={false}
 			>
 				<Trash2 size={12} />
 				Delete

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -60,6 +60,7 @@ function EditKeyForm({
 						<AuthZTooltip
 							checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 							enabled={!!keyItem?.id}
+							withPortal={false}
 						>
 							<div className="edit-key-modal__key-display">
 								<span className="edit-key-modal__id-text">{keyItem?.name || '—'}</span>
@@ -168,6 +169,7 @@ function EditKeyForm({
 					variant="link"
 					color="destructive"
 					onClick={onRevokeClick}
+					withPortal={false}
 				>
 					<Trash2 size={12} />
 					Revoke Key
@@ -186,6 +188,7 @@ function EditKeyForm({
 						color="primary"
 						loading={isSaving}
 						disabled={!isDirty}
+						withPortal={false}
 					>
 						Save Changes
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -114,13 +114,14 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<Tooltip title={tooltipTitle}>
+					<Tooltip title={tooltipTitle} placement="bottom">
 						<AuthZButton
 							checks={[
 								buildAPIKeyDeletePermission(record.id),
 								buildSADetachPermission(accountId),
 							]}
 							authZEnabled={!isDisabled && !!accountId}
+							withPortal={false}
 							variant="ghost"
 							size="sm"
 							color="destructive"
@@ -214,6 +215,7 @@ function KeysTab({
 				<AuthZButton
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					authZEnabled={!isDisabled && !!accountId}
+					withPortal={false}
 					variant="link"
 					color="primary"
 					onClick={async (): Promise<void> => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -90,14 +90,20 @@ function OverviewTab({
 					Name
 				</label>
 				{isDisabled ? (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						withPortal={false}
+					>
 						<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 							<span className="sa-drawer__input-text">{localName || '—'}</span>
 							<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 						</div>
 					</AuthZTooltip>
 				) : (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						withPortal={false}
+					>
 						<Input
 							id="sa-name"
 							value={localName}

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -55,6 +55,7 @@ export function RevokeKeyFooter({
 				color="destructive"
 				loading={isRevoking}
 				onClick={onConfirm}
+				withPortal={false}
 			>
 				<Trash2 size={12} />
 				Revoke Key

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -38,6 +38,7 @@ import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
+	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import {
@@ -376,6 +377,7 @@ function ServiceAccountDrawer({
 					<AuthZButton
 						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 						authZEnabled={!!selectedAccountId}
+						withPortal={false}
 						variant="link"
 						color="destructive"
 						onClick={(): void => {
@@ -391,8 +393,12 @@ function ServiceAccountDrawer({
 							Cancel
 						</Button>
 						<AuthZButton
-							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
+							checks={[
+								buildSAReadPermission(selectedAccountId ?? ''),
+								buildSAUpdatePermission(selectedAccountId ?? ''),
+							]}
 							authZEnabled={!!selectedAccountId}
+							withPortal={false}
 							variant="solid"
 							color="primary"
 							loading={isSaving}
@@ -465,6 +471,7 @@ function ServiceAccountDrawer({
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
 						authZEnabled={!isDeleted && !!selectedAccountId}
+						withPortal={false}
 						variant="outlined"
 						size="sm"
 						color="secondary"

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,5 +1,10 @@
 import { toast } from '@signozhq/ui/sonner';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { buildSAAttachPermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzDeny,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -66,28 +71,29 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		expect(screen.getByRole('button', { name: /Create Key/i })).toBeDisabled();
+		// The form only renders once the checks resolve, so waiting for it also
+		// guarantees the button is no longer in its authz-loading state.
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const createBtn = await screen.findByTestId('add-key-submit-btn');
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'My Key');
+		expect(createBtn).toBeDisabled();
 
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
+		await user.type(nameInput, 'My Key');
+		await waitFor(() => expect(createBtn).not.toBeDisabled());
+
+		await user.clear(nameInput);
+		await waitFor(() => expect(createBtn).toBeDisabled());
 	});
 
 	it('successful creation transitions to phase 2 with key displayed and security callout', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const submitBtn = await screen.findByTestId('add-key-submit-btn');
+		await user.type(nameInput, 'Deploy Key');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
 
 		await screen.findByText('snz_abc123xyz456secret');
 		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
@@ -99,13 +105,11 @@ describe('AddKeyModal', () => {
 
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const submitBtn = await screen.findByTestId('add-key-submit-btn');
+		await user.type(nameInput, 'Deploy Key');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
 
 		await screen.findByText('snz_abc123xyz456secret');
 
@@ -123,12 +127,57 @@ describe('AddKeyModal', () => {
 		});
 	});
 
+	it('shows inline permission denial and hides the form when key create is denied', async () => {
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('add-key-name-input')).not.toBeInTheDocument();
+		expect(screen.getByTestId('add-key-modal')).toBeInTheDocument();
+	});
+
+	it('keeps the footer usable when key create is denied', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		// The footer lives outside the guard: submit is gated, Cancel still works.
+		expect(screen.getByTestId('add-key-submit-btn')).toBeDisabled();
+
+		await user.click(screen.getByTestId('add-key-cancel-btn'));
+
+		await waitFor(() => {
+			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows inline permission denial when attach on the service account is denied', async () => {
+		server.use(setupAuthzDeny(buildSAAttachPermission('sa-1')));
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('add-key-name-input')).not.toBeInTheDocument();
+	});
+
 	it('Cancel button closes the modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByTestId('add-key-modal');
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+		const cancelBtn = await screen.findByTestId('add-key-cancel-btn');
+		await user.click(cancelBtn);
 
 		await waitFor(() => {
 			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();

frontend/src/constants/events.ts

@@ -1,9 +1,3 @@
-import logEvent from 'api/common/logEvent';
-import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { getNavigationReferrer } from 'lib/navigation';
-import { extractQueryPairs } from 'utils/queryContextUtils';
-import { isCustomTimeRange } from 'store/globalTime';
-
 export enum Events {
 	UPDATE_GRAPH_VISIBILITY_STATE = 'UPDATE_GRAPH_VISIBILITY_STATE',
 	UPDATE_GRAPH_MANAGER_TABLE = 'UPDATE_GRAPH_MANAGER_TABLE',
@@ -45,155 +39,3 @@ export enum InfraMonitoringEvents {
 	StatefulSet = 'statefulSet',
 	Volumes = 'volumes',
 }
-
-export function logInfraFilterCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	source: 'quick_filter' | 'search' | 'host_status_toggle',
-	expression: string,
-	extraKeys?: string[],
-): void {
-	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
-		(pair) => pair.key,
-	);
-
-	if (extraKeys) {
-		extraKeys.forEach((key) => expressionKeys.push(key));
-	}
-
-	if (expressionKeys.length === 0) {
-		return;
-	}
-
-	void logEvent('infra_filter_customized', {
-		entity_type: entityType,
-		source,
-		expression_keys: [...new Set(expressionKeys)],
-	});
-}
-
-export function logInfraMonitoringListViewedEvent(
-	entity: InfraMonitoringEntity,
-): void {
-	const referrer = getNavigationReferrer();
-
-	void logEvent('infra_list_viewed', {
-		entity,
-		referrer,
-	});
-}
-
-export function logInfraTimeRangeCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	rangeLabel: string,
-): void {
-	void logEvent('infra_time_range_customized', {
-		entity_type: entityType,
-		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
-	});
-}
-
-export function logInfraColumnCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	columnsList: string[],
-	fontSize: string,
-	maxLinesPerRow: number,
-	source: 'list' | 'expanded',
-): void {
-	void logEvent('infra_column_customized', {
-		entity_type: entityType,
-		columns_list: columnsList,
-		font_size: fontSize,
-		max_lines_per_row: maxLinesPerRow,
-		source,
-	});
-}
-
-export function logInfraColumnSortedEvent(
-	entityType: InfraMonitoringEntity,
-	columnKey: string,
-	direction: 'asc' | 'desc',
-	source: 'list' | 'expanded',
-): void {
-	void logEvent('infra_column_sorted', {
-		entity_type: entityType,
-		column_key: columnKey,
-		direction,
-		source,
-	});
-}
-
-export function logInfraDrawerTimeRangeCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	rangeLabel: string,
-): void {
-	void logEvent('infra_drawer_time_range_customized', {
-		entity_type: entityType,
-		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
-	});
-}
-
-export function logInfraDrawerFilterCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
-	expression: string,
-	filterSource: 'search' | 'logs',
-): void {
-	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
-		(pair) => pair.key,
-	);
-
-	if (expressionKeys.length === 0) {
-		return;
-	}
-
-	void logEvent('infra_drawer_filter_customized', {
-		entity_type: entityType,
-		tab,
-		expression_keys: [...new Set(expressionKeys)],
-		filter_source: filterSource,
-	});
-}
-
-export function logInfraGroupByCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	groupByKeysList: string[],
-): void {
-	void logEvent('infra_group_by_customized', {
-		entity_type: entityType,
-		group_by_keys_list: groupByKeysList,
-	});
-}
-
-export function logInfraDrawerTabViewedEvent(
-	entityType: InfraMonitoringEntity,
-	tab: string,
-	isDefaultTab: boolean,
-): void {
-	void logEvent('infra_drawer_tab_viewed', {
-		entity_type: entityType,
-		tab,
-		is_default_tab: isDefaultTab,
-	});
-}
-
-export function logInfraExplorerNavigatedEvent(params: {
-	entityType: InfraMonitoringEntity;
-	destination:
-		| 'metrics_explorer'
-		| 'logs_explorer'
-		| 'traces_explorer'
-		| 'k8s_list';
-	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
-	tab: string;
-	sourceKey: string | null;
-	drawerDurationMsAtNavigation: number | null;
-}): void {
-	void logEvent('infra_explorer_navigated', {
-		entity_type: params.entityType,
-		destination: params.destination,
-		source: params.source,
-		tab: params.tab,
-		source_key: params.sourceKey,
-		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
-	});
-}

frontend/src/constants/features.ts

@@ -9,8 +9,6 @@ export enum FeatureKeys {
 	ANOMALY_DETECTION = 'anomaly_detection',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
-	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
-	USE_INFRA_MONITORING_V2 = 'use_infra_monitoring_v2',
 	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/constants/queryBuilder.ts

@@ -1,5 +1,8 @@
 // ** Helpers
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
@@ -389,11 +392,17 @@ const METRIC_TYPE_TO_ATTRIBUTE_TYPE: Record<
 export function toAttributeType(
 	metricType: MetrictypesTypeDTO | undefined,
 	isMonotonic?: boolean,
+	temporality?: MetrictypesTemporalityDTO,
 ): ATTRIBUTE_TYPES | '' {
 	if (!metricType) {
 		return '';
 	}
-	if (metricType === MetrictypesTypeDTO.sum && isMonotonic === false) {
+	// Only non-monotonic cumulative sums are treated as gauges; delta sums stay Sum
+	if (
+		metricType === MetrictypesTypeDTO.sum &&
+		isMonotonic === false &&
+		temporality === MetrictypesTemporalityDTO.cumulative
+	) {
 		return ATTRIBUTE_TYPES.GAUGE;
 	}
 	return METRIC_TYPE_TO_ATTRIBUTE_TYPE[metricType] || '';

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,18 +1,28 @@
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
+import { GoogleChatInitialConfig } from 'container/CreateAlertChannels/defaults';
 import {
+	googleChatDescriptionDefaultValue,
+	googleChatTitleDefaultValue,
 	opsGenieDescriptionDefaultValue,
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
+	pagerDutyDescriptionDefaultValue,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
 } from 'mocks-server/__mockdata__/alerts';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 
 import { testLabelInputAndHelpValue } from './testUtils';
 
@@ -225,7 +235,7 @@ describe('Create Alert Channel', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
+					pagerDutyDescriptionDefaultValue,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
@@ -419,5 +429,150 @@ describe('Create Alert Channel', () => {
 				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
 			});
 		});
+		describe('Google Chat', () => {
+			const validWebhookUrl =
+				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
+				expect(screen.getByText('Google Chat')).toBeInTheDocument();
+			});
+
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+
+			it('Should check if Title contains the google chat template', () => {
+				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+					googleChatTitleDefaultValue,
+				);
+			});
+
+			it('Should check if Description contains the google chat template', () => {
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
+				const user = userEvent.setup();
+
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'gchat-channel',
+				);
+				await user.type(
+					screen.getByTestId('webhook-url-textbox'),
+					'https://example.com/webhook',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'google_chat_webhook_url_invalid',
+					}),
+				);
+			});
+
+			it('Should check if saving sends a googlechat_configs payload', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'gchat-channel',
+				);
+				await user.type(screen.getByTestId('webhook-url-textbox'), validWebhookUrl);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'gchat-channel',
+					googlechat_configs: [
+						{
+							webhook_url: validWebhookUrl,
+							title: GoogleChatInitialConfig.title,
+							text: GoogleChatInitialConfig.text,
+							send_resolved: true,
+						},
+					],
+				});
+			});
+		});
+		describe('Changing the channel type', () => {
+			async function selectType(
+				user: ReturnType<typeof userEvent.setup>,
+				optionText: string,
+			): Promise<void> {
+				// the type dropdown opens on the inner search input of the antd select
+				await user.click(screen.getByRole('combobox'));
+				await user.click(await screen.findByTitle(optionText));
+			}
+
+			it('Should check if switching to Google Chat and back swaps the prefilled templates', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Slack} />);
+
+				await selectType(user, 'Google Chat');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						googleChatTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+
+				await selectType(user, 'Slack');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						slackTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					slackDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if switching to Pagerduty prefills the pagerduty description and not the opsgenie one', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
+
+				await selectType(user, 'Pagerduty');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('pager-description-textarea')).toHaveTextContent(
+						pagerDutyDescriptionDefaultValue,
+					),
+				);
+			});
+		});
 	});
 });

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -5,7 +5,7 @@ import {
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
+	pagerDutyDescriptionDefaultValue,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
@@ -150,7 +150,7 @@ describe('Create Alert Channel (Normal User)', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
+					pagerDutyDescriptionDefaultValue,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {

frontend/src/container/CreateAlertChannels/config.ts

@@ -104,6 +104,7 @@ export enum ChannelType {
 	Pagerduty = 'pagerduty',
 	Opsgenie = 'opsgenie',
 	MsTeams = 'msteams',
+	GoogleChat = 'googlechat',
 }
 
 // LabelFilterStatement will be used for preparing filter conditions / matchers
@@ -125,3 +126,11 @@ export interface MsTeamsChannel extends Channel {
 	title?: string;
 	text?: string;
 }
+
+export interface GoogleChatChannel extends Channel {
+	// incoming webhook url of the google chat space, must be an
+	// https url on chat.googleapis.com
+	webhook_url?: string;
+	title?: string;
+	text?: string;
+}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -1,4 +1,51 @@
-import { EmailChannel, OpsgenieChannel, PagerChannel } from './config';
+import {
+	ChannelType,
+	EmailChannel,
+	GoogleChatChannel,
+	MsTeamsChannel,
+	OpsgenieChannel,
+	PagerChannel,
+	SlackChannel,
+	WebhookChannel,
+} from './config';
+
+// shared by slack and ms teams, both render the same title / description boxes
+export const SlackInitialConfig: Partial<SlackChannel> = {
+	text: `{{ range .Alerts -}}
+     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
+
+     *Summary:* {{ .Annotations.summary }}
+     *Description:* {{ .Annotations.description }}
+     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
+     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
+
+     *Details:*
+       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
+       {{ end }}
+     {{ end }}`,
+	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
+       {{" "}}(
+       {{- with .CommonLabels.Remove .GroupLabels.Names }}
+         {{- range $index, $label := .SortedPairs -}}
+           {{ if $index }}, {{ end }}
+           {{- $label.Name }}="{{ $label.Value -}}"
+         {{- end }}
+       {{- end -}}
+       )
+     {{- end }}`,
+};
+
+// mirrors DefaultGoogleChatReceiverConfig in pkg/types/alertmanagertypes/googlechat.go,
+// which the backend applies when title / text are left empty
+export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
+	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+	text: `{{ range .Alerts -}}
+**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }}
+**Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }}
+**Description:** {{ .Annotations.description }}{{ end }}
+{{ end }}`,
+};
 
 export const PagerInitialConfig: Partial<PagerChannel> = {
 	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
@@ -446,3 +493,26 @@ export const EmailInitialConfig: Partial<EmailChannel> = {
 	</body>
   </html>`,
 };
+
+// prefilled values of every channel type, keyed by type so the form can apply
+// exactly one set of defaults and swap it when the type changes
+export const ChannelInitialConfig: Record<
+	ChannelType,
+	Partial<
+		SlackChannel &
+			WebhookChannel &
+			PagerChannel &
+			MsTeamsChannel &
+			OpsgenieChannel &
+			EmailChannel &
+			GoogleChatChannel
+	>
+> = {
+	[ChannelType.Slack]: SlackInitialConfig,
+	[ChannelType.MsTeams]: SlackInitialConfig,
+	[ChannelType.GoogleChat]: GoogleChatInitialConfig,
+	[ChannelType.Pagerduty]: PagerInitialConfig,
+	[ChannelType.Opsgenie]: OpsgenieInitialConfig,
+	[ChannelType.Email]: EmailInitialConfig,
+	[ChannelType.Webhook]: {},
+};

frontend/src/container/CreateAlertChannels/index.tsx

@@ -14,16 +14,24 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
+import {
+	useCreateChannel,
+	useTestChannel,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
 
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -31,12 +39,12 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from './config';
+import { ChannelInitialConfig } from './defaults';
 import {
-	EmailInitialConfig,
-	OpsgenieInitialConfig,
-	PagerInitialConfig,
-} from './defaults';
-import { isChannelType } from './utils';
+	isChannelType,
+	isValidGoogleChatWebhookURL,
+	prepareGoogleChatRequest,
+} from './utils';
 
 import './CreateAlertChannels.styles.scss';
 
@@ -60,69 +68,38 @@ function CreateAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel
+				EmailChannel &
+				GoogleChatChannel
 		>
-	>({
+	>(() => ({
 		send_resolved: true,
-		text: `{{ range .Alerts -}}
-     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
-
-     *Summary:* {{ .Annotations.summary }}
-     *Description:* {{ .Annotations.description }}
-     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
-     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
-
-     *Details:*
-       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
-       {{ end }}
-     {{ end }}`,
-		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
-     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
-       {{" "}}(
-       {{- with .CommonLabels.Remove .GroupLabels.Names }}
-         {{- range $index, $label := .SortedPairs -}}
-           {{ if $index }}, {{ end }}
-           {{- $label.Name }}="{{ $label.Value -}}"
-         {{- end }}
-       {{- end -}}
-       )
-     {{- end }}`,
-	});
+		...ChannelInitialConfig[preType],
+	}));
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
+	const { mutateAsync: createChannel } = useCreateChannel();
+	const { mutateAsync: testChannel } = useTestChannel();
+
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
 		(value: string) => {
-			const currentType = type;
-			setType(value as ChannelType);
-
-			if (value === ChannelType.Pagerduty && currentType !== value) {
-				// reset config to pager defaults
-				setSelectedConfig({
-					name: selectedConfig?.name,
-					send_resolved: selectedConfig.send_resolved,
-					...PagerInitialConfig,
-				});
+			const nextType = value as ChannelType;
+			if (nextType === type) {
+				return;
 			}
 
-			if (value === ChannelType.Opsgenie && currentType !== value) {
-				setSelectedConfig((selectedConfig) => ({
-					...selectedConfig,
-					...OpsgenieInitialConfig,
-				}));
-			}
+			setType(nextType);
 
-			// reset config to email defaults
-			if (value === ChannelType.Email && currentType !== value) {
-				setSelectedConfig((selectedConfig) => ({
-					...selectedConfig,
-					...EmailInitialConfig,
-				}));
-			}
+			// the fields the types share (title, text, description) keep the value of
+			// the type that was selected before, so the new type's defaults have to be
+			// written to both the config and the form
+			const defaults = ChannelInitialConfig[nextType];
+			setSelectedConfig((selectedConfig) => ({ ...selectedConfig, ...defaults }));
+			formInstance.setFieldsValue(defaults);
 		},
-		[type, selectedConfig],
+		[type, formInstance],
 	);
 
 	const prepareSlackRequest = useCallback(
@@ -407,6 +384,56 @@ function CreateAlertChannels({
 		showErrorModal,
 	]);
 
+	const validateGoogleChatConfig = useCallback((): boolean => {
+		if (!selectedConfig.webhook_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return false;
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			notifications.error({
+				message: 'Error',
+				description: t('google_chat_webhook_url_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig.webhook_url, notifications, t]);
+
+	const onGoogleChatHandler = useCallback(async () => {
+		if (!validateGoogleChatConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			if (!selectedConfig.name) {
@@ -424,6 +451,7 @@ function CreateAlertChannels({
 				[ChannelType.Opsgenie]: onOpsgenieHandler,
 				[ChannelType.MsTeams]: onMsTeamsHandler,
 				[ChannelType.Email]: onEmailHandler,
+				[ChannelType.GoogleChat]: onGoogleChatHandler,
 			};
 
 			if (isChannelType(value)) {
@@ -455,6 +483,7 @@ function CreateAlertChannels({
 			onOpsgenieHandler,
 			onMsTeamsHandler,
 			onEmailHandler,
+			onGoogleChatHandler,
 			notifications,
 			t,
 		],
@@ -492,6 +521,13 @@ function CreateAlertChannels({
 						request = prepareEmailRequest();
 						await testEmail(request);
 						break;
+					case ChannelType.GoogleChat:
+						if (!validateGoogleChatConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
 					default:
 						notifications.error({
 							message: 'Error',
@@ -513,7 +549,11 @@ function CreateAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				showErrorModal(error as APIError);
+				showErrorModal(
+					error instanceof APIError
+						? error
+						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
+				);
 
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
@@ -535,6 +575,8 @@ function CreateAlertChannels({
 			prepareSlackRequest,
 			prepareMsTeamsRequest,
 			prepareEmailRequest,
+			validateGoogleChatConfig,
+			testChannel,
 			notifications,
 		],
 	);
@@ -562,9 +604,6 @@ function CreateAlertChannels({
 					initialValue: {
 						type,
 						...selectedConfig,
-						...PagerInitialConfig,
-						...OpsgenieInitialConfig,
-						...EmailInitialConfig,
 					},
 				}}
 			/>

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,4 +1,39 @@
-import { ChannelType } from './config';
+import {
+	AlertmanagertypesPostableChannelDTO,
+	ConfigSecretURLDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelType, GoogleChatChannel } from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
+
+const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
+
+// the backend enforces the same two rules, this is only for a nicer error experience
+export const isValidGoogleChatWebhookURL = (url: string): boolean => {
+	try {
+		const { protocol, hostname } = new URL(url);
+		return (
+			protocol === 'https:' && hostname.toLowerCase() === GOOGLE_CHAT_WEBHOOK_HOST
+		);
+	} catch {
+		return false;
+	}
+};
+
+// create, update and test all send the same body shape
+export const prepareGoogleChatRequest = (
+	config: Partial<GoogleChatChannel>,
+): AlertmanagertypesPostableChannelDTO => ({
+	name: config.name || '',
+	googlechat_configs: [
+		{
+			// the generated type models go's config.SecretURL as an object, the api takes a string
+			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
+			title: config.title || '',
+			text: config.text || '',
+			send_resolved: config.send_resolved || false,
+		},
+	],
+});

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -66,6 +66,10 @@ function ThresholdItem({
 				return '=';
 			case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 				return '!=';
+			case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+				return '>=';
+			case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+				return '<=';
 			default:
 				return '';
 		}

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -83,6 +83,10 @@ const getOperatorWord = (op: AlertThresholdOperator): string => {
 			return 'equal';
 		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 			return 'not equal';
+		case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+			return 'equal or exceed';
+		case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+			return 'equal or fall below';
 		default:
 			return 'exceed';
 	}
@@ -98,6 +102,10 @@ const getThresholdValue = (op: AlertThresholdOperator): number => {
 			return 100;
 		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 			return 0;
+		case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+			return 80;
+		case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+			return 50;
 		default:
 			return 80;
 	}
@@ -116,6 +124,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 100, 105, 90, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 0, 10, 15, 0],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [75, 80, 90, 78, 95],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [60, 50, 40, 55, 35],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 		[AlertThresholdMatchType.ALL_THE_TIME]: {
@@ -123,6 +133,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [100, 100, 100, 100, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
 			[AlertThresholdOperator.IS_ABOVE]: [85, 87, 90, 88, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [80, 87, 90, 88, 95],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [50, 40, 35, 42, 38],
 			[AlertThresholdOperator.ABOVE_BELOW]: [85, 87, 90, 88, 95],
 		},
 		[AlertThresholdMatchType.ON_AVERAGE]: {
@@ -130,6 +142,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 105, 100, 95, 105],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [70, 85, 90, 75, 80],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [60, 40, 55, 45, 50],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 		[AlertThresholdMatchType.IN_TOTAL]: {
@@ -137,6 +151,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [20, 20, 20, 20, 20],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [10, 15, 25, 5, 30],
 			[AlertThresholdOperator.IS_ABOVE]: [10, 15, 25, 5, 30],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [10, 15, 25, 5, 25],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [8, 5, 10, 12, 15],
 			[AlertThresholdOperator.ABOVE_BELOW]: [10, 15, 25, 5, 30],
 		},
 		[AlertThresholdMatchType.LAST]: {
@@ -144,6 +160,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [75, 85, 90, 78, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [75, 85, 90, 78, 25],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [75, 85, 90, 78, 80],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [75, 85, 90, 78, 50],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 	};
@@ -157,6 +175,8 @@ const getTooltipOperatorSymbol = (op: AlertThresholdOperator): string => {
 		[AlertThresholdOperator.IS_BELOW]: '<',
 		[AlertThresholdOperator.IS_EQUAL_TO]: '=',
 		[AlertThresholdOperator.IS_NOT_EQUAL_TO]: '!=',
+		[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: '>=',
+		[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: '<=',
 		[AlertThresholdOperator.ABOVE_BELOW]: '>',
 	};
 	return symbolMap[op] || '>';
@@ -252,6 +272,10 @@ export const getMatchTypeTooltip = (
 					return p === thresholdValue;
 				case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 					return p !== thresholdValue;
+				case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+					return p >= thresholdValue;
+				case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+					return p <= thresholdValue;
 				default:
 					return p > thresholdValue;
 			}
@@ -294,7 +318,8 @@ export const getMatchTypeTooltip = (
 						matchType={matchType}
 					>
 						Alert triggers (all points {operatorWord} {thresholdValue})<br />
-						If any point was {thresholdValue}, no alert would fire
+						If any point didn&apos;t {operatorWord} {thresholdValue}, no alert would
+						fire
 					</TooltipExample>
 					<TooltipLink />
 				</TooltipContent>

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -532,7 +532,7 @@ describe('Footer utils', () => {
 			['symbol', '>', 'at_least_once'],
 			['literal', 'above', 'at_least_once'],
 			['short', 'eq', 'avg'],
-			['UI-unexposed', 'above_or_equal', 'at_least_once'],
+			['inclusive', 'above_or_equal', 'at_least_once'],
 		])(
 			'round-trips %s op/matchType unchanged through the submit payload (%s / %s)',
 			(_desc, op, matchType) => {

frontend/src/container/CreateAlertV2/__tests__/utils.test.tsx

@@ -332,25 +332,20 @@ describe('CreateAlertV2 utils', () => {
 			['not_equal', AlertThresholdOperator.IS_NOT_EQUAL_TO],
 			['not_eq', AlertThresholdOperator.IS_NOT_EQUAL_TO],
 			['!=', AlertThresholdOperator.IS_NOT_EQUAL_TO],
+			['5', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['above_or_equal', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['above_or_eq', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['>=', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['6', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['below_or_equal', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['below_or_eq', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['<=', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
 			['7', AlertThresholdOperator.ABOVE_BELOW],
 			['outside_bounds', AlertThresholdOperator.ABOVE_BELOW],
 		])('maps backend alias %s to canonical enum', (alias, expected) => {
 			expect(normalizeOperator(alias)).toBe(expected);
 		});
 
-		it.each([
-			['5', 'above_or_equal'],
-			['above_or_equal', 'above_or_equal'],
-			['above_or_eq', 'above_or_equal'],
-			['>=', 'above_or_equal'],
-			['6', 'below_or_equal'],
-			['below_or_equal', 'below_or_equal'],
-			['below_or_eq', 'below_or_equal'],
-			['<=', 'below_or_equal'],
-		])('returns undefined for UI-unexposed alias %s (%s family)', (alias) => {
-			expect(normalizeOperator(alias)).toBeUndefined();
-		});
-
 		it('returns undefined for unknown values', () => {
 			expect(normalizeOperator('gibberish')).toBeUndefined();
 			expect(normalizeOperator(undefined)).toBeUndefined();
@@ -413,8 +408,8 @@ describe('CreateAlertV2 utils', () => {
 			['symbol', '>', 'at_least_once'],
 			['short form', 'eq', 'avg'],
 			['mixed numeric and literal', '7', 'last'],
-			['UI-unexposed operator', 'above_or_equal', 'at_least_once'],
-			['UI-unexposed numeric operator', '5', 'at_least_once'],
+			['inclusive literal operator', 'above_or_equal', 'at_least_once'],
+			['inclusive numeric operator', '5', 'at_least_once'],
 		])('preserves %s op/matchType verbatim (%s / %s)', (_desc, op, matchType) => {
 			const state = getThresholdStateFromAlertDef(buildDef(op, matchType));
 			expect(state.operator).toBe(op);

frontend/src/container/CreateAlertV2/context/conditionNormalizers.ts

@@ -2,9 +2,8 @@ import { AlertThresholdMatchType, AlertThresholdOperator } from './types';
 
 // Mirrors the backend's CompareOperator.Normalize() in
 // pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
-// the dropdown understands. Returns undefined for aliases the UI does not
-// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
-// value on screen instead of silently rewriting it.
+// the dropdown understands. Returns undefined for unknown values so callers
+// can keep the raw value on screen instead of silently rewriting it.
 export function normalizeOperator(
 	raw: string | undefined,
 ): AlertThresholdOperator | undefined {
@@ -27,6 +26,16 @@ export function normalizeOperator(
 		case 'not_eq':
 		case '!=':
 			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
+		case '5':
+		case 'above_or_equal':
+		case 'above_or_eq':
+		case '>=':
+			return AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO;
+		case '6':
+		case 'below_or_equal':
+		case 'below_or_eq':
+		case '<=':
+			return AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO;
 		case '7':
 		case 'outside_bounds':
 			return AlertThresholdOperator.ABOVE_BELOW;

frontend/src/container/CreateAlertV2/context/constants.ts

@@ -125,6 +125,14 @@ export const THRESHOLD_OPERATOR_OPTIONS = [
 	{ value: AlertThresholdOperator.IS_BELOW, label: 'BELOW' },
 	{ value: AlertThresholdOperator.IS_EQUAL_TO, label: 'EQUAL TO' },
 	{ value: AlertThresholdOperator.IS_NOT_EQUAL_TO, label: 'NOT EQUAL TO' },
+	{
+		value: AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO,
+		label: 'ABOVE OR EQUAL TO',
+	},
+	{
+		value: AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO,
+		label: 'BELOW OR EQUAL TO',
+	},
 ];
 
 export const ANOMALY_THRESHOLD_OPERATOR_OPTIONS = [

frontend/src/container/CreateAlertV2/context/types.ts

@@ -99,6 +99,8 @@ export enum AlertThresholdOperator {
 	IS_BELOW = 'below',
 	IS_EQUAL_TO = 'equal',
 	IS_NOT_EQUAL_TO = 'not_equal',
+	IS_ABOVE_OR_EQUAL_TO = 'above_or_equal',
+	IS_BELOW_OR_EQUAL_TO = 'below_or_equal',
 	ABOVE_BELOW = 'outside_bounds',
 }
 

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

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	groupByPerQuery,
 	customTooltip,
 	pinnedTooltipElement,
+	tooltipPortalRoot,
 	'data-testid': testId,
 }: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -118,6 +119,7 @@ export default function ChartWrapper({
 								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
+								portalRoot={tooltipPortalRoot}
 							/>
 						)}
 					</UPlotChart>

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

@@ -30,6 +30,7 @@ interface BaseChartProps {
 	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
+	tooltipPortalRoot?: HTMLElement | null;
 	'data-testid'?: string;
 }
 interface UPlotBasedChartProps {

frontend/src/container/EditAlertChannels/index.tsx

@@ -14,10 +14,17 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
+import {
+	useTestChannel,
+	useUpdateChannelByID,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -25,10 +32,15 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
+import {
+	isValidGoogleChatWebhookURL,
+	prepareGoogleChatRequest,
+} from 'container/CreateAlertChannels/utils';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
 
 function EditAlertChannels({
 	initialValue,
@@ -45,7 +57,8 @@ function EditAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel
+				EmailChannel &
+				GoogleChatChannel
 		>
 	>({
 		...initialValue,
@@ -54,6 +67,26 @@ function EditAlertChannels({
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
+	const { mutateAsync: updateChannel } = useUpdateChannelByID();
+	const { mutateAsync: testChannel } = useTestChannel();
+
+	const notifyError = useCallback(
+		(error: unknown): APIError => {
+			const apiError =
+				error instanceof APIError
+					? error
+					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
+
+			notifications.error({
+				message: apiError.getErrorCode(),
+				description: apiError.getErrorMessage(),
+			});
+
+			return apiError;
+		},
+		[notifications],
+	);
+
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
 	);
@@ -364,6 +397,61 @@ function EditAlertChannels({
 		}
 	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
 
+	const validateGoogleChatConfig = useCallback((): string => {
+		if (!selectedConfig?.webhook_url) {
+			return t('webhook_url_required');
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			return t('google_chat_webhook_url_invalid');
+		}
+
+		return '';
+	}, [selectedConfig, t]);
+
+	const onGoogleChatEditHandler = useCallback(async () => {
+		const validationError = validateGoogleChatConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareGoogleChatRequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			let result;
@@ -379,6 +467,8 @@ function EditAlertChannels({
 				result = await onOpsgenieEditHandler();
 			} else if (value === ChannelType.Email) {
 				result = await onEmailEditHandler();
+			} else if (value === ChannelType.GoogleChat) {
+				result = await onGoogleChatEditHandler();
 			}
 			logEvent('Alert Channel: Save channel', {
 				type: value,
@@ -397,6 +487,7 @@ function EditAlertChannels({
 			onMsTeamsEditHandler,
 			onOpsgenieEditHandler,
 			onEmailEditHandler,
+			onGoogleChatEditHandler,
 		],
 	);
 
@@ -438,6 +529,19 @@ function EditAlertChannels({
 							await testEmail(request);
 						}
 						break;
+					case ChannelType.GoogleChat: {
+						const validationError = validateGoogleChatConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
+					}
 					default:
 						notifications.error({
 							message: 'Error',
@@ -459,10 +563,7 @@ function EditAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				notifications.error({
-					message: (error as APIError).getErrorCode(),
-					description: (error as APIError).getErrorMessage(),
-				});
+				notifyError(error);
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
 					sendResolvedAlert: selectedConfig?.send_resolved,
@@ -476,6 +577,9 @@ function EditAlertChannels({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			t,
+			notifyError,
+			validateGoogleChatConfig,
+			testChannel,
 			prepareWebhookRequest,
 			preparePagerRequest,
 			prepareSlackRequest,

frontend/src/container/FormAlertChannels/Settings/GoogleChat.tsx

@@ -0,0 +1,82 @@
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+
+import { GoogleChatChannel } from '../../CreateAlertChannels/config';
+import { isValidGoogleChatWebhookURL } from '../../CreateAlertChannels/utils';
+
+function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
+	const { t } = useTranslation('channels');
+
+	return (
+		<>
+			<Form.Item
+				name="webhook_url"
+				label={t('field_webhook_url')}
+				required
+				rules={[
+					{
+						validator: (_, value: string): Promise<void> =>
+							!value || isValidGoogleChatWebhookURL(value)
+								? Promise.resolve()
+								: Promise.reject(new Error(t('google_chat_webhook_url_invalid'))),
+					},
+				]}
+				tooltip={{
+					title: (
+						<MarkdownRenderer
+							markdownContent={t('tooltip_google_chat_url')}
+							variables={{}}
+						/>
+					),
+					overlayInnerStyle: { maxWidth: 400 },
+					placement: 'right',
+				}}
+			>
+				<Input
+					onChange={(event): void => {
+						setSelectedConfig((value) => ({
+							...value,
+							webhook_url: event.target.value,
+						}));
+					}}
+					data-testid="webhook-url-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item name="title" label={t('field_slack_title')}>
+				<Input.TextArea
+					rows={4}
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							title: event.target.value,
+						}))
+					}
+					data-testid="title-textarea"
+				/>
+			</Form.Item>
+
+			<Form.Item name="text" label={t('field_slack_description')}>
+				<Input.TextArea
+					rows={4}
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							text: event.target.value,
+						}))
+					}
+					data-testid="description-textarea"
+					placeholder={t('placeholder_slack_description')}
+				/>
+			</Form.Item>
+		</>
+	);
+}
+
+interface GoogleChatProps {
+	setSelectedConfig: Dispatch<SetStateAction<Partial<GoogleChatChannel>>>;
+}
+
+export default GoogleChat;

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,6 +9,7 @@ import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	OpsgenieChannel,
 	PagerChannel,
 	SlackChannel,
@@ -17,6 +18,7 @@ import {
 import history from 'lib/history';
 
 import EmailSettings from './Settings/Email';
+import GoogleChatSettings from './Settings/GoogleChat';
 import MsTeamsSettings from './Settings/MsTeams';
 import OpsgenieSettings from './Settings/Opsgenie';
 import PagerSettings from './Settings/Pager';
@@ -49,6 +51,8 @@ function FormAlertChannels({
 				return <PagerSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.MsTeams:
 				return <MsTeamsSettings setSelectedConfig={setSelectedConfig} />;
+			case ChannelType.GoogleChat:
+				return <GoogleChatSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Opsgenie:
 				return <OpsgenieSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Email:
@@ -129,6 +133,14 @@ function FormAlertChannels({
 						<Select.Option value="msteams" key="msteams" data-testid="select-option">
 							Microsoft Teams
 						</Select.Option>
+
+						<Select.Option
+							value="googlechat"
+							key="googlechat"
+							data-testid="select-option"
+						>
+							Google Chat
+						</Select.Option>
 					</Select>
 				</Form.Item>
 
@@ -176,7 +188,8 @@ interface FormAlertChannelsProps {
 					WebhookChannel &
 					PagerChannel &
 					OpsgenieChannel &
-					EmailChannel
+					EmailChannel &
+					GoogleChatChannel
 			>
 		>
 	>;

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,198 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
-import { InfraMonitoringEvents } from 'constants/events';
-import { FeatureKeys } from 'constants/features';
-import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
-import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
-import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import {
-	useInfraMonitoringFiltersK8s,
-	useInfraMonitoringPageListing,
-} from 'container/InfraMonitoringK8s/hooks';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { useAppContext } from 'providers/App/App';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	fetchHostEntityData,
-	fetchHostListData,
-	getHostMetricsQueryPayload,
-	hostDetailsMetadataConfig,
-	hostGetEntityName,
-	hostGetSelectedItemFilters,
-	hostInitialEventsFilter,
-	hostInitialLogTracesFilter,
-	hostWidgetInfo,
-} from './constants';
-import {
-	getHostItemKey,
-	getHostRowKey,
-	hostColumnsConfig,
-} from './table.config';
-import { getHostsQuickFiltersConfig } from './utils';
-
-import styles from './InfraMonitoringHosts.module.scss';
-import { ArrowUpToLine, Filter } from '@signozhq/icons';
-
-function Hosts(): JSX.Element {
-	const [showFilters, setShowFilters] = useState(true);
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
-
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
-	const { currentQuery } = useQueryBuilder();
-	const { handleChangeQueryData } = useQueryOperations({
-		index: 0,
-		query: currentQuery.builder.queryData[0],
-		entityVersion: '',
-	});
-
-	// Track previous urlFilters to only sync when the value actually changes
-	// (not when handleChangeQueryData changes due to query updates)
-	const prevUrlFiltersRef = useRef<string | null>(null);
-
-	useEffect(() => {
-		const currentFiltersJson = urlFilters ? JSON.stringify(urlFilters) : null;
-
-		// Only sync if urlFilters value has actually changed
-		if (prevUrlFiltersRef.current !== currentFiltersJson) {
-			prevUrlFiltersRef.current = currentFiltersJson;
-			// Sync filters to query builder, using empty filter when urlFilters is null
-			handleChangeQueryData('filters', urlFilters || { items: [], op: 'and' });
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [urlFilters]); // handleChangeQueryData intentionally omitted - we call the current version but don't re-run when it changes
-
-	const handleFilterVisibilityChange = (): void => {
-		setShowFilters(!showFilters);
-	};
-
-	const handleQuickFiltersChange = (query: Query): void => {
-		const filters = query.builder.queryData[0].filters;
-		// Nuqs batches these calls into a single URL update
-		// The useEffect will sync filters to query builder
-		setUrlFilters(filters || null);
-		setCurrentPage(1);
-		logEvent(InfraMonitoringEvents.FilterApplied, {
-			entity: InfraMonitoringEvents.HostEntity,
-			page: InfraMonitoringEvents.ListPage,
-		});
-	};
-
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			filters.orderBy ||= {
-				columnName: 'cpu',
-				order: 'desc',
-			};
-
-			return fetchHostListData(filters, signal);
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: Parameters<typeof fetchHostEntityData>[0],
-			signal?: AbortSignal,
-		) => fetchHostEntityData(filters, signal),
-		[],
-	);
-
-	const getSelectedItemFilters = useCallback(
-		(selectedItem: string) =>
-			hostGetSelectedItemFilters(selectedItem, dotMetricsEnabled),
-		[dotMetricsEnabled],
-	);
-
-	const getInitialLogTracesFilters = useCallback(
-		(host: import('api/infraMonitoring/getHostLists').HostData) =>
-			hostInitialLogTracesFilter(host, dotMetricsEnabled),
-		[dotMetricsEnabled],
-	);
-
-	const controlListPrefix = !showFilters ? (
-		<div className={styles.quickFiltersToggleContainer}>
-			<Button
-				className="periscope-btn ghost"
-				type="text"
-				size="small"
-				onClick={handleFilterVisibilityChange}
-			>
-				<Filter size={14} />
-			</Button>
-		</div>
-	) : undefined;
-
-	return (
-		<>
-			<div className={styles.infraMonitoringContainer}>
-				<div className={styles.infraContentRow}>
-					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
-							<div className={styles.quickFiltersContainerHeader}>
-								<Typography.Text>Filters</Typography.Text>
-								<Tooltip title="Collapse Filters">
-									<ArrowUpToLine
-										style={{ rotate: '270deg', cursor: 'pointer' }}
-										onClick={handleFilterVisibilityChange}
-										size="md"
-									/>
-								</Tooltip>
-							</div>
-							<QuickFilters
-								source={QuickFiltersSource.INFRA_MONITORING}
-								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
-								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								onFilterChange={handleQuickFiltersChange}
-							/>
-						</div>
-					)}
-					<div
-						className={`${styles.listContainer}${
-							showFilters ? ` ${styles.listContainerFiltersVisible}` : ''
-						}`}
-					>
-						<K8sBaseList
-							controlListPrefix={controlListPrefix}
-							entity={InfraMonitoringEntity.HOSTS}
-							tableColumns={hostColumnsConfig}
-							fetchListData={fetchListData}
-							getRowKey={getHostRowKey}
-							getItemKey={getHostItemKey}
-							eventCategory={InfraMonitoringEvents.HostEntity}
-						/>
-					</div>
-				</div>
-			</div>
-			<K8sBaseDetails
-				category={InfraMonitoringEntity.HOSTS}
-				eventCategory={InfraMonitoringEvents.HostEntity}
-				getSelectedItemFilters={getSelectedItemFilters}
-				fetchEntityData={fetchEntityData}
-				getEntityName={hostGetEntityName}
-				getInitialLogTracesFilters={getInitialLogTracesFilters}
-				getInitialEventsFilters={hostInitialEventsFilter}
-				metadataConfig={hostDetailsMetadataConfig}
-				entityWidgetInfo={hostWidgetInfo}
-				getEntityQueryPayload={getHostMetricsQueryPayload}
-				queryKeyPrefix="hosts"
-				tabsConfig={{
-					showEvents: false,
-				}}
-			/>
-		</>
-	);
-}
-
-export default Hosts;

frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss

@@ -1,175 +0,0 @@
-.infraMonitoringContainer {
-	display: flex;
-	height: 100%;
-	flex-direction: column;
-}
-
-.infraContentRow {
-	display: flex;
-	flex-direction: row;
-	height: calc(100vh - 45px);
-	width: 100%;
-	position: relative;
-	overflow-y: auto;
-
-	:global(.periscope-btn) {
-		&.ghost:not(:disabled) {
-			border: none;
-			background: transparent;
-
-			&:hover {
-				background: transparent;
-				color: var(--bg-robin-500) !important;
-				font-weight: 500;
-			}
-		}
-	}
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
-	}
-}
-
-.quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
-	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
-	}
-
-	:global(.ant-collapse-header) {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 12px 8px;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		padding-block: 0 !important;
-
-		:global(.quick-filters .checkbox-filter) {
-			padding-left: 18px;
-		}
-	}
-
-	:global(.quick-filters) {
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-			height: 0.1rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--accent-primary);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
-		}
-	}
-}
-
-.quickFiltersContainerHeader {
-	padding: 8px;
-	border-bottom: 1px solid var(--l1-border);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.listContainer {
-	flex: 1;
-	min-width: 0;
-	max-width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-
-	> * {
-		min-width: 0;
-		max-width: 100%;
-		box-sizing: border-box;
-	}
-
-	> :global(.ant-table-wrapper) {
-		width: 100%;
-		max-width: 100%;
-
-		:global(.ant-spin-container) {
-			display: flex !important;
-			flex-direction: column;
-		}
-
-		:global(.ant-table),
-		:global(.ant-table-container) {
-			max-width: 100%;
-		}
-	}
-}
-
-.listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
-}
-
-.quickFiltersToggleContainer {
-	padding: 0 8px;
-}
-
-.infraMonitoringTags {
-	width: fit-content;
-	font-family: Inter;
-	font-size: 11px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 18px;
-	letter-spacing: 0.44px;
-	text-transform: uppercase;
-	border-radius: 50px;
-	padding: 2px 8px;
-}
-
-.tagsActive {
-	color: var(--bg-forest-500, #25e192);
-	border: 1px solid rgba(37, 225, 146, 0.2);
-	background: rgba(37, 225, 146, 0.1);
-}
-
-.tagsInactive {
-	color: var(--bg-slate-50, #62687c);
-	border: 1px solid rgba(98, 104, 124, 0.2);
-	background: rgba(98, 104, 124, 0.1);
-}

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,191 +0,0 @@
-import React from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Badge } from '@signozhq/ui/badge';
-import { Progress } from '@signozhq/ui/progress';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	getHostLists,
-	HostData,
-	HostListPayload,
-} from 'api/infraMonitoring/getHostLists';
-import {
-	createFilterItem,
-	K8sDetailsFilters,
-	K8sDetailsMetadataConfig,
-} from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
-import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
-import {
-	getHostQueryPayload,
-	hostWidgetInfo,
-} from 'container/LogDetailedView/InfraMetrics/constants';
-import {
-	TagFilter,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-import { getHostListsQuery } from './utils';
-
-import infraHostsStyles from './InfraMonitoringHosts.module.scss';
-
-export function getProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_SAKURA_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
-export function getMemoryProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_CHERRY_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
-export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
-	{
-		label: 'STATUS',
-		getValue: (h): string => (h.active ? 'ACTIVE' : 'INACTIVE'),
-		render: (value, h): React.ReactNode => (
-			<Badge
-				variant="outline"
-				className={`${infraHostsStyles.infraMonitoringTags} ${
-					h.active ? infraHostsStyles.tagsActive : infraHostsStyles.tagsInactive
-				}`}
-			>
-				{value}
-			</Badge>
-		),
-	},
-	{
-		label: 'OPERATING SYSTEM',
-		getValue: (h): string => h.os || '-',
-		render: (value): React.ReactNode =>
-			value !== '-' ? (
-				<Badge variant="outline" className={infraHostsStyles.infraMonitoringTags}>
-					{value}
-				</Badge>
-			) : (
-				<Typography.Text>-</Typography.Text>
-			),
-	},
-	{
-		label: 'CPU USAGE',
-		getValue: (h): number => h.cpu * 100,
-		render: (value): React.ReactNode => (
-			<Progress
-				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getProgressColor(Number(value))}
-				showInfo
-			/>
-		),
-	},
-	{
-		label: 'MEMORY USAGE',
-		getValue: (h): number => h.memory * 100,
-		render: (value): React.ReactNode => (
-			<Progress
-				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getMemoryProgressColor(Number(value))}
-				showInfo
-			/>
-		),
-	},
-];
-
-export function getHostMetricsQueryPayload(
-	host: HostData,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): ReturnType<typeof getHostQueryPayload> {
-	return getHostQueryPayload(host.hostName, start, end, dotMetricsEnabled);
-}
-
-export { hostWidgetInfo };
-
-export function hostGetSelectedItemFilters(
-	selectedItem: string,
-	dotMetricsEnabled: boolean,
-): TagFilter {
-	const hostKey = dotMetricsEnabled ? 'host.name' : 'host_name';
-	return {
-		op: 'AND',
-		items: [createFilterItem(hostKey, selectedItem)],
-	};
-}
-
-export function hostInitialLogTracesFilter(
-	host: HostData,
-	dotMetricsEnabled: boolean,
-): TagFilterItem[] {
-	const hostKey = dotMetricsEnabled ? 'host.name' : 'host_name';
-	return [createFilterItem(hostKey, host.hostName || '')];
-}
-
-export function hostInitialEventsFilter(_host: HostData): TagFilterItem[] {
-	return [];
-}
-
-export const hostGetEntityName = (host: HostData): string => host.hostName;
-
-export async function fetchHostListData(
-	filters: K8sBaseFilters,
-	signal?: AbortSignal,
-): Promise<{
-	data: HostData[];
-	total: number;
-	error?: string | null;
-	rawData?: unknown;
-}> {
-	const baseQuery = getHostListsQuery();
-	const payload: HostListPayload = {
-		...baseQuery,
-		limit: filters.limit,
-		offset: filters.offset,
-		filters: filters.filters ?? { items: [], op: 'and' },
-		orderBy: filters.orderBy,
-		start: filters.start,
-		end: filters.end,
-		groupBy: filters.groupBy ?? [],
-	};
-
-	const response = await getHostLists(payload, signal);
-
-	return {
-		data: response.payload?.data?.records || [],
-		total: response.payload?.data?.total || 0,
-		error: response.error,
-		rawData: response.payload?.data,
-	};
-}
-
-export async function fetchHostEntityData(
-	filters: K8sDetailsFilters,
-	signal?: AbortSignal,
-): Promise<{ data: HostData | null; error?: string | null }> {
-	const response = await getHostLists(
-		{
-			...getHostListsQuery(),
-			filters: filters.filters,
-			start: filters.start,
-			end: filters.end,
-			limit: 1,
-			offset: 0,
-			groupBy: [],
-		},
-		signal,
-	);
-
-	const records = response.payload?.data?.records || [];
-
-	return {
-		data: records.length > 0 ? records[0] : null,
-		error: response.error,
-	};
-}

frontend/src/container/InfraMonitoringHosts/index.tsx

@@ -1,69 +0,0 @@
-import { useEffect } from 'react';
-import * as Sentry from '@sentry/react';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { DataSource } from 'types/common/queryBuilder';
-
-import Hosts from './Hosts';
-
-function InfraMonitoringHosts(): JSX.Element {
-	const {
-		updateAllQueriesOperators,
-		handleSetConfig,
-		setSupersetQuery,
-		setLastUsedQuery,
-		currentQuery,
-		resetQuery,
-	} = useQueryBuilder();
-
-	useEffect(() => {
-		const newQuery = updateAllQueriesOperators(
-			initialQueriesMap.metrics,
-			PANEL_TYPES.TIME_SERIES,
-			DataSource.METRICS,
-		);
-
-		setSupersetQuery(newQuery);
-		setLastUsedQuery(0);
-		handleSetConfig(PANEL_TYPES.TIME_SERIES, DataSource.METRICS);
-
-		return (): void => {
-			setLastUsedQuery(0);
-		};
-	}, [
-		updateAllQueriesOperators,
-		setSupersetQuery,
-		setLastUsedQuery,
-		handleSetConfig,
-	]);
-
-	useEffect(() => {
-		const updatedCurrentQuery = {
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						filters: {
-							items: [],
-							op: 'AND',
-						},
-					},
-				],
-			},
-		};
-
-		resetQuery(updatedCurrentQuery);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	return (
-		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<Hosts />
-		</Sentry.ErrorBoundary>
-	);
-}
-
-export default InfraMonitoringHosts;

frontend/src/container/InfraMonitoringHosts/table.config.tsx

@@ -1,201 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { HostData } from 'api/infraMonitoring/getHostLists';
-import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
-import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
-import {
-	EntityProgressBar,
-	ExpandButtonWrapper,
-	ValidateColumnValueWrapper,
-} from 'container/InfraMonitoringK8s/components';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { useInfraMonitoringGroupBy } from 'container/InfraMonitoringK8s/hooks';
-import EntityGroupHeader from 'container/InfraMonitoringK8s/Base/EntityGroupHeader';
-
-import { HostnameCell } from './utils';
-
-import styles from './table.module.scss';
-import { Container, Info } from '@signozhq/icons';
-
-function hostRowSource(host: HostData): { meta: Record<string, string> } {
-	return {
-		meta: {
-			...(host.meta ?? {}),
-			host_name: host.hostName ?? '',
-			'host.name': host.hostName ?? '',
-			os_type: host.os ?? '',
-			'os.type': host.os ?? '',
-		},
-	};
-}
-
-export function getHostRowKey(host: HostData): string {
-	return host.hostName || 'unknown';
-}
-
-export function getHostItemKey(host: HostData): string {
-	return host.hostName ?? '';
-}
-
-function HostGroupCell({ row }: { row: HostData }): JSX.Element {
-	const [groupBy] = useInfraMonitoringGroupBy();
-	const synthetic = hostRowSource(row);
-	return getGroupByEl(synthetic, groupBy) as JSX.Element;
-}
-
-export const hostColumnsConfig: TableColumnDef<HostData>[] = [
-	{
-		id: 'hostGroup',
-		header: (): React.ReactNode => <EntityGroupHeader title="HOST GROUP" />,
-		accessorFn: (row): string => row.hostName ?? '',
-		width: { min: 300 },
-		enableSort: false,
-		enableRemove: false,
-		enableMove: false,
-		pin: 'left',
-		visibilityBehavior: 'hidden-on-collapse',
-		cell: ({ row, isExpanded, toggleExpanded }): React.ReactNode => (
-			<ExpandButtonWrapper isExpanded={isExpanded} toggleExpanded={toggleExpanded}>
-				<HostGroupCell row={row} />
-			</ExpandButtonWrapper>
-		),
-	},
-	{
-		id: 'hostName',
-		header: (): React.ReactNode => (
-			<EntityGroupHeader title="Hostname" icon={<Container size={14} />} />
-		),
-		accessorFn: (row): string => row.hostName ?? '',
-		width: { min: 290 },
-		enableSort: false,
-		enableRemove: false,
-		enableMove: false,
-		pin: 'left',
-		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => (
-			<HostnameCell hostName={value as string} />
-		),
-	},
-	{
-		id: 'active',
-		header: (): React.ReactNode => (
-			<div className={styles.statusHeader}>
-				Status
-				<Tooltip title="Sent system metrics in last 10 mins">
-					<Info size="md" />
-				</Tooltip>
-			</div>
-		),
-		accessorFn: (row): boolean => row.active,
-		width: { min: 150, default: 150 },
-		enableSort: false,
-		cell: ({ value }): React.ReactNode => {
-			const active = value as boolean;
-			return (
-				<Badge
-					className={`${styles.statusTag} ${
-						active ? styles.statusTagActive : styles.statusTagInactive
-					}`}
-				>
-					{active ? 'ACTIVE' : 'INACTIVE'}
-				</Badge>
-			);
-		},
-	},
-	{
-		id: 'cpu',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>CPU Usage</div>
-		),
-		accessorFn: (row): number => row.cpu,
-		width: { min: 220 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const cpu = value as number;
-			return (
-				<div className={styles.progressContainer}>
-					<ValidateColumnValueWrapper
-						value={cpu}
-						entity={InfraMonitoringEntity.HOSTS}
-						attribute="CPU metric"
-					>
-						<EntityProgressBar value={cpu} type="cpu" />
-					</ValidateColumnValueWrapper>
-				</div>
-			);
-		},
-	},
-	{
-		id: 'memory',
-		header: (): React.ReactNode => (
-			<div className={`${styles.columnHeaderRight} ${styles.memoryUsageHeader}`}>
-				Memory Usage
-				<Tooltip title="Excluding cache memory">
-					<Info size="md" />
-				</Tooltip>
-			</div>
-		),
-		accessorFn: (row): number => row.memory,
-		width: { min: 220 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const memory = value as number;
-			return (
-				<div className={styles.progressContainer}>
-					<ValidateColumnValueWrapper
-						value={memory}
-						entity={InfraMonitoringEntity.HOSTS}
-						attribute="memory metric"
-					>
-						<EntityProgressBar value={memory} type="memory" />
-					</ValidateColumnValueWrapper>
-				</div>
-			);
-		},
-	},
-	{
-		id: 'wait',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>IOWait</div>
-		),
-		accessorFn: (row): number => row.wait,
-		width: { min: 100, default: 100 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const wait = value as number;
-
-			return (
-				<ValidateColumnValueWrapper
-					value={wait}
-					entity={InfraMonitoringEntity.HOSTS}
-					attribute="IOWait metric"
-				>
-					<TanStackTable.Text>{`${Number((wait * 100).toFixed(1))}%`}</TanStackTable.Text>
-				</ValidateColumnValueWrapper>
-			);
-		},
-	},
-	{
-		id: 'load15',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>Load Avg</div>
-		),
-		accessorFn: (row): number => row.load15,
-		width: { min: 100, default: 100 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const load15 = value as number;
-
-			return (
-				<ValidateColumnValueWrapper
-					value={load15}
-					entity={InfraMonitoringEntity.HOSTS}
-					attribute="load average metric"
-				>
-					<TanStackTable.Text>{load15}</TanStackTable.Text>
-				</ValidateColumnValueWrapper>
-			);
-		},
-	},
-];

frontend/src/container/InfraMonitoringHosts/table.module.scss

@@ -1,68 +0,0 @@
-.entityGroupHeader {
-	padding-left: var(--spacing-5);
-	gap: var(--spacing-5);
-	display: flex;
-	align-items: center;
-}
-
-.hostnameColumnHeader {
-	display: block;
-}
-
-.statusHeader {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	width: 100%;
-}
-
-.columnHeaderRight {
-	text-align: right;
-}
-
-.memoryUsageHeader {
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-2);
-	width: 100%;
-}
-
-.statusTag {
-	width: fit-content;
-	font-family: Inter, sans-serif;
-	font-size: 11px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 18px;
-	letter-spacing: 0.44px;
-	text-transform: uppercase;
-	border-radius: 50px;
-	padding: 2px 8px;
-}
-
-.statusTagActive {
-	color: var(--Forest-500, #25e192);
-	border: 1px solid rgba(37, 225, 146, 0.2);
-	background: rgba(37, 225, 146, 0.1);
-}
-
-.statusTagInactive {
-	color: var(--Slate-50, #62687c);
-	border: 1px solid rgba(98, 104, 124, 0.2);
-	background: rgba(98, 104, 124, 0.1);
-}
-
-.progressContainer {
-	display: flex;
-	align-items: center;
-
-	& > div {
-		width: 100%;
-	}
-}
-
-.progressBar {
-	flex: 1;
-	margin-right: 8px;
-}

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { HostListPayload } from 'api/infraMonitoring/getHostLists';
-import {
-	FiltersType,
-	IQuickFiltersConfig,
-} from 'components/QuickFilters/types';
-import { TriangleAlert } from '@signozhq/icons';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-
-const HOSTNAME_DOCS_URL =
-	'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#host-name-is-blankempty';
-
-export function HostnameCell({
-	hostName,
-}: {
-	hostName?: string | null;
-}): React.ReactElement {
-	const isEmpty = !hostName || !hostName.trim();
-	if (!isEmpty) {
-		return <div className="hostname-column-value">{hostName}</div>;
-	}
-	return (
-		<div className="hostname-cell-missing">
-			<Typography.Text color="muted" className="hostname-cell-placeholder">
-				-
-			</Typography.Text>
-			<Tooltip
-				title={
-					<div>
-						Missing host.name metadata.
-						<br />
-						<a
-							href={HOSTNAME_DOCS_URL}
-							target="_blank"
-							rel="noopener noreferrer"
-							onClick={(e): void => e.stopPropagation()}
-						>
-							Learn how to configure →
-						</a>
-					</div>
-				}
-				trigger={['hover', 'focus']}
-			>
-				<span
-					className="hostname-cell-warning-icon"
-					tabIndex={0}
-					role="img"
-					aria-label="Missing host.name metadata"
-					onClick={(e): void => e.stopPropagation()}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.stopPropagation();
-						}
-					}}
-				>
-					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
-				</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-export const getHostListsQuery = (): HostListPayload => ({
-	filters: {
-		items: [],
-		op: 'and',
-	},
-	groupBy: [],
-	orderBy: { columnName: 'cpu', order: 'desc' },
-});
-
-export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
-	{
-		type: FiltersType.CHECKBOX,
-		title: 'Host Name',
-		attributeKey: {
-			key: 'host_name',
-			dataType: DataTypes.String,
-			type: 'resource',
-		},
-		aggregateOperator: 'noop',
-		aggregateAttribute: 'system_cpu_load_average_15m',
-		dataSource: DataSource.METRICS,
-		defaultOpen: true,
-	},
-	{
-		type: FiltersType.CHECKBOX,
-		title: 'OS Type',
-		attributeKey: {
-			key: 'os_type',
-			dataType: DataTypes.String,
-			type: 'resource',
-		},
-		aggregateOperator: 'noop',
-		aggregateAttribute: 'system_cpu_load_average_15m',
-		dataSource: DataSource.METRICS,
-		defaultOpen: true,
-	},
-];
-
-export function getHostsQuickFiltersConfig(
-	dotMetricsEnabled: boolean,
-): IQuickFiltersConfig[] {
-	const hostNameKey = dotMetricsEnabled ? 'host.name' : 'host_name';
-	const osTypeKey = dotMetricsEnabled ? 'os.type' : 'os_type';
-	const metricName = dotMetricsEnabled
-		? 'system.cpu.load_average.15m'
-		: 'system_cpu_load_average_15m';
-
-	const environmentKey = dotMetricsEnabled
-		? 'deployment.environment'
-		: 'deployment_environment';
-
-	return [
-		{
-			type: FiltersType.CHECKBOX,
-			title: 'Host Name',
-			attributeKey: {
-				key: hostNameKey,
-				dataType: DataTypes.String,
-				type: 'resource',
-			},
-			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
-			dataSource: DataSource.METRICS,
-			defaultOpen: true,
-		},
-		{
-			type: FiltersType.CHECKBOX,
-			title: 'OS Type',
-			attributeKey: {
-				key: osTypeKey,
-				dataType: DataTypes.String,
-				type: 'resource',
-			},
-			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
-			dataSource: DataSource.METRICS,
-			defaultOpen: true,
-		},
-		{
-			type: FiltersType.CHECKBOX,
-			title: 'Environment',
-			attributeKey: {
-				key: environmentKey,
-				dataType: DataTypes.String,
-				type: 'resource',
-			},
-			defaultOpen: true,
-		},
-	];
-}

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -17,11 +17,7 @@ import {
 	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import {
-	InfraMonitoringEvents,
-	logInfraFilterCustomizedEvent,
-	logInfraMonitoringListViewedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
@@ -57,6 +53,10 @@ import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import {
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+} from 'container/InfraMonitoringK8sV2/Base/events';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -140,6 +140,7 @@ function Hosts(): JSX.Element {
 					records: data.records,
 					total: data.total,
 					endTimeBeforeRetention: data.endTimeBeforeRetention,
+					warning: data.warning,
 				};
 			} catch (error) {
 				return {

frontend/src/container/InfraMonitoringHostsV2/StatusFilter.tsx

@@ -1,5 +1,4 @@
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
-import { logInfraFilterCustomizedEvent } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import {
 	StatusFilterValue,
@@ -9,6 +8,7 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
 import styles from './StatusFilter.module.scss';
+import { logInfraFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 const statusOptions: Array<{
 	label: string;

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Progress } from '@signozhq/ui/progress';
 import {
@@ -10,6 +9,7 @@ import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';
+import { getStrokeColorForPercent } from 'container/InfraMonitoringK8sV2/components/EntityProgressBar.utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
@@ -18,26 +18,6 @@ import {
 
 import infraHostsStyles from './InfraMonitoringHosts.module.scss';
 
-export function getProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_SAKURA_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
-export function getMemoryProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_CHERRY_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
 export type HostDetailMetadataConfigType =
 	K8sDetailsMetadataConfig<InframonitoringtypesHostRecordDTO>;
 export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
@@ -79,7 +59,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getProgressColor(Number(value))}
+				strokeColor={getStrokeColorForPercent('cpu', Number(value))}
 				showInfo
 			/>
 		),
@@ -90,7 +70,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getMemoryProgressColor(Number(value))}
+				strokeColor={getStrokeColorForPercent('memory', Number(value))}
 				showInfo
 			/>
 		),

frontend/src/container/InfraMonitoringHostsV2/table.config.tsx

@@ -9,6 +9,7 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8sV2/Base/utils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	ExpandButtonWrapper,
 	GroupedStatusCounts,
 	ValidateColumnValueWrapper,
@@ -98,7 +99,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 	},
 	{
-		id: 'hostName',
+		id: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Hostname"
@@ -108,7 +109,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 		accessorFn: (row): string => row.hostName ?? '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -168,7 +169,10 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 	{
 		id: 'cpu',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#cpu-usage">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/host-monitoring#cpu-usage"
+				tooltip={<EntityProgressThresholds type="cpu" />}
+			>
 				CPU Usage
 			</ColumnHeader>
 		),
@@ -195,7 +199,9 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader
-				tooltip="Excluding cache memory."
+				tooltip={
+					<EntityProgressThresholds type="memory" note="Excluding cache memory." />
+				}
 				docPath="/infrastructure-monitoring/host-monitoring#memory-usage"
 			>
 				Memory Usage (WSS)
@@ -221,9 +227,12 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		},
 	},
 	{
-		id: 'diskUsage',
+		id: 'disk_usage',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#disk-usage">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/host-monitoring#disk-usage"
+				tooltip={<EntityProgressThresholds type="disk" />}
+			>
 				Disk Usage
 			</ColumnHeader>
 		),

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

@@ -1,5 +0,0 @@
-.entityGroupHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-}

frontend/src/container/InfraMonitoringK8s/Base/EntityGroupHeader.tsx

@@ -1,21 +0,0 @@
-import { Group } from '@signozhq/icons';
-
-import styles from './EntityGroupHeader.module.scss';
-
-interface EntityGroupHeaderProps {
-	title: string;
-	icon?: React.ReactNode;
-}
-
-function EntityGroupHeader({
-	title,
-	icon,
-}: EntityGroupHeaderProps): JSX.Element {
-	return (
-		<div className={styles.entityGroupHeader}>
-			{icon || <Group size={14} data-hide-expanded="true" />} {title}
-		</div>
-	);
-}
-
-export default EntityGroupHeader;

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

@@ -1,666 +0,0 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button, Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import GetMinMax from 'lib/getMinMax';
-import {
-	BarChart,
-	ChevronsLeftRight,
-	Compass,
-	DraftingCompass,
-	ScrollText,
-	X,
-} from '@signozhq/icons';
-import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	TagFilter,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-import {
-	LogsAggregatorOperator,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
-import { v4 as uuidv4 } from 'uuid';
-
-import { InfraMonitoringEntity, VIEW_TYPES } from '../constants';
-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 EntityTraces from '../EntityDetailsUtils/EntityTraces';
-import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
-import {
-	useInfraMonitoringEventsFilters,
-	useInfraMonitoringLogFilters,
-	useInfraMonitoringSelectedItem,
-	useInfraMonitoringTracesFilters,
-	useInfraMonitoringView,
-} from '../hooks';
-import LoadingContainer from '../LoadingContainer';
-
-import '../EntityDetailsUtils/entityDetails.styles.scss';
-import { parseAsString, useQueryState } from 'nuqs';
-
-const TimeRangeOffset = 1000000000;
-
-export interface K8sDetailsMetadataConfig<T> {
-	label: string;
-	getValue: (entity: T) => string | number;
-	render?: (value: string | number, entity: T) => React.ReactNode;
-}
-
-export interface K8sDetailsFilters {
-	filters: TagFilter;
-	start: number;
-	end: number;
-}
-
-export interface K8sBaseDetailsProps<T> {
-	category: InfraMonitoringEntity;
-	eventCategory: string;
-	// Data fetching configuration
-	getSelectedItemFilters: (selectedItem: string) => TagFilter;
-	fetchEntityData: (
-		filters: K8sDetailsFilters,
-		signal?: AbortSignal,
-	) => Promise<{ data: T | null; error?: string | null }>;
-	// Entity configuration
-	getEntityName: (entity: T) => string;
-	getInitialLogTracesFilters: (entity: T) => TagFilterItem[];
-	getInitialEventsFilters: (entity: T) => TagFilterItem[];
-	metadataConfig: K8sDetailsMetadataConfig<T>[];
-	entityWidgetInfo: {
-		title: string;
-		yAxisUnit: string;
-	}[];
-	getEntityQueryPayload: (
-		entity: T,
-		start: number,
-		end: number,
-		dotMetricsEnabled: boolean,
-	) => GetQueryResultsProps[];
-	queryKeyPrefix: string;
-	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
-	hideDetailViewTabs?: boolean;
-	tabsConfig?: {
-		showMetrics?: boolean;
-		showLogs?: boolean;
-		showTraces?: boolean;
-		showEvents?: boolean;
-	};
-	customTabs?: Array<{
-		key: string;
-		label: string;
-		icon: React.ReactNode;
-		render: (props: {
-			entity: T;
-			timeRange: { startTime: number; endTime: number };
-			selectedInterval: Time;
-			handleTimeChange: (
-				interval: Time | CustomTimeType,
-				dateTimeRange?: [number, number],
-			) => void;
-		}) => React.ReactNode;
-	}>;
-}
-
-export function createFilterItem(
-	key: string,
-	value: string,
-	dataType: DataTypes = DataTypes.String,
-): TagFilterItem {
-	return {
-		id: uuidv4(),
-		key: {
-			key,
-			dataType,
-			type: 'resource',
-			id: `${key}--string--resource--false`,
-		},
-		op: '=',
-		value,
-	};
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export default function K8sBaseDetails<T>({
-	category,
-	eventCategory,
-	getSelectedItemFilters,
-	fetchEntityData,
-	getEntityName,
-	getInitialLogTracesFilters,
-	getInitialEventsFilters,
-	metadataConfig,
-	entityWidgetInfo,
-	getEntityQueryPayload,
-	queryKeyPrefix,
-	hideDetailViewTabs = false,
-	tabsConfig,
-	customTabs,
-}: K8sBaseDetailsProps<T>): JSX.Element {
-	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const [selectedItem, setSelectedItem] = useInfraMonitoringSelectedItem();
-
-	const entityQueryKey = useMemo(
-		() =>
-			getAutoRefreshQueryKey(
-				selectedTime,
-				`${queryKeyPrefix}EntityDetails`,
-				selectedItem,
-			),
-		[queryKeyPrefix, selectedItem, selectedTime, getAutoRefreshQueryKey],
-	);
-
-	const {
-		data: entityResponse,
-		isLoading: isEntityLoading,
-		isError: isEntityError,
-		error: entityError,
-	} = useQuery({
-		queryKey: entityQueryKey,
-		queryFn: ({ signal }) => {
-			if (!selectedItem) {
-				return { data: null };
-			}
-			const filters = getSelectedItemFilters(selectedItem);
-			const { minTime, maxTime } = getMinMaxTime();
-
-			return fetchEntityData(
-				{
-					filters,
-					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-				},
-				signal,
-			);
-		},
-		enabled: !!selectedItem,
-	});
-
-	const entity = entityResponse?.data ?? null;
-	const hasResponseError = !!entityResponse?.error;
-
-	const logsAndTracesInitialExpression = useMemo(() => {
-		if (!entity) {
-			return '';
-		}
-		const primaryFiltersOnly = {
-			op: 'AND' as const,
-			items: getInitialLogTracesFilters(entity),
-		};
-		return convertFiltersToExpression(primaryFiltersOnly).expression;
-	}, [entity, getInitialLogTracesFilters]);
-
-	const eventsInitialExpression = useMemo(() => {
-		if (!entity) {
-			return '';
-		}
-		const primaryFiltersOnly = {
-			op: 'AND' as const,
-			items: getInitialEventsFilters(entity),
-		};
-		return convertFiltersToExpression(primaryFiltersOnly).expression;
-	}, [entity, getInitialEventsFilters]);
-
-	const handleClose = useCallback((): void => {
-		setSelectedItem(null);
-	}, [setSelectedItem]);
-
-	const entityName = entity ? getEntityName(entity) : '';
-
-	// Content state (previously in K8sBaseDetailsContent)
-	const tabVisibility = useMemo(
-		() => ({
-			showMetrics: true,
-			showLogs: true,
-			showTraces: true,
-			showEvents: true,
-			...tabsConfig,
-		}),
-		[tabsConfig],
-	);
-
-	const { startMs, endMs } = useMemo(
-		() => ({
-			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
-			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
-		}),
-		[lastComputedMinMax],
-	);
-
-	const [modalTimeRange, setModalTimeRange] = useState(() => ({
-		startTime: startMs,
-		endTime: endMs,
-	}));
-
-	// TODO(h4ad): Remove this and use context/zustand
-	const lastSelectedInterval = useRef<Time | null>(null);
-	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: isCustomTimeRange(selectedTime)
-				? DEFAULT_TIME_RANGE
-				: selectedTime,
-	);
-
-	const [selectedView, setSelectedView] = useInfraMonitoringView();
-	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
-
-	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
-	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
-	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
-	const [userLogsExpression] = useQueryState(
-		K8S_ENTITY_LOGS_EXPRESSION_KEY,
-		parseAsString,
-	);
-	const [userTracesExpression] = useQueryState(
-		K8S_ENTITY_TRACES_EXPRESSION_KEY,
-		parseAsString,
-	);
-
-	useEffect(() => {
-		if (entity) {
-			logEvent(InfraMonitoringEvents.PageVisited, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.DetailedPage,
-				category: eventCategory,
-			});
-		}
-	}, [entity, eventCategory]);
-
-	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		if (!isCustomTimeRange(currentSelectedInterval)) {
-			setSelectedInterval(currentSelectedInterval);
-			const { minTime, maxTime } = getMinMaxTime();
-
-			setModalTimeRange({
-				startTime: Math.floor(minTime / TimeRangeOffset),
-				endTime: Math.floor(maxTime / TimeRangeOffset),
-			});
-		}
-	}, [getMinMaxTime, selectedTime]);
-
-	const handleTabChange = (value: string): void => {
-		setSelectedView(value);
-		setLogFiltersParam(null);
-		setTracesFiltersParam(null);
-		setEventsFiltersParam(null);
-		logEvent(InfraMonitoringEvents.TabChanged, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: value,
-		});
-	};
-
-	const handleTimeChange = useCallback(
-		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
-			setSelectedInterval(interval as Time);
-
-			if (interval === 'custom' && dateTimeRange) {
-				setModalTimeRange({
-					startTime: Math.floor(dateTimeRange[0] / 1000),
-					endTime: Math.floor(dateTimeRange[1] / 1000),
-				});
-			} else {
-				const { maxTime, minTime } = GetMinMax(interval);
-
-				setModalTimeRange({
-					startTime: Math.floor(minTime / TimeRangeOffset),
-					endTime: Math.floor(maxTime / TimeRangeOffset),
-				});
-			}
-
-			logEvent(InfraMonitoringEvents.TimeUpdated, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.DetailedPage,
-				category: eventCategory,
-				interval,
-				view: effectiveView,
-			});
-		},
-		[eventCategory, effectiveView],
-	);
-
-	const handleExplorePagesRedirect = (): void => {
-		const urlQuery = new URLSearchParams();
-
-		if (selectedInterval !== 'custom') {
-			urlQuery.set(QueryParams.relativeTime, selectedInterval);
-		} else {
-			urlQuery.delete(QueryParams.relativeTime);
-			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
-			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
-		}
-
-		logEvent(InfraMonitoringEvents.ExploreClicked, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: selectedView,
-		});
-
-		if (selectedView === VIEW_TYPES.LOGS) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userLogsExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.logs,
-							aggregateOperator: LogsAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userTracesExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.traces,
-							aggregateOperator: TracesAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
-		}
-	};
-
-	return (
-		<Drawer
-			width="70%"
-			title={
-				<>
-					<Divider type="vertical" />
-					<Typography.Text className="title">
-						{entityName ||
-							((isEntityError || hasResponseError) &&
-								'Failed to load entity details') ||
-							(isEntityLoading && 'Loading...') ||
-							'-'}
-					</Typography.Text>
-				</>
-			}
-			placement="right"
-			onClose={handleClose}
-			open={!!selectedItem}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="entity-detail-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
-		>
-			{isEntityLoading && <LoadingContainer />}
-			{(isEntityError || hasResponseError) && (
-				<div className="entity-error-container">
-					<Typography.Text color="danger">
-						{entityResponse?.error ||
-							(entityError instanceof Error
-								? entityError.message
-								: 'Failed to load entity details')}
-					</Typography.Text>
-				</div>
-			)}
-			{entity && !isEntityLoading && !hasResponseError && (
-				<>
-					<div className="entity-detail-drawer__entity">
-						<div className="entity-details-grid">
-							<div className="labels-row">
-								{metadataConfig.map((config) => (
-									<Typography.Text
-										key={config.label}
-										color="muted"
-										className="entity-details-metadata-label"
-									>
-										{config.label}
-									</Typography.Text>
-								))}
-							</div>
-
-							<div className="values-row">
-								{metadataConfig.map((config) => {
-									const value = config.getValue(entity);
-									const displayValue = String(value);
-									return (
-										<Typography.Text
-											key={config.label}
-											className="entity-details-metadata-value"
-										>
-											{config.render ? (
-												config.render(value, entity)
-											) : (
-												<Tooltip title={displayValue}>{displayValue}</Tooltip>
-											)}
-										</Typography.Text>
-									);
-								})}
-							</div>
-						</div>
-					</div>
-
-					{!hideDetailViewTabs && (
-						<div className="views-tabs-container">
-							<ToggleGroupSimple
-								type="single"
-								className="views-tabs"
-								onChange={handleTabChange}
-								value={selectedView}
-								items={[
-									...(tabVisibility.showMetrics
-										? [
-												{
-													value: VIEW_TYPES.METRICS,
-													label: (
-														<div className="view-title">
-															<BarChart size={14} />
-															Metrics
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showLogs
-										? [
-												{
-													value: VIEW_TYPES.LOGS,
-													label: (
-														<div className="view-title">
-															<ScrollText size={14} />
-															Logs
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showTraces
-										? [
-												{
-													value: VIEW_TYPES.TRACES,
-													label: (
-														<div className="view-title">
-															<DraftingCompass size={14} />
-															Traces
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showEvents
-										? [
-												{
-													value: VIEW_TYPES.EVENTS,
-													label: (
-														<div className="view-title">
-															<ChevronsLeftRight size={14} />
-															Events
-														</div>
-													),
-												},
-											]
-										: []),
-									...(customTabs?.map((tab) => ({
-										value: tab.key,
-										label: (
-											<div className="view-title">
-												{tab.icon}
-												{tab.label}
-											</div>
-										),
-									})) ?? []),
-								]}
-							/>
-
-							{selectedView === VIEW_TYPES.LOGS && (
-								<Tooltip title="Go to Logs Explorer" placement="left">
-									<Button
-										icon={<Compass size={18} />}
-										className="compass-button"
-										onClick={handleExplorePagesRedirect}
-									/>
-								</Tooltip>
-							)}
-							{selectedView === VIEW_TYPES.TRACES && (
-								<Tooltip title="Go to Traces Explorer" placement="left">
-									<Button
-										icon={<Compass size={18} />}
-										className="compass-button"
-										onClick={handleExplorePagesRedirect}
-									/>
-								</Tooltip>
-							)}
-						</div>
-					)}
-
-					{effectiveView === VIEW_TYPES.METRICS && (
-						<EntityMetrics<T>
-							entity={entity}
-							selectedInterval={selectedInterval}
-							timeRange={modalTimeRange}
-							handleTimeChange={handleTimeChange}
-							isModalTimeSelection
-							entityWidgetInfo={entityWidgetInfo}
-							getEntityQueryPayload={getEntityQueryPayload}
-							category={category}
-							queryKey={`${queryKeyPrefix}Metrics`}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.LOGS && (
-						<EntityLogs
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							queryKey={`${queryKeyPrefix}Logs`}
-							category={category}
-							initialExpression={logsAndTracesInitialExpression}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.TRACES && (
-						<EntityTraces
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							queryKey={`${queryKeyPrefix}Traces`}
-							category={category}
-							initialExpression={logsAndTracesInitialExpression}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
-						<EntityEvents
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							category={category}
-							queryKey={`${queryKeyPrefix}Events`}
-							initialExpression={eventsInitialExpression}
-						/>
-					)}
-					{customTabs?.map((tab) =>
-						selectedView === tab.key ? (
-							<React.Fragment key={tab.key}>
-								{tab.render({
-									entity,
-									timeRange: modalTimeRange,
-									selectedInterval,
-									handleTimeChange,
-								})}
-							</React.Fragment>
-						) : null,
-					)}
-				</>
-			)}
-		</Drawer>
-	);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.module.scss

@@ -1,40 +0,0 @@
-.emptyStateContainer {
-	display: flex;
-	flex: 1;
-	align-items: center;
-	justify-content: center;
-	min-height: 400px;
-}
-
-.k8SListTable {
-	padding-left: var(--spacing-2);
-	--tanstack-table-header-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-color: var(--l2-foreground);
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-cell-color: var(--l2-foreground);
-	--tanstack-table-row-hover-bg: var(--l2-background-hover);
-	--tanstack-table-row-active-bg: var(--l2-background-active);
-	--tanstack-table-resize-handle-bg: var(--l2-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
-	--tanstack-table-row-height: 42px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-left-override: 5px;
-	--tanstack-cell-padding-right-override: 5px;
-
-	--tanstack-expansion-first-col-padding-left: 30px;
-
-	&[data-has-group-by='false'] {
-		--tanstack-cell-padding-left-first-column: 28px;
-	}
-}
-
-.paginationContainer {
-	padding-bottom: var(--spacing-8);
-	padding-right: var(--spacing-8);
-
-	ul {
-		margin: 0;
-	}
-}

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

@@ -1,297 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import TanStackTable, {
-	TableColumnDef,
-	useHiddenColumnIds,
-} from 'components/TanStackTableView';
-import { InfraMonitoringEvents } from 'constants/events';
-import { parseAsString, useQueryState } from 'nuqs';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
-import { openInNewTab } from 'utils/navigation';
-
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-import {
-	useInfraMonitoringFiltersK8s,
-	useInfraMonitoringGroupBy,
-	useInfraMonitoringOrderBy,
-	useInfraMonitoringPageListing,
-	useInfraMonitoringPageSizeListing,
-} from '../hooks';
-import { K8sEmptyState } from './K8sEmptyState';
-import { K8sExpandedRow } from './K8sExpandedRow';
-import K8sHeader from './K8sHeader';
-import { K8sBaseFilters } from './types';
-import { getGroupedByMeta } from './utils';
-
-import styles from './K8sBaseList.module.scss';
-import cx from 'classnames';
-
-export type K8sBaseListEmptyStateContext = {
-	isError: boolean;
-	error?: string | null;
-	totalCount: number;
-	hasFilters: boolean;
-	isLoading: boolean;
-	rawData?: unknown;
-};
-
-/** Base type constraint for K8s entity data */
-export type K8sEntityData = { meta?: Record<string, string> };
-
-export type K8sBaseListProps<T extends K8sEntityData> = {
-	controlListPrefix?: React.ReactNode;
-	entity: InfraMonitoringEntity;
-	tableColumns: TableColumnDef<T>[];
-	fetchListData: (
-		filters: K8sBaseFilters,
-		signal?: AbortSignal,
-	) => Promise<{
-		data: T[];
-		total: number;
-		error?: string | null;
-		rawData?: unknown;
-	}>;
-	/** Function to get the unique key for a row. */
-	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
-	eventCategory: InfraMonitoringEvents;
-	renderEmptyState?: (
-		context: K8sBaseListEmptyStateContext,
-	) => React.ReactNode | null;
-};
-
-export function K8sBaseList<T extends K8sEntityData>({
-	controlListPrefix,
-	entity,
-	tableColumns,
-	fetchListData,
-	getRowKey,
-	getItemKey,
-	eventCategory,
-	renderEmptyState,
-}: K8sBaseListProps<T>): JSX.Element {
-	const [queryFilters] = useInfraMonitoringFiltersK8s();
-	const [currentPage] = useInfraMonitoringPageListing();
-	const [currentPageSize] = useInfraMonitoringPageSizeListing();
-	const [groupBy] = useInfraMonitoringGroupBy();
-	const [orderBy] = useInfraMonitoringOrderBy();
-	const [selectedItem, setSelectedItem] = useQueryState(
-		'selectedItem',
-		parseAsString,
-	);
-
-	const columnStorageKey = `k8s-${entity}-columns`;
-	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
-
-	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
-	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
-	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
-
-	const queryKey = useMemo(() => {
-		return getAutoRefreshQueryKey(
-			selectedTime,
-			'k8sBaseList',
-			entity,
-			String(currentPageSize),
-			String(currentPage),
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(groupBy),
-		);
-	}, [
-		getAutoRefreshQueryKey,
-		selectedTime,
-		entity,
-		currentPageSize,
-		currentPage,
-		queryFilters,
-		orderBy,
-		groupBy,
-	]);
-
-	const { data, isLoading, isError } = useQuery({
-		queryKey,
-		queryFn: ({ signal }) => {
-			const { minTime, maxTime } = getMinMaxTime();
-
-			return fetchListData(
-				{
-					limit: currentPageSize,
-					offset: (currentPage - 1) * currentPageSize,
-					filters: queryFilters || { items: [], op: 'AND' },
-					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-					orderBy: orderBy || undefined,
-					groupBy: groupBy?.length > 0 ? groupBy : undefined,
-				},
-				signal,
-			);
-		},
-		refetchInterval: isRefreshEnabled ? refreshInterval : false,
-	});
-
-	const pageData = data?.data ?? [];
-	const totalCount = data?.total || 0;
-	const hasFilters = (queryFilters?.items?.length ?? 0) > 0;
-
-	const getGroupKeyFn = useCallback(
-		(item: T) => getGroupedByMeta(item, groupBy),
-		[groupBy],
-	);
-
-	useEffect(() => {
-		logEvent(InfraMonitoringEvents.PageVisited, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.ListPage,
-			category: eventCategory,
-			total: totalCount,
-		});
-	}, [eventCategory, totalCount]);
-
-	const handleRowClick = useCallback(
-		(_record: T, itemKey: string): void => {
-			if (groupBy.length === 0) {
-				setSelectedItem(itemKey);
-			}
-
-			logEvent(InfraMonitoringEvents.ItemClicked, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: eventCategory,
-			});
-		},
-		[eventCategory, groupBy.length, setSelectedItem],
-	);
-
-	const handleRowClickNewTab = useCallback(
-		(_record: T, itemKey: string): void => {
-			if (groupBy.length > 0) {
-				return;
-			}
-
-			// Build URL with selectedItem param
-			const url = new URL(window.location.href);
-			url.searchParams.set('selectedItem', itemKey);
-			openInNewTab(url.pathname + url.search);
-
-			logEvent(InfraMonitoringEvents.ItemClicked, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: eventCategory,
-			});
-		},
-		[eventCategory, groupBy.length],
-	);
-
-	const isGroupedByAttribute = groupBy.length > 0;
-
-	// Filter columns for expanded row based on parent's hidden columns
-	const expandedRowColumns = useMemo(
-		() => tableColumns.filter((col) => !hiddenColumnIds.includes(col.id)),
-		[tableColumns, hiddenColumnIds],
-	);
-
-	const renderExpandedRow = useCallback(
-		(
-			_record: T,
-			rowKey: string,
-			groupMeta?: Record<string, string>,
-		): JSX.Element => (
-			<K8sExpandedRow<T>
-				rowKey={rowKey}
-				groupMeta={groupMeta}
-				entity={entity}
-				tableColumns={expandedRowColumns}
-				fetchListData={fetchListData}
-				getRowKey={getRowKey}
-				getItemKey={getItemKey}
-			/>
-		),
-		[entity, fetchListData, getRowKey, getItemKey, expandedRowColumns],
-	);
-
-	const getRowCanExpand = useCallback(
-		(): boolean => isGroupedByAttribute,
-		[isGroupedByAttribute],
-	);
-
-	const showTableLoadingState = isLoading;
-
-	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
-		isError,
-		error: data?.error,
-		totalCount,
-		hasFilters,
-		isLoading: showTableLoadingState,
-		rawData: data?.rawData,
-	}) || (
-		<K8sEmptyState
-			isError={isError}
-			error={data?.error}
-			isLoading={showTableLoadingState}
-			rawData={data?.rawData}
-		/>
-	);
-
-	const showEmptyState = !showTableLoadingState && pageData.length === 0;
-
-	return (
-		<>
-			<K8sHeader
-				controlListPrefix={controlListPrefix}
-				entity={entity}
-				showAutoRefresh={!selectedItem}
-				columns={tableColumns}
-				columnStorageKey={columnStorageKey}
-			/>
-			{isError && (
-				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
-			)}
-
-			{showEmptyState ? (
-				<div className={styles.emptyStateContainer}>{emptyTableMessage}</div>
-			) : (
-				<TanStackTable<T>
-					data={pageData}
-					columns={tableColumns}
-					columnStorageKey={columnStorageKey}
-					isLoading={showTableLoadingState}
-					getRowKey={getRowKey}
-					getItemKey={getItemKey}
-					groupBy={groupBy}
-					getGroupKey={getGroupKeyFn}
-					onRowClick={handleRowClick}
-					onRowClickNewTab={handleRowClickNewTab}
-					renderExpandedRow={isGroupedByAttribute ? renderExpandedRow : undefined}
-					getRowCanExpand={isGroupedByAttribute ? getRowCanExpand : undefined}
-					className={cx(styles.k8SListTable, expandedRowColumns)}
-					enableQueryParams={{
-						page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
-						limit: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE_SIZE,
-						orderBy: INFRA_MONITORING_K8S_PARAMS_KEYS.ORDER_BY,
-						expanded: INFRA_MONITORING_K8S_PARAMS_KEYS.EXPANDED,
-					}}
-					pagination={{
-						total: totalCount,
-						defaultLimit: 10,
-						defaultPage: 1,
-						showTotalCount: true,
-						totalCountLabel: entity.charAt(0).toUpperCase() + entity.slice(1),
-					}}
-					paginationClassname={styles.paginationContainer}
-				/>
-			)}
-		</>
-	);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.module.scss

@@ -1,56 +0,0 @@
-.container {
-	height: 30vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--spacing-3);
-	width: fit-content;
-	max-width: 500px;
-	padding: 24px;
-	text-align: center;
-}
-
-.title {
-	font-weight: 500;
-	margin: 0;
-	font-size: var(--periscope-font-size-medium);
-}
-
-.message {
-	max-width: 400px;
-}
-
-.noDataMessage {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-}
-
-.emptyStateSvg {
-	width: 32px;
-	max-width: 100%;
-}
-
-.eyesEmoji {
-	height: 32px;
-	width: 32px;
-}
-
-.errorIcon {
-	color: var(--danger-background);
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-top: 16px;
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -1,146 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
-import { LifeBuoy, TriangleAlert } from '@signozhq/icons';
-
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
-
-import type { K8sBaseListEmptyStateContext } from './K8sBaseList';
-
-import styles from './K8sEmptyState.module.scss';
-
-export interface K8sListResponseMetadata {
-	sentAnyHostMetricsData?: boolean;
-	isSendingK8SAgentMetrics?: boolean;
-	endTimeBeforeRetention?: boolean;
-}
-
-type K8sEmptyStateProps = Partial<K8sBaseListEmptyStateContext>;
-
-const handleContactSupport = (isCloudUser: boolean): void => {
-	if (isCloudUser) {
-		history.push('/support');
-	} else {
-		window.open('https://signoz.io/slack', '_blank');
-	}
-};
-
-export function K8sEmptyState({
-	isError,
-	error,
-	isLoading,
-	rawData,
-}: K8sEmptyStateProps): JSX.Element | null {
-	const { isCloudUser } = useGetTenantLicense();
-
-	const handleSupport = useCallback(() => {
-		handleContactSupport(isCloudUser);
-	}, [isCloudUser]);
-
-	if (isLoading) {
-		return null;
-	}
-
-	if (isError || error) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<TriangleAlert size={32} className={styles.errorIcon} />
-					<span className={styles.message}>
-						{error || 'An error occurred while fetching data.'}
-					</span>
-					<p>
-						Our team is getting on top to resolve this. Please reach out to support if
-						the issue persists.
-					</p>
-					<div className={styles.actions}>
-						<Button
-							onClick={handleSupport}
-							variant="solid"
-							color="secondary"
-							prefix={<LifeBuoy size={14} />}
-						>
-							Contact Support
-						</Button>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	const metadata = rawData as K8sListResponseMetadata | undefined;
-
-	if (metadata?.sentAnyHostMetricsData === false) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<div className={styles.noDataMessage}>
-						<h5 className={styles.title}>No host metrics data received yet</h5>
-						<span className={styles.message}>
-							Please refer to{' '}
-							<a
-								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
-								target="_blank"
-								rel="noreferrer"
-							>
-								our documentation
-							</a>{' '}
-							to learn how to send host metrics.
-						</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (metadata?.isSendingK8SAgentMetrics) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<span className={styles.message}>
-						To see K8s metrics, upgrade to the latest version of SigNoz k8s-infra
-						chart. Please contact support if you need help.
-					</span>
-				</div>
-			</div>
-		);
-	}
-
-	if (metadata?.endTimeBeforeRetention) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.content}>
-					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
-					<div className={styles.noDataMessage}>
-						<h5 className={styles.title}>
-							Queried time range is before earliest K8s metrics
-						</h5>
-						<span className={styles.message}>
-							Your requested end time is earlier than the earliest detected time of K8s
-							metrics data, please adjust your end time.
-						</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
-				<img
-					src={emptyStateUrl}
-					alt="empty-state"
-					className={styles.emptyStateSvg}
-				/>
-				<span className={styles.message}>
-					This query had no results. Edit your query and try again!
-				</span>
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.module.scss

@@ -1,35 +0,0 @@
-.expandedTableContainer {
-	overflow-x: auto;
-}
-
-.expandedTable {
-	--tanstack-table-header-cell-bg: var(--l1-background);
-	--tanstack-table-header-cell-color: var(--l1-foreground);
-	--tanstack-table-cell-bg: var(--l1-background);
-	--tanstack-table-cell-color: var(--l1-foreground);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-	--tanstack-table-row-active-bg: var(--l1-background-active);
-	--tanstack-table-resize-handle-bg: var(--l1-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l1-border);
-	--tanstack-table-row-height: 36px;
-
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	& [data-hide-expanded='true'] {
-		display: none;
-	}
-}
-
-.expandedTableFooter {
-	display: flex;
-	justify-content: flex-start;
-	gap: var(--spacing-4);
-	background-color: var(--l1-background);
-}
-
-.viewAllButton {
-	display: flex;
-	align-items: center;
-	margin: var(--spacing-4);
-}

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

@@ -1,238 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import TanStackTable, {
-	SortState,
-	TableColumnDef,
-	TanStackTableStateProvider,
-} from 'components/TanStackTableView';
-import { CornerDownRight } from '@signozhq/icons';
-import { useQueryState } from 'nuqs';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-
-import { InfraMonitoringEntity } from '../constants';
-import {
-	useInfraMonitoringFiltersK8s,
-	useInfraMonitoringGroupBy,
-	useInfraMonitoringOrderBy,
-	useInfraMonitoringPageListing,
-	useInfraMonitoringSelectedItem,
-} from '../hooks';
-import { K8sBaseFilters } from './types';
-
-import styles from './K8sExpandedRow.module.scss';
-
-const EXPANDED_ROW_LIMIT = 10;
-
-export type K8sExpandedRowProps<T> = {
-	/** Pre-computed row key from parent table (includes group prefix + duplicate handling) */
-	rowKey: string;
-	/** Group metadata for building filters */
-	groupMeta?: Record<string, string>;
-	entity: InfraMonitoringEntity;
-	tableColumns: TableColumnDef<T>[];
-	fetchListData: (
-		filters: K8sBaseFilters,
-		signal?: AbortSignal,
-	) => Promise<{
-		data: T[];
-		total: number;
-		error?: string | null;
-		rawData?: unknown;
-	}>;
-	/** Function to get the unique key for a row. */
-	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
-};
-
-export function K8sExpandedRow<T>({
-	rowKey,
-	groupMeta,
-	entity,
-	tableColumns,
-	fetchListData,
-	getRowKey,
-	getItemKey,
-}: K8sExpandedRowProps<T>): JSX.Element {
-	const [, setGroupBy] = useInfraMonitoringGroupBy();
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-	const [queryFilters, setFilters] = useInfraMonitoringFiltersK8s();
-	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
-	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
-
-	const orderByParamKey = useMemo(
-		() => `orderBy_${rowKey.replace(/[^a-zA-Z0-9]/g, '_')}`,
-		[rowKey],
-	);
-	const [orderBy, setOrderBy] = useQueryState(
-		orderByParamKey,
-		parseAsJsonNoValidate<SortState | null>()
-			.withDefault(null as never)
-			.withOptions({
-				history: 'push',
-			}),
-	);
-	useEffect(() => {
-		return (): void => {
-			void setOrderBy(null);
-		};
-	}, [setOrderBy]);
-
-	const storageKey = `k8s-${entity}-columns-expanded`;
-
-	const createFiltersForRecord = useCallback((): NonNullable<
-		IBuilderQuery['filters']
-	> => {
-		const baseFilters: IBuilderQuery['filters'] = {
-			items: [...(queryFilters?.items || [])],
-			op: 'and',
-		};
-
-		const metaKeys = groupMeta ?? {};
-
-		for (const key of Object.keys(metaKeys)) {
-			const value = metaKeys[key];
-			// Skip empty values to avoid creating invalid filters
-			if (value === '' || value === undefined || value === null) {
-				continue;
-			}
-			baseFilters.items.push({
-				key: {
-					key,
-					type: 'resource',
-				},
-				op: '=',
-				value,
-				id: key,
-			});
-		}
-
-		return baseFilters;
-	}, [queryFilters?.items, groupMeta]);
-
-	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
-	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
-	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
-
-	const queryKey = useMemo(() => {
-		return getAutoRefreshQueryKey(
-			selectedTime,
-			entity,
-			'k8sExpandedRow',
-			JSON.stringify(groupMeta),
-			rowKey,
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-		);
-	}, [
-		getAutoRefreshQueryKey,
-		selectedTime,
-		entity,
-		groupMeta,
-		rowKey,
-		queryFilters,
-		orderBy,
-	]);
-
-	const { data, isLoading, isError } = useQuery({
-		queryKey,
-		queryFn: async ({ signal }) => {
-			const { minTime, maxTime } = getMinMaxTime();
-
-			return await fetchListData(
-				{
-					limit: EXPANDED_ROW_LIMIT,
-					offset: 0,
-					filters: createFiltersForRecord(),
-					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-					orderBy: orderBy || undefined,
-					groupBy: undefined,
-				},
-				signal,
-			);
-		},
-		staleTime: 1000 * 60 * 30,
-		refetchInterval: isRefreshEnabled ? refreshInterval : false,
-	});
-
-	const expandedData = data?.data ?? [];
-
-	const handleRowClick = useCallback(
-		(_row: T, itemKey: string): void => {
-			setSelectedItem(itemKey);
-		},
-		[setSelectedItem],
-	);
-
-	const handleViewAllClick = (): void => {
-		const filters = createFiltersForRecord();
-		setGroupBy([]);
-		setCurrentPage(1);
-		setFilters(filters);
-		if (orderBy) {
-			setMainOrderBy(orderBy);
-		}
-	};
-
-	const total = data?.total ?? 0;
-	const hasMoreItems = total > EXPANDED_ROW_LIMIT;
-
-	const footerContent = hasMoreItems ? (
-		<Button
-			type="button"
-			color="secondary"
-			variant="outlined"
-			className={styles.viewAllButton}
-			onClick={handleViewAllClick}
-			prefix={<CornerDownRight size={14} />}
-		>
-			View All
-		</Button>
-	) : null;
-
-	return (
-		<div
-			className={styles.expandedTableContainer}
-			data-testid="expanded-table-container"
-		>
-			{isError && (
-				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
-			)}
-
-			<div data-testid="expanded-table">
-				<TanStackTableStateProvider>
-					<TanStackTable<T>
-						data={expandedData}
-						columns={tableColumns}
-						columnStorageKey={storageKey}
-						isLoading={isLoading}
-						getRowKey={getRowKey}
-						getItemKey={getItemKey}
-						onRowClick={handleRowClick}
-						enableQueryParams={{
-							orderBy: orderByParamKey,
-						}}
-						tableScrollerProps={{
-							className: styles.expandedTable,
-						}}
-						disableVirtualScroll
-						cellTypographySize="medium"
-					/>
-				</TanStackTableStateProvider>
-				{!isLoading && expandedData.length > 0 && (
-					<div className={styles.expandedTableFooter}>{footerContent}</div>
-				)}
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sFiltersSidePanel.module.scss

@@ -1,36 +0,0 @@
-.drawer {
-	--dialog-description-padding: 0px 0px var(--spacing-8) 0px;
-}
-
-.columnItem {
-	display: flex;
-	align-items: center;
-}
-
-.columnsTitle {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-small, 11px);
-	font-weight: var(--periscope-font-weight-medium, 500);
-	text-transform: uppercase;
-
-	padding: var(--spacing-4) var(--spacing-8);
-	border-bottom: 1px solid var(--l2-border);
-
-	&:not(:first-of-type) {
-		border-top: 1px solid var(--l2-border);
-	}
-}
-
-.columnsList {
-	display: flex;
-	flex-direction: column;
-}
-
-.columnItem {
-	justify-content: flex-start !important;
-	width: 100%;
-}
-
-.horizontalDivider {
-	border-top: 1px solid var(--l1-border);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sFiltersSidePanel.tsx

@@ -1,142 +0,0 @@
-import { useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import {
-	hideColumn,
-	showColumn,
-	TableColumnDef,
-	useHiddenColumnIds,
-} from 'components/TanStackTableView';
-
-import styles from './K8sFiltersSidePanel.module.scss';
-
-type ColumnPickerItem = {
-	id: string;
-	label: string;
-	canBeHidden: boolean;
-	visibilityBehavior:
-		| 'hidden-on-expand'
-		| 'hidden-on-collapse'
-		| 'always-visible';
-};
-
-/**
- * Converts TableColumnDef to column picker item format
- */
-function toColumnPickerItems<T>(
-	columns: TableColumnDef<T>[],
-): ColumnPickerItem[] {
-	return columns.map((col) => ({
-		id: col.id,
-		label: typeof col.header === 'string' ? col.header : col.id,
-		canBeHidden: col.canBeHidden !== false && col.enableRemove !== false,
-		visibilityBehavior: col.visibilityBehavior ?? 'always-visible',
-	}));
-}
-
-function K8sFiltersSidePanel<TData>({
-	open,
-	onClose,
-	columns,
-	storageKey,
-}: {
-	open: boolean;
-	onClose: () => void;
-	columns: TableColumnDef<TData>[];
-	storageKey: string;
-}): JSX.Element {
-	const columnPickerItems = useMemo(
-		() => toColumnPickerItems(columns),
-		[columns],
-	);
-	const hiddenColumnIds = useHiddenColumnIds(storageKey);
-
-	const addedColumns = useMemo(
-		() =>
-			columnPickerItems.filter(
-				(column) =>
-					!hiddenColumnIds.includes(column.id) &&
-					column.visibilityBehavior !== 'hidden-on-collapse',
-			),
-		[columnPickerItems, hiddenColumnIds],
-	);
-
-	const hiddenColumns = useMemo(
-		() =>
-			columnPickerItems.filter((column) => hiddenColumnIds.includes(column.id)),
-		[columnPickerItems, hiddenColumnIds],
-	);
-
-	const handleRemoveColumn = (columnId: string): void => {
-		hideColumn(storageKey, columnId);
-	};
-
-	const handleAddColumn = (columnId: string): void => {
-		showColumn(storageKey, columnId);
-	};
-
-	const drawerContent = (
-		<>
-			<div className={styles.columnsTitle}>Added Columns (Click to remove)</div>
-
-			<div className={styles.columnsList}>
-				{addedColumns.map((column) => (
-					<div className={styles.columnItem} key={column.id}>
-						<Button
-							variant="ghost"
-							color="none"
-							className={styles.columnItem}
-							disabled={!column.canBeHidden}
-							data-testid={`remove-column-${column.id}`}
-							onClick={(): void => handleRemoveColumn(column.id)}
-						>
-							{column.label}
-						</Button>
-					</div>
-				))}
-			</div>
-
-			<div className={styles.horizontalDivider} />
-
-			<div className={styles.columnsTitle}>Other Columns (Click to add)</div>
-
-			<div className={styles.columnsList}>
-				{hiddenColumns.map((column) => (
-					<div className={styles.columnItem} key={column.id}>
-						<Button
-							variant="ghost"
-							color="none"
-							className={styles.columnItem}
-							data-can-be-added="true"
-							data-testid={`add-column-${column.id}`}
-							onClick={(): void => handleAddColumn(column.id)}
-							tabIndex={0}
-						>
-							{column.label}
-						</Button>
-					</div>
-				))}
-			</div>
-		</>
-	);
-
-	return (
-		<DrawerWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="Columns"
-			direction="right"
-			showCloseButton
-			showOverlay={false}
-			className={styles.drawer}
-		>
-			{drawerContent}
-		</DrawerWrapper>
-	);
-}
-
-export default K8sFiltersSidePanel;

frontend/src/container/InfraMonitoringK8s/Base/K8sGroupCell.tsx

@@ -1,17 +0,0 @@
-import { getGroupByEl } from './utils';
-import { useInfraMonitoringGroupBy } from '../hooks';
-
-interface K8sEntityWithMeta {
-	meta?: Record<string, string>;
-}
-
-function K8sGroupCell<T extends K8sEntityWithMeta>({
-	row,
-}: {
-	row: T;
-}): JSX.Element {
-	const [groupBy] = useInfraMonitoringGroupBy();
-	return getGroupByEl(row, groupBy) as JSX.Element;
-}
-
-export default K8sGroupCell;

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.module.scss

@@ -1,80 +0,0 @@
-.k8SListControls {
-	padding: var(--spacing-4);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: var(--spacing-4);
-
-	:global(.ant-select-selector) {
-		border-radius: 2px;
-		border: 1px solid var(--border) !important;
-		background-color: var(--l2-background) !important;
-
-		input {
-			font-size: 12px;
-		}
-
-		:global([data-slot='badge'] .ant-typography) {
-			font-size: 12px;
-		}
-	}
-}
-
-.k8SListControlsLeft {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--spacing-4);
-
-	.k8SQbSearchContainer {
-		flex: 1;
-		min-width: 240px;
-		max-width: 60%;
-	}
-}
-
-.k8SAttributeSearchContainer {
-	flex: 1;
-	min-width: 240px;
-	max-width: 40%;
-	display: flex;
-	align-items: center;
-}
-
-.groupByLabel {
-	min-width: max-content;
-	font-size: var(--periscope-font-size-base, 13px);
-	font-weight: var(--periscope-font-weight-regular, 400);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-
-	border-radius: 2px 0px 0px 2px;
-	border: 1px solid var(--border);
-	border-right: none;
-	border-top-right-radius: 0px;
-	border-bottom-right-radius: 0px;
-
-	display: flex;
-	height: 32px;
-	padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
-	justify-content: center;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.groupBySelect {
-	:global(.ant-select-selector) {
-		border-left: none;
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
-	}
-}
-
-.k8SListControlsRight {
-	min-width: 240px;
-
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.tsx

@@ -1,232 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Select } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { TableColumnDef } from 'components/TanStackTableView';
-import { InfraMonitoringEvents } from 'constants/events';
-import { FeatureKeys } from 'constants/features';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { SlidersHorizontal } from '@signozhq/icons';
-import { useAppContext } from 'providers/App/App';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	GetK8sEntityToAggregateAttribute,
-	InfraMonitoringEntity,
-} from '../constants';
-import {
-	useInfraMonitoringFiltersK8s,
-	useInfraMonitoringGroupBy,
-	useInfraMonitoringPageListing,
-} from '../hooks';
-import K8sFiltersSidePanel from './K8sFiltersSidePanel';
-
-import styles from './K8sHeader.module.scss';
-
-interface K8sHeaderProps<TData> {
-	controlListPrefix?: React.ReactNode;
-	entity: InfraMonitoringEntity;
-	showAutoRefresh: boolean;
-	columns: TableColumnDef<TData>[];
-	columnStorageKey: string;
-}
-
-function K8sHeader<TData>({
-	controlListPrefix,
-	entity,
-	showAutoRefresh,
-	columns,
-	columnStorageKey,
-}: K8sHeaderProps<TData>): JSX.Element {
-	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
-	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
-
-	const currentQuery = initialQueriesMap[DataSource.METRICS];
-
-	const updatedCurrentQuery = useMemo(() => {
-		let { filters } = currentQuery.builder.queryData[0];
-		if (urlFilters) {
-			filters = urlFilters;
-		}
-		return {
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						aggregateOperator: 'noop',
-						aggregateAttribute: {
-							...currentQuery.builder.queryData[0].aggregateAttribute,
-						},
-						filters,
-					},
-				],
-			},
-		};
-	}, [currentQuery, urlFilters]);
-
-	const query = useMemo(
-		() => updatedCurrentQuery?.builder?.queryData[0] || null,
-		[updatedCurrentQuery],
-	);
-
-	const { handleChangeQueryData } = useQueryOperations({
-		index: 0,
-		query: currentQuery.builder.queryData[0],
-		entityVersion: '',
-	});
-
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-	const handleChangeTagFilters = useCallback(
-		(value: IBuilderQuery['filters']) => {
-			setUrlFilters(value || null);
-			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
-
-			if (value?.items && value?.items?.length > 0) {
-				logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: InfraMonitoringEvents.K8sEntity,
-					page: InfraMonitoringEvents.ListPage,
-					category: InfraMonitoringEvents.Pod,
-				});
-			}
-		},
-		[handleChangeQueryData, setCurrentPage, setUrlFilters],
-	);
-
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
-	const { data: groupByFiltersData, isLoading: isLoadingGroupByFilters } =
-		useGetAggregateKeys(
-			{
-				dataSource: currentQuery.builder.queryData[0].dataSource,
-				aggregateAttribute: GetK8sEntityToAggregateAttribute(
-					entity,
-					dotMetricsEnabled,
-				),
-				aggregateOperator: 'noop',
-				searchText: '',
-				tagType: '',
-			},
-			{
-				queryKey: [currentQuery.builder.queryData[0].dataSource, 'noop'],
-			},
-			true,
-			entity,
-		);
-
-	const groupByOptions = useMemo(
-		() =>
-			groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
-				value: filter.key,
-				label: filter.key,
-			})) || [],
-		[groupByFiltersData],
-	);
-
-	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
-
-	const handleGroupByChange = useCallback(
-		(value: IBuilderQuery['groupBy']) => {
-			const newGroupBy = [];
-
-			for (let index = 0; index < value.length; index++) {
-				const element = value[index] as unknown as string;
-
-				const key = groupByFiltersData?.payload?.attributeKeys?.find(
-					(k) => k.key === element,
-				);
-
-				if (key) {
-					newGroupBy.push(key);
-				}
-			}
-
-			// Reset pagination on switching to groupBy
-			setCurrentPage(1);
-			setGroupBy(newGroupBy);
-
-			logEvent(InfraMonitoringEvents.GroupByChanged, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: InfraMonitoringEvents.Pod,
-			});
-		},
-		[groupByFiltersData, setCurrentPage, setGroupBy],
-	);
-
-	const onClickOutside = useCallback(() => {
-		setIsFiltersSidePanelOpen(false);
-	}, []);
-
-	return (
-		<div className={styles.k8SListControls}>
-			<div className={styles.k8SListControlsLeft}>
-				{controlListPrefix}
-
-				<div className={styles.k8SQbSearchContainer}>
-					<QueryBuilderSearch
-						query={query as IBuilderQuery}
-						onChange={handleChangeTagFilters}
-						isInfraMonitoring
-						disableNavigationShortcuts
-						entity={entity}
-					/>
-				</div>
-
-				<div className={styles.k8SAttributeSearchContainer}>
-					<div className={styles.groupByLabel}> Group by </div>
-					<Select
-						className={styles.groupBySelect}
-						loading={isLoadingGroupByFilters}
-						mode="multiple"
-						value={groupBy}
-						allowClear
-						maxTagCount="responsive"
-						placeholder="Search for attribute"
-						style={{ width: '100%' }}
-						options={groupByOptions}
-						onChange={handleGroupByChange}
-					/>
-				</div>
-			</div>
-
-			<div className={styles.k8SListControlsRight}>
-				<DateTimeSelectionV2
-					showAutoRefresh={showAutoRefresh}
-					showRefreshText={false}
-					hideShareModal
-				/>
-
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon"
-					color="none"
-					data-testid="k8s-list-filters-button"
-					onClick={(): void => setIsFiltersSidePanelOpen(true)}
-				>
-					<SlidersHorizontal size={14} />
-				</Button>
-			</div>
-
-			<K8sFiltersSidePanel
-				open={isFiltersSidePanelOpen}
-				columns={columns}
-				storageKey={columnStorageKey}
-				onClose={onClickOutside}
-			/>
-		</div>
-	);
-}
-
-export default K8sHeader;

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

@@ -1,912 +0,0 @@
-import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { InfraMonitoringEvents } from 'constants/events';
-import {
-	NuqsTestingAdapter,
-	OnUrlUpdateFunction,
-	UrlUpdateEvent,
-} from 'nuqs/adapters/testing';
-import { AppProvider } from 'providers/App/App';
-import TimezoneProvider from 'providers/Timezone';
-import store from 'store';
-import { openInNewTab } from 'utils/navigation';
-
-import { TableColumnDef } from 'components/TanStackTableView';
-
-import { InfraMonitoringEntity } from '../../constants';
-import { K8sBaseList, K8sBaseListProps, K8sEntityData } from '../K8sBaseList';
-
-jest.mock('utils/navigation', () => ({
-	...jest.requireActual('utils/navigation'),
-	openInNewTab: jest.fn(),
-}));
-
-const openInNewTabMock = openInNewTab as jest.Mock;
-
-// Mock Date.now to prevent flaky tests due to time-dependent values
-const MOCK_NOW = 1700000000000; // Fixed timestamp
-jest.spyOn(Date, 'now').mockReturnValue(MOCK_NOW);
-
-// Mock DrawerWrapper to avoid CSS issues with jsdom
-// SyntaxError: 'div#radix-:rbv,,._dialog__content_qf8bf_22 :focus' is not a valid selector
-jest.mock('@signozhq/ui/drawer', () => {
-	const actual = jest.requireActual('@signozhq/ui/drawer');
-	return {
-		...actual,
-		DrawerWrapper: ({
-			open,
-			children,
-			title,
-		}: {
-			open: boolean;
-			children: React.ReactNode;
-			title: string;
-			onOpenChange?: (isOpen: boolean) => void;
-		}): JSX.Element | null =>
-			open ? (
-				<div data-testid="drawer-wrapper" data-title={title}>
-					{children}
-				</div>
-			) : null,
-	};
-});
-
-// Test data types that satisfy K8sEntityData constraint
-type TestItemWithTitle = {
-	id: string;
-	title: string;
-	meta?: Record<string, string>;
-};
-type TestItem = { id: string; meta?: Record<string, string> };
-type TestItemWithName = {
-	id: string;
-	name: string;
-	desc: string;
-	meta?: Record<string, string>;
-};
-type TestItemWithGroup = {
-	id: string;
-	name: string;
-	group: string;
-	meta?: Record<string, string>;
-};
-
-// Helper to create TanStack columns for tests
-function createTestColumnsWithTitle(): TableColumnDef<TestItemWithTitle>[] {
-	return [
-		{
-			id: 'id',
-			header: (): React.ReactNode => 'Id',
-			accessorFn: (row): string => row.id,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-			enableSort: true,
-		},
-		{
-			id: 'title',
-			header: (): React.ReactNode => 'Title',
-			accessorFn: (row): string => row.title,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-	];
-}
-
-function createTestColumns(): TableColumnDef<TestItem>[] {
-	return [
-		{
-			id: 'id',
-			header: (): React.ReactNode => 'Id',
-			accessorFn: (row): string => row.id,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-	];
-}
-
-function createTestColumnsWithName(): TableColumnDef<TestItemWithName>[] {
-	return [
-		{
-			id: 'id',
-			header: (): React.ReactNode => 'Id',
-			accessorFn: (row): string => row.id,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-		{
-			id: 'name',
-			header: (): React.ReactNode => 'Name',
-			accessorFn: (row): string => row.name,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-		{
-			id: 'desc',
-			header: (): React.ReactNode => 'Description',
-			accessorFn: (row): string => row.desc,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-	];
-}
-
-function createTestColumnsWithGroup(): TableColumnDef<TestItemWithGroup>[] {
-	return [
-		{
-			id: 'id',
-			header: (): React.ReactNode => 'Id',
-			accessorFn: (row): string => row.id,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-		{
-			id: 'name',
-			header: (): React.ReactNode => 'Name',
-			accessorFn: (row): string => row.name,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-		{
-			id: 'group',
-			header: (): React.ReactNode => 'Group',
-			accessorFn: (row): string => row.group,
-			cell: ({ value }): React.ReactNode => <>{value}</>,
-		},
-	];
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function renderComponent<T extends K8sEntityData>({
-	queryParams,
-	onUrlUpdate,
-	...props
-}: K8sBaseListProps<T> & {
-	queryParams?: Record<string, string>;
-	onUrlUpdate?: OnUrlUpdateFunction;
-}) {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-	return render(
-		<MemoryRouter>
-			<MemoryRouterV5>
-				<TimezoneProvider>
-					<QueryClientProvider client={queryClient}>
-						<AppProvider>
-							<Provider store={store}>
-								<NuqsTestingAdapter
-									searchParams={queryParams}
-									onUrlUpdate={onUrlUpdate}
-								>
-									<VirtuosoMockContext.Provider
-										value={{ viewportHeight: 800, itemHeight: 50 }}
-									>
-										<TooltipProvider>
-											<K8sBaseList {...props} />
-										</TooltipProvider>
-									</VirtuosoMockContext.Provider>
-								</NuqsTestingAdapter>
-							</Provider>
-						</AppProvider>
-					</QueryClientProvider>
-				</TimezoneProvider>
-			</MemoryRouterV5>
-		</MemoryRouter>,
-	);
-}
-
-describe('K8sBaseList', () => {
-	describe('with items in the list', () => {
-		const itemId = Math.random().toString(36).slice(7);
-		const itemId2 = Math.random().toString(36).slice(7);
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItemWithTitle>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItemWithTitle>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			onUrlUpdateMock.mockClear();
-			fetchListDataMock.mockClear();
-			openInNewTabMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [
-					{ id: `PodId:${itemId}`, title: `PodTitle:${itemId}` },
-					{ id: `PodId:${itemId2}`, title: `PodTitle:${itemId2}` },
-				],
-				total: 25,
-				error: null,
-			});
-
-			renderComponent<TestItemWithTitle>({
-				onUrlUpdate: onUrlUpdateMock,
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumnsWithTitle(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should render all the items in the list', async () => {
-			await waitFor(async () => {
-				await expect(
-					screen.findByText(`PodId:${itemId}`),
-				).resolves.toBeInTheDocument();
-				await expect(
-					screen.findByText(`PodTitle:${itemId}`),
-				).resolves.toBeInTheDocument();
-				await expect(
-					screen.findByText(`PodId:${itemId2}`),
-				).resolves.toBeInTheDocument();
-				await expect(
-					screen.findByText(`PodTitle:${itemId2}`),
-				).resolves.toBeInTheDocument();
-			});
-		});
-
-		it('should call fetchListData with default filters', async () => {
-			await waitFor(() => {
-				expect(fetchListDataMock).toHaveBeenCalled();
-			});
-
-			const [filters] = fetchListDataMock.mock.calls[0];
-			expect(filters.limit).toBe(10);
-			expect(filters.offset).toBe(0);
-			expect(filters.filters).toStrictEqual({ items: [], op: 'AND' });
-			expect(filters.groupBy).toBeUndefined();
-			expect(filters.orderBy).toBeUndefined();
-		});
-
-		it('should click to open the row details and update selectedItem in URL', async () => {
-			const user = userEvent.setup();
-
-			const firstRowEl = await screen.findByText(`PodId:${itemId}`);
-			await user.click(firstRowEl);
-
-			await waitFor(() => {
-				const selectedItem = onUrlUpdateMock.mock.calls
-					.map((call) => call[0].searchParams.get('selectedItem'))
-					.filter(Boolean)
-					.pop();
-				expect(selectedItem).toBe(`PodId:${itemId}`);
-			});
-		});
-
-		it('should update orderBy in URL when clicking sortable column header', async () => {
-			const user = userEvent.setup();
-
-			await waitFor(() => {
-				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
-			});
-
-			// TanStackTable renders a sort button with title attribute
-			const sortButton = screen.getByTitle('Id');
-			await user.click(sortButton);
-
-			await waitFor(() => {
-				const lastOrderBy = onUrlUpdateMock.mock.calls
-					.map((call) => call[0].searchParams.get('orderBy'))
-					.filter(Boolean)
-					.pop();
-
-				expect(lastOrderBy).toBeDefined();
-				const parsed = JSON.parse(lastOrderBy as string);
-				expect(parsed.columnName).toBe('id');
-				expect(parsed.order).toBe('asc');
-			});
-		});
-
-		it('should toggle sort order in URL on subsequent header clicks', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
-			});
-
-			// Track orderBy calls
-			const getOrderByCalls = (): string[] =>
-				onUrlUpdateMock.mock.calls
-					.map((call) => call[0].searchParams.get('orderBy'))
-					.filter(Boolean) as string[];
-
-			// First click - should set ascending
-			const sortButton = screen.getByTitle('Id');
-			expect(sortButton).toHaveAttribute('data-sort', 'none');
-			fireEvent.click(sortButton);
-
-			// Wait for URL to show ascending
-			await waitFor(() => {
-				const calls = getOrderByCalls();
-				expect(calls.length).toBeGreaterThan(0);
-				const parsed = JSON.parse(calls[calls.length - 1]);
-				expect(parsed.order).toBe('asc');
-			});
-
-			// Wait for button to have ascending state
-			await waitFor(() => {
-				expect(screen.getByTitle('Id')).toHaveAttribute('data-sort', 'ascending');
-			});
-
-			const callsAfterFirstClick = getOrderByCalls().length;
-
-			// Verify only one button exists with title 'Id'
-			const allIdButtons = screen.getAllByTitle('Id');
-			expect(allIdButtons).toHaveLength(1);
-
-			// Second click - should set descending
-			const ascendingButton = screen.getByTitle('Id');
-			expect(ascendingButton).toHaveAttribute('data-sort', 'ascending');
-			fireEvent.click(ascendingButton);
-
-			// Wait for URL to show descending (must be a new call)
-			await waitFor(() => {
-				const calls = getOrderByCalls();
-				expect(calls.length).toBeGreaterThan(callsAfterFirstClick);
-				const parsed = JSON.parse(calls[calls.length - 1]);
-				expect(parsed.order).toBe('desc');
-			});
-
-			// Verify DOM updated
-			await waitFor(() => {
-				expect(screen.getByTitle('Id')).toHaveAttribute('data-sort', 'descending');
-			});
-		});
-
-		it('should update page in URL when clicking pagination', async () => {
-			const user = userEvent.setup();
-
-			await waitFor(() => {
-				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
-			});
-
-			// Find pagination navigation and page 2 button
-			const nav = screen.getByRole('navigation');
-			const page2Button = Array.from(nav.querySelectorAll('button')).find(
-				(btn) => btn.textContent?.trim() === '2',
-			);
-			if (!page2Button) {
-				throw new Error('Page 2 button not found in pagination');
-			}
-			await user.click(page2Button);
-
-			await waitFor(() => {
-				const lastPage = onUrlUpdateMock.mock.calls
-					.map((call) => call[0].searchParams.get('page'))
-					.filter(Boolean)
-					.pop();
-
-				expect(lastPage).toBe('2');
-			});
-		});
-
-		it('should open row in new tab when ctrl+click on row', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
-			});
-
-			const firstRow = screen.getByText(`PodId:${itemId}`);
-			// Ctrl+click to open in new tab
-			fireEvent.click(firstRow, { ctrlKey: true });
-
-			await waitFor(() => {
-				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
-				expect(openInNewTabMock).toHaveBeenCalledWith(
-					expect.stringContaining(`selectedItem=PodId%3A${itemId}`),
-				);
-			});
-		});
-
-		it('should open row in new tab when meta+click (cmd on Mac) on row', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
-			});
-
-			const firstRow = screen.getByText(`PodId:${itemId}`);
-			// Meta+click (cmd on Mac) to open in new tab
-			fireEvent.click(firstRow, { metaKey: true });
-
-			await waitFor(() => {
-				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
-				expect(openInNewTabMock).toHaveBeenCalledWith(
-					expect.stringContaining(`selectedItem=PodId%3A${itemId}`),
-				);
-			});
-		});
-	});
-
-	describe('with URL params (orderBy, groupBy, pagination)', () => {
-		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-		const groupByValue = [
-			{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
-		];
-
-		beforeEach(() => {
-			onUrlUpdateMock.mockClear();
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [
-					{ id: 'namespace-default', meta: { 'k8s.namespace.name': 'default' } },
-				],
-				total: 50,
-				error: null,
-			});
-
-			renderComponent<TestItem>({
-				onUrlUpdate: onUrlUpdateMock,
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: {
-					orderBy: JSON.stringify({ columnName: 'cpu', order: 'desc' }),
-					groupBy: JSON.stringify(groupByValue),
-					page: '3',
-				},
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should call fetchListData with orderBy/groupBy/offset/limit from URL', async () => {
-			await waitFor(() => {
-				expect(fetchListDataMock).toHaveBeenCalled();
-			});
-
-			const [filters] = fetchListDataMock.mock.calls[0];
-			expect(filters.orderBy).toStrictEqual({ columnName: 'cpu', order: 'desc' });
-			expect(filters.groupBy).toStrictEqual(groupByValue);
-			expect(filters.offset).toBe(20); // (3 - 1) * 10 = 20
-			expect(filters.limit).toBe(10);
-		});
-
-		it('should render expand icons when groupBy is set', async () => {
-			await waitFor(() => {
-				expect(screen.getByText('namespace-default')).toBeInTheDocument();
-			});
-
-			const expandButtons = screen.getAllByRole('button');
-			expect(expandButtons.length).toBeGreaterThan(0);
-		});
-
-		it('should render data with groupBy params', async () => {
-			await waitFor(() => {
-				expect(screen.getByText('namespace-default')).toBeInTheDocument();
-			});
-
-			// Verify the call was made with correct groupBy
-			const callWithGroupBy = fetchListDataMock.mock.calls.find(
-				(c) => c[0].groupBy && c[0].groupBy.length > 0,
-			);
-			expect(callWithGroupBy).toBeDefined();
-			expect(callWithGroupBy?.[0].groupBy).toStrictEqual(groupByValue);
-		});
-	});
-
-	describe('with empty data', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-				},
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should display empty state when no data is returned', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(/This query had no results/i)).toBeInTheDocument();
-			});
-		});
-
-		it('should still call fetchListData', async () => {
-			await waitFor(() => {
-				expect(fetchListDataMock).toHaveBeenCalled();
-			});
-		});
-	});
-
-	describe('with error response', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: 'Failed to fetch pods',
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should call fetchListData even when error occurs', async () => {
-			await waitFor(() => {
-				expect(fetchListDataMock).toHaveBeenCalled();
-			});
-		});
-
-		it('should display error message when data.error is set', async () => {
-			await waitFor(() => {
-				expect(screen.getByText(/Failed to fetch pods/i)).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('with no metrics data (sentAnyHostMetricsData=false)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: false,
-					isSendingK8SAgentMetrics: false,
-				},
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should display no metrics data message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/No host metrics data received yet/i),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('should display link to documentation', async () => {
-			await waitFor(() => {
-				const link = screen.getByRole('link', { name: /our documentation/i });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute(
-					'href',
-					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
-				);
-			});
-		});
-	});
-
-	describe('with incorrect K8s agent metrics (isSendingK8SAgentMetrics=true)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: true,
-				},
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should display upgrade message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/upgrade to the latest version of SigNoz k8s-infra/i),
-				).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('with end time before retention (endTimeBeforeRetention=true)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [],
-				total: 0,
-				error: null,
-				rawData: {
-					sentAnyHostMetricsData: true,
-					isSendingK8SAgentMetrics: false,
-					endTimeBeforeRetention: true,
-				},
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should display time range before retention message', async () => {
-			await waitFor(() => {
-				expect(
-					screen.getByText(/Queried time range is before earliest K8s metrics/i),
-				).toBeInTheDocument();
-				expect(
-					screen.getByText(/please adjust your end time/i),
-				).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('column visibility based on TanStack columns', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItemWithName>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItemWithName>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [{ id: 'item-1', name: 'Item 1', desc: 'Description 1' }],
-				total: 1,
-				error: null,
-			});
-		});
-
-		it('should show all columns defined in tableColumns', async () => {
-			renderComponent<TestItemWithName>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumnsWithName(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('item-1')).toBeInTheDocument();
-			});
-
-			// All columns should be visible
-			expect(
-				screen.getByRole('columnheader', { name: /id/i }),
-			).toBeInTheDocument();
-			expect(
-				screen.getByRole('columnheader', { name: /name/i }),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('column behavior with groupBy (expanded/collapsed)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItemWithGroup>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItemWithGroup>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [
-					{
-						id: 'item-1',
-						name: 'Item 1',
-						group: 'Group A',
-						meta: { 'k8s.namespace.name': 'default' },
-					},
-				],
-				total: 1,
-				error: null,
-			});
-		});
-
-		it('should show columns when NOT grouped', async () => {
-			renderComponent<TestItemWithGroup>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: {},
-				tableColumns: createTestColumnsWithGroup(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('item-1')).toBeInTheDocument();
-			});
-
-			// Columns should be visible
-			expect(
-				screen.getByRole('columnheader', { name: /id/i }),
-			).toBeInTheDocument();
-		});
-
-		it('should show columns when grouped', async () => {
-			const groupByValue = [
-				{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
-			];
-
-			renderComponent<TestItemWithGroup>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: {
-					groupBy: JSON.stringify(groupByValue),
-				},
-				tableColumns: createTestColumnsWithGroup(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('item-1')).toBeInTheDocument();
-			});
-
-			// Id should be visible
-			expect(
-				screen.getByRole('columnheader', { name: /id/i }),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('column visibility in expanded row (nested table)', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
-		>();
-		const groupByValue = [
-			{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
-		];
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [
-					{ id: 'namespace-default', meta: { 'k8s.namespace.name': 'default' } },
-				],
-				total: 50,
-				error: null,
-			});
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				queryParams: {
-					groupBy: JSON.stringify(groupByValue),
-				},
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-		});
-
-		it('should render table with groupBy params and enable expansion', async () => {
-			await waitFor(() => {
-				expect(screen.getByText('namespace-default')).toBeInTheDocument();
-			});
-
-			// Verify fetch was called with groupBy
-			const callWithGroupBy = fetchListDataMock.mock.calls.find(
-				(c) => c[0].groupBy && c[0].groupBy.length > 0,
-			);
-			expect(callWithGroupBy).toBeDefined();
-		});
-	});
-
-	describe('TanStack table column rendering', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<K8sBaseListProps<TestItemWithName>['fetchListData']>,
-			Parameters<K8sBaseListProps<TestItemWithName>['fetchListData']>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [
-					{ id: 'item-1', name: 'Item 1', desc: 'Description 1' },
-					{ id: 'item-2', name: 'Item 2', desc: 'Description 2' },
-				],
-				total: 2,
-				error: null,
-			});
-		});
-
-		it('should render all defined columns', async () => {
-			renderComponent<TestItemWithName>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumnsWithName(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('item-1')).toBeInTheDocument();
-			});
-
-			// All columns should be visible
-			expect(
-				screen.getByRole('columnheader', { name: /id/i }),
-			).toBeInTheDocument();
-			expect(
-				screen.getByRole('columnheader', { name: /^name$/i }),
-			).toBeInTheDocument();
-		});
-
-		it('should render data in cells correctly', async () => {
-			renderComponent<TestItemWithName>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumnsWithName(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('item-1')).toBeInTheDocument();
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-				expect(screen.getByText('item-2')).toBeInTheDocument();
-				expect(screen.getByText('Item 2')).toBeInTheDocument();
-			});
-		});
-	});
-});

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

@@ -1,26 +0,0 @@
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { OrderBySchemaType } from '../schemas';
-
-export type K8sBaseFilters = {
-	filters: TagFilter;
-	groupBy?: BaseAutocompleteData[];
-	offset?: number;
-	limit?: number;
-	start: number;
-	end: number;
-	orderBy?: OrderBySchemaType;
-};
-
-/**
- * Type for table row data with required key fields.
- * Used when rendering raw data in the table.
- */
-export type K8sTableRowData<T> = T & {
-	key: string;
-	id: string;
-	itemKey: string;
-	/** Metadata about which attributes were used for grouping */
-	groupedByMeta?: Record<string, string>;
-};

frontend/src/container/InfraMonitoringK8s/Base/useInfraMonitoringTableColumnsStore.ts

@@ -1,114 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export interface IEntityColumn {
-	label: string;
-	value: string;
-	id: string;
-	defaultVisibility: boolean;
-	canBeHidden: boolean;
-	behavior: 'hidden-on-expand' | 'hidden-on-collapse' | 'always-visible';
-}
-
-export interface IInfraMonitoringTableColumnsStore {
-	columns: Record<string, IEntityColumn[]>;
-	columnsHidden: Record<string, string[]>;
-	addColumn: (page: string, columnId: string) => void;
-	removeColumn: (page: string, columnId: string) => void;
-	initializePageColumns: (page: string, columns: IEntityColumn[]) => void;
-}
-
-export const useInfraMonitoringTableColumnsStore =
-	create<IInfraMonitoringTableColumnsStore>()(
-		persist(
-			(set, get) => ({
-				columns: {},
-				columnsHidden: {},
-				addColumn: (page, columnId): void => {
-					const state = get();
-					const columnDefinition = state.columns[page]?.find(
-						(c) => c.id === columnId,
-					);
-
-					if (!columnDefinition) {
-						return;
-					}
-
-					if (!columnDefinition.canBeHidden) {
-						return;
-					}
-
-					const columnsHidden = state.columnsHidden[page];
-
-					if (columnsHidden.includes(columnId)) {
-						set({
-							columnsHidden: {
-								...state.columnsHidden,
-								[page]: columnsHidden.filter((id) => id !== columnId),
-							},
-						});
-					}
-				},
-				removeColumn: (page, columnId): void => {
-					const state = get();
-					const columnDefinition = state.columns[page]?.find(
-						(c) => c.id === columnId,
-					);
-
-					if (!columnDefinition) {
-						return;
-					}
-
-					if (!columnDefinition.canBeHidden) {
-						return;
-					}
-
-					const columnsHidden = state.columnsHidden[page];
-
-					if (!columnsHidden.includes(columnId)) {
-						set({
-							columnsHidden: {
-								...state.columnsHidden,
-								[page]: [...columnsHidden, columnId],
-							},
-						});
-					}
-				},
-				initializePageColumns: (page, columns): void => {
-					const state = get();
-
-					set({
-						columns: {
-							...state.columns,
-							[page]: columns,
-						},
-					});
-
-					if (state.columnsHidden[page] === undefined) {
-						set({
-							columnsHidden: {
-								...state.columnsHidden,
-								[page]: columns
-									.filter((c) => c.defaultVisibility === false)
-									.map((c) => c.id),
-							},
-						});
-					}
-				},
-			}),
-			{
-				name: '@signoz/infra-monitoring-columns',
-			},
-		),
-	);
-
-export const useInfraMonitoringTableColumnsForPage = (
-	page: string,
-): [columns: IEntityColumn[], columnsHidden: string[]] => {
-	const state = useInfraMonitoringTableColumnsStore((s) => s.columns);
-	const columnsHidden = useInfraMonitoringTableColumnsStore(
-		(s) => s.columnsHidden,
-	);
-
-	return [state[page] ?? [], columnsHidden[page] ?? []];
-};