feat(pnpm): migrate away from yarn

* fix: make histogramQuantile function work for devenv setup

* fix: make histogramQuantile function work for integration tests

* test: histogram percentile integration tests

* chore: explicitly mention user_scripts_path

* chore: fail tests if download of UDF fails

.devenv/docker/clickhouse/compose.yaml

@@ -1,4 +1,22 @@
 services:
+  init-clickhouse:
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
     image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
@@ -7,6 +25,7 @@ services:
       - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
       - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
+      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
     ports:
       - '127.0.0.1:8123:8123'
       - '127.0.0.1:9000:9000'
@@ -22,7 +41,10 @@ services:
       timeout: 5s
       retries: 3
     depends_on:
-      - zookeeper
+      init-clickhouse:
+        condition: service_completed_successfully
+      zookeeper:
+        condition: service_healthy
     environment:
       - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:

.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml

@@ -44,4 +44,6 @@
         <shard>01</shard>
         <replica>01</replica>
     </macros>
+    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>

.github/workflows/goci.yaml

@@ -77,6 +77,10 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: docker-community
         shell: bash
         run: |
@@ -106,9 +110,13 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: install-frontend
-        run: cd frontend && yarn install
+        run: cd frontend && pnpm install
       - name: generate-api-clients
         run: |
-          cd frontend && yarn generate:api
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)
+          cd frontend && pnpm generate:api
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run pnpm generate:api in frontend/ locally and commit."; exit 1)

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

@@ -25,6 +25,10 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/gor-signoz.yaml

@@ -41,6 +41,10 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
+      - name: setup-pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/jsci.yaml

@@ -78,10 +78,15 @@ jobs:
         with:
           node-version: "22"
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Install frontend dependencies
         working-directory: ./frontend
         run: |
-          yarn install
+          pnpm install
 
       - name: Install uv
         uses: astral-sh/setup-uv@v5
@@ -98,7 +103,7 @@ jobs:
       - name: Generate permissions.type.ts
         working-directory: ./frontend
         run: |
-          yarn generate:permissions-type
+          pnpm generate:permissions-type
 
       - name: Teardown test environment
         if: always()
@@ -108,6 +113,6 @@ jobs:
       - name: Check for changes
         run: |
           if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
+            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: pnpm generate:permissions-type (from the frontend directory)"
             exit 1
           fi

.github/workflows/run-e2e.yaml

@@ -27,6 +27,11 @@ jobs:
         with:
           node-version: lts/*
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Mask secrets and input
         run: |
           echo "::add-mask::${{ secrets.BASE_URL }}"
@@ -37,12 +42,11 @@ jobs:
       - name: Install dependencies
         working-directory: frontend
         run: |
-          npm install -g yarn
-          yarn
+          pnpm install
 
       - name: Install Playwright Browsers
         working-directory: frontend
-        run: yarn playwright install --with-deps
+        run: pnpm playwright install --with-deps
 
       - name: Run Playwright Tests
         working-directory: frontend
@@ -51,7 +55,7 @@ jobs:
           LOGIN_USERNAME="${{ secrets.LOGIN_USERNAME }}" \
           LOGIN_PASSWORD="${{ secrets.LOGIN_PASSWORD }}" \
           USER_ROLE="${{ github.event.inputs.userRole }}" \
-          yarn playwright test
+          pnpm playwright test
 
       - name: Upload Playwright Report
         uses: actions/upload-artifact@v4

.gitpod.yml

@@ -1,19 +1,21 @@
 # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
 # and commit this file to your remote git repository to share the goodness with others.
 
-
 tasks:
   - name: Run Docker Images
     init: |
       cd ./deploy/docker
       sudo docker compose up -d
 
+  - name: Install pnpm
+    init: |
+      npm i -g pnpm
+
   - name: Run Frontend
     init: |
       cd ./frontend
-      yarn install
-    command:
-      yarn dev
+      pnpm install
+    command: pnpm dev
 
 ports:
   - port: 8080

Makefile

@@ -154,7 +154,7 @@ $(GO_BUILD_ARCHS_ENTERPRISE_RACE): go-build-enterprise-race-%: $(TARGET_DIR)
 .PHONY: js-build
 js-build: ## Builds the js frontend
 	@echo ">> building js frontend"
-	@cd $(JS_BUILD_CONTEXT) && CI=1 yarn install && yarn build
+	@cd $(JS_BUILD_CONTEXT) && CI=1 pnpm install && pnpm build
 
 ##############################################################
 # docker commands

cmd/enterprise/Dockerfile.integration

@@ -1,4 +1,4 @@
-FROM golang:1.24-bullseye
+FROM golang:1.25-bookworm
 
 ARG OS="linux"
 ARG TARGETARCH

cmd/enterprise/Dockerfile.with-web.integration

@@ -3,10 +3,11 @@ FROM node:22-bookworm AS build
 WORKDIR /opt/
 COPY ./frontend/ ./
 ENV NODE_OPTIONS=--max-old-space-size=8192
-RUN CI=1 yarn install
-RUN CI=1 yarn build
+RUN CI=1 npm i -g pnpm
+RUN CI=1 pnpm install
+RUN CI=1 pnpm build
 
-FROM golang:1.24-bullseye
+FROM golang:1.25-bookworm
 
 ARG OS="linux"
 ARG TARGETARCH

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/contributing/development.md

@@ -13,13 +13,12 @@ Before diving in, make sure you have these tools installed:
   - Download from [go.dev/dl](https://go.dev/dl/)
   - Check [go.mod](../../go.mod#L3) for the minimum version
 
-
 - **Node** - Powers our frontend
   - Download from [nodejs.org](https://nodejs.org)
   - Check [.nvmrc](../../frontend/.nvmrc) for the version
 
-- **Yarn** - Our frontend package manager
-  - Follow the [installation guide](https://yarnpkg.com/getting-started/install)
+- **Pnpm** - Our frontend package manager
+  - Follow the [installation guide](https://pnpm.io/installation)
 
 - **Docker** - For running Clickhouse and Postgres locally
   - Get it from [docs.docker.com/get-docker](https://docs.docker.com/get-docker/)
@@ -95,20 +94,20 @@ This command:
 
 2. Install dependencies:
    ```bash
-   yarn install
+   pnpm install
    ```
 
 3. Create a `.env` file in this directory:
    ```env
-   FRONTEND_API_ENDPOINT=http://localhost:8080
+   VITE_FRONTEND_API_ENDPOINT=http://localhost:8080
    ```
 
 4. Start the development server:
    ```bash
-   yarn dev
+   pnpm dev
    ```
 
-> 💡 **Tip**: `yarn dev` will automatically rebuild when you make changes to the code
+> 💡 **Tip**: `pnpm dev` will automatically rebuild when you make changes to the code
 
 Now you're all set to start developing! Happy coding! 🎉
 

docs/contributing/onboarding.md

@@ -18,40 +18,40 @@ The configuration file is a JSON array containing data source objects. Each obje
 
 ### Required Keys
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `dataSource` | `string` | Unique identifier for the data source (kebab-case, e.g., `"aws-ec2"`) |
-| `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
-| `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
-| `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| Key          | Type       | Description                                                           |
+| ------------ | ---------- | --------------------------------------------------------------------- |
+| `dataSource` | `string`   | Unique identifier for the data source (kebab-case, e.g., `"aws-ec2"`) |
+| `label`      | `string`   | Display name shown to users (e.g., `"AWS EC2"`)                       |
+| `tags`       | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
+| `module`     | `string`   | Destination module after onboarding completion                        |
+| `imgUrl`     | `string`   | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`)   |
 
 ### Optional Keys
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `link` | `string` | Docs link to redirect to (e.g., `"/docs/aws-monitoring/ec2/"`) |
-| `relatedSearchKeywords` | `string[]` | Array of keywords for search functionality |
-| `question` | `object` | Nested question object for multi-step flows |
-| `internalRedirect` | `boolean` | When `true`, navigates within the app instead of showing docs |
+| Key                     | Type       | Description                                                    |
+| ----------------------- | ---------- | -------------------------------------------------------------- |
+| `link`                  | `string`   | Docs link to redirect to (e.g., `"/docs/aws-monitoring/ec2/"`) |
+| `relatedSearchKeywords` | `string[]` | Array of keywords for search functionality                     |
+| `question`              | `object`   | Nested question object for multi-step flows                    |
+| `internalRedirect`      | `boolean`  | When `true`, navigates within the app instead of showing docs  |
 
 ## Module Values
 
 The `module` key determines where users are redirected after completing onboarding:
 
-| Value | Destination |
-|-------|-------------|
-| `apm` | APM / Traces |
-| `logs` | Logs Explorer |
-| `metrics` | Metrics Explorer |
-| `dashboards` | Dashboards |
-| `infra-monitoring-hosts` | Infrastructure Monitoring - Hosts |
-| `infra-monitoring-k8s` | Infrastructure Monitoring - Kubernetes |
-| `messaging-queues-kafka` | Messaging Queues - Kafka |
-| `messaging-queues-celery` | Messaging Queues - Celery |
-| `integrations` | Integrations page |
-| `home` | Home page |
-| `api-monitoring` | API Monitoring |
+| Value                     | Destination                            |
+| ------------------------- | -------------------------------------- |
+| `apm`                     | APM / Traces                           |
+| `logs`                    | Logs Explorer                          |
+| `metrics`                 | Metrics Explorer                       |
+| `dashboards`              | Dashboards                             |
+| `infra-monitoring-hosts`  | Infrastructure Monitoring - Hosts      |
+| `infra-monitoring-k8s`    | Infrastructure Monitoring - Kubernetes |
+| `messaging-queues-kafka`  | Messaging Queues - Kafka               |
+| `messaging-queues-celery` | Messaging Queues - Celery              |
+| `integrations`            | Integrations page                      |
+| `home`                    | Home page                              |
+| `api-monitoring`          | API Monitoring                         |
 
 ## Question Object Structure
 
@@ -91,14 +91,14 @@ The `question` object enables multi-step selection flows:
 
 ### Question Keys
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `desc` | `string` | Question text displayed to the user |
-| `type` | `string` | Currently only `"select"` is supported |
-| `helpText` | `string` | (Optional) Additional help text below the question |
-| `helpLink` | `string` | (Optional) Docs link for the help section |
+| Key            | Type     | Description                                                 |
+| -------------- | -------- | ----------------------------------------------------------- |
+| `desc`         | `string` | Question text displayed to the user                         |
+| `type`         | `string` | Currently only `"select"` is supported                      |
+| `helpText`     | `string` | (Optional) Additional help text below the question          |
+| `helpLink`     | `string` | (Optional) Docs link for the help section                   |
 | `helpLinkText` | `string` | (Optional) Text for the help link (default: "Learn more →") |
-| `options` | `array` | Array of option objects |
+| `options`      | `array`  | Array of option objects                                     |
 
 ## Option Object Structure
 
@@ -273,6 +273,7 @@ Options can be simple (direct link) or nested (with another question):
 - Place logo files in `public/Logos/`
 - Use SVG format
 - Reference as `"/Logos/your-logo.svg"`
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 
@@ -290,7 +291,7 @@ Options can be simple (direct link) or nested (with another question):
 
 1. Add your data source object to the JSON array
 2. Ensure the logo exists in `public/Logos/`
-3. Test the flow locally with `yarn dev`
+3. Test the flow locally with `pnpm dev`
 4. Validation:
    - Navigate to the [onboarding page](http://localhost:3301/get-started-with-signoz-cloud) on your local machine
    - Data source appears in the list

frontend/.eslintignore

@@ -4,4 +4,5 @@ build
 i18-generate-hash.js
 src/parser/TraceOperatorParser/**
 
-orval.config.ts
+orval.config.ts
+pnpm-lock.yaml

frontend/.eslintrc.cjs

@@ -41,7 +41,7 @@ module.exports = {
 		'jsx-a11y', // Accessibility rules
 		'import', // Import/export linting
 		'sonarjs', // Code quality/complexity
-		// TODO: Uncomment after running: yarn add -D eslint-plugin-spellcheck
+		// TODO: Uncomment after running: pnpm add -D eslint-plugin-spellcheck
 		// 'spellcheck', // Correct spellings
 	],
 	settings: {

frontend/.husky/commit-msg

@@ -1,7 +1,7 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd frontend && yarn run commitlint --edit $1
+cd frontend && pnpm run commitlint --edit $1
 
 branch="$(git rev-parse --abbrev-ref HEAD)"
 

frontend/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd frontend && yarn lint-staged
+cd frontend && pnpm lint-staged

frontend/.prettierignore

@@ -12,4 +12,6 @@ public/
 # Ignore all files in parser folder:
 src/parser/**
 
-src/TraceOperator/parser/**
+src/TraceOperator/parser/**
+
+pnpm-lock.yaml

frontend/README.md

@@ -28,8 +28,8 @@ Follow the steps below
 1. ```git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend```
 1. change baseURL to ```<test environment URL>``` in file ```src/constants/env.ts```
 
-1. ```yarn install```
-1. ```yarn dev```
+1. ```pnpm install```
+1. ```pnpm dev```
 
 ```Note: Please ping us in #contributing channel in our slack community and we will DM you with <test environment URL>```
 
@@ -41,7 +41,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `yarn start`
+### `pnpm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3301](http://localhost:3301) to view it in the browser.
@@ -49,12 +49,12 @@ Open [http://localhost:3301](http://localhost:3301) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `pnpm test`
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `pnpm build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -64,7 +64,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### `pnpm eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
@@ -100,6 +100,6 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
 
-### `yarn build` fails to minify
+### `pnpm build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

frontend/example.env

@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
 VITE_PYLON_APP_ID="pylon-app-id"
 VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"

frontend/jest.config.ts

@@ -39,7 +39,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -6,6 +6,7 @@
  * Adds custom matchers from the react testing library to all tests
  */
 import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 import 'jest-styled-components';
 
 import { server } from './src/mocks-server/server';

