feat: add lint rule to enforce subpath imports for Signoz UI components (#11275)

* feat: add lint rule to enforce subpath imports for Signoz UI components

* chore: add auto fix

.github/workflows/build-community.yaml

@@ -54,6 +54,7 @@ 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,6 +87,7 @@ 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,6 +86,7 @@ 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,15 +21,19 @@ 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 && yarn install --frozen-lockfile
+          cd tests/e2e && pnpm install
       - name: fmt
         run: |
-          cd tests/e2e && yarn fmt:check
+          cd tests/e2e && pnpm fmt:check
       - name: lint
         run: |
-          cd tests/e2e && yarn lint
+          cd tests/e2e && pnpm lint
   test:
     strategy:
       fail-fast: false
@@ -54,15 +58,19 @@ 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: yarn-install
+      - name: pnpm-install
         run: |
-          cd tests/e2e && yarn install --frozen-lockfile
+          cd tests/e2e && pnpm install --frozen-lockfile
       - name: playwright-browsers
         run: |
-          cd tests/e2e && yarn playwright install --with-deps ${{ matrix.project }}
+          cd tests/e2e && pnpm playwright install --with-deps ${{ matrix.project }}
       - name: bring-up-stack
         run: |
           cd tests && \
@@ -73,7 +81,7 @@ jobs:
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            yarn playwright test --project=${{ matrix.project }}
+            pnpm playwright test --project=${{ matrix.project }}
       - name: teardown-stack
         if: always()
         run: |

.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@v6
+        with:
+          version: 10
       - name: docker-community
         shell: bash
         run: |

.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@v6
+        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@v6
+        with:
+          version: 10
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/jsci.yaml

@@ -22,6 +22,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      JS_PKG_MANAGER: pnpm
   test:
     if: |
       github.event_name == 'merge_group' ||
@@ -32,6 +33,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      JS_PKG_MANAGER: pnpm
   fmt:
     if: |
       github.event_name == 'merge_group' ||
@@ -42,6 +44,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      JS_PKG_MANAGER: pnpm
   lint:
     if: |
       github.event_name == 'merge_group' ||
@@ -52,6 +55,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      JS_PKG_MANAGER: pnpm
   languages:
     if: |
       github.event_name == 'merge_group' ||
@@ -76,9 +80,13 @@ 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 && 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)

.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.with-web.integration

@@ -3,8 +3,9 @@ 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.25-bookworm
 

docs/api/openapi.yml

@@ -3013,6 +3013,32 @@ 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:
@@ -3028,6 +3054,67 @@ 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:
@@ -5185,19 +5272,17 @@ components:
           $ref: '#/components/schemas/SpantypesSpanMapperConfig'
         enabled:
           type: boolean
-        field_context:
+        fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
         name:
           type: string
       required:
       - name
-      - field_context
+      - fieldContext
       - config
       type: object
     SpantypesPostableSpanMapperGroup:
       properties:
-        category:
-          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
         condition:
           $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
         enabled:
@@ -5206,7 +5291,6 @@ components:
           type: string
       required:
       - name
-      - category
       - condition
       type: object
     SpantypesSpanMapper:
@@ -5220,7 +5304,7 @@ components:
           type: string
         enabled:
           type: boolean
-        field_context:
+        fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
         group_id:
           type: string
@@ -5237,7 +5321,7 @@ components:
       - id
       - group_id
       - name
-      - field_context
+      - fieldContext
       - config
       - enabled
       type: object
@@ -5253,8 +5337,6 @@ components:
       type: object
     SpantypesSpanMapperGroup:
       properties:
-        category:
-          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
         condition:
           $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
         createdAt:
@@ -5279,13 +5361,11 @@ components:
       - id
       - orgId
       - name
-      - category
       - condition
       - enabled
       type: object
-    SpantypesSpanMapperGroupCategory:
-      type: object
     SpantypesSpanMapperGroupCondition:
+      nullable: true
       properties:
         attributes:
           items:
@@ -5329,7 +5409,7 @@ components:
         enabled:
           nullable: true
           type: boolean
-        field_context:
+        fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
       type: object
     SpantypesUpdatableSpanMapperGroup:
@@ -10380,12 +10460,6 @@ paths:
         org.
       operationId: ListSpanMapperGroups
       parameters:
-      - explode: true
-        in: query
-        name: category
-        schema:
-          $ref: '#/components/schemas/SpantypesSpanMapperGroupCategory'
-        style: deepObject
       - in: query
         name: enabled
         schema:
