feat(vite): migrate from webpack

* chore(frontend): remove stale eslint-disable comments

* chore(frontend): remove stale eslint-disable comments

.github/workflows/build-community.yaml

@@ -56,6 +56,7 @@ jobs:
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
+      NODE_VERSION: '24'
   go-build:
     uses: signoz/primus.workflows/.github/workflows/go-build.yaml@main
     needs: [prepare, js-build]

.github/workflows/build-enterprise.yaml

@@ -58,19 +58,19 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
-          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
-          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
-          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
-          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
-          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
+          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
+          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
+          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:
@@ -89,6 +89,7 @@ jobs:
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
+      NODE_VERSION: '24'
   go-build:
     uses: signoz/primus.workflows/.github/workflows/go-build.yaml@main
     needs: [prepare, js-build]

.github/workflows/build-staging.yaml

@@ -64,12 +64,12 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
-          echo 'TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
-          echo 'TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
-          echo 'APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
+          echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:
@@ -88,6 +88,7 @@ jobs:
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
+      NODE_VERSION: '24'
   go-build:
     uses: signoz/primus.workflows/.github/workflows/go-build.yaml@main
     needs: [prepare, js-build]

.github/workflows/goci.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: node-install
         uses: actions/setup-node@v5
         with:
-          node-version: "22"
+          node-version: "24""
       - name: docker-community
         shell: bash
         run: |
@@ -96,7 +96,7 @@ jobs:
       - name: node-install
         uses: actions/setup-node@v5
         with:
-          node-version: "22"
+          node-version: "24""
       - name: install-frontend
         run: cd frontend && yarn install
       - name: generate-api-clients

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

@@ -24,7 +24,7 @@ jobs:
       - name: node-setup
         uses: actions/setup-node@v5
         with:
-          node-version: "22"
+          node-version: "24""
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/gor-signoz.yaml

@@ -24,23 +24,23 @@ jobs:
       - name: dotenv-frontend
         working-directory: frontend
         run: |
-          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
-          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
-          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
-          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
-          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
-          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
-          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
-          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
-          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
-          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
-          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
-          echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
+          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
+          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
+          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
+          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
+          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
+          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
+          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
       - name: node-setup
         uses: actions/setup-node@v5
         with:
-          node-version: "22"
+          node-version: "24""
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/jsci.yaml

@@ -20,7 +20,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v5
         with:
-          node-version: "22"
+          node-version: "24"
       - name: install
         run: cd frontend && yarn install
       - name: tsc
@@ -34,6 +34,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      NODE_VERSION: '24'
   test:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -43,6 +44,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      NODE_VERSION: '24'
   fmt:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -52,6 +54,7 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      NODE_VERSION: '24'
   lint:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -61,3 +64,4 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+      NODE_VERSION: '24'

Makefile

@@ -238,4 +238,4 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"
-	@mockery --config .mockery.yml
+	@mockery --config .mockery.yml

conf/example.yaml

@@ -320,3 +320,4 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
+      id: 00000000-0000-0000-0000-000000000000

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.1
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.1
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.1
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.1
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/otel-collector-config.yaml

@@ -82,6 +82,12 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
 service:
   telemetry:
     logs:
@@ -93,19 +99,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, signozmeter]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, signozmeter]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.1}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.1}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/otel-collector-config.yaml

@@ -82,6 +82,12 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
 service:
   telemetry:
     logs:
@@ -93,19 +99,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, signozmeter]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, signozmeter]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, signozmeter]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

docs/api/openapi.yml

@@ -842,6 +842,17 @@ components:
       - temporality
       - isMonotonic
       type: object
+    MetrictypesComparisonSpaceAggregationParam:
+      properties:
+        operator:
+          type: string
+        threshold:
+          format: double
+          type: number
+      required:
+      - operator
+      - threshold
+      type: object
     MetrictypesSpaceAggregation:
       enum:
       - sum
@@ -1138,6 +1149,8 @@ components:
       type: object
     Querybuildertypesv5MetricAggregation:
       properties:
+        comparisonSpaceAggregationParam:
+          $ref: '#/components/schemas/MetrictypesComparisonSpaceAggregationParam'
         metricName:
           type: string
         reduceTo:

ee/query-service/rules/anomaly.go

@@ -26,7 +26,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/utils/times"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/timestamp"
 
-	"github.com/SigNoz/signoz/pkg/query-service/formatter"
+	"github.com/SigNoz/signoz/pkg/units"
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 
@@ -335,7 +335,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 
 	prevState := r.State()
 
-	valueFormatter := formatter.FromUnit(r.Unit())
+	valueFormatter := units.FormatterFromUnit(r.Unit())
 
 	var res ruletypes.Vector
 	var err error

frontend/.babelrc

@@ -1,16 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env",
-		["@babel/preset-react", { "runtime": "automatic" }],
-		"@babel/preset-typescript"
-	],
-	"plugins": [
-		"react-hot-loader/babel",
-		"@babel/plugin-proposal-class-properties"
-	],
-	"env": {
-		"production": {
-			"presets": ["minify"]
-		}
-	}
-}

frontend/.eslintrc.cjs

