fix: correct naming

.github/workflows/build-community.yaml

@@ -54,7 +54,6 @@ jobs:
       JS_SRC: frontend
       JS_OUTPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
-      JS_PKG_MANAGER: pnpm
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
   go-build:

.github/workflows/build-enterprise.yaml

@@ -87,7 +87,6 @@ jobs:
       JS_INPUT_ARTIFACT_PATH: frontend/.env
       JS_OUTPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
-      JS_PKG_MANAGER: pnpm
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
   go-build:

.github/workflows/build-staging.yaml

@@ -86,7 +86,6 @@ jobs:
       JS_INPUT_ARTIFACT_PATH: frontend/.env
       JS_OUTPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
-      JS_PKG_MANAGER: pnpm
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
   go-build:

.github/workflows/e2eci.yaml

@@ -21,19 +21,15 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - name: install-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
       - name: install
         run: |
-          cd tests/e2e && pnpm install
+          cd tests/e2e && yarn install --frozen-lockfile
       - name: fmt
         run: |
-          cd tests/e2e && pnpm fmt:check
+          cd tests/e2e && yarn fmt:check
       - name: lint
         run: |
-          cd tests/e2e && pnpm lint
+          cd tests/e2e && yarn lint
   test:
     strategy:
       fail-fast: false
@@ -58,19 +54,15 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - name: install-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
       - name: python-install
         run: |
           cd tests && uv sync
-      - name: pnpm-install
+      - name: yarn-install
         run: |
-          cd tests/e2e && pnpm install --frozen-lockfile
+          cd tests/e2e && yarn install --frozen-lockfile
       - name: playwright-browsers
         run: |
-          cd tests/e2e && pnpm playwright install --with-deps ${{ matrix.project }}
+          cd tests/e2e && yarn playwright install --with-deps ${{ matrix.project }}
       - name: bring-up-stack
         run: |
           cd tests && \
@@ -81,7 +73,7 @@ jobs:
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            pnpm playwright test --project=${{ matrix.project }}
+            yarn playwright test --project=${{ matrix.project }}
       - name: teardown-stack
         if: always()
         run: |

.github/workflows/goci.yaml

@@ -77,10 +77,6 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
-      - name: setup-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
       - name: docker-community
         shell: bash
         run: |

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

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

.github/workflows/gor-signoz.yaml

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

.github/workflows/jsci.yaml

@@ -22,7 +22,6 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_PKG_MANAGER: pnpm
   test:
     if: |
       github.event_name == 'merge_group' ||
@@ -33,7 +32,6 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_PKG_MANAGER: pnpm
   fmt:
     if: |
       github.event_name == 'merge_group' ||
@@ -44,7 +42,6 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_PKG_MANAGER: pnpm
   lint:
     if: |
       github.event_name == 'merge_group' ||
@@ -55,7 +52,6 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_PKG_MANAGER: pnpm
   languages:
     if: |
       github.event_name == 'merge_group' ||
@@ -80,13 +76,9 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: "22"
-      - name: install-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
       - name: install-frontend
-        run: cd frontend && pnpm install
+        run: cd frontend && yarn install
       - name: generate-api-clients
         run: |
-          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)
+          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)

.gitpod.yml

@@ -1,21 +1,19 @@
 # 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
-      pnpm install
-    command: pnpm dev
+      yarn install
+    command:
+      yarn 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 pnpm install && pnpm build
+	@cd $(JS_BUILD_CONTEXT) && CI=1 yarn install && yarn build
 
 ##############################################################
 # docker commands

cmd/enterprise/Dockerfile.with-web.integration

@@ -3,9 +3,8 @@ FROM node:22-bookworm AS build
 WORKDIR /opt/
 COPY ./frontend/ ./
 ENV NODE_OPTIONS=--max-old-space-size=8192
-RUN CI=1 npm i -g pnpm
-RUN CI=1 pnpm install
-RUN CI=1 pnpm build
+RUN CI=1 yarn install
+RUN CI=1 yarn build
 
 FROM golang:1.25-bookworm
 

docs/api/openapi.yml

@@ -3013,32 +3013,6 @@ components:
       - end
       - limit
       type: object
-    InframonitoringtypesPostableVolumes:
-      properties:
-        end:
-          format: int64
-          type: integer
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        orderBy:
-          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-        start:
-          format: int64
-          type: integer
-      required:
-      - start
-      - end
-      - limit
-      type: object
     InframonitoringtypesRequiredMetricsCheck:
       properties:
         missingMetrics:
@@ -3054,67 +3028,6 @@ components:
       - list
       - grouped_list
       type: string
-    InframonitoringtypesVolumeRecord:
-      properties:
-        meta:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        persistentVolumeClaimName:
-          type: string
-        volumeAvailable:
-          format: double
-          type: number
-        volumeCapacity:
-          format: double
-          type: number
-        volumeInodes:
-          format: double
-          type: number
-        volumeInodesFree:
-          format: double
-          type: number
-        volumeInodesUsed:
-          format: double
-          type: number
-        volumeUsage:
-          format: double
-          type: number
-      required:
-      - persistentVolumeClaimName
-      - volumeAvailable
-      - volumeCapacity
-      - volumeUsage
-      - volumeInodes
-      - volumeInodesFree
-      - volumeInodesUsed
-      - meta
-      type: object
-    InframonitoringtypesVolumes:
-      properties:
-        endTimeBeforeRetention:
-          type: boolean
-        records:
-          items:
-            $ref: '#/components/schemas/InframonitoringtypesVolumeRecord'
-          nullable: true
-          type: array
-        requiredMetricsCheck:
-          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
-        total:
-          type: integer
-        type:
-          $ref: '#/components/schemas/InframonitoringtypesResponseType'
-        warning:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
-      required:
-      - type
-      - records
-      - total
-      - requiredMetricsCheck
-      - endTimeBeforeRetention
-      type: object
     LlmpricingruletypesGettablePricingRules:
       properties:
         items:
@@ -5272,17 +5185,19 @@ components:
           $ref: '#/components/schemas/SpantypesSpanMapperConfig'
         enabled:
           type: boolean
-        fieldContext:
+        field_context:
           $ref: '#/components/schemas/SpantypesFieldContext'
         name:
           type: string
       required:
       - name
-      - fieldContext
+      - field_context
       - config
       type: object
     SpantypesPostableSpanMapperGroup:
       properties:
+        category:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
         condition:
           $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
         enabled:
@@ -5291,6 +5206,7 @@ components:
           type: string
       required:
       - name
+      - category
       - condition
       type: object
     SpantypesSpanMapper:
@@ -5304,7 +5220,7 @@ components:
           type: string
         enabled:
           type: boolean
-        fieldContext:
+        field_context:
           $ref: '#/components/schemas/SpantypesFieldContext'
         group_id:
           type: string