@@ -12182,6 +12256,77 @@ 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,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,7 +94,7 @@ This command:
 
 2. Install dependencies:
    ```bash
-   yarn install
+   pnpm install
    ```
 
 3. Create a `.env` file in this directory:
@@ -105,10 +104,10 @@ This command:
 
 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

@@ -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 `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

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},
+		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController, signoz.Modules.LLMPricingRule},
 	})
 	if err != nil {
 		return nil, err

frontend/.cursor/rules/ui-components-and-icons.mdc

@@ -0,0 +1,19 @@
+---
+description: Prefer SigNoz UI and icons across frontend code
+globs: **/*.{ts,tsx,js,jsx}
+alwaysApply: true
+---
+
+# UI Components and Icons Source of Truth
+
+For all frontend implementation work in this repository:
+
+- Always use UI primitives/components from `@signozhq/ui`.
+- Always use icons from `@signozhq/icons`.
+- Do not introduce new usage of icon libraries directly (for example `lucide-react`) in app code.
+- Do not mix multiple component systems for the same UI surface when an equivalent exists in `@signozhq/ui`.
+
+## Migration guidance
+
+- If touching a file that already uses non-`@signozhq/icons` icons, prefer migrating that file to `@signozhq/icons` as part of the same change when practical.
+- If a required component or icon is missing from SigNoz packages, call this out explicitly in the PR/summary before introducing alternatives.

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/.npmrc

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

frontend/.oxlintrc.json

@@ -291,6 +291,8 @@
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
     "signoz/no-antd-components": "error",
     // Prevents the usage of specific antd components in favor of our lib
+    "signoz/no-signozhq-ui-barrel": "error",
+    // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
     "no-restricted-globals": [
       "error",
       {
@@ -411,7 +413,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": "warn",
+    "jsx-a11y/no-autofocus": "off",
     "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. ```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/__mocks__/createIconsMock.tsx

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,3 @@
+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>/node_modules/@signozhq/icons/dist/index.esm.js',
+		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
+		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
 		'^@signozhq/(?!ui(?:/|$))([^/]+)$':
@@ -46,7 +46,11 @@ const config: Config.InitialOptions = {
 	},
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
-		'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)/)',
+		// 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)',
 	],
 	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';
@@ -28,6 +29,18 @@ 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 'yarn generate:api'`,
+					`* regenerate with 'pnpm 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": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs",
+    "postinstall": "pnpm i18n:generate-hash && (is-ci || pnpm 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,9 +32,10 @@
   "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",
@@ -48,7 +49,7 @@
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/icons": "0.1.0",
+    "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
     "@signozhq/ui": "0.0.18",
     "@tanstack/react-table": "8.21.3",
@@ -97,7 +98,6 @@
     "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,6 +105,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",
@@ -168,8 +169,8 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.21.4",
-    "@commitlint/cli": "^20.4.2",
-    "@commitlint/config-conventional": "^20.4.2",
+    "@commitlint/cli": "20.4.4",
+    "@commitlint/config-conventional": "20.4.4",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.0",
     "@testing-library/jest-dom": "5.16.5",
@@ -179,8 +180,11 @@
     "@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",
@@ -198,11 +202,13 @@
     "@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.20260421.2",
+    "@typescript/native-preview": "7.0.0-dev.20260430.1",
     "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",
@@ -213,7 +219,7 @@
     "lint-staged": "^12.5.0",
     "msw": "1.3.2",
     "npm-run-all": "latest",
-    "orval": "7.18.0",
+    "orval": "7.21.0",
     "oxfmt": "0.47.0",
     "oxlint": "1.62.0",
     "oxlint-tsgolint": "0.22.1",
@@ -230,7 +236,7 @@
     "stylelint-scss": "7.0.0",
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
-    "ts-jest": "29.4.6",
+    "ts-jest": "29.4.9",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
     "use-sync-external-store": "1.6.0",

frontend/plugins/rules/no-signozhq-ui-barrel.mjs