frontend/orval.config.ts

@@ -80,7 +80,7 @@ export default defineConfig({
 				header: (info: { title: string; version: string }): string[] => [
 					`! Do not edit manually`,
 					`* The file has been auto-generated using Orval for SigNoz`,
-					`* regenerate with 'yarn generate:api'`,
+					`* regenerate with 'pnpm generate:api'`,
 					...(info.title ? [info.title] : []),
 					...(info.version ? [`OpenAPI spec version: ${info.version}`] : []),
 				],

frontend/package.json

@@ -33,6 +33,7 @@
     "@ant-design/icons": "4.8.0",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/lang-javascript": "6.2.3",
+    "@codemirror/state": "6.5.4",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
@@ -40,7 +41,7 @@
     "@grafana/data": "^11.2.3",
     "@mdx-js/loader": "2.3.0",
     "@mdx-js/react": "2.3.0",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "~4.3.1",
     "@playwright/test": "1.55.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
@@ -97,7 +98,7 @@
     "color-alpha": "2.0.0",
     "cross-env": "^7.0.3",
     "crypto-js": "4.2.0",
-    "d3-hierarchy": "3.1.2",
+    "d3-hierarchy": "1.1.9",
     "dayjs": "^1.10.7",
     "dompurify": "3.2.4",
     "dotenv": "8.2.0",
@@ -122,6 +123,7 @@
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
+    "rc-select": "~14.10.0",
     "rc-tween-one": "3.0.6",
     "react": "18.2.0",
     "react-addons-update": "15.6.3",
@@ -182,18 +184,22 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.21.4",
+    "@codemirror/view": "~6.5.1",
     "@commitlint/cli": "^20.4.2",
     "@commitlint/config-conventional": "^20.4.2",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.0",
+    "@jest/types": "^30.3.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "4.2.2",
+    "@types/d3-hierarchy": "1.1.11",
     "@types/dompurify": "^2.4.0",
     "@types/event-source-polyfill": "^1.0.0",
     "@types/fontfaceobserver": "2.1.0",
+    "@types/history": "^4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/mini-css-extract-plugin": "^2.5.1",
@@ -212,6 +218,7 @@
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -227,6 +234,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-sonarjs": "^0.12.0",
+    "glob": "^13.0.6",
     "husky": "^7.0.4",
     "imagemin": "^8.0.1",
     "imagemin-svgo": "^10.0.1",
@@ -248,6 +256,7 @@
     "sass": "1.97.3",
     "sharp": "0.34.5",
     "svgo": "4.0.0",
+    "tailwindcss": "3",
     "ts-api-utils": "2.4.0",
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
@@ -281,6 +290,32 @@
     "brace-expansion": "^2.0.2",
     "on-headers": "^1.1.0",
     "tmp": "0.2.4",
-    "vite": "npm:rolldown-vite@7.3.1"
+    "vite": "npm:rolldown-vite@7.3.1",
+    "@codemirror/view": "~6.5.1",
+    "@types/d3-hierarchy": "1.1.11"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "18.0.26",
+      "@types/react-dom": "18.0.10",
+      "debug": "4.3.4",
+      "semver": "7.5.4",
+      "xml2js": "0.5.0",
+      "phin": "^3.7.1",
+      "body-parser": "1.20.3",
+      "http-proxy-middleware": "3.0.5",
+      "cross-spawn": "7.0.5",
+      "cookie": "^0.7.1",
+      "serialize-javascript": "6.0.2",
+      "prismjs": "1.30.0",
+      "got": "11.8.5",
+      "form-data": "4.0.4",
+      "brace-expansion": "^2.0.2",
+      "on-headers": "^1.1.0",
+      "tmp": "0.2.4",
+      "vite": "npm:rolldown-vite@7.3.1",
+      "@codemirror/view": "~6.5.1",
+      "@types/d3-hierarchy": "1.1.11"
+    }
   }
-}
+}

frontend/playwright.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
+import { fileURLToPath } from 'url';
 
 // Read from ".env" file.