@@ -7,7 +7,6 @@ module.exports = {
 		browser: true,
 		es2021: true,
 		node: true,
-		'jest/globals': true,
 	},
 	extends: [
 		'eslint:recommended',
@@ -21,6 +20,7 @@ module.exports = {
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		project: './tsconfig.json',
+		tsconfigRootDir: __dirname,
 		ecmaFeatures: {
 			jsx: true,
 		},
@@ -33,7 +33,7 @@ module.exports = {
 		'simple-import-sort', // Auto-sort imports
 		'react-hooks', // React Hooks rules
 		'prettier', // Code formatting
-		'jest', // Jest test rules
+		// 'jest', // Disabled due to old version of eslint
 		'jsx-a11y', // Accessibility rules
 		'import', // Import/export linting
 		'sonarjs', // Code quality/complexity
@@ -78,7 +78,7 @@ module.exports = {
 		// TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
 		'@typescript-eslint/no-empty-function': 'off', // Disallows empty function bodies
 		'@typescript-eslint/no-var-requires': 'error', // Disallows require() in TypeScript (use import instead)
-		'@typescript-eslint/ban-ts-comment': 'off', // Allows @ts-ignore comments (sometimes needed for third-party libs)
+		'@typescript-eslint/ban-ts-comment': 'warn', // Allows @ts-ignore comments (sometimes needed for third-party libs)
 		'no-empty-function': 'off', // Disabled in favor of TypeScript version above
 
 		// React rules
@@ -146,6 +146,49 @@ module.exports = {
 
 		// SonarJS - code quality and complexity
 		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
+
+		// State management governance
+		// Approved patterns: Zustand, nuqs (URL state), react-query (server state), useState/useRef/useReducer, localStorage/sessionStorage for simple cases
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: [
+					{
+						name: 'redux',
+						message:
+							'[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
+					},
+					{
+						name: 'react-redux',
+						message:
+							'[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
+					},
+					{
+						name: 'xstate',
+						message:
+							'[State mgmt] xstate is deprecated. Migrate to Zustand or react-query.',
+					},
+					{
+						name: '@xstate/react',
+						message:
+							'[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query.',
+					},
+					{
+						// Restrict React Context — useState/useRef/useReducer remain allowed
+						name: 'react',
+						importNames: ['createContext', 'useContext'],
+						message:
+							'[State mgmt] React Context is deprecated. Migrate shared state to Zustand.',
+					},
+					{
+						// immer used standalone as a store pattern is deprecated; Zustand bundles it internally
+						name: 'immer',
+						message:
+							'[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead.',
+					},
+				],
+			},
+		],
 	},
 	overrides: [
 		{

frontend/.nvmrc

@@ -1 +1 @@
-16.15.0
+24

frontend/__mocks__/env.ts

@@ -0,0 +1,4 @@
+export const ENVIRONMENT = {
+	baseURL: process.env.VITE_FRONTEND_API_ENDPOINT || '',
+	wsURL: process.env.VITE_WEBSOCKET_API_ENDPOINT || '',
+};

frontend/babel.config.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	presets: [
+		['@babel/preset-env', { modules: 'auto' }],
+		['@babel/preset-react', { runtime: 'automatic' }],
+		['@babel/preset-typescript'],
+	],
+	plugins: ['@babel/plugin-proposal-class-properties'],
+	env: {
+		test: {
+			presets: [
+				[
+					'@babel/preset-env',
+					{ modules: 'commonjs', targets: { node: 'current' } },
+				],
+				['@babel/preset-react', { runtime: 'automatic' }],
+				['@babel/preset-typescript'],
+			],
+		},
+	},
+};

frontend/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-	presets: [
-		['@babel/preset-env', { targets: { node: 'current' } }],
-		'@babel/preset-typescript',
-	],
-};

frontend/bundlesize.config.json

@@ -1,8 +0,0 @@
-{
-	"files": [
-		{
-			"path": "./build/**.js",
-			"maxSize": "1.2MB"
-		}
-	]
-}

frontend/example.env

@@ -1,8 +1,8 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-FRONTEND_API_ENDPOINT="http://localhost:8080/"
-PYLON_APP_ID="pylon-app-id"
-APPCUES_APP_ID="appcess-app-id"
-PYLON_IDENTITY_SECRET="pylon-identity-secret"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_PYLON_APP_ID="pylon-app-id"
+VITE_APPCUES_APP_ID="appcess-app-id"
+VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
-CI="1"
+CI="1"

frontend/index.html

@@ -1,127 +1,119 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta
-			http-equiv="Cache-Control"
-			content="no-cache, no-store, must-revalidate, max-age: 0"
-		/>
-		<meta http-equiv="Pragma" content="no-cache" />
-		<meta http-equiv="Expires" content="0" />
-
-		<!-- Preconnect to CDNs -->
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link rel="preconnect" href="https://cdn.vercel.com" crossorigin />
-
-		<link
-			href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
-			rel="stylesheet"
-		/>
-
-		<title data-react-helmet="true">
-			Open source Observability platform | SigNoz
-		</title>
-		<meta
-			data-react-helmet="true"
-			property="og:title"
-			content="Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:image"
-			content="/images/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image:alt"
-			content="Image for Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:card"
-			content="summary_large_image"
-		/>
-		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
-		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
-		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
-
-		<% if (htmlWebpackPlugin.options.templateParameters.preloadFonts) { %> <%
-		htmlWebpackPlugin.options.templateParameters.preloadFonts.forEach(function(font)
-		{ %>
-		<link
-			rel="preload"
-			href="<%= font.href %>"
-			as="<%= font.as %>"
-			type="<%= font.type %>"
-			crossorigin="<%= font.crossorigin %>"
-		/>
-		<% }); %> <% } %>
-	</head>
-	<body data-theme="default">
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-
-		<script>
-			const PYLON_APP_ID = '<%= htmlWebpackPlugin.options.PYLON_APP_ID %>';
-			(function () {
-				var e = window;
-				var t = document;
-				var n = function () {
-					n.e(arguments);
-				};
-				n.q = [];
-				n.e = function (e) {
-					n.q.push(e);
-				};
-				e.Pylon = n;
-				var r = function () {
-					var e = t.createElement('script');
-					e.setAttribute('type', 'text/javascript');
-					e.setAttribute('async', 'true');
-					e.setAttribute(
-						'src',
-						'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
-					);
-					var n = t.getElementsByTagName('script')[0];
-					n.parentNode.insertBefore(e, n);
-				};
-				if (t.readyState === 'complete') {
-					r();
-				} else if (e.addEventListener) {
-					e.addEventListener('load', r, false);
-				}
-			})();
-		</script>
-		<script type="text/javascript">
-			window.AppcuesSettings = { enableURLDetection: true };
-		</script>
-		<script>
-			const APPCUES_APP_ID = '<%= htmlWebpackPlugin.options.APPCUES_APP_ID %>';
-			(function (d, t) {
-				var a = d.createElement(t);
-				a.async = 1;
-				a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
-				var s = d.getElementsByTagName(t)[0];
-				s.parentNode.insertBefore(a, s);
-			})(document, 'script');
-		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			http-equiv="Cache-Control"
+			content="no-cache, no-store, must-revalidate, max-age: 0"
+		/>
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link rel="preconnect" href="https://cdn.vercel.com" crossorigin />
+
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+			rel="stylesheet"
+		/>
+
+		<title data-react-helmet="true">
+			Open source Observability platform | SigNoz
+		</title>
+		<meta
+			data-react-helmet="true"
+			property="og:title"
+			content="Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:image"
+			content="/images/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image"
+			content="/images/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image:alt"
+			content="Image for Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:card"
+			content="summary_large_image"
+		/>
+		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
+		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
+		<meta name="robots" content="noindex" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+	</head>
+	<body data-theme="default">
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+
+		<script>
+			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
+			if (PYLON_APP_ID) {
+				(function () {
+					var e = window;
+					var t = document;
+					var n = function () {
+						n.e(arguments);
+					};
+					n.q = [];
+					n.e = function (e) {
+						n.q.push(e);
+					};
+					e.Pylon = n;
+					var r = function () {
+						var e = t.createElement('script');
+						e.setAttribute('type', 'text/javascript');
+						e.setAttribute('async', 'true');
+						e.setAttribute(
+							'src',
+							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
+						);
+						var n = t.getElementsByTagName('script')[0];
+						n.parentNode.insertBefore(e, n);
+					};
+					if (t.readyState === 'complete') {
+						r();
+					} else if (e.addEventListener) {
+						e.addEventListener('load', r, false);
+					}
+				})();
+			}
+		</script>
+		<script type="text/javascript">
+			window.AppcuesSettings = { enableURLDetection: true };
+		</script>
+		<script>
+			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
+			if (APPCUES_APP_ID) {
+				(function (d, t) {
+					var a = d.createElement(t);
+					a.async = 1;
+					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
+					var s = d.getElementsByTagName(t)[0];
+					s.parentNode.insertBefore(a, s);
+				})(document, 'script');
+			}
+		</script>
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<script type="module" src="./src/index.tsx"></script>
+	</body>
+</html>

frontend/jest.config.ts

@@ -17,27 +17,47 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/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/sonner$':
+			'<rootDir>/node_modules/@signozhq/sonner/dist/sonner.js',
+		'^@signozhq/button$':
+			'<rootDir>/node_modules/@signozhq/button/dist/button.js',
+		'^@signozhq/calendar$':
+			'<rootDir>/node_modules/@signozhq/calendar/dist/calendar.js',
+		'^@signozhq/badge': '<rootDir>/node_modules/@signozhq/badge/dist/badge.js',
+		'^@signozhq/checkbox':
+			'<rootDir>/node_modules/@signozhq/checkbox/dist/checkbox.js',
+		'^@signozhq/switch': '<rootDir>/node_modules/@signozhq/switch/dist/switch.js',
+		'^@signozhq/callout':
+			'<rootDir>/node_modules/@signozhq/callout/dist/callout.js',
+		'^@signozhq/combobox':
+			'<rootDir>/node_modules/@signozhq/combobox/dist/combobox.js',
+		'^@signozhq/input': '<rootDir>/node_modules/@signozhq/input/dist/input.js',
+		'^@signozhq/command':
+			'<rootDir>/node_modules/@signozhq/command/dist/command.js',
+		'^@signozhq/radio-group':
+			'<rootDir>/node_modules/@signozhq/radio-group/dist/radio-group.js',
 	},
-	globals: {
-		extensionsToTreatAsEsm: ['.ts'],
-		'ts-jest': {
-			useESM: true,
-			isolatedModules: true,
-			tsconfig: '<rootDir>/tsconfig.jest.json',
-		},
-	},
+	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
 	preset: 'ts-jest/presets/js-with-ts-esm',
 	transform: {
-		'^.+\\.(ts|tsx)?$': 'ts-jest',
+		'^.+\\.(ts|tsx)?$': [
+			'ts-jest',
+			{
+				useESM: true,
+				tsconfig: '<rootDir>/tsconfig.jest.json',
+			},
+		],
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
 	],
-	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
+	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',

frontend/package.json

@@ -2,11 +2,12 @@
 	"name": "frontend",
 	"version": "1.0.0",
 	"description": "",
-	"main": "webpack.config.js",
+	"type": "module",
 	"scripts": {
-		"i18n:generate-hash": "node ./i18-generate-hash.js",
-		"dev": "cross-env NODE_ENV=development webpack serve --progress",
-		"build": "webpack --config=webpack.config.prod.js --progress",
+		"i18n:generate-hash": "node ./i18-generate-hash.cjs",
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview",
 		"prettify": "prettier --write .",
 		"fmt": "prettier --check .",
 		"lint": "eslint ./src",
@@ -14,7 +15,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.js",
+		"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",
@@ -22,7 +23,7 @@
 		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
 	},
 	"engines": {
-		"node": ">=16.15.0"
+		"node": ">=24.0.0"
 	},
 	"author": "",
 	"license": "ISC",
@@ -43,7 +44,7 @@
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
-		"@sentry/webpack-plugin": "2.22.6",
+		"@sentry/vite-plugin": "2.22.6",
 		"@signozhq/badge": "0.0.2",
 		"@signozhq/button": "0.0.2",
 		"@signozhq/calendar": "0.0.0",
@@ -71,6 +72,7 @@
 		"@visx/hierarchy": "3.12.0",
 		"@visx/shape": "3.5.0",
 		"@visx/tooltip": "3.3.0",
+		"@vitejs/plugin-react": "5.1.4",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
@@ -88,35 +90,30 @@
 		"chartjs-plugin-annotation": "^1.4.0",
 		"classnames": "2.3.2",
 		"color": "^4.2.1",
-		"color-alpha": "1.1.3",
+		"color-alpha": "2.0.0",
 		"cross-env": "^7.0.3",
 		"crypto-js": "4.2.0",
-		"css-loader": "5.0.0",
-		"css-minimizer-webpack-plugin": "5.0.1",
 		"d3-hierarchy": "3.1.2",
 		"dayjs": "^1.10.7",
 		"dompurify": "3.2.4",
 		"dotenv": "8.2.0",
 		"event-source-polyfill": "1.0.31",
 		"eventemitter3": "5.0.1",
-		"file-loader": "6.1.1",
 		"fontfaceobserver": "2.3.0",
 		"history": "4.10.1",
-		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.5",
 		"http-status-codes": "2.3.0",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
 		"immer": "11.1.3",
-		"jest": "^27.5.1",
+		"jest": "30.2.0",
 		"js-base64": "^3.7.2",
-		"less": "^4.1.2",
-		"less-loader": "^10.2.0",
 		"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",
 		"overlayscrollbars": "^2.8.1",
 		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
@@ -130,7 +127,7 @@
 		"react-dom": "18.2.0",
 		"react-drag-listview": "2.0.0",
 		"react-error-boundary": "4.0.11",
-		"react-force-graph": "^1.43.0",
+		"react-force-graph-2d": "^1.29.1",
 		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
@@ -147,22 +144,20 @@
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"rehype-raw": "7.0.0",
+		"rollup-plugin-visualizer": "7.0.0",
 		"rrule": "2.8.1",
 		"stream": "^0.0.2",
-		"style-loader": "1.3.0",
 		"styled-components": "^5.3.11",
-		"terser-webpack-plugin": "^5.2.5",
 		"timestamp-nano": "^1.0.0",
 		"ts-node": "^10.2.1",
-		"tsconfig-paths-webpack-plugin": "^3.5.1",
-		"typescript": "^4.0.5",
+		"typescript": "5.9.3",
 		"uplot": "1.6.31",
 		"uuid": "^8.3.2",
+		"vite": "npm:rolldown-vite@7.3.1",
+		"vite-plugin-html": "3.2.2",
 		"web-vitals": "^0.2.4",
-		"webpack": "5.94.0",
-		"webpack-dev-server": "^5.2.1",
-		"webpack-retry-chunk-load-plugin": "3.1.1",
-		"xstate": "^4.31.0"
+		"xstate": "^4.31.0",
+		"zustand": "5.0.11"
 	},
 	"browserslist": {
 		"production": [
@@ -183,21 +178,19 @@
 		"@babel/preset-env": "^7.22.14",
 		"@babel/preset-react": "^7.12.13",
 		"@babel/preset-typescript": "^7.21.4",
-		"@commitlint/cli": "^16.3.0",
-		"@commitlint/config-conventional": "^16.2.4",
+		"@commitlint/cli": "^20.4.2",
+		"@commitlint/config-conventional": "^20.4.2",
 		"@faker-js/faker": "9.3.0",
-		"@jest/globals": "^27.5.1",
+		"@jest/globals": "30.2.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",
 		"@types/color": "^3.0.3",
-		"@types/compression-webpack-plugin": "^9.0.0",
-		"@types/copy-webpack-plugin": "^8.0.1",
 		"@types/crypto-js": "4.2.2",
 		"@types/dompurify": "^2.4.0",
 		"@types/event-source-polyfill": "^1.0.0",
 		"@types/fontfaceobserver": "2.1.0",
-		"@types/jest": "^27.5.1",
+		"@types/jest": "30.0.0",
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
@@ -216,18 +209,14 @@
 		"@types/redux-mock-store": "1.0.4",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
-		"@types/webpack": "^5.28.0",
-		"@types/webpack-dev-server": "^4.7.2",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
 		"autoprefixer": "10.4.19",
 		"babel-plugin-styled-components": "^1.12.0",
-		"compression-webpack-plugin": "9.0.0",
-		"copy-webpack-plugin": "^11.0.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-jest": "^26.9.0",
+		"eslint-plugin-jest": "^29.15.0",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-react": "^7.24.0",
@@ -235,32 +224,34 @@
 		"eslint-plugin-simple-import-sort": "^7.0.0",
 		"eslint-plugin-sonarjs": "^0.12.0",
 		"husky": "^7.0.4",
-		"image-minimizer-webpack-plugin": "^4.0.0",
 		"imagemin": "^8.0.1",
 		"imagemin-svgo": "^10.0.1",
 		"is-ci": "^3.0.1",
-		"jest-styled-components": "^7.0.8",
+		"jest-environment-jsdom": "29.7.0",
+		"jest-environment-node": "29.7.0",
+		"jest-styled-components": "^7.2.0",
 		"lint-staged": "^12.5.0",
 		"msw": "1.3.2",
 		"npm-run-all": "latest",
 		"orval": "7.18.0",
 		"portfinder-sync": "^0.0.2",
-		"postcss": "8.4.38",
+		"postcss": "8.5.6",
 		"prettier": "2.2.1",
 		"prop-types": "15.8.1",
-		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",
-		"react-hot-loader": "^4.13.0",
 		"react-resizable": "3.0.4",
 		"redux-mock-store": "1.5.4",
-		"sass": "1.66.1",
-		"sass-loader": "13.3.2",
-		"sharp": "^0.33.4",
-		"ts-jest": "^27.1.5",
+		"sass": "1.97.3",
+		"sharp": "0.34.5",
+		"svgo": "4.0.0",
+		"ts-api-utils": "2.4.0",
+		"ts-jest": "29.4.6",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "5.2.0",
-		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^5.1.4"
+		"vite-plugin-checker": "0.12.0",
+		"vite-plugin-compression": "0.5.1",
+		"vite-plugin-image-optimizer": "2.0.3",
+		"vite-tsconfig-paths": "6.1.1"
 	},
 	"lint-staged": {
 		"*.(js|jsx|ts|tsx)": [
@@ -285,6 +276,7 @@
 		"form-data": "4.0.4",
 		"brace-expansion": "^2.0.2",
 		"on-headers": "^1.1.0",
-		"tmp": "0.2.4"
+		"tmp": "0.2.4",
+		"vite": "npm:rolldown-vite@7.3.1"
 	}
 }

frontend/scripts/update-registry.cjs

@@ -27,7 +27,7 @@ const signozPackages = Object.keys(allDeps).filter((dep) =>
 const fileContent = `// -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
+// This file is generated by scripts/update-registry.cjs automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import

frontend/src/AppRoutes/Private.tsx

@@ -297,7 +297,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
 	// NOTE: disabling this rule as there is no need to have div
-	// eslint-disable-next-line react/jsx-no-useless-fragment
 	return <>{children}</>;
 }
 

frontend/src/AppRoutes/index.tsx

@@ -218,13 +218,9 @@ function App(): JSX.Element {
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/')
 		) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			window.Pylon('hideChatBubble');
+			window.Pylon?.('hideChatBubble');
 		} else {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			window.Pylon('showChatBubble');
+			window.Pylon?.('showChatBubble');
 		}
 	}, [pathname]);
 

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -44,7 +44,6 @@ const dashboardVariablesQuery = async (
 	} catch (error) {
 		const formattedError = ErrorResponseHandler(error as AxiosError);
 
-		// eslint-disable-next-line @typescript-eslint/no-throw-literal
 		throw { message: 'Error fetching data', details: formattedError };
 	}
 };

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import axios from 'api';
 
 import { getFieldKeys } from '../getFieldKeys';

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import axios from 'api';
 
 import { getFieldValues } from '../getFieldValues';

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

@@ -29,10 +29,6 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all auth domains
  * @summary List all auth domains

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

@@ -26,10 +26,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * Checks if the authenticated user has permissions for given transactions
  * @summary Check permissions

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

@@ -35,10 +35,6 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
  * @summary Delete public dashboard

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

@@ -18,10 +18,6 @@ import type { ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the supported features and their details
  * @summary Get features

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

@@ -24,10 +24,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns field keys
  * @summary Get field keys

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

@@ -37,10 +37,6 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the ingestion keys for a workspace
  * @summary Get ingestion keys for workspace

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

@@ -21,10 +21,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns global config
  * @summary Get global config

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

@@ -25,10 +25,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoints promotes and indexes paths
  * @summary Promote and index paths

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

@@ -42,10 +42,6 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns a list of distinct metric names within the specified time range
  * @summary List metric names

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

@@ -25,10 +25,6 @@ import type {
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the organization I belong to
  * @summary Get my organization

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

@@ -32,10 +32,6 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all org preferences
  * @summary List org preferences

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

@@ -20,10 +20,6 @@ import type {
 	ReplaceVariables200,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
  * @summary Query range

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

@@ -35,10 +35,6 @@ import type {
 	RoletypesPostableRoleDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all roles
  * @summary List roles

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

@@ -33,10 +33,6 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint creates a session for a user using google callback
  * @summary Create session by google callback

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

@@ -1006,6 +1006,18 @@ export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	unit: string;
 }
 
+export interface MetrictypesComparisonSpaceAggregationParamDTO {
+	/**
+	 * @type string
+	 */
+	operator: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	threshold: number;
+}
+
 export enum MetrictypesSpaceAggregationDTO {
 	sum = 'sum',
 	avg = 'avg',
@@ -1367,6 +1379,7 @@ export interface Querybuildertypesv5LogAggregationDTO {
 }
 
 export interface Querybuildertypesv5MetricAggregationDTO {
+	comparisonSpaceAggregationParam?: MetrictypesComparisonSpaceAggregationParamDTO;
 	/**
 	 * @type string
 	 */

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

@@ -51,10 +51,6 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint changes the password by id
  * @summary Change password

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

@@ -26,10 +26,6 @@ import type {
 	ZeustypesPostableProfileDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint gets the host info from zeus.
  * @summary Get host info from Zeus.

frontend/src/api/index.ts

@@ -1,6 +1,4 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-param-reassign */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { QueryClient } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import post from 'api/v2/sessions/rotate/post';

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -50,6 +50,7 @@ export interface HostListResponse {
 		total: number;
 		sentAnyHostMetricsData: boolean;
 		isSendingK8SAgentMetrics: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -1,26 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
-
-export const getMetricMetadata = async (
-	metricName: string,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
-	try {
-		const encodedMetricName = encodeURIComponent(metricName);
-		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
-			signal,
-			headers,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import { SuccessResponse } from 'types/api';
 import {
 	MetricRangePayloadV5,

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -274,7 +274,6 @@ function convertDistributionData(
 	distributionData: DistributionData,
 	legendMap: Record<string, string>,
 ): any {
-	// eslint-disable-line @typescript-eslint/no-explicit-any
 	// Convert V5 distribution format to legacy histogram format
 	return {
 		...distributionData,
@@ -415,7 +414,6 @@ export function convertV5ResponseToLegacy(
 	if (legacyResponse.payload?.data?.result) {
 		legacyResponse.payload.data.result = legacyResponse.payload.data.result.map(
 			(queryData: any) => {
-				// eslint-disable-line @typescript-eslint/no-explicit-any
 				const newQueryData = cloneDeep(queryData);
 				newQueryData.legend = legendMap[queryData.queryName];
 

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -1,10 +1,10 @@
-/* eslint-disable sonarjs/no-duplicate-string, simple-import-sort/imports, @typescript-eslint/indent, no-mixed-spaces-and-tabs */
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
 } from 'types/api/queryBuilder/queryBuilderData';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import {
 	ClickHouseQuery,
 	LogAggregation,
@@ -17,7 +17,6 @@ import {
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
 

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -308,7 +308,7 @@ export function createAggregation(
  * Converts query builder data to V5 builder queries
  */
 export function convertBuilderQueriesToV5(
-	builderQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+	builderQueries: Record<string, any>,
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): QueryEnvelope[] {
@@ -467,7 +467,7 @@ export function convertTraceOperatorToV5(
  * Converts PromQL queries to V5 format
  */
 export function convertPromQueriesToV5(
-	promQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+	promQueries: Record<string, any>,
 ): QueryEnvelope[] {
 	return Object.entries(promQueries).map(
 		([queryName, queryData]): QueryEnvelope => ({
@@ -488,7 +488,7 @@ export function convertPromQueriesToV5(
  * Converts ClickHouse queries to V5 format
  */
 export function convertClickHouseQueriesToV5(
-	chQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+	chQueries: Record<string, any>,
 ): QueryEnvelope[] {
 	return Object.entries(chQueries).map(
 		([queryName, queryData]): QueryEnvelope => ({
@@ -508,9 +508,8 @@ export function convertClickHouseQueriesToV5(
  * Helper function to reduce query arrays to objects
  */
 function reduceQueriesToObject(
-	queryArray: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
+	queryArray: any[],
 ): { queries: Record<string, any>; legends: Record<string, string> } {
-	// eslint-disable-line @typescript-eslint/no-explicit-any
 	const legends: Record<string, string> = {};
 	const queries = queryArray.reduce((acc, queryItem) => {
 		if (!queryItem.query) {
@@ -519,7 +518,7 @@ function reduceQueriesToObject(
 		acc[queryItem.name] = queryItem;
 		legends[queryItem.name] = queryItem.legend;
 		return acc;
-	}, {} as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
+	}, {} as Record<string, any>);
 
 	return { queries, legends };
 }
@@ -589,7 +588,6 @@ export const prepareQueryRangePayloadV5 = ({
 						limit: formulaData.limit ?? undefined,
 						legend: isEmpty(formulaData.legend) ? undefined : formulaData.legend,
 						order: formulaData.orderBy?.map(
-							// eslint-disable-next-line sonarjs/no-identical-functions
 							(order: any): OrderBy => ({
 								key: {
 									name: order.columnName,

frontend/src/assets/Error.tsx

@@ -10,7 +10,6 @@ function ErrorIcon({ ...props }: ErrorIconProps): JSX.Element {
 			viewBox="0 0 14 14"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
-			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...props}
 		>
 			<path

frontend/src/auto-import-registry.d.ts

@@ -1,7 +1,7 @@
 // -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
+// This file is generated by scripts/update-registry.cjs automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -96,7 +96,6 @@ export function FilterSelect({
 			key={filterType.toString()}
 			placeholder={placeholder}
 			showSearch
-			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...(isMultiple ? { mode: 'multiple' } : {})}
 			options={mergedOptions}
 			loading={isFetching}

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

@@ -1,5 +1,6 @@
 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 { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
@@ -90,7 +91,6 @@ const getColumnSearchProps = (
 		clearFilters,
 		close,
 	}): JSX.Element => (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div style={{ padding: 8 }} onKeyDown={(e): void => e.stopPropagation()}>
 			<Input
 				ref={searchInput}

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,5 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useQuery } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';

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

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';

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

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';

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

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';

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

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useQueries } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/components/ChangelogModal/__test__/ChangelogModal.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { fireEvent, render, screen } from '@testing-library/react';

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { render, screen } from '@testing-library/react';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import {
 	ChangeEvent,
 	Dispatch,

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -92,7 +92,6 @@ const getDateRange = (
 	return { from, to };
 };
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function CustomTimePickerPopoverContent({
 	isLiveLogsEnabled,
 	minTime,

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { Dispatch, SetStateAction, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { DatePicker } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -45,7 +45,6 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 
 	// Using any type here because antd's DatePicker expects its own internal Dayjs type
 	// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 	const disabledDate = (current: any): boolean => {
 		const currentDay = dayjs(current);
 		return currentDay.isAfter(dayjs());

frontend/src/components/CustomTimePicker/timezoneUtils.ts

@@ -124,7 +124,6 @@ const filterAndSortTimezones = (
 export const generateTimezoneData = (
 	includeEtcTimezones = false,
 ): Timezone[] => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const allTimezones = (Intl as any).supportedValuesOf('timeZone');
 	const timezones: Timezone[] = [];
 

frontend/src/components/DraggableTableRow/index.tsx

@@ -37,13 +37,7 @@ function DraggableTableRow({
 	drop(drag(ref));
 
 	return (
-		<tr
-			ref={ref}
-			className={className}
-			style={{ ...style }}
-			// eslint-disable-next-line react/jsx-props-no-spreading
-			{...restProps}
-		/>
+		<tr ref={ref} className={className} style={{ ...style }} {...restProps} />
 	);
 }
 

frontend/src/components/DraggableTableRow/tests/__snapshots__/DraggableTableRow.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
 <DocumentFragment>

frontend/src/components/Editor/__snapshots__/Editor.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Editor renders correctly with custom props 1`] = `
 <div>

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

@@ -81,7 +81,6 @@ function withErrorBoundary<P extends Record<string, unknown>>(
 				}}
 				onError={onError}
 			>
-				{/* eslint-disable-next-line react/jsx-props-no-spreading */}
 				<WrappedComponent {...props} />
 			</Sentry.ErrorBoundary>
 		);

frontend/src/components/ErrorModal/ErrorModal.test.tsx

@@ -19,11 +19,8 @@ jest.mock('react-query', () => ({
 const mockError: APIError = new APIError({
 	httpStatusCode: 400,
 	error: {
-		// eslint-disable-next-line sonarjs/no-duplicate-string
 		message: 'Something went wrong while processing your request.',
-		// eslint-disable-next-line sonarjs/no-duplicate-string
 		code: 'An error occurred',
-		// eslint-disable-next-line sonarjs/no-duplicate-string
 		url: 'https://example.com/docs',
 		errors: [
 			{ message: 'First error detail' },

frontend/src/components/ErrorPopover/ErrorPopover.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { ReactNode } from 'react';
 import { Popover, PopoverProps } from 'antd';
 

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

@@ -9,7 +9,6 @@ import ExplorerCard from '../ExplorerCard';
 
 const historyReplace = jest.fn();
 
-// eslint-disable-next-line sonarjs/no-duplicate-string
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({

frontend/src/components/ExplorerCard/utils.ts

@@ -37,7 +37,6 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
 	return undefined;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const omitIdFromQuery = (query: Query | null): any => ({
 	...query,
 	builder: {

frontend/src/components/Graph/Plugin/DragSelect.ts

@@ -310,7 +310,6 @@ export const createDragSelectPlugin = (): Plugin<
 				const top = chart.chartArea.top - 5;
 				const bottom = chart.chartArea.bottom + 5;
 
-				/* eslint-disable-next-line no-param-reassign */
 				chart.ctx.fillStyle = pluginOptions.color;
 				chart.ctx.fillRect(left, top, right - left, bottom - top);
 			}

frontend/src/components/Graph/Plugin/IntersectionCursor.ts

@@ -142,7 +142,6 @@ export const createIntersectionCursorPlugin = (): Plugin<
 				const { top, bottom, left, right } = chart.chartArea;
 
 				chart.ctx.beginPath();
-				/* eslint-disable-next-line no-param-reassign */
 				chart.ctx.strokeStyle = pluginOptions.color;
 				chart.ctx.setLineDash(lineDashData);
 				chart.ctx.moveTo(left, positionY);
@@ -151,7 +150,6 @@ export const createIntersectionCursorPlugin = (): Plugin<
 
 				chart.ctx.beginPath();
 				chart.ctx.setLineDash(lineDashData);
-				/* eslint-disable-next-line no-param-reassign */
 				chart.ctx.strokeStyle = pluginOptions.color;
 				chart.ctx.moveTo(positionX, top);
 				chart.ctx.lineTo(positionX, bottom);

frontend/src/components/Graph/Plugin/Legend.ts

@@ -55,7 +55,6 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 			  )
 			: null;
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		items?.forEach((item: Record<any, any>, index: number) => {
 			const li = document.createElement('li');
 			li.style.alignItems = 'center';
@@ -65,7 +64,6 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 			// li.style.marginTop = '5px';
 
 			li.onclick = (): void => {
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				const { type } = chart.config;
 				if (type === 'pie' || type === 'doughnut') {

frontend/src/components/Graph/__tests__/yAxisConfig.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import { PrecisionOptionsEnum } from '../types';
 import { getYAxisFormattedValue } from '../yAxisConfig';
 

frontend/src/components/Graph/hasData.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-syntax */
 import { ChartData } from 'chart.js';
 
 export const hasData = (data: ChartData): boolean => {

frontend/src/components/Graph/utils.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject } from 'react';
 import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
-// eslint-disable-next-line import/namespace -- side-effect import that registers Chart.js date adapter
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -208,7 +207,6 @@ export const getGraphOptions = (
 			cubicInterpolationMode: 'monotone',
 		},
 		point: {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			hoverBackgroundColor: (ctx: any): string => {
 				if (ctx?.element?.options?.borderColor) {
 					return ctx.element.options.borderColor;
@@ -235,7 +233,6 @@ export const getGraphOptions = (
 			);
 
 			if (interactions[0]) {
-				// eslint-disable-next-line no-param-reassign
 				nearestDatasetIndex.current = interactions[0].datasetIndex;
 			}
 		}
@@ -248,6 +245,11 @@ declare module 'chart.js' {
 	}
 }
 
+const intlNumberFormatter = new Intl.NumberFormat('en-US', {
+	useGrouping: false,
+	maximumFractionDigits: 20,
+});
+
 /**
  * Formats a number for display, preserving leading zeros after the decimal point
  * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
@@ -270,10 +272,7 @@ export const formatDecimalWithLeadingZeros = (
 	}
 
 	// Use toLocaleString to get a full decimal representation without scientific notation.
-	const numStr = value.toLocaleString('en-US', {
-		useGrouping: false,
-		maximumFractionDigits: 20,
-	});
+	const numStr = intlNumberFormatter.format(value);
 
 	const [integerPart, decimalPart = ''] = numStr.split('.');
 

frontend/src/components/Graph/xAxisConfig.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Chart, TimeUnit } from 'chart.js';
 import { AppState } from 'store/reducers';

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';

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

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable react/jsx-props-no-spreading */
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';

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

@@ -1,4 +1,5 @@
 // Mock dependencies before imports
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -143,7 +144,6 @@ function HostMetricsDetails({
 				page: InfraMonitoringEvents.DetailedPage,
 			});
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [host]);
 
 	useEffect(() => {
@@ -207,7 +207,6 @@ function HostMetricsDetails({
 				page: InfraMonitoringEvents.DetailedPage,
 			});
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[],
 	);
 
@@ -490,7 +489,6 @@ function HostMetricsDetails({
 						>
 							<Radio.Button
 								className={
-									// eslint-disable-next-line sonarjs/no-duplicate-string
 									selectedView === VIEW_TYPES.METRICS ? 'selected_view tab' : 'tab'
 								}
 								value={VIEW_TYPES.METRICS}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
@@ -122,7 +121,6 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 
 	const renderFooter = useCallback(
 		(): JSX.Element | null => (
-			// eslint-disable-next-line react/jsx-no-useless-fragment
 			<>
 				{isFetching ? (
 					<div className="logs-loading-skeleton"> Loading more logs ... </div>

frontend/src/components/Input/index.tsx

@@ -34,7 +34,6 @@ function InputComponent({
 				addonBefore={addonBefore}
 				onBlur={onBlurHandler}
 				onPressEnter={onPressEnterHandler}
-				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...props}
 			/>
 		</Form.Item>