@@ -0,0 +1,210 @@
+/**
+ * Rule: no-signozhq-ui-barrel
+ *
+ * Forbids importing from the `@signozhq/ui` barrel and requires the matching
+ * subpath instead.
+ *
+ * This rule catches:
+ *   import { Typography } from '@signozhq/ui'
+ *   import { Button, toast } from '@signozhq/ui'
+ *   import '@signozhq/ui'
+ *
+ * And expects:
+ *   import { Typography } from '@signozhq/ui/typography'
+ *   import { Button } from '@signozhq/ui/button'
+ *   import { toast } from '@signozhq/ui/sonner'
+ *
+ * Why: the barrel eagerly require()s every component (~90 of them) along with
+ * their Radix/cmdk/motion/react-day-picker dependencies. Under Jest this caused
+ * 5s timeouts and flaky tests after the Antd→@signozhq/ui Typography migration
+ * (#11199). Subpath imports (added in @signozhq/ui@0.0.18) load only what's
+ * used.
+ *
+ * The auto-generated `auto-import-registry.d.ts` is a pure declaration file
+ * that exists solely to nudge VS Code's auto-import indexer; its bare
+ * `import '@signozhq/ui';` is type-only and not emitted, so it is exempt.
+ *
+ * Autofix:
+ *   Rewrites named imports to the matching subpath, splitting one statement
+ *   into multiple when specifiers come from different subpaths. The
+ *   export-name → subpath map is derived lazily from the installed
+ *   `@signozhq/ui` dist `.d.ts` files. Imports we can't classify (namespace,
+ *   default, side-effect, or unknown specifier) are reported without a fix.
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ALLOWED_FILES = new Set(['auto-import-registry.d.ts']);
+
+const PLUGIN_DIR = dirname(fileURLToPath(import.meta.url));
+
+let exportMap = null;
+
+function loadExportMap() {
+	if (exportMap === null) {
+		exportMap = buildExportMap();
+	}
+	return exportMap;
+}
+
+function buildExportMap() {
+	const map = new Map();
+	const root = findSignozUiRoot();
+	if (!root) return map;
+
+	let pkg;
+	try {
+		pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf-8'));
+	} catch {
+		return map;
+	}
+
+	const subpathKeys = Object.keys(pkg.exports || {}).filter((k) => k !== '.');
+	for (const key of subpathKeys) {
+		const subpath = key.replace(/^\.\//, '');
+		const entry = join(root, 'dist', subpath, 'index.d.ts');
+		if (!existsSync(entry)) continue;
+
+		const names = new Set();
+		collectExportedNames(entry, names, new Set());
+		// First-wins: package.json subpath order is the canonical home for
+		// names re-exported across multiple subpaths (e.g. `ToggleColor` is
+		// declared in `toggle` and re-exported from `toggle-group`).
+		for (const name of names) {
+			if (!map.has(name)) map.set(name, subpath);
+		}
+	}
+
+	return map;
+}
+
+function findSignozUiRoot() {
+	let dir = PLUGIN_DIR;
+	while (true) {
+		const candidate = join(dir, 'node_modules', '@signozhq', 'ui');
+		if (existsSync(join(candidate, 'package.json'))) return candidate;
+		const parent = dirname(dir);
+		if (parent === dir) return null;
+		dir = parent;
+	}
+}
+
+function collectExportedNames(filepath, out, visited) {
+	if (visited.has(filepath) || !existsSync(filepath)) return;
+	visited.add(filepath);
+
+	let content;
+	try {
+		content = readFileSync(filepath, 'utf-8');
+	} catch {
+		return;
+	}
+
+	// `export * from './x.js'` / `export type * from './x.js'`
+	for (const m of content.matchAll(
+		/export\s+(?:type\s+)?\*\s+from\s+['"]([^'"]+)['"]/g,
+	)) {
+		collectExportedNames(resolveRelativeDts(filepath, m[1]), out, visited);
+	}
+
+	// `export { Foo, type Bar, Foo as Baz } from '...';` and `export { ... };`
+	for (const m of content.matchAll(/export\s+(?:type\s+)?\{([^}]*)\}/g)) {
+		for (const item of m[1].split(',')) {
+			const cleaned = item.trim().replace(/^type\s+/, '');
+			if (!cleaned) continue;
+			const idMatch = cleaned.match(
+				/^([A-Za-z_$][A-Za-z0-9_$]*)(?:\s+as\s+([A-Za-z_$][A-Za-z0-9_$]*))?$/,
+			);
+			if (idMatch) out.add(idMatch[2] || idMatch[1]);
+		}
+	}
+
+	// `export (declare) const|let|var|function|class|enum|type|interface Foo`
+	for (const m of content.matchAll(
+		/export\s+(?:declare\s+)?(?:const|let|var|function|class|enum|type|interface)\s+([A-Za-z_$][A-Za-z0-9_$]*)/g,
+	)) {
+		out.add(m[1]);
+	}
+}
+
+function resolveRelativeDts(fromFile, spec) {
+	const base = dirname(fromFile);
+	const stripped = spec.replace(/\.(js|mjs|cjs)$/, '');
+	const sibling = join(base, `${stripped}.d.ts`);
+	if (existsSync(sibling)) return sibling;
+	const indexed = join(base, stripped, 'index.d.ts');
+	if (existsSync(indexed)) return indexed;
+	return sibling;
+}
+
+function buildReplacement(node, map) {
+	const specifiers = node.specifiers || [];
+	if (specifiers.length === 0) return null;
+
+	for (const spec of specifiers) {
+		if (spec.type !== 'ImportSpecifier') return null;
+		if (spec.imported?.type !== 'Identifier') return null;
+	}
+
+	const quote = node.source.raw?.[0] === '"' ? '"' : "'";
+	const topLevelType = node.importKind === 'type';
+	const keyword = topLevelType ? 'import type' : 'import';
+
+	const groups = new Map();
+	for (const spec of specifiers) {
+		const importedName = spec.imported.name;
+		const subpath = map.get(importedName);
+		if (!subpath) return null;
+
+		const localName = spec.local.name;
+		const inlineType = !topLevelType && spec.importKind === 'type';
+		let text = inlineType ? 'type ' : '';
+		text += importedName;
+		if (localName !== importedName) text += ` as ${localName}`;
+
+		if (!groups.has(subpath)) groups.set(subpath, []);
+		groups.get(subpath).push(text);
+	}
+
+	const lines = [];
+	for (const [subpath, items] of groups) {
+		lines.push(
+			`${keyword} { ${items.join(', ')} } from ${quote}@signozhq/ui/${subpath}${quote};`,
+		);
+	}
+	return lines.join('\n');
+}
+
+export default {
+	meta: {
+		fixable: 'code',
+	},
+	create(context) {
+		const filename = context.filename || '';
+		const basename = filename.split(/[\\/]/).pop();
+		if (ALLOWED_FILES.has(basename)) {
+			return {};
+		}
+
+		return {
+			ImportDeclaration(node) {
+				if (node.source.value !== '@signozhq/ui') {
+					return;
+				}
+
+				const replacement = buildReplacement(node, loadExportMap());
+				const report = {
+					node: node.source,
+					message:
+						"Do not import from the '@signozhq/ui' barrel. Use the matching subpath instead (e.g. '@signozhq/ui/typography', '@signozhq/ui/button', '@signozhq/ui/sonner'). The barrel eagerly loads ~90 components and slows tests substantially.",
+				};
+				if (replacement) {
+					report.fix = (fixer) => fixer.replaceText(node, replacement);
+				}
+				context.report(report);
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -10,6 +10,7 @@ import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
+import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 
 export default {
 	meta: {
@@ -21,5 +22,6 @@ export default {
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
+		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 	},
 };

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 ! yarn prettify src/api/generated; then
+if ! pnpm 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 ! yarn lint:generated; then
+if ! pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import { useMutation } from 'react-query';
@@ -17,11 +17,13 @@ import type {
 	InframonitoringtypesPostableNamespacesDTO,
 	InframonitoringtypesPostableNodesDTO,
 	InframonitoringtypesPostablePodsDTO,
+	InframonitoringtypesPostableVolumesDTO,
 	ListClusters200,
 	ListHosts200,
 	ListNamespaces200,
 	ListNodes200,
 	ListPods200,
+	ListVolumes200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -448,3 +450,87 @@ 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 export interface AlertmanagertypesChannelDTO {
@@ -5085,6 +5085,34 @@ 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
@@ -5097,6 +5125,74 @@ 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
@@ -7479,7 +7575,7 @@ export interface SpantypesPostableSpanMapperDTO {
 	 * @type boolean
 	 */
 	enabled?: boolean;