-dotenv.config({ path: path.resolve(__dirname, '.env') });
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.resolve(dirname, '.env') });
 
 /**
  * Read environment variables from file.

frontend/public/Logos/deno.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>

frontend/public/Logos/haystack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>

frontend/public/Logos/huggingface.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" fill="none"><path fill="#ffd21e" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5"/><path fill="#ff9d0b" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0m-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0"/><path fill="#3a3b45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32Zm-23.55 0c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#ff323d" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3a3b45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.6 8.6 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97" clip-rule="evenodd"/><path fill="#ff9d0b" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-46.5 0a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-6.69 11c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7 7 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.3 44.3 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48m0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85"/><path fill="#ffd21e" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9-3.24 5.08.68 8.01c3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12"/><path fill="#ff9d0b" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7 7 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.3 44.3 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48m0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.5 1.5 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85"/><path fill="#ffd21e" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44-1.58 4.17-6.8 7.33c-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12"/></svg>

frontend/public/Logos/nvidia-dcgm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#76b900" viewBox="0 0 24 24"><title>NVIDIA</title><path d="M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936"/></svg>

frontend/public/Logos/ollama.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>

frontend/public/Logos/openrouter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>

frontend/public/Logos/prometheus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.94 -1.44 438.62 432.87"><path fill="#e75225" d="M215.926 7.068c115.684.024 210.638 93.784 210.493 207.844-.148 115.793-94.713 208.252-212.912 208.169C97.95 423 4.52 329.143 4.601 213.221 4.68 99.867 99.833 7.044 215.926 7.068m-63.947 73.001c2.652 12.978.076 25.082-3.846 36.988-2.716 8.244-6.47 16.183-8.711 24.539-3.694 13.769-7.885 27.619-9.422 41.701-2.21 20.25 5.795 38.086 19.493 55.822L86.527 225.94c.11 1.978-.007 2.727.21 3.361 5.968 17.43 16.471 32.115 28.243 45.957 1.246 1.465 4.082 2.217 6.182 2.221 62.782.115 125.565.109 188.347.028 1.948-.003 4.546-.369 5.741-1.618 13.456-14.063 23.746-30.079 30.179-50.257l-66.658 12.976c4.397-8.567 9.417-16.1 12.302-24.377 9.869-28.315 5.779-55.69-8.387-81.509-11.368-20.72-21.854-41.349-16.183-66.32-12.005 11.786-16.615 26.79-19.541 42.253-2.882 15.23-4.58 30.684-6.811 46.136-.317-.467-.728-.811-.792-1.212-.258-1.621-.499-3.255-.587-4.893-1.355-25.31-6.328-49.696-16.823-72.987-6.178-13.71-12.99-27.727-6.622-44.081-4.31 2.259-8.205 4.505-10.997 7.711-8.333 9.569-11.779 21.062-12.666 33.645-.757 10.75-1.796 21.552-3.801 32.123-2.107 11.109-5.448 21.998-12.956 32.209-3.033-21.81-3.37-43.38-22.928-57.237m161.877 216.523H116.942v34.007h196.914zm-157.871 51.575c-.163 28.317 28.851 49.414 64.709 47.883 29.716-1.269 56.016-24.51 53.755-47.883z"/></svg>

frontend/public/Logos/statsd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 103.53"><path d="M5.47 0H117.4c3.01 0 5.47 2.46 5.47 5.47v92.58c0 3.01-2.46 5.47-5.47 5.47H5.47c-3.01 0-5.47-2.46-5.47-5.47V5.47C0 2.46 2.46 0 5.47 0m26.37 38.55 17.79 18.42 2.14 2.13-2.12 2.16-17.97 19.05-5.07-5 15.85-16.15L26.81 43.6zM94.1 79.41H54.69v-6.84H94.1zM38.19 9.83c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78S35 9.83 38.19 9.83m-19.24 0c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78 2.58-5.78 5.78-5.78M7.49 5.41H115.4c1.15 0 2.09.94 2.09 2.09v18.32H5.4V7.5c0-1.15.94-2.09 2.09-2.09" style="fill-rule:evenodd;clip-rule:evenodd;fill:#1668dc"/></svg>

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

@@ -15,6 +15,5 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"members": "Members"
 }

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

@@ -50,8 +50,5 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"METER": "SigNoz | Meter"
 }

frontend/public/locales/en/routes.json

@@ -15,6 +15,5 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"members": "Members"
 }

frontend/public/locales/en/titles.json

@@ -75,6 +75,5 @@
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"MEMBERS_SETTINGS": "SigNoz | Members"
 }

frontend/scripts/generate-permissions-type.cjs

@@ -180,7 +180,7 @@ async function main() {
 			PERMISSIONS_TYPE_FILE,
 		);
 		log('Linting generated file...');
-		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
+		execSync(`cd frontend && pnpm eslint --fix ${relativePath}`, {
 			cwd: rootDir,
 			stdio: 'inherit',
 		});

frontend/scripts/post-types-generation.sh

@@ -25,7 +25,7 @@ echo "\n✅ Prettier formatting successful"
 
 # Fix linting issues
 echo "\n\n---\nRunning eslint...\n"
-if ! yarn lint --fix --quiet src/api/generated; then
+if ! pnpm lint --fix --quiet src/api/generated; then
   echo "ESLint check failed! Please fix linting errors before proceeding."
   exit 1
 fi

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -236,13 +236,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			const redirectUrl = oldNewRoutesMapping[pathname];
-
-			const newLocation = {
-				...location,
-				pathname: redirectUrl,
-			};
-			history.replace(newLocation);
+			// this will be handled by the redirect component below
 			return;
 		}
 
@@ -296,6 +290,19 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
+	if (isOldRoute) {
+		const redirectUrl = oldNewRoutesMapping[pathname];
+		return (
+			<Redirect
+				to={{
+					pathname: redirectUrl,
+					search: location.search,
+					hash: location.hash,
+				}}
+			/>
+		);
+	}
+
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 export interface AuthtypesAttributeMappingDTO {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import type {

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -1,142 +0,0 @@
-.create-sa-modal {
-	max-width: 530px;
-	background: var(--popover);
-	border: 1px solid var(--secondary);
-	border-radius: 4px;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
-
-	[data-slot='dialog-header'] {
-		padding: var(--padding-4);
-		border-bottom: 1px solid var(--secondary);
-		flex-shrink: 0;
-		background: transparent;
-		margin: 0;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: var(--label-base-400-font-size);
-		font-weight: var(--label-base-400-font-weight);
-		line-height: var(--label-base-400-line-height);
-		letter-spacing: -0.065px;
-		color: var(--bg-base-white);
-		margin: 0;
-	}
-
-	[data-slot='dialog-description'] {
-		padding: 0;
-
-		.create-sa-modal__content {
-			padding: var(--padding-4);
-		}
-	}
-}
-
-.create-sa-form {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	.ant-form-item {
-		margin-bottom: var(--spacing-4);
-	}
-
-	.ant-form-item-label > label {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		color: var(--l1-foreground);
-		background-color: var(--l2-background);
-		border-color: var(--border);
-		font-size: var(--paragraph-base-400-font-size);
-		border-radius: 2px;
-		width: 100%;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-
-		&:focus {
-			border-color: var(--primary);
-			box-shadow: none;
-		}
-	}
-
-	&__select {
-		width: 100%;
-
-		.ant-select-selector {
-			min-height: 32px;
-			border-radius: 2px;
-			background-color: var(--l2-background) !important;
-			border: 1px solid var(--border) !important;
-			padding: 0 var(--padding-2) !important;
-
-			.ant-select-selection-placeholder {
-				color: var(--l3-foreground);
-				opacity: 0.4;
-				font-size: var(--paragraph-base-400-font-size);
-				letter-spacing: -0.07px;
-				line-height: 32px;
-			}
-
-			.ant-select-selection-item {
-				font-size: var(--paragraph-base-400-font-size);
-				letter-spacing: -0.07px;
-				color: var(--bg-base-white);
-			}
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&.ant-select-focused .ant-select-selector,
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--primary);
-		}
-	}
-
-	&__helper {
-		font-size: var(--paragraph-small-400-font-size);
-		color: var(--l3-foreground);
-		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
-		line-height: var(--paragraph-small-400-line-height);
-	}
-}
-
-.create-sa-modal__footer {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 0 var(--padding-4);
-	height: 56px;
-	min-height: 56px;
-	border-top: 1px solid var(--secondary);
-	gap: var(--spacing-4);
-	flex-shrink: 0;
-}
-
-.lightMode {
-	.create-sa-modal {
-		[data-slot='dialog-title'] {
-			color: var(--bg-base-black);
-		}
-	}
-
-	.create-sa-form {
-		&__select {
-			.ant-select-selector {
-				.ant-select-selection-item {
-					color: var(--bg-base-black);
-				}
-			}
-		}
-	}
-}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,185 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { Form, Input } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import RolesSelect, { useRoles } from 'components/RolesSelect';
-
-import './CreateServiceAccountModal.styles.scss';
-
-interface CreateServiceAccountModalProps {
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-interface FormValues {
-	name: string;
-	email: string;
-	roles: string[];
-}
-
-function CreateServiceAccountModal({
-	open,
-	onClose,
-	onSuccess,
-}: CreateServiceAccountModalProps): JSX.Element {
-	const [form] = Form.useForm<FormValues>();
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [submittable, setSubmittable] = useState(false);
-
-	const values = Form.useWatch([], form);
-
-	useEffect(() => {
-		form
-			.validateFields({ validateOnly: true })
-			.then(() => setSubmittable(true))
-			.catch(() => setSubmittable(false));
-	}, [values, form]);
-
-	const { mutateAsync: createServiceAccount } = useCreateServiceAccount();
-	const {
-		roles,
-		isLoading: rolesLoading,
-		isError: rolesError,
-		error: rolesErrorObj,
-		refetch: refetchRoles,
-	} = useRoles();
-
-	const handleClose = useCallback((): void => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			setIsSubmitting(true);
-			await createServiceAccount({
-				data: {
-					name: values.name.trim(),
-					email: values.email.trim(),
-					roles: values.roles,
-				},
-			});
-			toast.success('Service account created successfully', { richColors: true });
-			form.resetFields();
-			onSuccess();
-			onClose();
-		} catch (err: unknown) {
-			if (err && typeof err === 'object' && 'errorFields' in err) {
-				return;
-			}
-			const errMessage =
-				convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'An error occurred';
-			toast.error(`Failed to create service account: ${errMessage}`, {
-				richColors: true,
-			});
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [form, createServiceAccount, onSuccess, onClose]);
-
-	return (
-		<DialogWrapper
-			title="New Service Account"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			showCloseButton
-			width="narrow"
-			className="create-sa-modal"
-			disableOutsideClick={false}
-		>
-			<div className="create-sa-modal__content">
-				<Form form={form} layout="vertical" className="create-sa-form">
-					<Form.Item
-						name="name"
-						label="Name"
-						rules={[{ required: true, message: 'Name is required' }]}
-						className="create-sa-form__item"
-					>
-						<Input placeholder="Enter a name" className="create-sa-form__input" />
-					</Form.Item>
-
-					<Form.Item
-						name="email"
-						label="Email Address"
-						rules={[
-							{ required: true, message: 'Email Address is required' },
-							{ type: 'email', message: 'Please enter a valid email address' },
-						]}
-						className="create-sa-form__item"
-					>
-						<Input
-							type="email"
-							placeholder="email@example.com"
-							className="create-sa-form__input"
-						/>
-					</Form.Item>
-					<p className="create-sa-form__helper">
-						Used only for notifications about this service account. It is not used for
-						authentication.
-					</p>
-
-					<Form.Item
-						name="roles"
-						label="Roles"
-						rules={[{ required: true, message: 'At least one role is required' }]}
-						className="create-sa-form__item"
-					>
-						<RolesSelect
-							mode="multiple"
-							roles={roles}
-							loading={rolesLoading}
-							isError={rolesError}
-							error={rolesErrorObj}
-							onRefetch={refetchRoles}
-							placeholder="Select roles"
-							className="create-sa-form__select"
-							getPopupContainer={(triggerNode): HTMLElement =>
-								(triggerNode?.closest('.create-sa-modal') as HTMLElement) ||
-								document.body
-							}
-						/>
-					</Form.Item>
-				</Form>
-			</div>
-
-			<DialogFooter className="create-sa-modal__footer">
-				<Button
-					type="button"
-					variant="solid"
-					color="secondary"
-					size="sm"
-					onClick={handleClose}
-				>
-					<X size={12} />
-					Cancel
-				</Button>
-
-				<Button
-					variant="solid"
-					color="primary"
-					size="sm"
-					onClick={handleSubmit}
-					disabled={isSubmitting || !submittable}
-				>
-					{isSubmitting ? 'Creating...' : 'Create Service Account'}
-				</Button>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default CreateServiceAccountModal;

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,6 +1,31 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--foreground);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,6 +16,15 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
+		minTime: 0,
+		maxTime: Date.now(),
+	})),
+}));
+
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -17,9 +19,11 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
+import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -66,6 +70,8 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
+	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
+	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -88,6 +94,7 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
+	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -116,6 +123,14 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
+	const durationMs = (maxTime - minTime) / 1e6;
+	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
+
+	const handleZoomOut = useZoomOut({
+		isDisabled: zoomOutDisabled,
+		urlParamsToDelete: [QueryParams.activeLogId],
+	});
+
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -631,6 +646,23 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
+			{!showLiveLogs && !isModalTimeSelection && (
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
+				maxTime: NOW_MS * 1e6,
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: () => string;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: (): string => 'relativeTime=45m',
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string; offset: string } } => ({
+		timezone: { value: 'UTC', offset: 'UTC' },
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const now = Date.now();
+const defaultProps = {
+	onSelect: jest.fn(),
+	onError: jest.fn(),
+	selectedValue: '15m',
+	selectedTime: '15m',
+	onValidCustomDateChange: jest.fn(),
+	open: false,
+	setOpen: jest.fn(),
+	items: [
+		{ value: '15m', label: 'Last 15 minutes' },
+		{ value: '1h', label: 'Last 1 hour' },
+	],
+	minTime: (now - 15 * 60 * 1000) * 1e6,
+	maxTime: now * 1e6,
+};
+
+describe('CustomTimePicker - zoom out button', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('should render zoom out button when showLiveLogs is false', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when showLiveLogs is true', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when isModalTimeSelection is true', () => {
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				showLiveLogs={false}
+				isModalTimeSelection={true}
+			/>,
+		);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should call handleZoomOut when zoom out button is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockDispatch).toHaveBeenCalled();
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+	});
+
+	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+		expect(mockDispatch).toHaveBeenCalled();
+	});
+
+	it('should delete activeLogId when zoom out is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+
+	it('should disable zoom button when time range is >= 1 month', () => {
+		const now = Date.now();
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				minTime={(now - 31 * MS_PER_DAY) * 1e6}
+				maxTime={now * 1e6}
+				showLiveLogs={false}
+			/>,
+		);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		expect(zoomOutBtn).toBeDisabled();
+	});
+});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -243,60 +243,56 @@ function InviteMembersModal({
 						<div className="table-header-cell role-header">Roles</div>
 						<div className="table-header-cell action-header" />
 					</div>
-					<form onSubmit={(e): void => e.preventDefault()}>
-						<div className="invite-members-modal__container">
-							{rows.map(
-								(row): JSX.Element => (
-									<div key={row.id} className="team-member-row">
-										<div className="team-member-cell email-cell">
-											<Input
-												type="email"
-												placeholder="john@signoz.io"
-												value={row.email}
-												onChange={(e): void => updateEmail(row.id, e.target.value)}
-												className="team-member-email-input"
-												name={`invite-email-${row.id}`}
-												autoComplete="email"
-											/>
-											{emailValidity[row.id] === false && row.email.trim() !== '' && (
-												<span className="email-error-message">Invalid email address</span>
-											)}
-										</div>
-										<div className="team-member-cell role-cell">
-											<Select
-												value={row.role || undefined}
-												onChange={(role): void => updateRole(row.id, role as ROLES)}
-												className="team-member-role-select"
-												placeholder="Select roles"
-												suffixIcon={<ChevronDown size={14} />}
-												getPopupContainer={(triggerNode): HTMLElement =>
-													(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-													document.body
-												}
-											>
-												<Select.Option value="VIEWER">Viewer</Select.Option>
-												<Select.Option value="EDITOR">Editor</Select.Option>
-												<Select.Option value="ADMIN">Admin</Select.Option>
-											</Select>
-										</div>
-										<div className="team-member-cell action-cell">
-											{rows.length > 1 && (
-												<Button
-													variant="ghost"
-													color="destructive"
-													className="remove-team-member-button"
-													onClick={(): void => removeRow(row.id)}
-													aria-label="Remove row"
-												>
-													<Trash2 size={12} />
-												</Button>
-											)}
-										</div>
+					<div className="invite-members-modal__container">
+						{rows.map(
+							(row): JSX.Element => (
+								<div key={row.id} className="team-member-row">
+									<div className="team-member-cell email-cell">
+										<Input
+											type="email"
+											placeholder="john@signoz.io"
+											value={row.email}
+											onChange={(e): void => updateEmail(row.id, e.target.value)}
+											className="team-member-email-input"
+										/>
+										{emailValidity[row.id] === false && row.email.trim() !== '' && (
+											<span className="email-error-message">Invalid email address</span>
+										)}
 									</div>
-								),
-							)}
-						</div>
-					</form>
+									<div className="team-member-cell role-cell">
+										<Select
+											value={row.role || undefined}
+											onChange={(role): void => updateRole(row.id, role as ROLES)}
+											className="team-member-role-select"
+											placeholder="Select roles"
+											suffixIcon={<ChevronDown size={14} />}
+											getPopupContainer={(triggerNode): HTMLElement =>
+												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
+												document.body
+											}
+										>
+											<Select.Option value="VIEWER">Viewer</Select.Option>
+											<Select.Option value="EDITOR">Editor</Select.Option>
+											<Select.Option value="ADMIN">Admin</Select.Option>
+										</Select>
+									</div>
+									<div className="team-member-cell action-cell">
+										{rows.length > 1 && (
+											<Button
+												variant="ghost"
+												color="destructive"
+												className="remove-team-member-button"
+												onClick={(): void => removeRow(row.id)}
+												aria-label="Remove row"
+											>
+												<Trash2 size={12} />
+											</Button>
+										)}
+									</div>
+								</div>
+							),
+						)}
+					</div>
 				</div>
 
 				{(hasInvalidEmails || hasInvalidRoles) && (

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx

@@ -361,6 +361,58 @@ describe('CheckboxFilter - User Flows', () => {
 		expect(filtersForServiceName).toHaveLength(0);
 	});
 
+	it('should match filter when query uses resource. prefix (resource.service.name matches service.name)', async () => {
+		// Filter config uses unprefixed key (service.name)
+		// Query has filter with resource. prefix (resource.service.name)
+		// Checkbox should recognize the match and show checked state
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: 'resource.service.name',
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: [OTEL_DEMO],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData: jest.fn(),
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: false });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Filter should auto-open because it has active filters (key match via prefix stripping)
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+
+		// otel-demo should be checked (filter uses resource.service.name IN [otel-demo])
+		// Checked items are sorted to the top, so otel-demo is first
+		const checkboxes = screen.getAllByRole('checkbox');
+		expect(checkboxes[0]).toBeChecked();
+		expect(screen.getByText(OTEL_DEMO)).toBeInTheDocument();
+	});
+
 	it('should extend an existing IN filter when checking an additional value', async () => {
 		const redirectWithQueryBuilderData = jest.fn();
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues'
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -26,6 +26,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
+import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
@@ -84,7 +85,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			currentQuery.builder.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.some((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -189,7 +190,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
 		]?.filters?.items.find((item) =>
-			isEqual(item.key?.key, filter.attributeKey.key),
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
 		);
 
 		if (filterSync) {
@@ -236,7 +237,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			(currentQuery?.builder?.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.filter((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			)?.length || 0) > 1,
 
 		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
@@ -280,7 +281,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 						items:
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
-										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
+										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
 								  ) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
@@ -313,7 +314,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					: 'Only'
 				: 'Only';
 			query.filters.items = query.filters.items.filter(
-				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
+				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
 			);
 
 			if (query.filter?.expression) {
@@ -335,13 +336,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		} else if (query?.filters?.items) {
 			if (
 				query.filters?.items?.some((item) =>
-					isEqual(item.key?.key, filter.attributeKey.key),
+					isKeyMatch(item.key?.key, filter.attributeKey.key),
 				)
 			) {
 				// if there is already a running filter for the current attribute key then
 				// we split the cases by which particular operator is present right now!
 				const currentFilter = query.filters?.items?.find((q) =>
-					isEqual(q.key?.key, filter.attributeKey.key),
+					isKeyMatch(q.key?.key, filter.attributeKey.key),
 				);
 				if (currentFilter) {
 					const runningOperator = currentFilter?.op;
@@ -356,7 +357,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -368,7 +369,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -385,11 +386,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -398,7 +399,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 								} else {
 									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -414,7 +415,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -426,7 +427,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -441,7 +442,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									};
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 										if (query.filter?.expression) {
 											query.filter.expression = removeKeysFromExpression(
@@ -451,7 +452,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										}
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -469,7 +470,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										);
 									}
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -482,14 +483,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
@@ -501,14 +502,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * These prefixes are added to attribute keys based on their context.
+ */
+export const FIELD_CONTEXT_PREFIXES = [
+	'metric',
+	'log',
+	'span',
+	'trace',
+	'resource',
+	'scope',
+	'attribute',
+	'event',
+	'body',
+];
+
+/**
+ * Removes the field context prefix from a key to get the base key name.
+ * Example: 'resource.service.name' -> 'service.name'
+ * Example: 'attribute.http.method' -> 'http.method'
+ */
+export function getKeyWithoutPrefix(key: string | undefined): string {
+	if (!key) {
+		return '';
+	}
+	const prefixPattern = new RegExp(
+		`^(${FIELD_CONTEXT_PREFIXES.join('|')})\\.`,
+		'i',
+	);
+	return key.replace(prefixPattern, '').trim();
+}
+
+/**
+ * Compares two keys by their base name (without prefix).
+ * This ensures that 'service.name' matches 'resource.service.name'
+ */
+export function isKeyMatch(
+	itemKey: string | undefined,
+	filterKey: string | undefined,
+): boolean {
+	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
+}

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -1,25 +0,0 @@
-.roles-select-error {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 6px;
-	padding: 4px 8px;
-	color: var(--bg-cherry-500);
-	font-size: 12px;
-
-	&__msg {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
-
-	&__retry-btn {
-		display: flex;
-		align-items: center;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 2px;
-		color: var(--bg-cherry-500);
-	}
-}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,171 +0,0 @@
-import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { Checkbox, Select } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useListRoles } from 'api/generated/services/role';
-import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import APIError from 'types/api/error';
-
-import './RolesSelect.styles.scss';
-
-export interface RoleOption {
-	label: string;
-	value: string;
-}
-
-export function useRoles(): {
-	roles: RoletypesRoleDTO[];
-	isLoading: boolean;
-	isError: boolean;
-	error: APIError | undefined;
-	refetch: () => void;
-} {
-	const { data, isLoading, isError, error, refetch } = useListRoles();
-	return {
-		roles: data?.data ?? [],
-		isLoading,
-		isError,
-		error: convertToApiError(error),
-		refetch,
-	};
-}
-
-export function getRoleOptions(roles: RoletypesRoleDTO[]): RoleOption[] {
-	return roles.map((role) => ({
-		label: role.name ?? '',
-		value: role.name ?? '',
-	}));
-}
-
-function ErrorContent({
-	error,
-	onRefetch,
-}: {
-	error?: APIError;
-	onRefetch?: () => void;
-}): JSX.Element {
-	const errorMessage = error?.message || 'Failed to load roles';
-
-	return (
-		<div className="roles-select-error">
-			<span className="roles-select-error__msg">
-				<CircleAlert size={12} />
-				{errorMessage}
-			</span>
-			{onRefetch && (
-				<button
-					type="button"
-					onClick={(e): void => {
-						e.stopPropagation();
-						onRefetch();
-					}}
-					className="roles-select-error__retry-btn"
-					title="Retry"
-				>
-					<RefreshCw size={12} />
-				</button>
-			)}
-		</div>
-	);
-}
-
-interface BaseProps {
-	id?: string;
-	placeholder?: string;
-	className?: string;
-	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: RoletypesRoleDTO[];
-	loading?: boolean;
-	isError?: boolean;
-	error?: APIError;
-	onRefetch?: () => void;
-}
-
-interface SingleProps extends BaseProps {
-	mode?: 'single';
-	value?: string;
-	onChange?: (role: string) => void;
-}
-
-interface MultipleProps extends BaseProps {
-	mode: 'multiple';
-	value?: string[];
-	onChange?: (roles: string[]) => void;
-}
-
-export type RolesSelectProps = SingleProps | MultipleProps;
-
-function RolesSelect(props: RolesSelectProps): JSX.Element {
-	const externalRoles = props.roles;
-
-	const {
-		data,
-		isLoading: internalLoading,
-		isError: internalError,
-		error: internalErrorObj,
-		refetch: internalRefetch,
-	} = useListRoles({
-		query: { enabled: externalRoles === undefined },
-	});
-
-	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles);
-
-	const {
-		mode,
-		id,
-		placeholder = 'Select role',
-		className,
-		getPopupContainer,
-		loading = internalLoading,
-		isError = internalError,
-		error = convertToApiError(internalErrorObj),
-		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
-	} = props;
-
-	const notFoundContent = isError ? (
-		<ErrorContent error={error} onRefetch={onRefetch} />
-	) : undefined;
-
-	if (mode === 'multiple') {
-		const { value = [], onChange } = props as MultipleProps;
-		return (
-			<Select
-				id={id}
-				mode="multiple"
-				value={value}
-				onChange={onChange}
-				placeholder={placeholder}
-				className={className}
-				loading={loading}
-				notFoundContent={notFoundContent}
-				options={options}
-				optionRender={(option): JSX.Element => (
-					<Checkbox
-						checked={value.includes(option.value as string)}
-						style={{ pointerEvents: 'none' }}
-					>
-						{option.label}
-					</Checkbox>
-				)}
-				getPopupContainer={getPopupContainer}
-			/>
-		);
-	}
-
-	const { value, onChange } = props as SingleProps;
-	return (
-		<Select
-			id={id}
-			value={value}
-			onChange={onChange}
-			placeholder={placeholder}
-			className={className}
-			loading={loading}
-			notFoundContent={notFoundContent}
-			options={options}
-			getPopupContainer={getPopupContainer}
-		/>
-	);
-}
-
-export default RolesSelect;