@@ -5321,7 +5237,7 @@ components:
       - id
       - group_id
       - name
-      - fieldContext
+      - field_context
       - config
       - enabled
       type: object
@@ -5337,6 +5253,8 @@ components:
       type: object
     SpantypesSpanMapperGroup:
       properties:
+        category:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
         condition:
           $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
         createdAt:
@@ -5361,11 +5279,13 @@ components:
       - id
       - orgId
       - name
+      - category
       - condition
       - enabled
       type: object
+    SpantypesSpanMapperGroupCategory:
+      type: object
     SpantypesSpanMapperGroupCondition:
-      nullable: true
       properties:
         attributes:
           items:
@@ -5409,7 +5329,7 @@ components:
         enabled:
           nullable: true
           type: boolean
-        fieldContext:
+        field_context:
           $ref: '#/components/schemas/SpantypesFieldContext'
       type: object
     SpantypesUpdatableSpanMapperGroup:
@@ -10460,6 +10380,12 @@ paths:
         org.
       operationId: ListSpanMapperGroups
       parameters:
+      - explode: true
+        in: query
+        name: category
+        schema:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
+        style: deepObject
       - in: query
         name: enabled
         schema:
@@ -12256,77 +12182,6 @@ paths:
       summary: List Pods for Infra Monitoring
       tags:
       - inframonitoring
-  /api/v2/infra_monitoring/pvcs:
-    post:
-      deprecated: false
-      description: 'Returns a paginated list of Kubernetes persistent volume claims
-        (PVCs) with key volume metrics: available bytes, capacity bytes, usage (capacity
-        - available), inodes, free inodes, and used inodes. Each row also includes
-        metadata attributes (k8s.persistentvolumeclaim.name, k8s.pod.uid, k8s.pod.name,
-        k8s.namespace.name, k8s.node.name, k8s.statefulset.name, k8s.cluster.name).
-        Supports filtering via a filter expression, custom groupBy to aggregate volumes
-        by any attribute, ordering by any of the six metrics (available, capacity,
-        usage, inodes, inodes_free, inodes_used), and pagination via offset/limit.
-        The response type is ''list'' for the default k8s.persistentvolumeclaim.name
-        grouping or ''grouped_list'' for custom groupBy keys; in both modes every
-        row aggregates volumes in the group. Also reports missing required metrics
-        and whether the requested time range falls before the data retention boundary.
-        Numeric metric fields (volumeAvailable, volumeCapacity, volumeUsage, volumeInodes,
-        volumeInodesFree, volumeInodesUsed) return -1 as a sentinel when no data is
-        available for that field.'
-      operationId: ListVolumes
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/InframonitoringtypesPostableVolumes'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/InframonitoringtypesVolumes'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List Volumes for Infra Monitoring
-      tags:
-      - inframonitoring
   /api/v2/livez:
     get:
       deprecated: false

docs/contributing/development.md

@@ -13,12 +13,13 @@ 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
 
-- **Pnpm** - Our frontend package manager
-  - Follow the [installation guide](https://pnpm.io/installation)
+- **Yarn** - Our frontend package manager
+  - Follow the [installation guide](https://yarnpkg.com/getting-started/install)
 
 - **Docker** - For running Clickhouse and Postgres locally
   - Get it from [docs.docker.com/get-docker](https://docs.docker.com/get-docker/)
@@ -94,7 +95,7 @@ This command:
 
 2. Install dependencies:
    ```bash
-   pnpm install
+   yarn install
    ```
 
 3. Create a `.env` file in this directory:
@@ -104,10 +105,10 @@ This command:
 
 4. Start the development server:
    ```bash
-   pnpm dev
+   yarn dev
    ```
 
-> 💡 **Tip**: `pnpm dev` will automatically rebuild when you make changes to the code
+> 💡 **Tip**: `yarn 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

@@ -304,7 +304,7 @@ import ec2Url from '@/assets/Logos/ec2.svg';
 
 1. Add the logo SVG to `src/assets/Logos/` and add a top-level import in the config file (e.g., `import myServiceUrl from '@/assets/Logos/my-service.svg'`)
 2. Add your data source object to the `onboardingConfigWithLinks` array, referencing the imported variable for `imgUrl`
-3. Test the flow locally with `pnpm dev`
+3. Test the flow locally with `yarn 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

ee/query-service/app/server.go

@@ -114,7 +114,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	// initiate agent config handler
 	agentConfMgr, err := agentConf.Initiate(&agentConf.ManagerOptions{
 		Store:         signoz.SQLStore,
-		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController, signoz.Modules.LLMPricingRule},
+		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController},
 	})
 	if err != nil {
 		return nil, err

frontend/.husky/commit-msg

@@ -1,7 +1,7 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd frontend && pnpm run commitlint --edit $1
+cd frontend && yarn 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 && pnpm lint-staged
+cd frontend && yarn lint-staged

frontend/.npmrc

@@ -1,4 +1 @@
-registry = 'https://registry.npmjs.org/'
-
-public-hoist-pattern[]=@commitlint*
-public-hoist-pattern[]=commitlint
+registry = 'https://registry.npmjs.org/'

frontend/.oxlintrc.json

@@ -411,7 +411,7 @@
     "jsx-a11y/media-has-caption": "warn",
     "jsx-a11y/mouse-events-have-key-events": "warn",
     "jsx-a11y/no-access-key": "error",
-    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/no-autofocus": "warn",
     "jsx-a11y/no-distracting-elements": "error",
     "jsx-a11y/no-redundant-roles": "warn",
     "jsx-a11y/role-has-required-aria-props": "warn",

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. ```pnpm install```
-1. ```pnpm dev```
+1. ```yarn install```
+1. ```yarn 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:
 
-### `pnpm start`
+### `yarn 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.
 
-### `pnpm test`
+### `yarn 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.
 
-### `pnpm build`
+### `yarn 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.
 
-### `pnpm eject`
+### `yarn 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)
 
-### `pnpm build` fails to minify
+### `yarn 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/__mocks__/createIconsMock.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const IconMock = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
-	(props, ref) => <svg ref={ref} {...props} />,
-);
-IconMock.displayName = 'IconMock';
-
-// Returns a Proxy that resolves any named export to IconMock by default,
-// so `import { AnyIcon } from '@signozhq/icons'` always returns a valid component.
-// Pass `overrides` to swap in test-specific stubs (e.g. icons with data-testid).
-export function createIconsMock(
-	overrides: Record<string, unknown> = {},
-): Record<string | symbol, unknown> {
-	return new Proxy(
-		{ __esModule: true, default: IconMock, ...overrides } as Record<
-			string | symbol,
-			unknown
-		>,
-		{
-			get(target, prop: string | symbol): unknown {
-				if (prop in target) {
-					return target[prop as string];
-				}
-				return IconMock;
-			},
-		},
-	);
-}

frontend/__mocks__/signozhqIconsMock.tsx

@@ -1,3 +0,0 @@
-import { createIconsMock } from './createIconsMock';
-
-module.exports = createIconsMock();

frontend/jest.config.ts

@@ -24,8 +24,8 @@ const config: Config.InitialOptions = {
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
-		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
-		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
+		'^@signozhq/icons$':
+			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
 		'^@signozhq/(?!ui(?:/|$))([^/]+)$':
@@ -46,11 +46,7 @@ const config: Config.InitialOptions = {
 	},
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
-		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)/)',
-		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
-		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)[^/]*/node_modules)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@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,7 +6,6 @@
  * 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';