-	field_context: SpantypesFieldContextDTO;
+	fieldContext: SpantypesFieldContextDTO;
 	/**
 	 * @type string
 	 */
@@ -7487,7 +7583,6 @@ export interface SpantypesPostableSpanMapperDTO {
 }
 
 export interface SpantypesPostableSpanMapperGroupDTO {
-	category: SpantypesSpanMapperGroupCategoryDTO;
 	condition: SpantypesSpanMapperGroupConditionDTO;
 	/**
 	 * @type boolean
@@ -7514,7 +7609,7 @@ export interface SpantypesSpanMapperDTO {
 	 * @type boolean
 	 */
 	enabled: boolean;
-	field_context: SpantypesFieldContextDTO;
+	fieldContext: SpantypesFieldContextDTO;
 	/**
 	 * @type string
 	 */
@@ -7547,7 +7642,6 @@ export interface SpantypesSpanMapperConfigDTO {
 }
 
 export interface SpantypesSpanMapperGroupDTO {
-	category: SpantypesSpanMapperGroupCategoryDTO;
 	condition: SpantypesSpanMapperGroupConditionDTO;
 	/**
 	 * @type string
@@ -7585,11 +7679,10 @@ export interface SpantypesSpanMapperGroupDTO {
 	updatedBy?: string;
 }
 
-export interface SpantypesSpanMapperGroupCategoryDTO {
-	[key: string]: unknown;
-}
-
-export interface SpantypesSpanMapperGroupConditionDTO {
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperGroupConditionDTO = {
 	/**
 	 * @type array
 	 * @nullable true
@@ -7600,7 +7693,7 @@ export interface SpantypesSpanMapperGroupConditionDTO {
 	 * @nullable true
 	 */
 	resource: string[] | null;
-}
+} | null;
 
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
@@ -7626,7 +7719,7 @@ export interface SpantypesUpdatableSpanMapperDTO {
 	 * @nullable true
 	 */
 	enabled?: boolean | null;
-	field_context?: SpantypesFieldContextDTO;
+	fieldContext?: SpantypesFieldContextDTO;
 }
 
 export interface SpantypesUpdatableSpanMapperGroupDTO {
@@ -9174,10 +9267,6 @@ export type GetMyServiceAccount200 = {
 };
 
 export type ListSpanMapperGroupsParams = {
-	/**
-	 * @description undefined
-	 */
-	category?: SpantypesSpanMapperGroupCategoryDTO;
 	/**
 	 * @type boolean
 	 * @nullable true
@@ -9452,6 +9541,14 @@ 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm 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 'yarn generate:api'
+ * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
 import { useMutation, useQuery } from 'react-query';

frontend/src/api/trace/getTraceV3.tsx

@@ -40,6 +40,7 @@ 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 'lucide-react';
+import { CircleAlert } from '@signozhq/icons';
 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 'lucide-react';
+import { ArrowUpRight } from '@signozhq/icons';
 
 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 'lucide-react';
+import { LifeBuoy } from '@signozhq/icons';
 
 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 { SearchOutlined } from '@ant-design/icons';
+import { Loader, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Loader } from '@signozhq/icons';
 import {
 	Button,
+	Flex,
 	Input,
 	InputRef,
 	Progress,
@@ -108,9 +108,11 @@ const getColumnSearchProps = (
 					type="primary"
 					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
-					icon={<SearchOutlined />}
 				>
-					Search
+					<Flex align="center" gap={4}>
+						<Search size="md" />
+						Search
+					</Flex>
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
@@ -132,8 +134,9 @@ const getColumnSearchProps = (
 		</div>
 	),
 	filterIcon: (filtered: boolean): JSX.Element => (
-		<SearchOutlined
+		<Search
 			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 'lucide-react';
+import { X } from '@signozhq/icons';
 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 'lucide-react';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
 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 'lucide-react';
+import { ArrowDown, ArrowUp } from '@signozhq/icons';
 
 import './ChangePercentagePill.styles.scss';
 

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, Modal } from 'antd';
+import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
+import { Button, Flex, 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';
@@ -116,15 +115,17 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
-								Skip for now
+							<Button type="default" onClick={onClose}>
+								<Flex align="center" gap="4px">
+									<X size="md" />
+									Skip for now
+								</Flex>
 							</Button>
-							<Button
-								type="primary"
-								icon={<CheckOutlined />}
-								onClick={onClickUpdateWorkspace}
-							>
-								Update my workspace
+							<Button type="primary" onClick={onClickUpdateWorkspace}>
+								<Flex align="center" gap="4px">
+									<Check size="md" />
+									Update my workspace
+								</Flex>
 							</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 'lucide-react';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
 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 'lucide-react';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
 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 { BarChart2, ScrollText } from 'lucide-react';
+import { BarChart, ScrollText } from '@signozhq/icons';
 
 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">
-						<BarChart2 size={14} />
+						<BarChart 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 { CalendarIcon, Check, X } from 'lucide-react';
+import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
 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 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from '@signozhq/icons';
 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, TriangleAlertIcon } from 'lucide-react';
+import { Clock, PenLine, TriangleAlert } from '@signozhq/icons';
 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">
-											<TriangleAlertIcon color={Color.BG_CHERRY_400} size={16} />
+											<TriangleAlert 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 'lucide-react';
+import { Check, Search } from '@signozhq/icons';
 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, DownloadIcon, Loader2 } from 'lucide-react';
+import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -140,9 +140,9 @@ export default function DownloadOptionsMenu({
 					className="periscope-btn ghost"
 					icon={
 						isDownloading ? (
-							<Loader2 size={14} className="animate-spin" />
+							<LoaderCircle size={14} className="animate-spin" />
 						) : (
-							<DownloadIcon size={14} />
+							<Download size={14} />
 						)
 					}
 					data-testid={`periscope-btn-download-${dataSource}`}

frontend/src/components/DropDown/DropDown.tsx

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

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 'lucide-react';
+import { CircleAlert, X } from '@signozhq/icons';
 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 'lucide-react';
+import { BookOpenText, ChevronsDown } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import APIError from 'types/api/error';
 

frontend/src/components/ExplorerCard/ExplorerCard.tsx

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

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import { DeleteOutlined } from '@ant-design/icons';
+import { Trash2 } from '@signozhq/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<HTMLElement>): void => {
+	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
 		event.stopPropagation();
 		deleteViewHandler({
 			deleteViewAsync,
@@ -87,7 +87,12 @@ function MenuItemGenerator({
 				</Col>
 				<Col span={2}>
 					<Typography.Link>
-						<DeleteOutlined onClick={onDeleteHandler} />
+						<Trash2
+							role="img"
+							aria-label="Delete view"
+							onClick={onDeleteHandler}
+							size="md"
+						/>
 					</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',
+			name: /delete view/i,
 		});
 
 		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 'lucide-react';
+import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
@@ -105,6 +105,7 @@ 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 'lucide-react';
+import { Check, Info, Link2 } from '@signozhq/icons';
 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,15 +80,10 @@ describe('HeaderRightSection', () => {
 		expect(buttons).toHaveLength(3);
 		expect(screen.getByRole('button', { name: /share/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();
+		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /announcements/i }),
+		).toBeInTheDocument();
 	});
 
 	it('should render only enabled features', () => {
@@ -106,22 +101,17 @@ describe('HeaderRightSection', () => {
 			screen.queryByRole('button', { name: /share/i }),
 		).not.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();
+		expect(
+			screen.queryByRole('button', { name: /announcements/i }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
 	});
 
 	it('should open feedback modal and log event when feedback button is clicked', async () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -149,9 +139,9 @@ describe('HeaderRightSection', () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const announcementsButton = document
-			.querySelector('.lucide-inbox')
-			?.closest('button');
+		const announcementsButton = screen.getByRole('button', {
+			name: /announcements/i,
+		});
 		expect(announcementsButton).toBeInTheDocument();
 
 		await user.click(announcementsButton!);
@@ -166,9 +156,7 @@ describe('HeaderRightSection', () => {
 		render(<HeaderRightSection {...defaultProps} />);
 
 		// Open feedback modal
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -190,9 +178,7 @@ describe('HeaderRightSection', () => {
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
 
 		// Open feedback modal - should close share modal
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -210,7 +196,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -224,7 +210,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -238,7 +224,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -252,7 +238,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -272,11 +258,13 @@ describe('HeaderRightSection', () => {
 
 		// Verify which buttons are present
 		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
-		const inboxIcon = document.querySelector('.lucide-inbox');
-		expect(inboxIcon).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /announcements/i }),
+		).toBeInTheDocument();
 
 		// Verify feedback button is not present
-		const feedbackIcon = document.querySelector('.lucide-square-pen');
-		expect(feedbackIcon).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /feedback/i }),
+		).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 { CheckCircle2, HandPlatter } from 'lucide-react';
+import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 import './WaitListFragment.styles.scss';
@@ -62,7 +62,7 @@ export default function WaitlistFragment({
 				loading={isSubmitting}
 				icon={
 					isSuccess ? (
-						<CheckCircle2 size={16} color={Color.BG_FOREST_500} />
+						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -44,7 +44,11 @@ function HttpStatusBadge({
 
 	const color = getStatusCodeColor(numericStatusCode);
 
-	return <Badge color={color}>{statusCode}</Badge>;
+	return (
+		<Badge color={color} variant="outline">
+			{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 'lucide-react';
+import { X } from '@signozhq/icons';
 
 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 { CreditCard, HelpCircle, X } from 'lucide-react';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 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={<HelpCircle size={14} />}
+					icon={<CircleHelp 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 'lucide-react';
+import { ArrowUpRight } from '@signozhq/icons';
 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 'lucide-react';
+} from '@signozhq/icons';
 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 (error) {
+		} catch {
 			return log?.body || '';
 		}
 	}, [isBodyJsonQueryEnabled, log?.body]);
@@ -499,7 +499,7 @@ function LogDetailInner({
 							value={VIEW_TYPES.INFRAMETRICS}
 						>
 							<div className="view-title">
-								<BarChart2 size={14} />
+								<Histogram size="md" />
 								Metrics
 							</div>
 						</Radio.Button>
@@ -517,7 +517,7 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									prefix={<Filter size={12} />}
+									prefix={<Filter size="lg" />}
 									onClick={handleFilterVisible}
 								/>
 							</Tooltip>

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

@@ -1,7 +1,6 @@
 import { memo, MouseEventHandler } from 'react';
-import { LinkOutlined } from '@ant-design/icons';
+import { Link, TextSelect } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
-import { TextSelect } from 'lucide-react';
 
 import './LogLinesActionButtons.styles.scss';
 
@@ -29,7 +28,7 @@ function LogLinesActionButtons({
 			<Tooltip title="Copy Link">
 				<Button
 					size="small"
-					icon={<LinkOutlined size={14} />}
+					icon={<Link 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 'lucide-react';
+import { Info } from '@signozhq/icons';
 import styled from 'styled-components';
 import {
 	getActiveLogBackground,

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { Check, Copy } from '@signozhq/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 ? <CopyOutlined /> : <CheckOutlined />}
+				{!isSnippetCopied ? <Copy size="md" /> : <Check size="md" />}
 			</button>
 		</div>
 	);

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,15 +1,21 @@
 import { Typography } from '@signozhq/ui/typography';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { CaretDownOutlined } from '@ant-design/icons';
-import { Loader } from '@signozhq/icons';
+import {
+	OctagonAlert,
+	Bolt,
+	Check,
+	ChevronDown,
+	ChevronRight,
+	Loader,
+	X,
+} 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,
@@ -135,6 +141,10 @@ 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,
@@ -248,7 +258,7 @@ function AttributeCheckList({
 					/>
 					<Tree
 						showLine
-						switcherIcon={<CaretDownOutlined />}
+						switcherIcon={renderSwitcherIcon}
 						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 'lucide-react';
+import { Bolt, FolderTree } from '@signozhq/icons';
 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 'lucide-react';
+import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
 

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -7,9 +7,17 @@ import React, {
 	useState,
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import { DownOutlined, ReloadOutlined } from '@ant-design/icons';
+import {
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	ChevronDown,
+	Info,
+	Loader,
+	RefreshCw,
+} from '@signozhq/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';
@@ -17,7 +25,6 @@ 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';
 
@@ -1697,7 +1704,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader className="animate-spin" />
+								<Loader size="md" className="animate-spin" />
 							</div>
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
@@ -1705,7 +1712,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading && waitingMessage && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<Loader className="animate-spin" />
+								<Loader size="md" className="animate-spin" />
 							</div>
 							<div className="navigation-text" title={waitingMessage}>
 								{waitingMessage}
@@ -1719,8 +1726,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							</div>
 							{onRetry && showRetryButton && (
 								<div className="navigation-icons">
-									<ReloadOutlined
-										twoToneColor={Color.BG_CHERRY_400}
+									<RefreshCw
+										data-testid="retry-button"
+										color={Color.BG_CHERRY_400}
 										onClick={(e): void => {
 											e.stopPropagation();
 											onRetry();
@@ -2005,7 +2013,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				popupMatchSelectWidth={dropdownMatchSelectWidth}
 				allowClear={allowClear}
 				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
 				dropdownRender={customDropdownRender}
 				menuItemSelectedIcon={null}
 				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}