frontend/src/components/RolesSelect/index.ts

@@ -1,2 +0,0 @@
-export type { RoleOption, RolesSelectProps } from './RolesSelect';
-export { default, getRoleOptions, useRoles } from './RolesSelect';

frontend/src/components/ServiceAccountDrawer/AddKeyModal.styles.scss

@@ -1,179 +0,0 @@
-.add-key-modal {
-	[data-slot='dialog-description'] {
-		padding: 0;
-	}
-
-	&__form {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__expiry-toggle {
-		width: 60%;
-		display: flex;
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-		padding: 0;
-		gap: 0;
-
-		[data-slot='toggle-group'] {
-			width: 100%;
-			display: flex;
-		}
-
-		&-btn {
-			flex: 1;
-			height: 32px;
-			border-radius: 0;
-			font-size: var(--label-small-400-font-size);
-			font-weight: var(--label-small-400-font-weight);
-			line-height: var(--label-small-400-line-height);
-			justify-content: center;
-			background: transparent;
-			border: none;
-			border-right: 1px solid var(--border);
-			color: var(--foreground);
-
-			&:last-child {
-				border-right: none;
-			}
-
-			&[data-state='on'] {
-				background: var(--l2-background);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__datepicker {
-		width: 100%;
-		height: 32px;
-
-		.ant-picker {
-			background: var(--l2-background);
-			border-color: var(--border);
-			border-radius: 2px;
-			width: 100%;
-			height: 32px;
-
-			input {
-				color: var(--l1-foreground);
-				font-size: var(--font-size-sm);
-			}
-
-			.ant-picker-suffix {
-				color: var(--foreground);
-			}
-		}
-
-		.add-key-modal-datepicker-popup {
-			border-radius: 4px;
-			border: 1px solid var(--secondary);
-			background: var(--popover);
-			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__key-display {
-		display: flex;
-		align-items: center;
-		height: 32px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-	}
-
-	&__key-text {
-		flex: 1;
-		min-width: 0;
-		padding: 0 var(--padding-2);
-		font-size: var(--font-size-sm);
-		color: var(--l1-foreground);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		font-family: monospace;
-	}
-
-	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
-		border-left: 1px solid var(--border);
-		min-width: 40px;
-	}
-
-	&__expiry-meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__expiry-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		padding: var(--padding-4);
-		border-top: 1px solid var(--secondary);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__learn-more {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-1);
-		color: var(--primary);
-		font-size: var(--font-size-sm);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}

frontend/src/components/ServiceAccountDrawer/AddKeyModal.tsx

@@ -1,267 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { DialogWrapper } from '@signozhq/dialog';
-import { Check, Copy } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { DatePicker } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useCreateServiceAccountKey } from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import type { Dayjs } from 'dayjs';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { disabledDate } from './utils';
-
-import './AddKeyModal.styles.scss';
-
-interface AddKeyModalProps {
-	open: boolean;
-	accountId: string;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-type Phase = 'form' | 'created';
-type ExpiryMode = 'none' | 'date';
-
-function AddKeyModal({
-	open,
-	accountId,
-	onClose,
-	onSuccess,
-}: AddKeyModalProps): JSX.Element {
-	const [phase, setPhase] = useState<Phase>('form');
-	const [keyName, setKeyName] = useState('');
-	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
-	const [expiryDate, setExpiryDate] = useState<Dayjs | null>(null);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [
-		createdKey,
-		setCreatedKey,
-	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
-	const [hasCopied, setHasCopied] = useState(false);
-
-	useEffect(() => {
-		if (open) {
-			setPhase('form');
-			setKeyName('');
-			setExpiryMode('none');
-			setExpiryDate(null);
-			setIsSubmitting(false);
-			setCreatedKey(null);
-			setHasCopied(false);
-		}
-	}, [open]);
-
-	const { mutateAsync: createKey } = useCreateServiceAccountKey();
-
-	const handleCreate = useCallback(async (): Promise<void> => {
-		if (!keyName.trim()) {
-			return;
-		}
-		setIsSubmitting(true);
-		try {
-			const expiresAt =
-				expiryMode === 'date' && expiryDate ? expiryDate.unix() : 0;
-			const response = await createKey({
-				pathParams: { id: accountId },
-				data: { name: keyName.trim(), expires_at: expiresAt },
-			});
-			const keyData = response?.data;
-			if (keyData) {
-				setCreatedKey(keyData);
-				setPhase('created');
-			}
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to create key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [keyName, expiryMode, expiryDate, accountId, createKey]);
-
-	const handleCopy = useCallback(async (): Promise<void> => {
-		if (!createdKey?.key) {
-			return;
-		}
-		try {
-			await navigator.clipboard.writeText(createdKey.key);
-			setHasCopied(true);
-			setTimeout(() => setHasCopied(false), 2000);
-			toast.success('Key copied to clipboard', { richColors: true });
-		} catch {
-			toast.error('Failed to copy key', { richColors: true });
-		}
-	}, [createdKey]);
-
-	const handleClose = useCallback((): void => {
-		if (phase === 'created') {
-			onSuccess();
-		}
-		onClose();
-	}, [phase, onSuccess, onClose]);
-
-	const expiryLabel = (): string => {
-		if (expiryMode === 'none' || !expiryDate) {
-			return 'Never';
-		}
-		try {
-			return expiryDate.format('MMM D, YYYY');
-		} catch {
-			return 'Never';
-		}
-	};
-
-	const title = phase === 'form' ? 'Add a New Key' : 'Key Created Successfully';
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			title={title}
-			width="base"
-			className="add-key-modal"
-			showCloseButton
-			disableOutsideClick={false}
-		>
-			{phase === 'form' && (
-				<>
-					<div className="add-key-modal__form">
-						<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"
-								value={keyName}
-								onChange={(e): void => setKeyName(e.target.value)}
-								placeholder="Enter key name e.g.: Service Owner"
-								className="add-key-modal__input"
-							/>
-						</div>
-
-						<div className="add-key-modal__field">
-							<span className="add-key-modal__label">Expiration</span>
-							<ToggleGroup
-								type="single"
-								value={expiryMode}
-								onValueChange={(val): void => {
-									if (val) {
-										setExpiryMode(val as ExpiryMode);
-										if (val === 'none') {
-											setExpiryDate(null);
-										}
-									}
-								}}
-								className="add-key-modal__expiry-toggle"
-							>
-								<ToggleGroupItem
-									value="none"
-									className="add-key-modal__expiry-toggle-btn"
-								>
-									No Expiration
-								</ToggleGroupItem>
-								<ToggleGroupItem
-									value="date"
-									className="add-key-modal__expiry-toggle-btn"
-								>
-									Set Expiration Date
-								</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						{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">
-									<DatePicker
-										id="expiry-date"
-										value={expiryDate}
-										onChange={(date): void => setExpiryDate(date)}
-										popupClassName="add-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
-									/>
-								</div>
-							</div>
-						)}
-					</div>
-
-					<div className="add-key-modal__footer">
-						<div className="add-key-modal__footer-right">
-							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
-								disabled={!keyName.trim() || isSubmitting}
-								onClick={handleCreate}
-							>
-								{isSubmitting ? 'Creating...' : 'Create Key'}
-							</Button>
-						</div>
-					</div>
-				</>
-			)}
-
-			{phase === 'created' && createdKey && (
-				<>
-					<div className="add-key-modal__form">
-						<div className="add-key-modal__field">
-							<span className="add-key-modal__label">Key</span>
-							<div className="add-key-modal__key-display">
-								<span className="add-key-modal__key-text">{createdKey.key}</span>
-								<Button
-									variant="outlined"
-									color="secondary"
-									size="sm"
-									onClick={handleCopy}
-									className="add-key-modal__copy-btn"
-								>
-									{hasCopied ? <Check size={12} /> : <Copy size={12} />}
-								</Button>
-							</div>
-						</div>
-
-						<div className="add-key-modal__expiry-meta">
-							<span className="add-key-modal__expiry-label">Expiration</span>
-							<Badge color="vanilla">{expiryLabel()}</Badge>
-						</div>
-
-						<Callout
-							type="info"
-							showIcon
-							message="Store the key securely. This is the only time it will be displayed."
-						/>
-					</div>
-				</>
-			)}
-		</DialogWrapper>
-	);
-}
-
-export default AddKeyModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal.styles.scss

@@ -1,188 +0,0 @@
-.edit-key-modal {
-	[data-slot='dialog-description'] {
-		padding: 0;
-	}
-
-	&__form {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: 13px;
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__key-display {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		cursor: not-allowed;
-		opacity: 0.8;
-	}
-
-	&__key-text {
-		font-size: 13px;
-		font-family: monospace;
-		color: var(--foreground);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-		letter-spacing: 2px;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__expiry-toggle {
-		width: 60%;
-		display: flex;
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-		padding: 0;
-		gap: 0;
-
-		[data-slot='toggle-group'] {
-			width: 100%;
-			display: flex;
-		}
-
-		&-btn {
-			flex: 1;
-			height: 32px;
-			border-radius: 0;
-			font-size: var(--label-small-400-font-size);
-			font-weight: var(--label-small-400-font-weight);
-			line-height: var(--label-small-400-line-height);
-			justify-content: center;
-			background: transparent;
-			border: none;
-			border-right: 1px solid var(--border);
-			color: var(--foreground);
-			white-space: nowrap;
-
-			&:last-child {
-				border-right: none;
-			}
-
-			&[data-state='on'] {
-				background: var(--l2-background);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__datepicker {
-		width: 100%;
-		height: 32px;
-
-		.ant-picker {
-			background: var(--l2-background);
-			border-color: var(--border);
-			border-radius: 2px;
-			width: 100%;
-			height: 32px;
-
-			input {
-				color: var(--l1-foreground);
-				font-size: 13px;
-			}
-
-			.ant-picker-suffix {
-				color: var(--foreground);
-			}
-		}
-
-		.edit-key-modal-datepicker-popup {
-			border-radius: 4px;
-			border: 1px solid var(--secondary);
-			background: var(--popover);
-			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: var(--padding-4);
-		border-top: 1px solid var(--secondary);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__footer-danger {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		color: var(--destructive);
-		font-size: var(--label-small-400-font-size);
-		font-weight: var(--label-small-400-font-weight);
-		transition: opacity 0.15s ease;
-
-		&:hover {
-			opacity: 0.8;
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-}

frontend/src/components/ServiceAccountDrawer/EditKeyModal.tsx

@@ -1,301 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { DatePicker } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	useRevokeServiceAccountKey,
-	useUpdateServiceAccountKey,
-} from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesFactorAPIKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { disabledDate, formatLastUsed } from './utils';
-
-import './EditKeyModal.styles.scss';
-
-interface EditKeyModalProps {
-	open: boolean;
-	accountId: string;
-	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-type ExpiryMode = 'none' | 'date';
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function EditKeyModal({
-	open,
-	accountId,
-	keyItem,
-	onClose,
-	onSuccess,
-}: EditKeyModalProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const [localName, setLocalName] = useState('');
-	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
-	const [localDate, setLocalDate] = useState<Dayjs | null>(null);
-	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
-	const [isSaving, setIsSaving] = useState(false);
-	const [isRevoking, setIsRevoking] = useState(false);
-
-	useEffect(() => {
-		if (keyItem) {
-			setLocalName(keyItem.name ?? '');
-			if (keyItem.expires_at === 0) {
-				setExpiryMode('none');
-				setLocalDate(null);
-			} else {
-				setExpiryMode('date');
-				setLocalDate(dayjs.unix(keyItem.expires_at));
-			}
-		}
-	}, [keyItem]);
-
-	const originalExpiresAt = keyItem?.expires_at ?? 0;
-	const currentExpiresAt =
-		expiryMode === 'none' || !localDate ? 0 : localDate.unix();
-	const isDirty =
-		keyItem !== null &&
-		(localName !== (keyItem.name ?? '') ||
-			currentExpiresAt !== originalExpiresAt);
-
-	const { mutateAsync: updateKey } = useUpdateServiceAccountKey();
-	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!keyItem || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			await updateKey({
-				pathParams: { id: accountId, fid: keyItem.id },
-				data: { name: localName, expires_at: currentExpiresAt },
-			});
-			toast.success('Key updated successfully', { richColors: true });
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to update key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		keyItem,
-		isDirty,
-		localName,
-		currentExpiresAt,
-		accountId,
-		updateKey,
-		onSuccess,
-	]);
-
-	const handleRevoke = useCallback(async (): Promise<void> => {
-		if (!keyItem) {
-			return;
-		}
-		setIsRevoking(true);
-		try {
-			await revokeKey({
-				pathParams: { id: accountId, fid: keyItem.id },
-			});
-			toast.success('Key revoked successfully', { richColors: true });
-			setIsRevokeConfirmOpen(false);
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to revoke key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsRevoking(false);
-		}
-	}, [keyItem, accountId, revokeKey, onSuccess]);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					if (isRevokeConfirmOpen) {
-						setIsRevokeConfirmOpen(false);
-					} else {
-						onClose();
-					}
-				}
-			}}
-			title={
-				isRevokeConfirmOpen
-					? `Revoke ${keyItem?.name ?? 'key'}?`
-					: 'Edit Key Details'
-			}
-			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
-			className={
-				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
-			}
-			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={false}
-		>
-			{isRevokeConfirmOpen ? (
-				<>
-					<p className="delete-dialog__body">
-						Revoking this key will permanently invalidate it. Any systems using this
-						key will lose access immediately.
-					</p>
-					<DialogFooter className="delete-dialog__footer">
-						<Button
-							variant="solid"
-							color="secondary"
-							size="sm"
-							onClick={(): void => setIsRevokeConfirmOpen(false)}
-						>
-							<X size={12} />
-							Cancel
-						</Button>
-						<Button
-							variant="solid"
-							color="destructive"
-							size="sm"
-							disabled={isRevoking}
-							onClick={handleRevoke}
-						>
-							<Trash2 size={12} />
-							{isRevoking ? 'Revoking...' : 'Revoke Key'}
-						</Button>
-					</DialogFooter>
-				</>
-			) : (
-				<>
-					<div className="edit-key-modal__form">
-						<div className="edit-key-modal__field">
-							<label className="edit-key-modal__label" htmlFor="edit-key-name">
-								Name
-							</label>
-							<Input
-								id="edit-key-name"
-								value={localName}
-								onChange={(e): void => setLocalName(e.target.value)}
-								className="edit-key-modal__input"
-								placeholder="Enter key name"
-							/>
-						</div>
-
-						<div className="edit-key-modal__field">
-							<label className="edit-key-modal__label" htmlFor="edit-key-display">
-								Key
-							</label>
-							<div id="edit-key-display" className="edit-key-modal__key-display">
-								<span className="edit-key-modal__key-text">********************</span>
-								<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
-							</div>
-						</div>
-
-						<div className="edit-key-modal__field">
-							<span className="edit-key-modal__label">Expiration</span>
-							<ToggleGroup
-								type="single"
-								value={expiryMode}
-								onValueChange={(val): void => {
-									if (val) {
-										setExpiryMode(val as ExpiryMode);
-										if (val === 'none') {
-											setLocalDate(null);
-										}
-									}
-								}}
-								className="edit-key-modal__expiry-toggle"
-							>
-								<ToggleGroupItem
-									value="none"
-									className="edit-key-modal__expiry-toggle-btn"
-								>
-									No Expiration
-								</ToggleGroupItem>
-								<ToggleGroupItem
-									value="date"
-									className="edit-key-modal__expiry-toggle-btn"
-								>
-									Set Expiration Date
-								</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						{expiryMode === 'date' && (
-							<div className="edit-key-modal__field">
-								<label className="edit-key-modal__label" htmlFor="edit-key-datepicker">
-									Expiration Date
-								</label>
-								<div className="edit-key-modal__datepicker">
-									<DatePicker
-										value={localDate}
-										id="edit-key-datepicker"
-										onChange={(date): void => setLocalDate(date)}
-										popupClassName="edit-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
-									/>
-								</div>
-							</div>
-						)}
-
-						<div className="edit-key-modal__meta">
-							<span className="edit-key-modal__meta-label">Last Used</span>
-							<Badge color="vanilla">
-								{formatLastUsed(
-									keyItem?.last_used ?? null,
-									formatTimezoneAdjustedTimestamp,
-								)}
-							</Badge>
-						</div>
-					</div>
-
-					<div className="edit-key-modal__footer">
-						<Button
-							type="button"
-							className="edit-key-modal__footer-danger"
-							onClick={(): void => setIsRevokeConfirmOpen(true)}
-						>
-							<Trash2 size={12} />
-							Revoke Key
-						</Button>
-						<div className="edit-key-modal__footer-right">
-							<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
-								<X size={12} />
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
-								disabled={!isDirty || isSaving}
-								onClick={handleSave}
-							>
-								{isSaving ? 'Saving...' : 'Save Changes'}
-							</Button>
-						</div>
-					</div>
-				</>
-			)}
-		</DialogWrapper>
-	);
-}
-
-export default EditKeyModal;

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,243 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { Skeleton, Tooltip } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useRevokeServiceAccountKey } from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesFactorAPIKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-
-import EditKeyModal from './EditKeyModal';
-import { formatLastUsed } from './utils';
-
-interface KeysTabProps {
-	accountId: string;
-	keys: ServiceaccounttypesFactorAPIKeyDTO[];
-	isLoading: boolean;
-	isDisabled?: boolean;
-	currentPage: number;
-	pageSize: number;
-	onRefetch: () => void;
-	onAddKeyClick: () => void;
-}
-
-function formatExpiry(expiresAt: number): JSX.Element {
-	if (expiresAt === 0) {
-		return <span className="keys-tab__expiry--never">Never</span>;
-	}
-	const expiryDate = dayjs.unix(expiresAt);
-	if (expiryDate.isBefore(dayjs())) {
-		return <span className="keys-tab__expiry--expired">Expired</span>;
-	}
-	return <span>{expiryDate.format('MMM D, YYYY')}</span>;
-}
-
-function KeysTab({
-	accountId,
-	keys,
-	isLoading,
-	isDisabled = false,
-	currentPage,
-	pageSize,
-	onRefetch,
-	onAddKeyClick,
-}: KeysTabProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const [
-		editKey,
-		setEditKey,
-	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
-	const [
-		revokeTarget,
-		setRevokeTarget,
-	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
-	const [isRevoking, setIsRevoking] = useState(false);
-
-	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
-
-	const handleRevoke = useCallback(async (): Promise<void> => {
-		if (!revokeTarget) {
-			return;
-		}
-		setIsRevoking(true);
-		try {
-			await revokeKey({
-				pathParams: { id: accountId, fid: revokeTarget.id },
-			});
-			toast.success('Key revoked successfully', { richColors: true });
-			setRevokeTarget(null);
-			onRefetch();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to revoke key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsRevoking(false);
-		}
-	}, [revokeTarget, revokeKey, accountId, onRefetch]);
-
-	const handleKeySuccess = useCallback((): void => {
-		setEditKey(null);
-		onRefetch();
-	}, [onRefetch]);
-
-	const handleFormatLastUsed = useCallback(
-		(lastUsed: Date | null | undefined): string =>
-			formatLastUsed(lastUsed, formatTimezoneAdjustedTimestamp),
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const paginatedKeys = useMemo(() => {
-		const start = (currentPage - 1) * pageSize;
-		return keys.slice(start, start + pageSize);
-	}, [keys, currentPage, pageSize]);
-
-	if (isLoading) {
-		return (
-			<div className="keys-tab__loading">
-				<Skeleton active paragraph={{ rows: 4 }} />
-			</div>
-		);
-	}
-
-	if (keys.length === 0) {
-		return (
-			<div className="keys-tab__empty">
-				<span className="keys-tab__empty-emoji" role="img" aria-label="searching">
-					🧐
-				</span>
-				<p className="keys-tab__empty-text">No keys. Start by creating one.</p>
-				<Button
-					type="button"
-					className="keys-tab__learn-more"
-					onClick={onAddKeyClick}
-					disabled={isDisabled}
-				>
-					+ Add your first key
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			<div className="keys-tab__table-wrap">
-				<div className="keys-tab__table-header">
-					<span className="keys-tab__col-name">Name</span>
-					<span className="keys-tab__col-expiry">Expiry</span>
-					<span className="keys-tab__col-last-used">Last Used</span>
-					<span className="keys-tab__col-action" />
-				</div>
-
-				<div className="keys-tab__scroll">
-					{paginatedKeys.map((keyItem, idx) => (
-						<div
-							key={keyItem.id}
-							className={`keys-tab__table-row${
-								idx % 2 === 0 ? ' keys-tab__table-row--alt' : ''
-							}${isDisabled ? ' keys-tab__table-row--disabled' : ''}`}
-							onClick={(): void => {
-								if (!isDisabled) {
-									setEditKey(keyItem);
-								}
-							}}
-							role="button"
-							tabIndex={0}
-							onKeyDown={(e): void => {
-								if (e.key === 'Enter' && !isDisabled) {
-									setEditKey(keyItem);
-								}
-							}}
-						>
-							<span className="keys-tab__col-name keys-tab__name-text">
-								{keyItem.name ?? '—'}
-							</span>
-							<span className="keys-tab__col-expiry">
-								{formatExpiry(keyItem.expires_at)}
-							</span>
-							<span className="keys-tab__col-last-used">
-								{handleFormatLastUsed(keyItem?.last_used ?? null)}
-							</span>
-							<span className="keys-tab__col-action">
-								<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
-									<Button
-										variant="ghost"
-										size="xs"
-										color="destructive"
-										disabled={isDisabled}
-										onClick={(e): void => {
-											e.stopPropagation();
-											setRevokeTarget(keyItem);
-										}}
-										className="keys-tab__revoke-btn"
-									>
-										<X size={12} />
-									</Button>
-								</Tooltip>
-							</span>
-						</div>
-					))}
-				</div>
-			</div>
-
-			<DialogWrapper
-				open={revokeTarget !== null}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setRevokeTarget(null);
-					}
-				}}
-				title={`Revoke ${revokeTarget?.name ?? 'key'}?`}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">
-					Revoking this key will permanently invalidate it. Any systems using this
-					key will lose access immediately.
-				</p>
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setRevokeTarget(null)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isRevoking}
-						onClick={handleRevoke}
-					>
-						<Trash2 size={12} />
-						{isRevoking ? 'Revoking...' : 'Revoke Key'}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-
-			<EditKeyModal
-				open={editKey !== null}
-				accountId={accountId}
-				keyItem={editKey}
-				onClose={(): void => setEditKey(null)}
-				onSuccess={handleKeySuccess}
-			/>
-		</>
-	);
-}
-
-export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,154 +0,0 @@
-import { useCallback } from 'react';
-import { Badge } from '@signozhq/badge';
-import { LockKeyhole } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import RolesSelect from 'components/RolesSelect';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { useTimezone } from 'providers/Timezone';
-import APIError from 'types/api/error';
-
-interface OverviewTabProps {
-	account: ServiceAccountRow;
-	localName: string;
-	onNameChange: (v: string) => void;
-	localRoles: string[];
-	onRolesChange: (v: string[]) => void;
-	isDisabled: boolean;
-	availableRoles: RoletypesRoleDTO[];
-	rolesLoading?: boolean;
-	rolesError?: boolean;
-	rolesErrorObj?: APIError | undefined;
-	onRefetchRoles?: () => void;
-}
-
-function OverviewTab({
-	account,
-	localName,
-	onNameChange,
-	localRoles,
-	onRolesChange,
-	isDisabled,
-	availableRoles,
-	rolesLoading,
-	rolesError,
-	rolesErrorObj,
-	onRefetchRoles,
-}: OverviewTabProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	return (
-		<>
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-name">
-					Name
-				</label>
-				{isDisabled ? (
-					<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>
-				) : (
-					<Input
-						id="sa-name"
-						value={localName}
-						onChange={(e): void => onNameChange(e.target.value)}
-						className="sa-drawer__input"
-						placeholder="Enter name"
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-email">
-					Email Address
-				</label>
-				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
-					<span className="sa-drawer__input-text">{account.email || '—'}</span>
-					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
-				</div>
-			</div>
-
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-roles">
-					Roles
-				</label>
-				{isDisabled ? (
-					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
-						<div className="sa-drawer__disabled-roles">
-							{localRoles.length > 0 ? (
-								localRoles.map((r) => (
-									<Badge key={r} color="vanilla">
-										{r}
-									</Badge>
-								))
-							) : (
-								<span className="sa-drawer__input-text">—</span>
-							)}
-						</div>
-						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
-					</div>
-				) : (
-					<RolesSelect
-						id="sa-roles"
-						mode="multiple"
-						roles={availableRoles}
-						loading={rolesLoading}
-						isError={rolesError}
-						error={rolesErrorObj}
-						onRefetch={onRefetchRoles}
-						value={localRoles}
-						onChange={onRolesChange}
-						placeholder="Select roles"
-						className="sa-drawer__role-select"
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.sa-drawer') as HTMLElement) || document.body
-						}
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__meta">
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Status</span>
-					{account.status?.toUpperCase() === 'ACTIVE' ? (
-						<Badge color="forest" variant="outline">
-							ACTIVE
-						</Badge>
-					) : (
-						<Badge color="vanilla" variant="outline" className="sa-status-badge">
-							DISABLED
-						</Badge>
-					)}
-				</div>
-
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Created At</span>
-					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
-				</div>
-
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Updated At</span>
-					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -1,548 +0,0 @@
-.sa-drawer {
-	[data-slot='drawer-close'] + div {
-		border-left: 1px solid var(--l1-border);
-		padding-left: var(--padding-4);
-		margin-left: var(--margin-2);
-	}
-
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
-	&__tabs {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
-		flex-shrink: 0;
-	}
-
-	&__tab-group {
-		[data-slot='toggle-group'] {
-			height: 32px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			gap: 0;
-		}
-
-		[data-slot='toggle-group-item'] {
-			height: 32px;
-			border-radius: 0;
-			border-left: 1px solid var(--l1-border);
-			background: transparent;
-			color: var(--l2-foreground);
-			font-size: 12px;
-			font-weight: 400;
-			font-family: Inter, sans-serif;
-			padding: 0 var(--padding-7);
-			gap: var(--spacing-3);
-			box-shadow: none;
-
-			&:first-child {
-				border-left: none;
-				border-radius: 2px 0 0 2px;
-			}
-
-			&:last-child {
-				border-radius: 0 2px 2px 0;
-			}
-
-			&:hover {
-				background: rgba(171, 189, 255, 0.04);
-				color: var(--l1-foreground);
-			}
-
-			&[data-state='on'] {
-				background: var(--l1-border);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__tab {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-normal);
-	}
-
-	&__tab-count {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		padding: 0 6px;
-		border-radius: 50px;
-		background: var(--secondary);
-		font-size: 11px;
-		font-weight: var(--font-weight-normal);
-		line-height: 20px;
-		color: var(--foreground);
-		letter-spacing: -0.06px;
-	}
-
-	&__body {
-		flex: 1;
-		overflow-y: auto;
-		padding: var(--padding-5) var(--padding-4);
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-	}
-
-	&__footer {
-		height: 56px;
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--secondary);
-		background: var(--card);
-	}
-
-	&__keys-pagination {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		width: 100%;
-		padding: var(--padding-2) 0;
-
-		.ant-pagination-total-text {
-			margin-right: auto;
-		}
-	}
-
-	&__pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		font-weight: var(--font-weight-normal);
-	}
-
-	&__pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-
-	&__footer-btn {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-6);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		cursor: default;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__input-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.8;
-		}
-	}
-
-	&__input-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__role-select {
-		width: 100%;
-		min-height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 2px var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			min-height: 32px;
-		}
-
-		.ant-select-selection-overflow {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 2px;
-			padding: 2px 0;
-		}
-
-		.ant-select-selection-overflow-item {
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			display: flex;
-			align-items: center;
-			height: 22px;
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			background: var(--l3-background);
-			border: 1px solid var(--border);
-			border-radius: 2px;
-			padding: 0 4px 0 6px;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-			margin: 0;
-		}
-
-		.ant-select-selection-item-remove {
-			display: flex;
-			align-items: center;
-			color: var(--foreground);
-			margin-left: 2px;
-		}
-
-		.ant-select-selection-placeholder {
-			font-size: var(--font-size-sm);
-			color: var(--l3-foreground);
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
-	&__disabled-roles {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--spacing-2);
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		margin-top: var(--margin-1);
-	}
-
-	&__meta-item {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-}
-
-.keys-tab {
-	&__loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: var(--padding-8) var(--padding-4);
-	}
-
-	&__empty {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: var(--padding-8) var(--padding-4);
-		gap: var(--spacing-4);
-		text-align: center;
-		height: 80%;
-	}
-
-	&__empty-emoji {
-		font-size: 32px;
-	}
-
-	&__empty-text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-	}
-
-	&__learn-more {
-		background: transparent;
-		border: none;
-		color: var(--primary);
-		font-size: var(--font-size-sm);
-		cursor: pointer;
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	&__table-wrap {
-		border: 1px solid var(--l1-border);
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	&__table-header {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		height: 38px;
-		padding: 0 var(--padding-4);
-		border-bottom: 1px solid var(--l1-border);
-		background: transparent;
-	}
-
-	&__col-name {
-		flex: 1;
-		min-width: 0;
-		font-size: 11px;
-		font-weight: var(--font-weight-medium);
-		color: var(--l2-foreground);
-		letter-spacing: 0.44px;
-		text-transform: uppercase;
-	}
-
-	&__col-expiry {
-		width: 100px;
-		text-align: right;
-		font-size: 11px;
-		font-weight: var(--font-weight-medium);
-		color: var(--l2-foreground);
-		letter-spacing: 0.44px;
-		text-transform: uppercase;
-		flex-shrink: 0;
-	}
-
-	&__col-last-used {
-		width: 180px;
-		text-align: right;
-		font-size: 11px;
-		font-weight: var(--font-weight-medium);
-		color: var(--l2-foreground);
-		letter-spacing: 0.44px;
-		text-transform: uppercase;
-		flex-shrink: 0;
-	}
-
-	&__col-action {
-		width: 40px;
-		display: flex;
-		justify-content: flex-end;
-		flex-shrink: 0;
-	}
-
-	&__table-row {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		height: 38px;
-		padding: 0 var(--padding-4);
-		border-bottom: 1px solid var(--l1-border);
-		cursor: pointer;
-
-		&:last-of-type {
-			border-bottom: none;
-		}
-
-		&:not(.keys-tab__table-row--disabled):hover {
-			background: rgba(171, 189, 255, 0.06);
-		}
-
-		&--alt {
-			background: rgba(171, 189, 255, 0.02);
-
-			&:not(.keys-tab__table-row--disabled):hover {
-				background: rgba(171, 189, 255, 0.06);
-			}
-		}
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.6;
-
-			&:hover {
-				background: transparent;
-			}
-		}
-
-		.keys-tab__col-expiry,
-		.keys-tab__col-last-used {
-			font-size: var(--font-size-sm);
-			font-weight: var(--font-weight-normal);
-			color: var(--l2-foreground);
-			letter-spacing: -0.07px;
-			text-transform: none;
-		}
-	}
-
-	&__name-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--l2-foreground);
-		letter-spacing: -0.07px;
-		text-transform: none;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__expiry--never {
-		color: var(--l2-foreground);
-	}
-
-	&__expiry--expired {
-		color: var(--l3-foreground);
-	}
-
-	&__revoke-btn {
-		width: 32px;
-		height: 32px;
-		padding: 0;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	&__scroll {
-		overflow-y: auto;
-		max-height: calc(100% - 20px);
-
-		scrollbar-width: thin;
-		scrollbar-color: var(--l2-border) transparent;
-
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--l1-border);
-			border-radius: 4px;
-		}
-	}
-
-	&__pagination {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		padding: var(--padding-2) var(--padding-4);
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-// Activate/disable confirm dialogs
-.sa-activate-dialog,
-.sa-disable-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-title'] {
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
-		}
-	}
-
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-4);
-		margin-top: var(--margin-6);
-	}
-}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,447 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	Key,
-	LayoutGrid,
-	Plus,
-	PowerOff,
-	Trash2,
-	X,
-} from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Pagination } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	useListServiceAccountKeys,
-	useUpdateServiceAccount,
-	useUpdateServiceAccountStatus,
-} from 'api/generated/services/serviceaccount';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import { useRoles } from 'components/RolesSelect';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-
-import AddKeyModal from './AddKeyModal';
-import KeysTab from './KeysTab';
-import OverviewTab from './OverviewTab';
-
-import './ServiceAccountDrawer.styles.scss';
-
-export interface ServiceAccountDrawerProps {
-	account: ServiceAccountRow | null;
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-const PAGE_SIZE = 15;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function ServiceAccountDrawer({
-	account,
-	open,
-	onClose,
-	onSuccess,
-}: ServiceAccountDrawerProps): JSX.Element {
-	const [activeTab, setActiveTab] = useState<'overview' | 'keys'>('overview');
-	const [isActivateConfirmOpen, setIsActivateConfirmOpen] = useState(false);
-	const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
-	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDisabling, setIsDisabling] = useState(false);
-	const [isActivating, setIsActivating] = useState(false);
-	const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
-	const [keysPage, setKeysPage] = useState(1);
-
-	useEffect(() => {
-		if (account) {
-			setLocalName(account.name ?? '');
-			setLocalRoles(account.roles ?? []);
-			setActiveTab('overview');
-			setKeysPage(1);
-		}
-	}, [account]);
-
-	const isDisabled = account?.status?.toUpperCase() !== 'ACTIVE';
-
-	const isDirty =
-		account !== null &&
-		(localName !== (account.name ?? '') ||
-			JSON.stringify(localRoles) !== JSON.stringify(account.roles ?? []));
-
-	const {
-		roles: availableRoles,
-		isLoading: rolesLoading,
-		isError: rolesError,
-		error: rolesErrorObj,
-		refetch: refetchRoles,
-	} = useRoles();
-
-	const {
-		data: keysData,
-		isLoading: keysLoading,
-		refetch: refetchKeys,
-	} = useListServiceAccountKeys(
-		{ id: account?.id ?? '' },
-		{ query: { enabled: !!account?.id } },
-	);
-	const keys = keysData?.data ?? [];
-
-	useEffect(() => {
-		if (keysLoading) {
-			return;
-		}
-		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
-		if (keysPage > maxPage) {
-			setKeysPage(maxPage);
-		}
-	}, [keysLoading, keys.length, keysPage]);
-
-	const { mutateAsync: updateAccount } = useUpdateServiceAccount();
-	const { mutateAsync: updateStatus } = useUpdateServiceAccountStatus();
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!account || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			await updateAccount({
-				pathParams: { id: account.id },
-				data: { name: localName, email: account.email, roles: localRoles },
-			});
-			toast.success('Service account updated successfully', { richColors: true });
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to update service account';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSaving(false);
-		}
-	}, [account, isDirty, localName, localRoles, updateAccount, onSuccess]);
-
-	const handleDisable = useCallback(async (): Promise<void> => {
-		if (!account) {
-			return;
-		}
-		setIsDisabling(true);
-		try {
-			await updateStatus({
-				pathParams: { id: account.id },
-				data: { status: 'DISABLED' },
-			});
-			toast.success('Service account disabled', { richColors: true });
-			setIsDisableConfirmOpen(false);
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to disable service account';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsDisabling(false);
-		}
-	}, [account, updateStatus, onSuccess]);
-
-	const handleActivate = useCallback(async (): Promise<void> => {
-		if (!account) {
-			return;
-		}
-		setIsActivating(true);
-		try {
-			await updateStatus({
-				pathParams: { id: account.id },
-				data: { status: 'ACTIVE' },
-			});
-			toast.success('Service account activated', { richColors: true });
-			setIsActivateConfirmOpen(false);
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to activate service account';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsActivating(false);
-		}
-	}, [account, updateStatus, onSuccess]);
-
-	const handleClose = useCallback((): void => {
-		setIsActivateConfirmOpen(false);
-		setIsDisableConfirmOpen(false);
-		setIsAddKeyOpen(false);
-		onClose();
-	}, [onClose]);
-
-	const handleKeySuccess = useCallback((): void => {
-		setIsAddKeyOpen(false);
-		refetchKeys();
-	}, [refetchKeys]);
-
-	const drawerContent = (
-		<div className="sa-drawer__layout">
-			<div className="sa-drawer__tabs">
-				<ToggleGroup
-					type="single"
-					value={activeTab}
-					onValueChange={(val): void => {
-						if (val) {
-							setActiveTab(val as 'overview' | 'keys');
-						}
-					}}
-					className="sa-drawer__tab-group"
-				>
-					<ToggleGroupItem value="overview" className="sa-drawer__tab">
-						<LayoutGrid size={14} />
-						Overview
-					</ToggleGroupItem>
-					<ToggleGroupItem value="keys" className="sa-drawer__tab">
-						<Key size={14} />
-						Keys
-						{keys.length > 0 && (
-							<span className="sa-drawer__tab-count">{keys.length}</span>
-						)}
-					</ToggleGroupItem>
-				</ToggleGroup>
-				{activeTab === 'keys' && (
-					<Button
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDisabled}
-						onClick={(): void => setIsAddKeyOpen(true)}
-					>
-						<Plus size={12} />
-						Add Key
-					</Button>
-				)}
-			</div>
-
-			<div
-				className={`sa-drawer__body${
-					activeTab === 'keys' ? ' sa-drawer__body--keys' : ''
-				}`}
-			>
-				{activeTab === 'overview' && account && (
-					<OverviewTab
-						account={account}
-						localName={localName}
-						onNameChange={setLocalName}
-						localRoles={localRoles}
-						onRolesChange={setLocalRoles}
-						isDisabled={isDisabled}
-						availableRoles={availableRoles}
-						rolesLoading={rolesLoading}
-						rolesError={rolesError}
-						rolesErrorObj={rolesErrorObj}
-						onRefetchRoles={refetchRoles}
-					/>
-				)}
-				{activeTab === 'keys' && account && (
-					<KeysTab
-						accountId={account.id}
-						keys={keys}
-						isLoading={keysLoading}
-						isDisabled={isDisabled}
-						currentPage={keysPage}
-						pageSize={PAGE_SIZE}
-						onRefetch={refetchKeys}
-						onAddKeyClick={(): void => setIsAddKeyOpen(true)}
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__footer">
-				{activeTab === 'keys' ? (
-					<Pagination
-						current={keysPage}
-						pageSize={PAGE_SIZE}
-						total={keys.length}
-						showTotal={(total: number, range: number[]): JSX.Element => (
-							<>
-								<span className="sa-drawer__pagination-range">
-									{range[0]} &#8212; {range[1]}
-								</span>
-								<span className="sa-drawer__pagination-total"> of {total}</span>
-							</>
-						)}
-						showSizeChanger={false}
-						hideOnSinglePage
-						onChange={(page): void => setKeysPage(page)}
-						className="sa-drawer__keys-pagination"
-					/>
-				) : (
-					<>
-						{isDisabled ? (
-							<Button
-								variant="ghost"
-								color="primary"
-								className="sa-drawer__footer-btn"
-								onClick={(): void => setIsActivateConfirmOpen(true)}
-							>
-								<Check size={12} />
-								Activate Service Account
-							</Button>
-						) : (
-							<Button
-								variant="ghost"
-								color="destructive"
-								className="sa-drawer__footer-btn"
-								onClick={(): void => setIsDisableConfirmOpen(true)}
-							>
-								<PowerOff size={12} />
-								Disable Service Account
-							</Button>
-						)}
-						{!isDisabled && (
-							<div className="sa-drawer__footer-right">
-								<Button
-									variant="solid"
-									color="secondary"
-									size="sm"
-									onClick={handleClose}
-								>
-									<X size={14} />
-									Cancel
-								</Button>
-								<Button
-									variant="solid"
-									color="primary"
-									size="sm"
-									disabled={!isDirty || isSaving}
-									onClick={handleSave}
-								>
-									{isSaving ? 'Saving...' : 'Save Changes'}
-								</Button>
-							</div>
-						)}
-					</>
-				)}
-			</div>
-		</div>
-	);
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				type="panel"
-				showCloseButton
-				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Service Account Details' }}
-				content={drawerContent}
-				className="sa-drawer"
-			/>
-
-			{/* Activate confirm dialog */}
-			<DialogWrapper
-				open={isActivateConfirmOpen}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setIsActivateConfirmOpen(false);
-					}
-				}}
-				title={`Activate service account ${account?.name ?? ''}?`}
-				width="narrow"
-				className="alert-dialog sa-activate-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="sa-activate-dialog__body">
-					Reactivating this service account will restore access for all its keys and
-					any systems using them.
-				</p>
-				<DialogFooter className="sa-activate-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setIsActivateConfirmOpen(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={isActivating}
-						onClick={handleActivate}
-					>
-						<Check size={12} />
-						{isActivating ? 'Activating...' : 'Activate'}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-
-			{/* Disable confirm dialog */}
-			<DialogWrapper
-				open={isDisableConfirmOpen}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setIsDisableConfirmOpen(false);
-					}
-				}}
-				title={`Disable service account ${account?.name ?? ''}?`}
-				width="narrow"
-				className="alert-dialog sa-disable-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="sa-disable-dialog__body">
-					Disabling this service account will revoke access for all its keys. Any
-					systems using this account will lose access immediately.
-				</p>
-				<DialogFooter className="sa-disable-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setIsDisableConfirmOpen(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDisabling}
-						onClick={handleDisable}
-					>
-						<Trash2 size={12} />
-						{isDisabling ? 'Disabling...' : 'Disable'}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-
-			{account && (
-				<AddKeyModal
-					open={isAddKeyOpen}
-					accountId={account.id}
-					onClose={(): void => setIsAddKeyOpen(false)}
-					onSuccess={handleKeySuccess}
-				/>
-			)}
-		</>
-	);
-}
-
-export default ServiceAccountDrawer;