@@ -29,18 +28,6 @@ if (!HTMLElement.prototype.scrollIntoView) {
 	HTMLElement.prototype.scrollIntoView = function (): void {};
 }
 
-if (typeof window.IntersectionObserver === 'undefined') {
-	class IntersectionObserverMock {
-		observe(): void {}
-		unobserve(): void {}
-		disconnect(): void {}
-		takeRecords(): IntersectionObserverEntry[] {
-			return [];
-		}
-	}
-	(window as any).IntersectionObserver = IntersectionObserverMock;
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

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 'pnpm generate:api'`,
+					`* regenerate with 'yarn generate:api'`,
 					...(info.title ? [info.title] : []),
 					...(info.version ? [`OpenAPI spec version: ${info.version}`] : []),
 				],

frontend/package.json

@@ -18,7 +18,7 @@
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
-    "postinstall": "pnpm i18n:generate-hash && (is-ci || pnpm husky:configure)  && node scripts/update-registry.cjs",
+    "postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs",
     "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
     "commitlint": "commitlint --edit $1",
     "test": "jest",
@@ -32,10 +32,9 @@
   "license": "ISC",
   "dependencies": {
     "@ant-design/colors": "6.0.0",
+    "@ant-design/icons": "4.8.0",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/lang-javascript": "6.2.3",
-    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.6",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
@@ -49,7 +48,7 @@
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/icons": "0.4.0",
+    "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
     "@signozhq/ui": "0.0.18",
     "@tanstack/react-table": "8.21.3",
@@ -98,6 +97,7 @@
     "jest": "30.2.0",
     "js-base64": "^3.7.2",
     "lodash-es": "^4.17.21",
+    "lucide-react": "0.498.0",
     "mini-css-extract-plugin": "2.4.5",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
@@ -105,7 +105,6 @@
     "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",
@@ -169,8 +168,8 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.21.4",
-    "@commitlint/cli": "20.4.4",
-    "@commitlint/config-conventional": "20.4.4",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.0",
     "@testing-library/jest-dom": "5.16.5",
@@ -180,11 +179,8 @@
     "@types/crypto-js": "4.2.2",
     "@types/dompurify": "^2.4.0",
     "@types/event-source-polyfill": "^1.0.0",
-    "@types/d3-hierarchy": "1.1.11",
     "@types/fontfaceobserver": "2.1.0",
-    "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
-    "@jest/types": "30.2.0",
     "@types/lodash-es": "^4.17.4",
     "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/node": "^16.10.3",
@@ -202,13 +198,11 @@
     "@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/native-preview": "7.0.0-dev.20260430.1",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
     "eslint-plugin-sonarjs": "4.0.2",
-    "glob": "^13.0.6",
     "husky": "^7.0.4",
     "imagemin": "^8.0.1",
     "imagemin-svgo": "^10.0.1",
@@ -219,7 +213,7 @@
     "lint-staged": "^12.5.0",
     "msw": "1.3.2",
     "npm-run-all": "latest",
-    "orval": "7.21.0",
+    "orval": "7.18.0",
     "oxfmt": "0.47.0",
     "oxlint": "1.62.0",
     "oxlint-tsgolint": "0.22.1",
@@ -236,7 +230,7 @@
     "stylelint-scss": "7.0.0",
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
-    "ts-jest": "29.4.9",
+    "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
     "use-sync-external-store": "1.6.0",

frontend/scripts/post-types-generation.sh

@@ -16,7 +16,7 @@ echo "\n✅ Tag files renamed to index.ts"
 
 # Format generated files
 echo "\n\n---\nRunning prettier...\n"
-if ! pnpm prettify src/api/generated; then
+if ! yarn prettify src/api/generated; then
   echo "Formatting failed!"
   exit 1
 fi
@@ -25,7 +25,7 @@ echo "\n✅ Formatting successful"
 
 # Fix linting issues
 echo "\n\n---\nRunning lint...\n"
-if ! pnpm lint:generated; then
+if ! yarn lint:generated; then
   echo "Lint check failed! Please fix linting errors before proceeding."
   exit 1
 fi

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation } from 'react-query';

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

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

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useQuery } from 'react-query';

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

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

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

@@ -1,7 +1,7 @@
 /**
  * ! Do not edit manually
  * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation } from 'react-query';
@@ -17,13 +17,11 @@ import type {
 	InframonitoringtypesPostableNamespacesDTO,
 	InframonitoringtypesPostableNodesDTO,
 	InframonitoringtypesPostablePodsDTO,
-	InframonitoringtypesPostableVolumesDTO,
 	ListClusters200,
 	ListHosts200,
 	ListNamespaces200,
 	ListNodes200,
 	ListPods200,
-	ListVolumes200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -450,87 +448,3 @@ export const useListPods = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * Returns a paginated list of Kubernetes persistent volume claims (PVCs) with key volume metrics: available bytes, capacity bytes, usage (capacity - available), inodes, free inodes, and used inodes. Each row also includes metadata attributes (k8s.persistentvolumeclaim.name, k8s.pod.uid, k8s.pod.name, k8s.namespace.name, k8s.node.name, k8s.statefulset.name, k8s.cluster.name). Supports filtering via a filter expression, custom groupBy to aggregate volumes by any attribute, ordering by any of the six metrics (available, capacity, usage, inodes, inodes_free, inodes_used), and pagination via offset/limit. The response type is 'list' for the default k8s.persistentvolumeclaim.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates volumes in the group. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (volumeAvailable, volumeCapacity, volumeUsage, volumeInodes, volumeInodesFree, volumeInodesUsed) return -1 as a sentinel when no data is available for that field.
- * @summary List Volumes for Infra Monitoring
- */
-export const listVolumes = (
-	inframonitoringtypesPostableVolumesDTO: BodyType<InframonitoringtypesPostableVolumesDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListVolumes200>({
-		url: `/api/v2/infra_monitoring/pvcs`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: inframonitoringtypesPostableVolumesDTO,
-		signal,
-	});
-};
-
-export const getListVolumesMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listVolumes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableVolumesDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof listVolumes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableVolumesDTO> },
-	TContext
-> => {
-	const mutationKey = ['listVolumes'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof listVolumes>>,
-		{ data: BodyType<InframonitoringtypesPostableVolumesDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return listVolumes(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ListVolumesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof listVolumes>>
->;
-export type ListVolumesMutationBody =
-	BodyType<InframonitoringtypesPostableVolumesDTO>;
-export type ListVolumesMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List Volumes for Infra Monitoring
- */
-export const useListVolumes = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listVolumes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableVolumesDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof listVolumes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableVolumesDTO> },
-	TContext
-> => {
-	const mutationOptions = getListVolumesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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

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

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 export interface AlertmanagertypesChannelDTO {
@@ -5085,34 +5085,6 @@ export interface InframonitoringtypesPostablePodsDTO {
 	start: number;
 }
 
-export interface InframonitoringtypesPostableVolumesDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	orderBy?: Querybuildertypesv5OrderByDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	start: number;
-}
-
 export interface InframonitoringtypesRequiredMetricsCheckDTO {
 	/**
 	 * @type array
@@ -5125,74 +5097,6 @@ export enum InframonitoringtypesResponseTypeDTO {
 	list = 'list',
 	grouped_list = 'grouped_list',
 }
-/**
- * @nullable
- */
-export type InframonitoringtypesVolumeRecordDTOMeta = {
-	[key: string]: string;
-} | null;
-
-export interface InframonitoringtypesVolumeRecordDTO {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	meta: InframonitoringtypesVolumeRecordDTOMeta;
-	/**
-	 * @type string
-	 */
-	persistentVolumeClaimName: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeAvailable: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeCapacity: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeInodes: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeInodesFree: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeInodesUsed: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	volumeUsage: number;
-}
-
-export interface InframonitoringtypesVolumesDTO {
-	/**
-	 * @type boolean
-	 */
-	endTimeBeforeRetention: boolean;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	records: InframonitoringtypesVolumeRecordDTO[] | null;
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
-	/**
-	 * @type integer
-	 */
-	total: number;
-	type: InframonitoringtypesResponseTypeDTO;
-	warning?: Querybuildertypesv5QueryWarnDataDTO;
-}
-
 export interface LlmpricingruletypesGettablePricingRulesDTO {
 	/**
 	 * @type array
@@ -7575,7 +7479,7 @@ export interface SpantypesPostableSpanMapperDTO {
 	 * @type boolean
 	 */
 	enabled?: boolean;
-	fieldContext: SpantypesFieldContextDTO;
+	field_context: SpantypesFieldContextDTO;
 	/**
 	 * @type string
 	 */
@@ -7583,6 +7487,7 @@ export interface SpantypesPostableSpanMapperDTO {
 }
 
 export interface SpantypesPostableSpanMapperGroupDTO {
+	category: SpantypesSpanMapperGroupCategoryDTO;
 	condition: SpantypesSpanMapperGroupConditionDTO;
 	/**
 	 * @type boolean
@@ -7609,7 +7514,7 @@ export interface SpantypesSpanMapperDTO {
 	 * @type boolean
 	 */
 	enabled: boolean;
-	fieldContext: SpantypesFieldContextDTO;
+	field_context: SpantypesFieldContextDTO;
 	/**
 	 * @type string
 	 */
@@ -7642,6 +7547,7 @@ export interface SpantypesSpanMapperConfigDTO {
 }
 
 export interface SpantypesSpanMapperGroupDTO {
+	category: SpantypesSpanMapperGroupCategoryDTO;
 	condition: SpantypesSpanMapperGroupConditionDTO;
 	/**
 	 * @type string
@@ -7679,10 +7585,11 @@ export interface SpantypesSpanMapperGroupDTO {
 	updatedBy?: string;
 }
 
-/**
- * @nullable
- */
-export type SpantypesSpanMapperGroupConditionDTO = {
+export interface SpantypesSpanMapperGroupCategoryDTO {
+	[key: string]: unknown;
+}
+
+export interface SpantypesSpanMapperGroupConditionDTO {
 	/**
 	 * @type array
 	 * @nullable true
@@ -7693,7 +7600,7 @@ export type SpantypesSpanMapperGroupConditionDTO = {
 	 * @nullable true
 	 */
 	resource: string[] | null;
-} | null;
+}
 
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
@@ -7719,7 +7626,7 @@ export interface SpantypesUpdatableSpanMapperDTO {
 	 * @nullable true
 	 */
 	enabled?: boolean | null;
-	fieldContext?: SpantypesFieldContextDTO;
+	field_context?: SpantypesFieldContextDTO;
 }
 
 export interface SpantypesUpdatableSpanMapperGroupDTO {
@@ -9267,6 +9174,10 @@ export type GetMyServiceAccount200 = {
 };
 
 export type ListSpanMapperGroupsParams = {
+	/**
+	 * @description undefined
+	 */
+	category?: SpantypesSpanMapperGroupCategoryDTO;
 	/**
 	 * @type boolean
 	 * @nullable true
@@ -9541,14 +9452,6 @@ export type ListPods200 = {
 	status: string;
 };
 
-export type ListVolumes200 = {
-	data: InframonitoringtypesVolumesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Livez200 = {
 	data: FactoryResponseDTO;
 	/**

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

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

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

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

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

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 'pnpm generate:api'
+ * * regenerate with 'yarn generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

frontend/src/api/trace/getTraceV3.tsx

@@ -40,7 +40,6 @@ const getTraceV3 = async (
 	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',
-		timestamp: span.time_unix,
 	}));
 
 	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),

frontend/src/components/AuthError/AuthError.tsx

@@ -1,5 +1,5 @@
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { CircleAlert } from '@signozhq/icons';
+import { CircleAlert } from 'lucide-react';
 import APIError from 'types/api/error';
 
 import './AuthError.styles.scss';

frontend/src/components/AuthPageContainer/AuthFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowUpRight } from '@signozhq/icons';
+import { ArrowUpRight } from 'lucide-react';
 
 import './AuthFooter.styles.scss';
 

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { LifeBuoy } from '@signozhq/icons';
+import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -2,11 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Loader, Search } from '@signozhq/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Loader } from '@signozhq/icons';
 import {
 	Button,
-	Flex,
 	Input,
 	InputRef,
 	Progress,
@@ -108,11 +108,9 @@ const getColumnSearchProps = (
 					type="primary"
 					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
+					icon={<SearchOutlined />}
 				>
-					<Flex align="center" gap={4}>
-						<Search size="md" />
-						Search
-					</Flex>
+					Search
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
@@ -134,9 +132,8 @@ const getColumnSearchProps = (
 		</div>
 	),
 	filterIcon: (filtered: boolean): JSX.Element => (
-		<Search
+		<SearchOutlined
 			style={{ color: filtered ? Color.BG_ROBIN_500 : undefined }}
-			size="md"
 		/>
 	),
 	onFilter: (value, record): boolean =>

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -6,7 +6,7 @@ import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { X } from '@signozhq/icons';
+import { X } from 'lucide-react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import cx from 'classnames';
-import { ArrowDown, ArrowUp } from '@signozhq/icons';
+import { ArrowDown, ArrowUp } from 'lucide-react';
 
 import './ChangePercentagePill.styles.scss';
 

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
-import { Button, Flex, Modal } from 'antd';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import dayjs from 'dayjs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
@@ -115,17 +116,15 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button type="default" onClick={onClose}>
-								<Flex align="center" gap="4px">
-									<X size="md" />
-									Skip for now
-								</Flex>
+							<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
+								Skip for now
 							</Button>
-							<Button type="primary" onClick={onClickUpdateWorkspace}>
-								<Flex align="center" gap="4px">
-									<Check size="md" />
-									Update my workspace
-								</Flex>
+							<Button
+								type="primary"
+								icon={<CheckOutlined />}
+								onClick={onClickUpdateWorkspace}
+							>
+								Update my workspace
 							</Button>
 						</div>
 					)}

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -37,7 +37,7 @@ import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
 import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -3,7 +3,7 @@ import {
 	CloudintegrationtypesCollectedLogAttributeDTO,
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { BarChart, ScrollText } from '@signozhq/icons';
+import { BarChart2, ScrollText } from 'lucide-react';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -82,7 +82,7 @@ function CloudServiceDataCollected({
 			{metricsData && metricsData.length > 0 && (
 				<div className="cloud-service-data-collected-table">
 					<div className="cloud-service-data-collected-table-heading">
-						<BarChart size={14} />
+						<BarChart2 size={14} />
 						Metrics
 					</div>
 					<Table

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -2,7 +2,7 @@ import { Calendar } from '@signozhq/ui/calendar';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
+import { CalendarIcon, Check, X } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 
 import { DateRange } from './CustomTimePickerPopoverContent';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -23,7 +23,7 @@ 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, ZoomOut } from '@signozhq/icons';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -21,7 +21,7 @@ import {
 	Option,
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import dayjs from 'dayjs';
-import { Clock, PenLine, TriangleAlert } from '@signozhq/icons';
+import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 import { TimeRangeValidationResult } from 'utils/timeUtils';
@@ -300,7 +300,7 @@ function CustomTimePickerPopoverContent({
 								inputErrorDetails && (
 									<div className="input-error-message-container">
 										<div className="input-error-message-title">
-											<TriangleAlert color={Color.BG_CHERRY_400} size={16} />
+											<TriangleAlertIcon color={Color.BG_CHERRY_400} size={16} />
 											<span className="input-error-message-text">
 												{inputErrorDetails.message}
 											</span>

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -11,7 +11,7 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { Check, Search } from '@signozhq/icons';
+import { Check, Search } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 
 import { Timezone, TIMEZONE_DATA } from './timezoneUtils';

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,7 +3,7 @@ import { Button, Popover, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
-import { Download, LoaderCircle } from '@signozhq/icons';
+import { Download, DownloadIcon, Loader2 } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -140,9 +140,9 @@ export default function DownloadOptionsMenu({
 					className="periscope-btn ghost"
 					icon={
 						isDownloading ? (
-							<LoaderCircle size={14} className="animate-spin" />
+							<Loader2 size={14} className="animate-spin" />
 						) : (
-							<Download size={14} />
+							<DownloadIcon size={14} />
 						)
 					}
 					data-testid={`periscope-btn-download-${dataSource}`}

frontend/src/components/DropDown/DropDown.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Ellipsis } from '@signozhq/icons';
+import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
@@ -38,7 +38,7 @@ function DropDown({
 					setDdOpen(true);
 				}}
 			>
-				<Ellipsis className="dropdown-icon" size={16} />
+				<EllipsisOutlined className="dropdown-icon" />
 			</Button>
 		</Dropdown>
 	);

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -103,7 +103,7 @@ function EditMemberDrawer({
 	const { user: currentUser } = useAppContext();
 
 	const [localDisplayName, setLocalDisplayName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -141,7 +141,7 @@ function EditMemberDrawer({
 	} = useRoles();
 
 	const {
-		currentRoles: currentMemberRoles,
+		fetchedRoleIds,
 		isLoading: isMemberRolesLoading,
 		applyDiff,
 	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
@@ -188,24 +188,16 @@ function EditMemberDrawer({
 		if (!member?.id) {
 			roleSessionRef.current = null;
 		} else if (member.id !== roleSessionRef.current && !isMemberRolesLoading) {
-			setLocalRoles(
-				currentMemberRoles.map((r) => r.id).filter(Boolean) as string[],
-			);
+			setLocalRole(fetchedRoleIds[0] ?? '');
 			roleSessionRef.current = member.id;
 		}
-	}, [member?.id, currentMemberRoles, isMemberRolesLoading]);
+	}, [member?.id, fetchedRoleIds, isMemberRolesLoading]);
 
 	const isDirty =
 		member !== null &&
 		fetchedUser != null &&
 		(localDisplayName !== fetchedDisplayName ||
-			JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify(
-					currentMemberRoles
-						.map((r) => r.id)
-						.filter(Boolean)
-						.sort(),
-				));
+			localRole !== (fetchedRoleIds[0] ?? ''));
 
 	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
 	const { mutateAsync: updateUser } = useUpdateUser();
@@ -280,14 +272,7 @@ function EditMemberDrawer({
 		setIsSaving(true);
 		try {
 			const nameChanged = localDisplayName !== fetchedDisplayName;
-			const rolesChanged =
-				JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify(
-					currentMemberRoles
-						.map((r) => r.id)
-						.filter(Boolean)
-						.sort(),
-				);
+			const rolesChanged = localRole !== (fetchedRoleIds[0] ?? '');
 
 			const namePromise = nameChanged
 				? isSelf
@@ -301,7 +286,7 @@ function EditMemberDrawer({
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
 				rolesChanged
-					? applyDiff([...localRoles], availableRoles)
+					? applyDiff([localRole].filter(Boolean), availableRoles)
 					: Promise.resolve([]),
 			]);
 
@@ -320,7 +305,10 @@ function EditMemberDrawer({
 					context: 'Roles update',
 					apiError: toSaveApiError(rolesResult.reason),
 					onRetry: async (): Promise<void> => {
-						const failures = await applyDiff([...localRoles], availableRoles);
+						const failures = await applyDiff(
+							[localRole].filter(Boolean),
+							availableRoles,
+						);
 						setSaveErrors((prev) => {
 							const rest = prev.filter((e) => e.context !== 'Roles update');
 							return [
@@ -365,9 +353,9 @@ function EditMemberDrawer({
 		isDirty,
 		isSelf,
 		localDisplayName,
-		localRoles,
+		localRole,
 		fetchedDisplayName,
-		currentMemberRoles,
+		fetchedRoleIds,
 		updateMyUser,
 		updateUser,
 		applyDiff,
@@ -515,15 +503,10 @@ function EditMemberDrawer({
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
 							<div className="edit-member-drawer__disabled-roles">
-								{localRoles.length > 0 ? (
-									localRoles.map((roleId) => {
-										const role = availableRoles.find((r) => r.id === roleId);
-										return (
-											<Badge key={roleId} color="vanilla">
-												{role?.name ?? roleId}
-											</Badge>
-										);
-									})
+								{localRole ? (
+									<Badge color="vanilla">
+										{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+									</Badge>
 								) : (
 									<span className="edit-member-drawer__email-text">—</span>
 								)}
@@ -534,15 +517,14 @@ function EditMemberDrawer({
 				) : (
 					<RolesSelect
 						id="member-role"
-						mode="multiple"
 						roles={availableRoles}
 						loading={rolesLoading}
 						isError={rolesError}
 						error={rolesErrorObj}
 						onRefetch={refetchRoles}
-						value={localRoles}
-						onChange={(roles): void => {
-							setLocalRoles(roles);
+						value={localRole}
+						onChange={(role): void => {
+							setLocalRole(role ?? '');
 							setSaveErrors((prev) =>
 								prev.filter(
 									(err) =>
@@ -550,7 +532,8 @@ function EditMemberDrawer({
 								),
 							);
 						}}
-						placeholder="Select roles"
+						placeholder="Select role"
+						allowClear={false}
 					/>
 				)}
 			</div>

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

@@ -5,9 +5,7 @@ import {
 	useCreateResetPasswordToken,
 	useDeleteUser,
 	useGetResetPasswordToken,
-	useGetRolesByUserID,
 	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -25,16 +23,11 @@ import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
 	useGetUser: jest.fn(),
-	useGetRolesByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
 	useGetResetPasswordToken: jest.fn(),
 	useCreateResetPasswordToken: jest.fn(),
-	getGetRolesByUserIDQueryKey: ({ id }: { id: string }): string[] => [
-		`/api/v2/users/${id}/roles`,
-	],
 }));
 
 jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
@@ -105,7 +98,6 @@ jest.mock('react-use', () => ({
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
 const mockDeleteMutate = jest.fn();
-const mockRemoveMutateAsync = jest.fn();
 const mockCreateTokenMutateAsync = jest.fn();
 
 const showErrorModal = jest.fn();
@@ -194,14 +186,6 @@ describe('EditMemberDrawer', () => {
 			isLoading: false,
 			refetch: jest.fn(),
 		});
-		(useGetRolesByUserID as jest.Mock).mockReturnValue({
-			data: { data: [managedRoles[0]] },
-			isLoading: false,
-		});
-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-			mutateAsync: mockRemoveMutateAsync.mockResolvedValue({}),
-			isLoading: false,
-		});
 		(useUpdateUser as jest.Mock).mockReturnValue({
 			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
@@ -312,7 +296,7 @@ describe('EditMemberDrawer', () => {
 		expect(onClose).not.toHaveBeenCalled();
 	});
 
-	it('adding a new role calls setRole without removing existing ones', async () => {
+	it('selecting a different role calls setRole with the new role name', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const mockSet = jest.fn().mockResolvedValue({});
@@ -324,7 +308,7 @@ describe('EditMemberDrawer', () => {
 
 		renderDrawer({ onComplete });
 
-		// signoz-admin is already selected; add signoz-editor on top
+		// Open the roles dropdown and select signoz-editor
 		await user.click(screen.getByLabelText('Roles'));
 		await user.click(await screen.findByTitle('signoz-editor'));
 
@@ -337,31 +321,34 @@ describe('EditMemberDrawer', () => {
 				pathParams: { id: 'user-1' },
 				data: { name: 'signoz-editor' },
 			});
-			expect(mockRemoveMutateAsync).not.toHaveBeenCalled();
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
 
-	it('deselecting a role calls removeRole with the role id', async () => {
+	it('does not call removeRole when the role is changed', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockSet = jest.fn().mockResolvedValue({});
+
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
+			isLoading: false,
+		});
 
 		renderDrawer({ onComplete });
 
-		// signoz-admin appears as a selected tag — click its remove button to deselect
-		const adminTag = await screen.findByTitle('signoz-admin');
-		const removeBtn = adminTag.querySelector(
-			'.ant-select-selection-item-remove',
-		) as Element;
-		await user.click(removeBtn);
+		// Switch from signoz-admin to signoz-viewer using single-select
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
 		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockRemoveMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1', roleId: managedRoles[0].id },
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-viewer' },
 			});
 			expect(onComplete).toHaveBeenCalled();
 		});

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Modal, Tag } from 'antd';
-import { CircleAlert, X } from '@signozhq/icons';
+import { CircleAlert, X } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -3,7 +3,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { BookOpenText, ChevronsDown } from '@signozhq/icons';
+import { BookOpenText, ChevronsDown } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import APIError from 'types/api/error';
 

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,5 +1,11 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import {
+	DeleteOutlined,
+	MoreOutlined,
+	SaveOutlined,
+	ShareAltOutlined,
+} from '@ant-design/icons';
 import {
 	Button,
 	Col,
@@ -38,7 +44,6 @@ import {
 } from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
-import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
 
 function ExplorerCard({
 	sourcepage,
@@ -154,13 +159,13 @@ function ExplorerCard({
 				key: 'delete',
 				label: <Typography.Text strong>Delete</Typography.Text>,
 				onClick: onDeleteHandler,
-				icon: <Trash2 size="md" />,
+				icon: <DeleteOutlined />,
 			},
 		],
 	};
 
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
-	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
+	const saveButtonIcon = isQueryUpdated ? null : <SaveOutlined />;
 
 	const showSaveView = false;
 
@@ -210,7 +215,11 @@ function ExplorerCard({
 									</Space>
 								)}
 								{isQueryUpdated && (
-									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
+									<Button
+										type="primary"
+										icon={<SaveOutlined />}
+										onClick={onUpdateQueryHandler}
+									>
 										Save changes
 									</Button>
 								)}
@@ -239,10 +248,10 @@ function ExplorerCard({
 											: SaveButtonText.SAVE_VIEW}
 									</Button>
 								</Popover>
-								<Share2 onClick={onCopyUrlHandler} size="md" />
+								<ShareAltOutlined onClick={onCopyUrlHandler} />
 								{viewKey && (
 									<Dropdown trigger={['click']} menu={moreOptionMenu}>
-										<Ellipsis size="md" />
+										<MoreOutlined />
 									</Dropdown>
 								)}
 							</Space>

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import { Trash2 } from '@signozhq/icons';
+import { DeleteOutlined } from '@ant-design/icons';
 import { Col, Row, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -32,7 +32,7 @@ function MenuItemGenerator({
 
 	const { mutateAsync: deleteViewAsync } = useDeleteView(uuid);
 
-	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
+	const onDeleteHandler = (event: MouseEvent<HTMLElement>): void => {
 		event.stopPropagation();
 		deleteViewHandler({
 			deleteViewAsync,
@@ -87,12 +87,7 @@ function MenuItemGenerator({
 				</Col>
 				<Col span={2}>
 					<Typography.Link>
-						<Trash2
-							role="img"
-							aria-label="Delete view"
-							onClick={onDeleteHandler}
-							size="md"
-						/>
+						<DeleteOutlined onClick={onDeleteHandler} />
 					</Typography.Link>
 				</Col>
 			</Row>

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -55,7 +55,7 @@ describe('MenuItemGenerator', () => {
 		);
 
 		const spanElement = screen.getByRole('img', {
-			name: /delete view/i,
+			name: 'delete',
 		});
 
 		expect(spanElement).toBeInTheDocument();

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { Globe, Inbox, SquarePen } from '@signozhq/icons';
+import { Globe, Inbox, SquarePen } from 'lucide-react';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
@@ -105,7 +105,6 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						aria-label="Announcements"
 						icon={<Inbox size={14} />}
 						className="periscope-btn ghost announcements-btn"
 						onClick={(): void => {

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -11,7 +11,7 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
-import { Check, Info, Link2 } from '@signozhq/icons';
+import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getAbsoluteUrl } from 'utils/basePath';

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

@@ -80,10 +80,15 @@ describe('HeaderRightSection', () => {
 		expect(buttons).toHaveLength(3);
 		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
 
-		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /announcements/i }),
-		).toBeInTheDocument();
+		// Check for feedback button by class
+		const feedbackButton = document.querySelector(
+			'.share-feedback-btn[class*="share-feedback-btn"]',
+		);
+		expect(feedbackButton).toBeInTheDocument();
+
+		// Check for announcements button by finding the inbox icon
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).toBeInTheDocument();
 	});
 
 	it('should render only enabled features', () => {
@@ -101,17 +106,22 @@ describe('HeaderRightSection', () => {
 			screen.queryByRole('button', { name: /share/i }),
 		).not.toBeInTheDocument();
 
-		expect(
-			screen.queryByRole('button', { name: /announcements/i }),
-		).not.toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
+		// Check that inbox icon is not present
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).not.toBeInTheDocument();
+
+		// Check that feedback button is present
+		const squarePenIcon = document.querySelector('.lucide-square-pen');
+		expect(squarePenIcon).toBeInTheDocument();
 	});
 
 	it('should open feedback modal and log event when feedback button is clicked', async () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -139,9 +149,9 @@ describe('HeaderRightSection', () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const announcementsButton = screen.getByRole('button', {
-			name: /announcements/i,
-		});
+		const announcementsButton = document
+			.querySelector('.lucide-inbox')
+			?.closest('button');
 		expect(announcementsButton).toBeInTheDocument();
 
 		await user.click(announcementsButton!);
@@ -156,7 +166,9 @@ describe('HeaderRightSection', () => {
 		render(<HeaderRightSection {...defaultProps} />);
 
 		// Open feedback modal
-		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -178,7 +190,9 @@ describe('HeaderRightSection', () => {
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
 
 		// Open feedback modal - should close share modal
-		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
+		const feedbackButton = document
+			.querySelector('.lucide-square-pen')
+			?.closest('button');
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -196,7 +210,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
+		const feedbackButton = document.querySelector('.lucide-square-pen');
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -210,7 +224,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
+		const feedbackButton = document.querySelector('.lucide-square-pen');
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -224,7 +238,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
+		const feedbackButton = document.querySelector('.lucide-square-pen');
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -238,7 +252,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
+		const feedbackButton = document.querySelector('.lucide-square-pen');
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -258,13 +272,11 @@ describe('HeaderRightSection', () => {
 
 		// Verify which buttons are present
 		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /announcements/i }),
-		).toBeInTheDocument();
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).toBeInTheDocument();
 
 		// Verify feedback button is not present
-		expect(
-			screen.queryByRole('button', { name: /feedback/i }),
-		).not.toBeInTheDocument();
+		const feedbackIcon = document.querySelector('.lucide-square-pen');
+		expect(feedbackIcon).not.toBeInTheDocument();
 	});
 });

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -5,7 +5,7 @@ import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
-import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
+import { CheckCircle2, HandPlatter } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 
 import './WaitListFragment.styles.scss';
@@ -62,7 +62,7 @@ export default function WaitlistFragment({
 				loading={isSubmitting}
 				icon={
 					isSuccess ? (
-						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
+						<CheckCircle2 size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -44,11 +44,7 @@ function HttpStatusBadge({
 
 	const color = getStatusCodeColor(numericStatusCode);
 
-	return (
-		<Badge color={color} variant="outline">
-			{statusCode}
-		</Badge>
-	);
+	return <Badge color={color}>{statusCode}</Badge>;
 }
 
 export default HttpStatusBadge;

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { X } from '@signozhq/icons';
+import { X } from 'lucide-react';
 
 import './InputWithLabel.styles.scss';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -10,7 +10,7 @@ import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp, CreditCard, X } from '@signozhq/icons';
+import { CreditCard, HelpCircle, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
@@ -170,7 +170,7 @@ function LaunchChatSupport({
 				<Button
 					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}
-					icon={<CircleHelp size={14} />}
+					icon={<HelpCircle size={14} />}
 				>
 					{buttonText || 'Facing issues?'}
 				</Button>

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
-import { ArrowUpRight } from '@signozhq/icons';
+import { ArrowUpRight } from 'lucide-react';
 import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';

frontend/src/components/LogDetail/index.tsx

@@ -36,17 +36,17 @@ import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
+	BarChart2,
 	Braces,
 	ChevronDown,
 	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
-	Histogram,
 	Table,
 	TextSelect,
 	X,
-} from '@signozhq/icons';
+} from 'lucide-react';
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
@@ -228,7 +228,7 @@ function LogDetailInner({
 			}
 
 			return log?.body || '';
-		} catch {
+		} catch (error) {
 			return log?.body || '';
 		}
 	}, [isBodyJsonQueryEnabled, log?.body]);
@@ -499,7 +499,7 @@ function LogDetailInner({
 							value={VIEW_TYPES.INFRAMETRICS}
 						>
 							<div className="view-title">
-								<Histogram size="md" />
+								<BarChart2 size={14} />
 								Metrics
 							</div>
 						</Radio.Button>
@@ -517,7 +517,7 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									prefix={<Filter size="lg" />}
+									prefix={<Filter size={12} />}
 									onClick={handleFilterVisible}
 								/>
 							</Tooltip>

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,6 +1,7 @@
 import { memo, MouseEventHandler } from 'react';
-import { Link, TextSelect } from '@signozhq/icons';
+import { LinkOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
+import { TextSelect } from 'lucide-react';
 
 import './LogLinesActionButtons.styles.scss';
 
@@ -28,7 +29,7 @@ function LogLinesActionButtons({
 			<Tooltip title="Copy Link">
 				<Button
 					size="small"
-					icon={<Link size={14} />}
+					icon={<LinkOutlined size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
 				/>

frontend/src/components/Logs/RawLogView/styles.ts

@@ -2,7 +2,7 @@ import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
-import { Info } from '@signozhq/icons';
+import { Info } from 'lucide-react';
 import styled from 'styled-components';
 import {
 	getActiveLogBackground,

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -12,9 +12,9 @@ import {
 	ChevronRight,
 	Minus,
 	Plus,
-	SlidersVertical,
+	Sliders,
 	X,
-} from '@signozhq/icons';
+} from 'lucide-react';
 
 import './LogsFormatOptionsMenu.styles.scss';
 
@@ -473,7 +473,7 @@ function LogsFormatOptionsMenu({
 			<Tooltip title="Options">
 				<Button
 					className="periscope-btn ghost"
-					icon={<SlidersVertical size="md" />}
+					icon={<Sliders size={14} />}
 					data-testid="periscope-btn-format-options"
 				/>
 			</Tooltip>

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Check, Copy } from '@signozhq/icons';
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import cx from 'classnames';
 
 import './CodeCopyBtn.scss';
@@ -33,7 +33,7 @@ function CodeCopyBtn({
 	return (
 		<div className={cx('code-copy-btn', isSnippetCopied ? 'copied' : '')}>
 			<button type="button" onClick={handleClick}>
-				{!isSnippetCopied ? <Copy size="md" /> : <Check size="md" />}
+				{!isSnippetCopied ? <CopyOutlined /> : <CheckOutlined />}
 			</button>
 		</div>
 	);

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,21 +1,15 @@
 import { Typography } from '@signozhq/ui/typography';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import {
-	OctagonAlert,
-	Bolt,
-	Check,
-	ChevronDown,
-	ChevronRight,
-	Loader,
-	X,
-} from '@signozhq/icons';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { Loader } from '@signozhq/icons';
 import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { History } from 'history';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { Bolt, Check, OctagonAlert, X } from 'lucide-react';
 import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
@@ -141,10 +135,6 @@ function treeTitleAndKey({
 	};
 }
 
-function renderSwitcherIcon(props: { expanded?: boolean }): JSX.Element {
-	return props.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />;
-}
-
 function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
@@ -258,7 +248,7 @@ function AttributeCheckList({
 					/>
 					<Tree
 						showLine
-						switcherIcon={renderSwitcherIcon}
+						switcherIcon={<CaretDownOutlined />}
 						treeData={treeData}
 						height={450}
 						className="attribute-tree"

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Button } from 'antd';
 import cx from 'classnames';
 import { useOnboardingStatus } from 'hooks/messagingQueue/useOnboardingStatus';
-import { Bolt, FolderTree } from '@signozhq/icons';
+import { Bolt, FolderTree } from 'lucide-react';
 import { MessagingQueueHealthCheckService } from 'pages/MessagingQueues/MessagingQueuesUtils';
 
 import AttributeCheckList from './AttributeCheckList';

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import { Info } from '@signozhq/icons';
+import { Info } from 'lucide-react';
 
 import './MQCommon.styles.scss';
 

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -7,17 +7,9 @@ import React, {
 	useState,
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import {
-	ArrowDown,
-	ArrowLeft,
-	ArrowRight,
-	ArrowUp,
-	ChevronDown,
-	Info,
-	Loader,
-	RefreshCw,
-} from '@signozhq/icons';
+import { DownOutlined, ReloadOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Loader } from '@signozhq/icons';
 import { Button, Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -25,6 +17,7 @@ import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -1704,7 +1697,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader size="md" className="animate-spin" />
+								<Loader className="animate-spin" />
 							</div>
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
@@ -1712,7 +1705,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading && waitingMessage && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader size="md" className="animate-spin" />
+								<Loader className="animate-spin" />
 							</div>
 							<div className="navigation-text" title={waitingMessage}>
 								{waitingMessage}
@@ -1726,9 +1719,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							</div>
 							{onRetry && showRetryButton && (
 								<div className="navigation-icons">
-									<RefreshCw
-										data-testid="retry-button"
-										color={Color.BG_CHERRY_400}
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
 										onClick={(e): void => {
 											e.stopPropagation();
 											onRetry();
@@ -2013,7 +2005,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				popupMatchSelectWidth={dropdownMatchSelectWidth}
 				allowClear={allowClear}
 				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
 				dropdownRender={customDropdownRender}
 				menuItemSelectedIcon={null}
 				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -6,22 +6,16 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import {
-	ArrowDown,
-	ArrowUp,
-	ChevronDown,
-	Info,
-	Loader,
-	RefreshCw,
-	X,
-} from '@signozhq/icons';
+import { CloseOutlined, DownOutlined, ReloadOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Loader } from '@signozhq/icons';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
+import { ArrowDown, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -261,8 +255,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	 */
 	const clearIcon = useCallback(
 		() => (
-			<X
-				size="md"
+			<CloseOutlined
 				onClick={(e): void => {
 					e.stopPropagation();
 					if (onChange) {
@@ -584,7 +577,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader size="md" className="animate-spin" />
+								<Loader className="animate-spin" />
 							</div>
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
@@ -592,7 +585,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading && waitingMessage && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader size="md" className="animate-spin" />
+								<Loader className="animate-spin" />
 							</div>
 							<div className="navigation-text" title={waitingMessage}>
 								{waitingMessage}
@@ -606,10 +599,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							</div>
 							{onRetry && showRetryButton && (
 								<div className="navigation-icons">
-									<RefreshCw
-										data-testid="retry-button"
-										size="md"
-										color={Color.BG_CHERRY_400}
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
 										onClick={(e): void => {
 											e.stopPropagation();
 											onRetry();
@@ -735,7 +726,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			popupMatchSelectWidth={popupMatchSelectWidth}
 			allowClear={allowClear ? { clearIcon } : false}
 			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
 			dropdownRender={customDropdownRender}
 			menuItemSelectedIcon={null}
 			popupClassName={cx('custom-select-dropdown-container', popupClassName)}