frontend/src/components/ServiceAccountDrawer/utils.ts

@@ -1,25 +0,0 @@
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-
-export function formatLastUsed(
-	lastUsed: string | Date | null | undefined,
-	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string,
-): string {
-	if (!lastUsed) {
-		return '—';
-	}
-	const str = typeof lastUsed === 'string' ? lastUsed : lastUsed.toISOString();
-	// Go zero time means the key has never been used
-	if (str.startsWith('0001-01-01')) {
-		return '—';
-	}
-	const d = new Date(str);
-	if (Number.isNaN(d.getTime())) {
-		return '—';
-	}
-	return formatTimezoneAdjustedTimestamp(str, DATE_TIME_FORMATS.DASH_DATETIME);
-}
-
-export const disabledDate = (current: Dayjs): boolean =>
-	!!current && current < dayjs().endOf('day');

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -1,218 +0,0 @@
-.sa-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-.sa-table {
-	.ant-table {
-		background: transparent;
-		font-size: 13px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--background);
-			font-size: var(--paragraph-small-600-font-size);
-			font-weight: var(--paragraph-small-600-font-weight);
-			line-height: var(--paragraph-small-600-line-height);
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--foreground);
-			padding: var(--padding-2) var(--padding-4);
-			border-bottom: none !important;
-			border-top: none !important;
-
-			&::before {
-				display: none !important;
-			}
-		}
-	}
-
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: var(--padding-2) var(--padding-4);
-			background: transparent;
-			transition: none;
-		}
-
-		> tr.sa-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.sa-name-column {
-		.ant-table-column-sorters {
-			justify-content: flex-start;
-			gap: var(--spacing-2);
-		}
-
-		.ant-table-column-title {
-			flex: none;
-		}
-	}
-
-	.sa-status-cell {
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-}
-
-.sa-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: 22px;
-	overflow: hidden;
-
-	.sa-name {
-		font-size: var(--paragraph-base-500-font-size);
-		font-weight: var(--paragraph-base-500-font-weight);
-		color: var(--foreground);
-		line-height: var(--paragraph-base-500-line-height);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.sa-email {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l3-foreground-hover);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.sa-roles-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.sa-dash {
-	font-size: var(--paragraph-base-400-font-size);
-	color: var(--l3-foreground-hover);
-}
-
-.sa-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--padding-12) var(--padding-4);
-	gap: var(--spacing-4);
-	color: var(--foreground);
-
-	&__emoji {
-		font-size: var(--font-size-2xl);
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-		line-height: var(--paragraph-base-400-font-height);
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
-		}
-	}
-}
-
-.sa-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: var(--padding-2) var(--padding-4);
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.sa-pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-	}
-
-	.sa-pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-}
-
-.sa-tooltip {
-	.ant-tooltip-inner {
-		background-color: var(--bg-slate-500);
-		color: var(--foreground);
-		font-size: var(--font-size-xs);
-		line-height: normal;
-		padding: var(--padding-2) var(--padding-3);
-		border-radius: 4px;
-		text-align: left;
-	}
-
-	.ant-tooltip-arrow-content {
-		background-color: var(--bg-slate-500);
-	}
-}
-
-.lightMode {
-	.sa-table {
-		.ant-table-tbody {
-			> tr.sa-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.sa-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -1,192 +0,0 @@
-import React from 'react';
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType } from 'antd/es/table/interface';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-
-import './ServiceAccountsTable.styles.scss';
-
-interface ServiceAccountsTableProps {
-	data: ServiceAccountRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onRowClick?: (row: ServiceAccountRow) => void;
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="sa-name-email-cell">
-			{name && (
-				<span className="sa-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="sa-tooltip">
-				<span className="sa-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function RolesCell({ roles }: { roles: string[] }): JSX.Element {
-	if (!roles || roles.length === 0) {
-		return <span className="sa-dash">—</span>;
-	}
-	const first = roles[0];
-	const overflow = roles.length - 1;
-	const tooltipContent = roles.slice(1).join(', ');
-
-	return (
-		<div className="sa-roles-cell">
-			<Badge color="vanilla">{first}</Badge>
-			{overflow > 0 && (
-				<Tooltip
-					title={tooltipContent}
-					overlayClassName="sa-tooltip"
-					overlayStyle={{ maxWidth: '600px' }}
-				>
-					<Badge color="vanilla" variant="outline" className="sa-status-badge">
-						+{overflow}
-					</Badge>
-				</Tooltip>
-			)}
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: string }): JSX.Element {
-	if (status?.toUpperCase() === 'ACTIVE') {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="vanilla" variant="outline" className="sa-status-badge">
-			DISABLED
-		</Badge>
-	);
-}
-
-function ServiceAccountsEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="sa-empty-state">
-			<span className="sa-empty-state__emoji" role="img" aria-label="monocle face">
-				🧐
-			</span>
-			{searchQuery ? (
-				<p className="sa-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="sa-empty-state__text">
-					No service accounts. Start by creating one to manage keys.
-				</p>
-			)}
-		</div>
-	);
-}
-
-function ServiceAccountsTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onRowClick,
-}: ServiceAccountsTableProps): JSX.Element {
-	const columns: ColumnsType<ServiceAccountRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			className: 'sa-name-column',
-			sorter: (a, b): number => a.email.localeCompare(b.email),
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'roles',
-			key: 'roles',
-			width: 420,
-			render: (roles: string[]): JSX.Element => <RolesCell roles={roles} />,
-		},
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 120,
-			align: 'right' as const,
-			className: 'sa-status-cell',
-			sorter: (a, b): number =>
-				(a.status?.toUpperCase() === 'ACTIVE' ? 0 : 1) -
-				(b.status?.toUpperCase() === 'ACTIVE' ? 0 : 1),
-			render: (status: string): JSX.Element => <StatusBadge status={status} />,
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="sa-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="sa-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="sa-table-wrapper">
-			<Table<ServiceAccountRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'sa-table-row--tinted' : ''
-				}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <ServiceAccountsEmptyState searchQuery={searchQuery} />,
-				}}
-				className="sa-table"
-				onRow={(record): { onClick: () => void; style?: React.CSSProperties } => ({
-					onClick: (): void => onRowClick?.(record),
-					style: onRowClick ? { cursor: 'pointer' } : undefined,
-				})}
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="sa-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default ServiceAccountsTable;

frontend/src/constants/query.ts

@@ -55,4 +55,5 @@ export enum QueryParams {
 	source = 'source',
 	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
+	yAxisUnit = 'yAxisUnit',
 }

frontend/src/constants/routes.ts

@@ -86,7 +86,6 @@ const ROUTES = {
 	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
-	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 } as const;
 
 export default ROUTES;

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -16,8 +16,8 @@ export const PagerInitialConfig: Partial<PagerChannel> = {
 	client: 'SigNoz Alert Manager',
 	client_url: 'https://enter-signoz-host-n-port-here/alerts',
 	details: JSON.stringify({
-		firing: `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
-		resolved: `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
+		firing: `{{ .Alerts.Firing | toJson }}`,
+		resolved: `{{ .Alerts.Resolved | toJson }}`,
 		num_firing: '{{ .Alerts.Firing | len }}',
 		num_resolved: '{{ .Alerts.Resolved | len }}',
 	}),

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -193,7 +193,6 @@ describe('Dashboard landing page actions header tests', () => {
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
-			dashboardId: '4',
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
@@ -205,8 +204,6 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
-			selectedRowWidgetId: null,
-			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -78,7 +78,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		isDashboardLocked,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
-		setSelectedRowWidgetId,
 		handleDashboardLockToggle,
 	} = useDashboard();
 
@@ -146,7 +145,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
-		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts

@@ -67,17 +67,18 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 							const oldVariables = prev?.data.variables;
 							// this is added to handle case where we have two different
 							// schemas for variable response
-							if (oldVariables?.[id]) {
-								oldVariables[id] = {
-									...oldVariables[id],
+							const updatedVariables = { ...oldVariables };
+							if (updatedVariables?.[id]) {
+								updatedVariables[id] = {
+									...updatedVariables[id],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
 								};
 							}
-							if (oldVariables?.[name]) {
-								oldVariables[name] = {
-									...oldVariables[name],
+							if (updatedVariables?.[name]) {
+								updatedVariables[name] = {
+									...updatedVariables[name],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
@@ -87,9 +88,7 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 								...prev,
 								data: {
 									...prev?.data,
-									variables: {
-										...oldVariables,
-									},
+									variables: updatedVariables,
 								},
 							};
 						}

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

@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -62,7 +61,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -11,7 +11,6 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
@@ -44,7 +43,7 @@ export function prepareBarPanelConfig({
 	currentQuery: Query;
 	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
@@ -76,13 +75,17 @@ export function prepareBarPanelConfig({
 		stepInterval: minStepInterval,
 	});
 
+	if (!(apiResponse && apiResponse?.data?.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
 	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
+	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

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

@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -39,7 +38,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		return prepareHistogramPanelConfig({
 			widget,
 			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			panelMode,
 		});
 	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
@@ -49,7 +48,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 			return [];
 		}
 		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			bucketWidth: widget?.bucketWidth,
 			bucketCount: widget?.bucketCount,
 			mergeAllActiveQueries: widget?.mergeAllActiveQueries,

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -149,7 +149,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode,
 }: {
 	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	panelMode: PanelMode;
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
@@ -204,7 +204,7 @@ export function prepareHistogramPanelConfig({
 			fillColor: '#4E74F8',
 			isDarkMode,
 		});
-	} else {
+	} else if (apiResponse && apiResponse?.data?.result) {
 		apiResponse.data.result.forEach((series) => {
 			const baseLabelName = getLabelName(
 				series.metric,

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

@@ -9,7 +9,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -68,7 +67,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -68,11 +68,12 @@ export const prepareUPlotConfig = ({
 	currentQuery: Query;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
 	maxTimeScale?: number;
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 }): UPlotConfigBuilder => {
 	const stepIntervals: ExecStats['stepIntervals'] = get(
 		apiResponse,
@@ -100,7 +101,12 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	apiResponse.data?.result?.forEach((series) => {
+	if (!(apiResponse && apiResponse.data.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
+	apiResponse.data.result.forEach((series) => {
 		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,