feat(settings): add SigNoz MCP Server setup page (#11025)

* feat(settings): add SigNoz MCP Server setup page

Add a new Settings page at /settings/mcp-server that guides Cloud users
through connecting AI assistants (Cursor, VS Code, Claude Desktop, Claude
Code, Codex) to SigNoz via the Model Context Protocol, and provides a
deep-link into Service Accounts for creating the API key the OAuth flow
needs.

* feat(settings): point MCP Server onboarding tile to in-app settings page

The onboarding-config-with-links entry for SigNoz MCP Server previously
linked out to the docs page. Now that we ship an in-product setup page
at /settings/mcp-server, route Cloud users there directly via the
existing internalRedirect pattern. Self-hosted users still see the
in-page fallback card with a docs link.

* fix(settings): fire MCP Server page-viewed event reliably on mount

Previously gated the PAGE_VIEWED analytics event on
isGlobalConfigFetched to avoid a double-fire when the async
ingestion_url resolved. Side effect: if /global/config was slow or
errored out, the event never fired. Fire once on mount instead with
hostname-derived region metadata, which is synchronous and reliable.

* feat(mcp-page): ui refactor and redesign

* feat(mcp-page): global config and page access changes

* feat(mcp-page): refactor and added fallback page

* feat(mcp-page): added test cases

* feat(mcp-page): formatting lint

* feat(mcp-page): code refactor

* feat(mcp-page): cleanup and migrated global config api to open api spec

* feat(mcp-page): removed translation json and add endpoint url to copy

* feat(mcp-page): added mcp server to menu always for cloud and enterprise

---------

Co-authored-by: SagarRajput-7 <sagar@signoz.io>
Co-authored-by: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
   "oxc.typeAware": true,
   "oxc.tsConfigPath": "./frontend/tsconfig.json",
+  "oxc.configPath": "./frontend/.oxlintrc.json",
+  "oxc.fmt.configPath": "./frontend/.oxfmtrc.json",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.codeActionsOnSave": {
@@ -19,4 +21,3 @@
   "python-envs.defaultEnvManager": "ms-python.python:system",
   "python-envs.pythonProjects": []
 }
-

conf/example.yaml

@@ -11,6 +11,8 @@ global:
   external_url: <unset>
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
+  # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
+  # mcp_url: <unset>
 
 ##################### Version #####################
 version:

docs/api/openapi.yml

@@ -2369,6 +2369,13 @@ components:
           $ref: '#/components/schemas/GlobaltypesIdentNConfig'
         ingestion_url:
           type: string
+        mcp_url:
+          nullable: true
+          type: string
+      required:
+      - external_url
+      - ingestion_url
+      - mcp_url
       type: object
     GlobaltypesIdentNConfig:
       properties:

frontend/.oxlintrc.json

@@ -9,7 +9,6 @@
     "react",
     "react-perf",
     "typescript",
-    "unicorn",
     "jsx-a11y",
     "import",
     "jest",
@@ -206,6 +205,8 @@
     "@typescript-eslint/explicit-function-return-type": "error",
     // Requires explicit return types on functions
     "@typescript-eslint/no-var-requires": "error",
+    "@typescript-eslint/no-useless-default-assignment": "off", // provide unsafe fixes in our codebase due to bad typing
+    "@typescript-eslint/no-duplicate-type-constituents": "off", // provide fixes that breaks some assumptions, eg: type A = L, B = L, C = A | B (removes B)
     // Disallows require() in TypeScript (use import instead)
     // Disabled - using TypeScript instead
     "react/jsx-props-no-spreading": "off",
@@ -338,82 +339,6 @@
     "react/no-array-index-key": "warn",
     // TODO: Changed to warn during oxlint migration, should be changed to error,
 
-    "unicorn/error-message": "warn",
-    "unicorn/escape-case": "warn",
-    "unicorn/new-for-builtins": "warn",
-    "unicorn/no-abusive-eslint-disable": "warn",
-    "unicorn/no-console-spaces": "warn",
-    "unicorn/no-instanceof-array": "warn",
-    "unicorn/no-invalid-remove-event-listener": "warn",
-    "unicorn/no-new-array": "warn",
-    "unicorn/no-new-buffer": "warn",
-    "unicorn/no-thenable": "warn",
-    "unicorn/no-unreadable-array-destructuring": "warn",
-    "unicorn/no-useless-fallback-in-spread": "warn",
-    "unicorn/no-useless-length-check": "warn",
-    "unicorn/no-useless-promise-resolve-reject": "warn",
-    "unicorn/no-useless-spread": "warn",
-    "unicorn/no-zero-fractions": "warn",
-    "unicorn/number-literal-case": "warn",
-    "unicorn/prefer-array-find": "warn",
-    "unicorn/prefer-array-flat": "warn",
-    "unicorn/prefer-array-flat-map": "warn",
-    "unicorn/prefer-array-index-of": "warn",
-    "unicorn/prefer-array-some": "warn",
-    "unicorn/prefer-at": "warn",
-    "unicorn/prefer-code-point": "warn",
-    "unicorn/prefer-date-now": "warn",
-    "unicorn/prefer-default-parameters": "warn",
-    "unicorn/prefer-includes": "warn",
-    "unicorn/prefer-modern-math-apis": "warn",
-    "unicorn/prefer-native-coercion-functions": "warn",
-    "unicorn/prefer-node-protocol": "off",
-    "unicorn/prefer-number-properties": "warn",
-    "unicorn/prefer-optional-catch-binding": "warn",
-    "unicorn/prefer-regexp-test": "warn",
-    "unicorn/prefer-set-has": "warn",
-    "unicorn/prefer-string-replace-all": "warn",
-    "unicorn/prefer-string-slice": "warn",
-    "unicorn/prefer-string-starts-ends-with": "warn",
-    "unicorn/prefer-string-trim-start-end": "warn",
-    "unicorn/prefer-type-error": "warn",
-    "unicorn/require-array-join-separator": "warn",
-    "unicorn/require-number-to-fixed-digits-argument": "warn",
-    "unicorn/throw-new-error": "warn",
-    "unicorn/consistent-function-scoping": "warn",
-    "unicorn/explicit-length-check": "warn",
-    "unicorn/filename-case": [
-      "warn",
-      {
-        "case": "kebabCase"
-      }
-    ],
-    "unicorn/no-array-for-each": "warn",
-    "unicorn/no-lonely-if": "warn",
-    "unicorn/no-negated-condition": "warn",
-    "unicorn/no-null": "warn",
-    "unicorn/no-object-as-default-parameter": "warn",
-    "unicorn/no-static-only-class": "warn",
-    "unicorn/no-this-assignment": "warn",
-    "unicorn/no-unreadable-iife": "warn",
-    "unicorn/no-useless-switch-case": "warn",
-    "unicorn/no-useless-undefined": "warn",
-    "unicorn/prefer-add-event-listener": "warn",
-    "unicorn/prefer-dom-node-append": "warn",
-    "unicorn/prefer-dom-node-dataset": "warn",
-    "unicorn/prefer-dom-node-remove": "warn",
-    "unicorn/prefer-dom-node-text-content": "warn",
-    "unicorn/prefer-keyboard-event-key": "warn",
-    "unicorn/prefer-math-trunc": "warn",
-    "unicorn/prefer-modern-dom-apis": "warn",
-    "unicorn/prefer-negative-index": "warn",
-    "unicorn/prefer-prototype-methods": "warn",
-    "unicorn/prefer-query-selector": "warn",
-    "unicorn/prefer-reflect-apply": "warn",
-    "unicorn/prefer-set-size": "warn",
-    "unicorn/prefer-spread": "warn",
-    "unicorn/prefer-ternary": "warn",
-    "unicorn/require-post-message-target-origin": "warn",
     "oxc/bad-array-method-on-arguments": "error",
     "oxc/bad-bitwise-operator": "error",
     "oxc/bad-comparison-sequence": "error",
@@ -538,8 +463,8 @@
     "sonarjs/no-nested-template-literals": "error",
     // Avoids nested template literals
     "sonarjs/no-redundant-boolean": "warn", // TODO: Change to error after migration
-    // Removes redundant boolean literals
-    "sonarjs/no-redundant-jump": "error",
+    // Removes redundant boolean literals - turned off because it clashes with unicorn rules
+    "sonarjs/no-redundant-jump": "off",
     // Removes unnecessary returns/continues
     "sonarjs/no-same-line-conditional": "error",
     // Prevents same-line conditionals
@@ -614,8 +539,9 @@
         "signoz/no-navigator-clipboard": "off",
         // Tests can use navigator.clipboard directly,
         "signoz/no-raw-absolute-path":"off",
-        "no-restricted-globals": "off"
+        "no-restricted-globals": "off",
         // Tests need raw localStorage/sessionStorage to seed DOM state for isolation
+        "signoz/no-zustand-getstate-in-hooks": "off"
       }
     },
     {

frontend/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -72,10 +72,12 @@
 					// to that prefix by the React app (see utils/storage.ts getScopedKey).
 					// Read the <base> tag — already populated by the Go template — to derive
 					// the same prefix here, before any JS module has loaded.
-					var basePath = (document.querySelector('base') || {}).getAttribute('href') || '/';
+					var basePath =
+						(document.querySelector('base') || {}).getAttribute('href') || '/';
 					var prefix = basePath === '/' ? '' : basePath;
 					var theme = localStorage.getItem(prefix + 'THEME');
-					var autoSwitch = localStorage.getItem(prefix + 'THEME_AUTO_SWITCH') === 'true';
+					var autoSwitch =
+						localStorage.getItem(prefix + 'THEME_AUTO_SWITCH') === 'true';
 					if (autoSwitch) {
 						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
 							? 'dark'

frontend/jest.setup.ts

@@ -42,13 +42,13 @@ window.getComputedStyle = function (
 	} catch {
 		// Return a minimal CSSStyleDeclaration so callers (testing-library, Radix UI)
 		// see the element as visible and without animations.
-		return ({
+		return {
 			display: '',
 			visibility: '',
 			opacity: '1',
 			animationName: 'none',
 			getPropertyValue: () => '',
-		} as unknown) as CSSStyleDeclaration;
+		} as unknown as CSSStyleDeclaration;
 	}
 };
 

frontend/package.json

@@ -9,7 +9,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
-    "fmt": "echo 'Disabled due to migration' || oxfmt --check",
+    "fmt": "oxfmt --check",
     "lint": "oxlint ./src && stylelint \"src/**/*.scss\"",
     "lint:js": "oxlint ./src",
     "lint:generated": "oxlint ./src/api/generated --fix",
@@ -214,9 +214,9 @@
     "msw": "1.3.2",
     "npm-run-all": "latest",
     "orval": "7.18.0",
-    "oxfmt": "0.41.0",
-    "oxlint": "1.59.0",
-    "oxlint-tsgolint": "0.20.0",
+    "oxfmt": "0.46.0",
+    "oxlint": "1.61.0",
+    "oxlint-tsgolint": "0.21.1",
     "portfinder-sync": "^0.0.2",
     "postcss": "8.5.6",
     "postcss-scss": "4.0.9",
@@ -240,8 +240,8 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
-      "echo 'Disabled due to migration' || oxfmt --check",
-      "oxlint --fix",
+      "oxfmt --check",
+      "oxlint --quiet",
       "sh scripts/typecheck-staged.sh"
     ]
   },

frontend/plugins/rules/no-raw-absolute-path.mjs

@@ -56,7 +56,6 @@ function isExternalUrl(node) {
 	return false;
 }
 
-
 // window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
 function isSafeHelperCall(node) {
 	return (
@@ -97,18 +96,27 @@ export default {
 					callee.object.type !== 'Identifier' ||
 					callee.object.name !== 'window' ||
 					callee.property.name !== 'open'
-				)
-					{return;}
-				if (args.length === 0) {return;}
-				if (isExternalUrl(args[0])) {return;}
-				if (isSafeHelperCall(args[0])) {return;}
+				) {
+					return;
+				}
+				if (args.length === 0) {
+					return;
+				}
+				if (isExternalUrl(args[0])) {
+					return;
+				}
+				if (isSafeHelperCall(args[0])) {
+					return;
+				}
 
 				context.report({ node, messageId: 'windowOpen' });
 			},
 
 			// window.location.origin + path
 			BinaryExpression(node) {
-				if (node.operator !== '+') {return;}
+				if (node.operator !== '+') {
+					return;
+				}
 				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
 					context.report({ node, messageId: 'originConcat' });
 				}
@@ -124,26 +132,40 @@ export default {
 			// window.location.origin used directly (not in concatenation)
 			// Catches: frontendBaseUrl: window.location.origin
 			MemberExpression(node) {
-				if (!isOriginAccess(node)) {return;}
+				if (!isOriginAccess(node)) {
+					return;
+				}
 
 				const parent = node.parent;
 				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
-				if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') {
+					return;
+				}
 				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
-				if (parent.type === 'TemplateLiteral') {return;}
+				if (parent.type === 'TemplateLiteral') {
+					return;
+				}
 
 				context.report({ node, messageId: 'originDirect' });
 			},
 
 			// window.location.href = path
 			AssignmentExpression(node) {
-				if (node.operator !== '=') {return;}
-				if (!isHrefAccess(node.left)) {return;}
+				if (node.operator !== '=') {
+					return;
+				}
+				if (!isHrefAccess(node.left)) {
+					return;
+				}
 
 				// Allow external URLs
-				if (isExternalUrl(node.right)) {return;}
+				if (isExternalUrl(node.right)) {
+					return;
+				}
 				// Allow safe helper calls
-				if (isSafeHelperCall(node.right)) {return;}
+				if (isSafeHelperCall(node.right)) {
+					return;
+				}
 
 				context.report({ node, messageId: 'hrefAssign' });
 			},

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

@@ -16,5 +16,6 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"service_accounts": "Service Accounts",
+	"mcp_server": "MCP Server"
 }

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

@@ -53,5 +53,6 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
+	"MCP_SERVER": "SigNoz | MCP Server"
 }

frontend/public/locales/en/routes.json

@@ -16,5 +16,6 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"service_accounts": "Service Accounts",
+	"mcp_server": "MCP Server"
 }

frontend/public/locales/en/titles.json

@@ -76,5 +76,6 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
+	"MCP_SERVER": "SigNoz | MCP Server"
 }

frontend/src/AppRoutes/Private.tsx

@@ -60,7 +60,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (org && org.length > 0 && org[0].id !== undefined) {
 			return org[0];
 		}
-		return;
+		return undefined;
 	}, [org]);
 
 	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
@@ -192,7 +192,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (isPrivate) {
 			if (isLoggedInState) {
 				const route = routePermission[key];
-				if (route && route.some((e) => e === user.role) === undefined) {
+				if (route && route.find((e) => e === user.role) === undefined) {
 					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
 				}
 			} else {

frontend/src/AppRoutes/index.tsx

@@ -320,12 +320,12 @@ function App(): JSX.Element {
 						}),
 					],
 					// Performance Monitoring
-					tracesSampleRate: 1, //  Capture 100% of the transactions
+					tracesSampleRate: 1.0, //  Capture 100% of the transactions
 					// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
 					tracePropagationTargets: [],
 					// Session Replay
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-					replaysOnErrorSampleRate: 1, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
 					beforeSend(event) {
 						const sessionReplayUrl = posthog.get_session_replay_url?.({
 							withTimestamp: true,

frontend/src/api/ErrorResponseHandler.ts

@@ -24,7 +24,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 			const { errors, error } = data;
 
 			const errorMessage =
-				Array.isArray(errors) && errors.length > 0 ? errors[0].msg : error;
+				Array.isArray(errors) && errors.length >= 1 ? errors[0].msg : error;
 
 			return {
 				statusCode,

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

@@ -21,12 +21,12 @@ const dashboardVariablesQuery = async (
 		});
 
 		const timeVariables: Record<string, number> = {
-			start_timestamp_ms: Number.parseInt(start, 10) * 1e3,
-			end_timestamp_ms: Number.parseInt(end, 10) * 1e3,
-			start_timestamp_nano: Number.parseInt(start, 10) * 1e9,
-			end_timestamp_nano: Number.parseInt(end, 10) * 1e9,
-			start_timestamp: Number.parseInt(start, 10),
-			end_timestamp: Number.parseInt(end, 10),
+			start_timestamp_ms: parseInt(start, 10) * 1e3,
+			end_timestamp_ms: parseInt(end, 10) * 1e3,
+			start_timestamp_nano: parseInt(start, 10) * 1e9,
+			end_timestamp_nano: parseInt(end, 10) * 1e9,
+			start_timestamp: parseInt(start, 10),
+			end_timestamp: parseInt(end, 10),
 		};
 
 		const payload = { ...props };

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

@@ -104,7 +104,7 @@ describe('getFieldKeys API', () => {
 		const result = await getFieldKeys('traces');
 
 		// Verify the returned structure matches SuccessResponseV2 format
-		expect(result).toStrictEqual({
+		expect(result).toEqual({
 			httpStatusCode: 200,
 			data: mockSuccessResponse.data.data,
 		});

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

@@ -199,7 +199,7 @@ describe('getFieldValues API', () => {
 		const result = await getFieldValues('traces', 'service.name');
 
 		// Verify the returned structure matches SuccessResponseV2 format
-		expect(result).toStrictEqual({
+		expect(result).toEqual({
 			httpStatusCode: 200,
 			data: expect.objectContaining({
 				values: expect.any(Object),

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

@@ -3125,12 +3125,17 @@ export interface GlobaltypesConfigDTO {
 	/**
 	 * @type string
 	 */
-	external_url?: string;
+	external_url: string;
 	identN?: GlobaltypesIdentNConfigDTO;
 	/**
 	 * @type string
 	 */
-	ingestion_url?: string;
+	ingestion_url: string;
+	/**
+	 * @type string
+	 * @nullable true
+	 */
+	mcp_url: string | null;
 }
 
 export interface GlobaltypesIdentNConfigDTO {

frontend/src/api/globalConfig/getGlobalConfig.ts

@@ -1,25 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	GlobalConfigData,
-	GlobalConfigDataProps,
-} from 'types/api/globalConfig/types';
-
-const getGlobalConfig = async (): Promise<
-	SuccessResponseV2<GlobalConfigData>
-> => {
-	try {
-		const response = await axios.get<GlobalConfigDataProps>(`/global/config`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getGlobalConfig;

frontend/src/api/index.ts

@@ -32,7 +32,7 @@ export const interceptorsResponse = (
 ): Promise<AxiosResponse<any>> => {
 	if ((value.config as any)?.metadata) {
 		const duration =
-			Date.now() - (value.config as any).metadata.startTime;
+			new Date().getTime() - (value.config as any).metadata.startTime;
 
 		if (duration > RESPONSE_TIMEOUT_THRESHOLD && value.config.url !== '/event') {
 			eventEmitter.emit(Events.SLOW_API_WARNING, true, {
@@ -55,7 +55,7 @@ export const interceptorsRequestResponse = (
 ): InternalAxiosRequestConfig => {
 	// Attach metadata safely (not sent with the request)
 	Object.defineProperty(value, 'metadata', {
-		value: { startTime: Date.now() },
+		value: { startTime: new Date().getTime() },
 		enumerable: false, // Prevents it from being included in the request
 	});
 
@@ -143,7 +143,7 @@ export const interceptorRejected = async (
 							Logout();
 						}
 					}
-				} catch {
+				} catch (error) {
 					Logout();
 				}
 			}
@@ -160,7 +160,7 @@ export const interceptorRejected = async (
 
 const interceptorRejectedBase = async (
 	value: AxiosResponse<any>,
-): Promise<AxiosResponse<any>> => { throw value; };
+): Promise<AxiosResponse<any>> => Promise.reject(value);
 
 const instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,

frontend/src/api/interceptors.test.ts

@@ -39,8 +39,8 @@ jest.mock('axios', () => {
 describe('interceptorRejected', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		((axios as unknown) as jest.Mock).mockResolvedValue({ data: 'success' });
-		((axios.isAxiosError as unknown) as jest.Mock).mockReturnValue(true);
+		(axios as unknown as jest.Mock).mockResolvedValue({ data: 'success' });
+		(axios.isAxiosError as unknown as jest.Mock).mockReturnValue(true);
 	});
 
 	it('should preserve array payload structure when retrying a 401 request', async () => {
@@ -49,7 +49,7 @@ describe('interceptorRejected', () => {
 			{ relation: 'assignee', object: { resource: { name: 'editor' } } },
 		];
 
-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -67,7 +67,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(arrayPayload),
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -75,17 +75,17 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
-		expect(JSON.parse(retryCallConfig.data)).toStrictEqual(arrayPayload);
+		expect(JSON.parse(retryCallConfig.data)).toEqual(arrayPayload);
 	});
 
 	it('should preserve object payload structure when retrying a 401 request', async () => {
 		const objectPayload = { key: 'value', nested: { data: 123 } };
 
-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -103,7 +103,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(objectPayload),
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -111,14 +111,14 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
-		expect(JSON.parse(retryCallConfig.data)).toStrictEqual(objectPayload);
+		expect(JSON.parse(retryCallConfig.data)).toEqual(objectPayload);
 	});
 
 	it('should handle undefined data gracefully when retrying', async () => {
-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -136,7 +136,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: undefined,
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -144,8 +144,8 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = (axios as unknown) as jest.Mock;
-		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(retryCallConfig.data).toBeUndefined();
 	});

frontend/src/api/settings/getRetentionV2.ts

@@ -9,9 +9,8 @@ const getRetentionV2 = async (): Promise<
 	SuccessResponseV2<PayloadProps<'logs'>>
 > => {
 	try {
-		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
-			`/settings/ttl`,
-		);
+		const response =
+			await ApiV2Instance.get<PayloadProps<'logs'>>(`/settings/ttl`);
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/v1/download/downloadExportData.ts

@@ -37,11 +37,11 @@ export const downloadExportData = async (
 		const filename =
 			response.headers['content-disposition']
 				?.split('filename=')[1]
-				?.replaceAll(/["']/g, '') || `exported_data.${props.format || 'txt'}`;
+				?.replace(/["']/g, '') || `exported_data.${props.format || 'txt'}`;
 
 		link.setAttribute('download', filename);
 
-		document.body.append(link);
+		document.body.appendChild(link);
 		link.click();
 		link.remove();
 		URL.revokeObjectURL(url);

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

@@ -52,18 +52,18 @@ describe('convertV5ResponseToLegacy', () => {
 					alias: '__result_0',
 					meta: {},
 					series: [
-						({
+						{
 							labels: [
 								{
-									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
+									key: { name: 'service.name' } as unknown as TelemetryFieldKey,
 									value: 'adservice',
 								},
 							],
 							values: [
-								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
-								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
+								{ timestamp: 1000, value: 10 } as unknown as TimeSeriesValue,
+								{ timestamp: 2000, value: 12 } as unknown as TimeSeriesValue,
 							],
-						} as unknown) as TimeSeries,
+						} as unknown as TimeSeries,
 					],
 				},
 			],
@@ -88,10 +88,8 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);
 
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
 
 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);
@@ -101,7 +99,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const q = result.payload.data.result[0];
 		expect(q.queryName).toBe('A');
 		expect(q.legend).toBe('{{service.name}}');
-		expect(q.series?.[0]).toStrictEqual(
+		expect(q.series?.[0]).toEqual(
 			expect.objectContaining({
 				labels: { 'service.name': 'adservice' },
 				values: [
@@ -121,33 +119,33 @@ describe('convertV5ResponseToLegacy', () => {
 		const scalar: ScalarData = {
 			columns: [
 				// group column
-				({
+				{
 					name: 'service.name',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'group',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// aggregation 0
-				({
+				{
 					name: '__result_0',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// aggregation 1
-				({
+				{
 					name: '__result_1',
 					queryName: 'A',
 					aggregationIndex: 1,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// formula F1
-				({
+				{
 					name: '__result',
 					queryName: 'F1',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 			],
 			data: [['adservice', 606, 1.452, 151.5]],
 		};
@@ -174,23 +172,21 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 			{
 				type: 'builder_formula',
-				spec: ({
+				spec: {
 					name: 'F1',
 					expression: 'A * 0.25',
-				} as unknown) as QueryBuilderFormula,
+				} as unknown as QueryBuilderFormula,
 			},
 		]);
 
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}', F1: '' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);
 
 		expect(result.payload.data.resultType).toBe('scalar');
 		const [tableEntry] = result.payload.data.result;
-		expect(tableEntry.table?.columns).toStrictEqual([
+		expect(tableEntry.table?.columns).toEqual([
 			{
 				name: 'service.name',
 				queryName: 'A',
@@ -206,7 +202,7 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 			{ name: 'F1', queryName: 'F1', isValueColumn: true, id: 'F1' },
 		]);
-		expect(tableEntry.table?.rows?.[0]).toStrictEqual({
+		expect(tableEntry.table?.rows?.[0]).toEqual({
 			data: {
 				'service.name': 'adservice',
 				'A.count()': 606,
@@ -254,16 +250,14 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);
 
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, true);
 
 		expect(result.payload.data.resultType).toBe('scalar');
 		const [tableEntry] = result.payload.data.result;
-		expect(tableEntry.table?.columns).toStrictEqual([
+		expect(tableEntry.table?.columns).toEqual([
 			{
 				name: 'service.name',
 				queryName: 'A',
@@ -273,7 +267,7 @@ describe('convertV5ResponseToLegacy', () => {
 			// Single aggregation: name resolves to legend, id resolves to queryName
 			{ name: '{{service.name}}', queryName: 'A', isValueColumn: true, id: 'A' },
 		]);
-		expect(tableEntry.table?.rows?.[0]).toStrictEqual({
+		expect(tableEntry.table?.rows?.[0]).toEqual({
 			data: {
 				'service.name': 'adservice',
 				A: 580,

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

@@ -85,7 +85,7 @@ function convertTimeSeriesData(
 			const { index, alias } = aggregation;
 			const seriesData = aggregation[seriesKey];
 
-			if (!seriesData || seriesData.length === 0) {
+			if (!seriesData || !seriesData.length) {
 				return [];
 			}
 
@@ -93,7 +93,7 @@ function convertTimeSeriesData(
 				labels: series.labels
 					? Object.fromEntries(
 							series.labels.map((label: any) => [label.key.name, label.value]),
-					  )
+						)
 					: {},
 				labelsArray: series.labels
 					? series.labels.map((label: any) => ({ [label.key.name]: label.value }))
@@ -358,16 +358,19 @@ export function convertV5ResponseToLegacy(
 	const aggregationPerQuery =
 		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
-			.reduce((acc, query) => {
-				if (
-					query.type === 'builder_query' &&
-					'aggregations' in query.spec &&
-					query.spec.name
-				) {
-					acc[query.spec.name] = query.spec.aggregations;
-				}
-				return acc;
-			}, {} as Record<string, any>) || {};
+			.reduce(
+				(acc, query) => {
+					if (
+						query.type === 'builder_query' &&
+						'aggregations' in query.spec &&
+						query.spec.name
+					) {
+						acc[query.spec.name] = query.spec.aggregations;
+					}
+					return acc;
+				},
+				{} as Record<string, any>,
+			) || {};
 
 	// If formatForWeb is true, return as-is (like existing logic)
 	if (formatForWeb && v5Data?.type === 'scalar') {

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

@@ -104,7 +104,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { A: 'Legend A', F1: 'Formula Legend' },
 				queryPayload: expect.objectContaining({
@@ -154,7 +154,7 @@ describe('prepareQueryRangePayloadV5', () => {
 		);
 
 		// Legend map combines builder and formulas
-		expect(result.legendMap).toStrictEqual({ A: 'Legend A', F1: 'Formula Legend' });
+		expect(result.legendMap).toEqual({ A: 'Legend A', F1: 'Formula Legend' });
 
 		const payload: QueryRangePayloadV5 = result.queryPayload;
 
@@ -166,7 +166,7 @@ describe('prepareQueryRangePayloadV5', () => {
 		expect(payload.formatOptions?.fillGaps).toBe(true);
 
 		// Variables mapped as { key: { value } }
-		expect(payload.variables).toStrictEqual({
+		expect(payload.variables).toEqual({
 			svc: { value: 'api' },
 			count: { value: 5 },
 			flag: { value: true },
@@ -226,7 +226,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { A: 'LP' },
 				queryPayload: expect.objectContaining({
@@ -255,7 +255,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			}),
 		);
 
-		expect(result.legendMap).toStrictEqual({ A: 'LP' });
+		expect(result.legendMap).toEqual({ A: 'LP' });
 
 		const payload: QueryRangePayloadV5 = result.queryPayload;
 		expect(payload.requestType).toBe('time_series');
@@ -296,7 +296,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { Q: 'LC' },
 				queryPayload: expect.objectContaining({
@@ -324,7 +324,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			}),
 		);
 
-		expect(result.legendMap).toStrictEqual({ Q: 'LC' });
+		expect(result.legendMap).toEqual({ Q: 'LC' });
 
 		const payload: QueryRangePayloadV5 = result.queryPayload;
 		expect(payload.requestType).toBe('scalar');
@@ -353,7 +353,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: {},
 				queryPayload: expect.objectContaining({
@@ -397,7 +397,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { A: 'Legend A' },
 				queryPayload: expect.objectContaining({
@@ -471,7 +471,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { A: 'Legend A' },
 				queryPayload: expect.objectContaining({
@@ -585,7 +585,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result).toStrictEqual(
+		expect(result).toEqual(
 			expect.objectContaining({
 				legendMap: { A: '{{service.name}}' },
 				queryPayload: expect.objectContaining({
@@ -684,7 +684,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		const result = prepareQueryRangePayloadV5(props);
 
-		expect(result.legendMap).toStrictEqual({ A: 'Legend A' });
+		expect(result.legendMap).toEqual({ A: 'Legend A' });
 		expect(result.queryPayload.compositeQuery.queries).toHaveLength(1);
 
 		const builderQuery = result.queryPayload.compositeQuery.queries.find(
@@ -694,7 +694,7 @@ describe('prepareQueryRangePayloadV5', () => {
 
 		expect(logSpec.name).toBe('A');
 		expect(logSpec.signal).toBe('logs');
-		expect(logSpec.filter).toStrictEqual({
+		expect(logSpec.filter).toEqual({
 			expression:
 				"service.name = 'payment-service' AND http.status_code >= 400 AND message contains 'error'",
 		});
@@ -713,7 +713,7 @@ describe('prepareQueryRangePayloadV5', () => {
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
 							filter: { expression: 'http.status_code >= 500' },
-							filters: (undefined as unknown) as IBuilderQuery['filters'],
+							filters: undefined as unknown as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],
@@ -731,7 +731,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			(q) => q.type === 'builder_query',
 		) as QueryEnvelope;
 		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.filter).toStrictEqual({ expression: 'http.status_code >= 500' });
+		expect(logSpec.filter).toEqual({ expression: 'http.status_code >= 500' });
 	});
 
 	it('derives expression from filters when filter is undefined', () => {
@@ -746,7 +746,7 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: (undefined as unknown) as IBuilderQuery['filter'],
+							filter: undefined as unknown as IBuilderQuery['filter'],
 							filters: {
 								items: [
 									{
@@ -775,7 +775,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			(q) => q.type === 'builder_query',
 		) as QueryEnvelope;
 		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.filter).toStrictEqual({ expression: "service.name = 'checkout'" });
+		expect(logSpec.filter).toEqual({ expression: "service.name = 'checkout'" });
 	});
 
 	it('prefers filter.expression over filters when both are present', () => {
@@ -819,7 +819,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			(q) => q.type === 'builder_query',
 		) as QueryEnvelope;
 		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.filter).toStrictEqual({ expression: "service.name = 'frontend'" });
+		expect(logSpec.filter).toEqual({ expression: "service.name = 'frontend'" });
 	});
 
 	it('returns empty expression when neither filter nor filters provided', () => {
@@ -834,8 +834,8 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: (undefined as unknown) as IBuilderQuery['filter'],
-							filters: (undefined as unknown) as IBuilderQuery['filters'],
+							filter: undefined as unknown as IBuilderQuery['filter'],
+							filters: undefined as unknown as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],
@@ -853,7 +853,7 @@ describe('prepareQueryRangePayloadV5', () => {
 			(q) => q.type === 'builder_query',
 		) as QueryEnvelope;
 		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.filter).toStrictEqual({ expression: '' });
+		expect(logSpec.filter).toEqual({ expression: '' });
 	});
 
 	it('returns empty expression when filters provided with empty items', () => {
@@ -887,6 +887,6 @@ describe('prepareQueryRangePayloadV5', () => {
 			(q) => q.type === 'builder_query',
 		) as QueryEnvelope;
 		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.filter).toStrictEqual({ expression: '' });
+		expect(logSpec.filter).toEqual({ expression: '' });
 	});
 });

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

@@ -139,10 +139,9 @@ function createBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (queryData.selectColumns as (
-		| BaseAutocompleteData
-		| TelemetryFieldKey
-	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (
+		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
+	)?.filter((c) => ('key' in c ? c?.key : c?.name));
 
 	return {
 		stepInterval: queryData?.stepInterval || null,
@@ -160,7 +159,7 @@ function createBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-				  )
+					)
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -179,52 +178,48 @@ function createBaseSpec(
 							},
 							direction: order.order,
 						}),
-				  )
+					)
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: isEmpty(queryData.having) ? undefined : (queryData?.having as Having),
 		functions: isEmpty(queryData.functions)
 			? undefined
-			: queryData.functions.map(
-					(func: QueryFunction): QueryFunction => {
-						// Normalize function name to handle case sensitivity
-						const normalizedName = normalizeFunctionName(func?.name);
-						return {
-							name: normalizedName as FunctionName,
-							args: isEmpty(func.namedArgs)
-								? func.args?.map((arg) => ({
-										value: arg?.value,
-								  }))
-								: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
-										name,
-										value,
-								  })),
-						};
-					},
-			  ),
+			: queryData.functions.map((func: QueryFunction): QueryFunction => {
+					// Normalize function name to handle case sensitivity
+					const normalizedName = normalizeFunctionName(func?.name);
+					return {
+						name: normalizedName as FunctionName,
+						args: isEmpty(func.namedArgs)
+							? func.args?.map((arg) => ({
+									value: arg?.value,
+								}))
+							: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
+									name,
+									value,
+								})),
+					};
+				}),
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
-			: nonEmptySelectColumns?.map(
-					(column: any): TelemetryFieldKey => {
-						const fieldName = column.name ?? column.key;
-						const isDeprecated = isDeprecatedField(fieldName);
+			: nonEmptySelectColumns?.map((column: any): TelemetryFieldKey => {
+					const fieldName = column.name ?? column.key;
+					const isDeprecated = isDeprecatedField(fieldName);
 
-						const fieldObj: TelemetryFieldKey = {
-							name: fieldName,
-							fieldDataType:
-								column?.fieldDataType ?? (column?.dataType as FieldDataType),
-							signal: column?.signal ?? undefined,
-						};
+					const fieldObj: TelemetryFieldKey = {
+						name: fieldName,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						signal: column?.signal ?? undefined,
+					};
 
-						// Only add fieldContext if the field is NOT deprecated
-						if (!isDeprecated && fieldName !== 'name') {
-							fieldObj.fieldContext =
-								column?.fieldContext ?? (column?.type as FieldContext);
-						}
+					// Only add fieldContext if the field is NOT deprecated
+					if (!isDeprecated && fieldName !== 'name') {
+						fieldObj.fieldContext =
+							column?.fieldContext ?? (column?.type as FieldContext);
+					}
 
-						return fieldObj;
-					},
-			  ),
+					return fieldObj;
+				}),
 	};
 }
 
@@ -236,14 +231,15 @@ export function parseAggregations(
 	const result: { expression: string; alias?: string }[] = [];
 	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
 	// Handles quoted ('alias'), dash-separated (field-name), and unquoted values after "as" keyword
-	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
+	const regex =
+		/([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
 	let match = regex.exec(expression);
 	while (match !== null) {
 		const expr = match[1];
 		let alias = match[2] || availableAlias; // Use provided alias or availableAlias if not matched
 		if (alias) {
 			// Remove quotes if present
-			alias = alias.replaceAll(/^['"]|['"]$/g, '');
+			alias = alias.replace(/^['"]|['"]$/g, '');
 			result.push({ expression: expr, alias });
 		} else {
 			result.push({ expression: expr });
@@ -365,10 +361,9 @@ function createTraceOperatorBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (queryData.selectColumns as (
-		| BaseAutocompleteData
-		| TelemetryFieldKey
-	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (
+		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
+	)?.filter((c) => ('key' in c ? c?.key : c?.name));
 
 	const {
 		stepInterval,
@@ -395,7 +390,7 @@ function createTraceOperatorBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-				  )
+					)
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -411,7 +406,7 @@ function createTraceOperatorBaseSpec(
 							},
 							direction: order.order,
 						}),
-				  )
+					)
 				: undefined,
 		legend: isEmpty(legend) ? undefined : legend,
 		having: isEmpty(having) ? undefined : (having as Having),
@@ -425,7 +420,7 @@ function createTraceOperatorBaseSpec(
 						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
 						signal: column?.signal ?? undefined,
 					}),
-			  ),
+				),
 	};
 }
 
@@ -507,18 +502,22 @@ export function convertClickHouseQueriesToV5(
 /**
  * Helper function to reduce query arrays to objects
  */
-function reduceQueriesToObject(
-	queryArray: any[],
-): { queries: Record<string, any>; legends: Record<string, string> } {
+function reduceQueriesToObject(queryArray: any[]): {
+	queries: Record<string, any>;
+	legends: Record<string, string>;
+} {
 	const legends: Record<string, string> = {};
-	const queries = queryArray.reduce((acc, queryItem) => {
-		if (!queryItem.query) {
+	const queries = queryArray.reduce(
+		(acc, queryItem) => {
+			if (!queryItem.query) {
+				return acc;
+			}
+			acc[queryItem.name] = queryItem;
+			legends[queryItem.name] = queryItem.legend;
 			return acc;
-		}
-		acc[queryItem.name] = queryItem;
-		legends[queryItem.name] = queryItem.legend;
-		return acc;
-	}, {} as Record<string, any>);
+		},
+		{} as Record<string, any>,
+	);
 
 	return { queries, legends };
 }
@@ -554,7 +553,7 @@ export const prepareQueryRangePayloadV5 = ({
 				queryTraceOperator && queryTraceOperator.length > 0
 					? queryTraceOperator.filter((traceOperator) =>
 							Boolean(traceOperator.expression.trim()),
-					  )
+						)
 					: [];
 
 			const currentTraceOperator = mapQueryDataToApi(
@@ -634,8 +633,8 @@ export const prepareQueryRangePayloadV5 = ({
 	// Create V5 payload
 	const queryPayload: QueryRangePayloadV5 = {
 		schemaVersion: 'v1',
-		start: startTime ? startTime * 1e3 : Number.parseInt(start, 10) * 1e3,
-		end: endTime ? endTime * 1e3 : Number.parseInt(end, 10) * 1e3,
+		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
+		end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3,
 		requestType,
 		compositeQuery: {
 			queries,
@@ -648,15 +647,18 @@ export const prepareQueryRangePayloadV5 = ({
 					: graphType === PANEL_TYPES.TABLE),
 			fillGaps: fillGaps || false,
 		},
-		variables: Object.entries(variables).reduce((acc, [key, value]) => {
-			acc[key] = {
-				value,
-				type: dynamicVariables
-					?.find((v) => v.name === key)
-					?.type?.toLowerCase() as VariableType,
-			};
-			return acc;
-		}, {} as Record<string, VariableItem>),
+		variables: Object.entries(variables).reduce(
+			(acc, [key, value]) => {
+				acc[key] = {
+					value,
+					type: dynamicVariables
+						?.find((v) => v.name === key)
+						?.type?.toLowerCase() as VariableType,
+				};
+				return acc;
+			},
+			{} as Record<string, VariableItem>,
+		),
 	};
 
 	return { legendMap, queryPayload };

frontend/src/assets/Logos/grafana.svg

@@ -1,70 +1,70 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 142.5 145.6" style="enable-background:new 0 0 142.5 145.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#565656;}
-	.st1{fill:url(#SVGID_1_);}
-</style>
-<g>
-	<path class="st0" d="M28.7,131.5c-0.3,7.9-6.6,14.1-14.4,14.1C6.1,145.6,0,139,0,130.9s6.6-14.7,14.7-14.7c3.6,0,7.2,1.6,10.2,4.4
-		l-2.3,2.9c-2.3-2-5.1-3.4-7.9-3.4c-5.9,0-10.8,4.8-10.8,10.8c0,6.1,4.6,10.8,10.4,10.8c5.2,0,9.3-3.8,10.2-8.8H12.6v-3.5h16.1
-		V131.5z"/>
-	<path class="st0" d="M42.3,129.5h-2.2c-2.4,0-4.4,2-4.4,4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1,2.7-1.6,4.6-1.6h4.2L42.3,129.5z"/>
-	<path class="st0" d="M63.7,145.3h-3.4v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4V145.3z M59.7,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C57.1,141.2,59.1,139.3,59.7,137z"/>
-	<path class="st0" d="M71.5,124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3,3.1-6.8,7-6.8h4.7l-1.6,3.7h-3.1
-		C72.9,121.6,71.5,123,71.5,124.7z"/>
-	<path class="st0" d="M98.5,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H98.5z M94.5,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C92,141.2,93.9,139.3,94.5,137z"/>
-	<path class="st0" d="M119.4,133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4c-2.5,0-4.4,2-4.4,4.4v11.6h-3.9v-19.6h3.2v1.7
-		c1.4-1.3,3.3-2,5.2-2C115.8,125.5,119.4,129.2,119.4,133.8z"/>
-	<path class="st0" d="M142.4,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H142.4z M138.4,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C135.9,141.2,137.8,139.3,138.4,137z"/>
-</g>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.25" y1="10.4893" x2="71.25" y2="113.3415" gradientTransform="matrix(1 0 0 -1 0 148.6)">
-	<stop  offset="0" style="stop-color:#FCEE1F"/>
-	<stop  offset="1" style="stop-color:#F15B2A"/>
-</linearGradient>
-<path class="st1" d="M122.9,49.9c-0.2-1.9-0.5-4.1-1.1-6.5c-0.6-2.4-1.6-5-2.9-7.8c-1.4-2.7-3.1-5.6-5.4-8.3
-	c-0.9-1.1-1.9-2.1-2.9-3.2c1.6-6.3-1.9-11.8-1.9-11.8c-6.1-0.4-9.9,1.9-11.3,2.9c-0.2-0.1-0.5-0.2-0.7-0.3c-1-0.4-2.1-0.8-3.2-1.2
-	c-1.1-0.3-2.2-0.7-3.3-0.9c-1.1-0.3-2.3-0.5-3.5-0.7c-0.2,0-0.4-0.1-0.6-0.1C83.5,3.6,75.9,0,75.9,0c-8.7,5.6-10.4,13.1-10.4,13.1
-	s0,0.2-0.1,0.4c-0.5,0.1-0.9,0.3-1.4,0.4c-0.6,0.2-1.3,0.4-1.9,0.7c-0.6,0.3-1.3,0.5-1.9,0.8c-1.3,0.6-2.5,1.2-3.8,1.9
-	c-1.2,0.7-2.4,1.4-3.5,2.2c-0.2-0.1-0.3-0.2-0.3-0.2c-11.7-4.5-22.1,0.9-22.1,0.9c-0.9,12.5,4.7,20.3,5.8,21.7
-	c-0.3,0.8-0.5,1.5-0.8,2.3c-0.9,2.8-1.5,5.7-1.9,8.7c-0.1,0.4-0.1,0.9-0.2,1.3c-10.8,5.3-14,16.3-14,16.3c9,10.4,19.6,11,19.6,11
-	l0,0c1.3,2.4,2.9,4.7,4.6,6.8c0.7,0.9,1.5,1.7,2.3,2.6c-3.3,9.4,0.5,17.3,0.5,17.3c10.1,0.4,16.7-4.4,18.1-5.5c1,0.3,2,0.6,3,0.9
-	c3.1,0.8,6.3,1.3,9.4,1.4c0.8,0,1.6,0,2.4,0h0.4H80h0.5H81l0,0c4.7,6.8,13.1,7.7,13.1,7.7c5.9-6.3,6.3-12.4,6.3-13.8l0,0
-	c0,0,0,0,0-0.1s0-0.2,0-0.2l0,0c0-0.1,0-0.2,0-0.3c1.2-0.9,2.4-1.8,3.6-2.8c2.4-2.1,4.4-4.6,6.2-7.2c0.2-0.2,0.3-0.5,0.5-0.7
-	c6.7,0.4,11.4-4.2,11.4-4.2c-1.1-7-5.1-10.4-5.9-11l0,0c0,0,0,0-0.1-0.1l-0.1-0.1l0,0l-0.1-0.1c0-0.4,0.1-0.8,0.1-1.3
-	c0.1-0.8,0.1-1.5,0.1-2.3v-0.6v-0.3v-0.1c0-0.2,0-0.1,0-0.2v-0.5v-0.6c0-0.2,0-0.4,0-0.6s0-0.4-0.1-0.6l-0.1-0.6l-0.1-0.6
-	c-0.1-0.8-0.3-1.5-0.4-2.3c-0.7-3-1.9-5.9-3.4-8.4c-1.6-2.6-3.5-4.8-5.7-6.8c-2.2-1.9-4.6-3.5-7.2-4.6c-2.6-1.2-5.2-1.9-7.9-2.2
-	c-1.3-0.2-2.7-0.2-4-0.2h-0.5h-0.1h-0.2h-0.2h-0.5c-0.2,0-0.4,0-0.5,0c-0.7,0.1-1.4,0.2-2,0.3c-2.7,0.5-5.2,1.5-7.4,2.8
-	c-2.2,1.3-4.1,3-5.7,4.9s-2.8,3.9-3.6,6.1c-0.8,2.1-1.3,4.4-1.4,6.5c0,0.5,0,1.1,0,1.6c0,0.1,0,0.3,0,0.4v0.4c0,0.3,0,0.5,0.1,0.8
-	c0.1,1.1,0.3,2.1,0.6,3.1c0.6,2,1.5,3.8,2.7,5.4s2.5,2.8,4,3.8s3,1.7,4.6,2.2c1.6,0.5,3.1,0.7,4.5,0.6c0.2,0,0.4,0,0.5,0
-	c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0c0.2,0,0.3,0,0.5,0h0.1h0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5-0.1c0.2,0,0.3-0.1,0.5-0.1
-	c0.3-0.1,0.7-0.2,1-0.3c0.6-0.2,1.2-0.5,1.8-0.7c0.6-0.3,1.1-0.6,1.5-0.9c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.4,0.6-1.1,0.2-1.6
-	c-0.4-0.4-1-0.5-1.5-0.3C88,74,87.9,74,87.7,74.1c-0.4,0.2-0.9,0.4-1.3,0.5c-0.5,0.1-1,0.3-1.5,0.4c-0.3,0-0.5,0.1-0.8,0.1
-	c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0s-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0,0,0h-0.1h-0.1c-0.1,0-0.1,0-0.2,0
-	s-0.3,0-0.4-0.1c-1.1-0.2-2.3-0.5-3.4-1c-1.1-0.5-2.2-1.2-3.1-2.1c-1-0.9-1.8-1.9-2.5-3.1c-0.7-1.2-1.1-2.5-1.3-3.8
-	c-0.1-0.7-0.2-1.4-0.1-2.1c0-0.2,0-0.4,0-0.6c0,0.1,0,0,0,0v-0.1v-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.7,0.2-1.1c0.5-3,2-5.9,4.3-8.1
-	c0.6-0.6,1.2-1.1,1.9-1.5c0.7-0.5,1.4-0.9,2.1-1.2c0.7-0.3,1.5-0.6,2.3-0.8s1.6-0.4,2.4-0.4c0.4,0,0.8-0.1,1.2-0.1
-	c0.1,0,0.2,0,0.3,0h0.3h0.2c0.1,0,0,0,0,0h0.1h0.3c0.9,0.1,1.8,0.2,2.6,0.4c1.7,0.4,3.4,1,5,1.9c3.2,1.8,5.9,4.5,7.5,7.8
-	c0.8,1.6,1.4,3.4,1.7,5.3c0.1,0.5,0.1,0.9,0.2,1.4v0.3V66c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3v0.3v0.3c0,0.2,0,0.6,0,0.8
-	c0,0.5-0.1,1-0.1,1.5c-0.1,0.5-0.1,1-0.2,1.5s-0.2,1-0.3,1.5c-0.2,1-0.6,1.9-0.9,2.9c-0.7,1.9-1.7,3.7-2.9,5.3
-	c-2.4,3.3-5.7,6-9.4,7.7c-1.9,0.8-3.8,1.5-5.8,1.8c-1,0.2-2,0.3-3,0.3H81h-0.2h-0.3H80h-0.3c0.1,0,0,0,0,0h-0.1
-	c-0.5,0-1.1,0-1.6-0.1c-2.2-0.2-4.3-0.6-6.4-1.2c-2.1-0.6-4.1-1.4-6-2.4c-3.8-2-7.2-4.9-9.9-8.2c-1.3-1.7-2.5-3.5-3.5-5.4
-	s-1.7-3.9-2.3-5.9c-0.6-2-0.9-4.1-1-6.2v-0.4v-0.1v-0.1v-0.2V60v-0.1v-0.1v-0.2v-0.5V59l0,0v-0.2c0-0.3,0-0.5,0-0.8
-	c0-1,0.1-2.1,0.3-3.2c0.1-1.1,0.3-2.1,0.5-3.2c0.2-1.1,0.5-2.1,0.8-3.2c0.6-2.1,1.3-4.1,2.2-6c1.8-3.8,4.1-7.2,6.8-9.9
-	c0.7-0.7,1.4-1.3,2.2-1.9c0.3-0.3,1-0.9,1.8-1.4c0.8-0.5,1.6-1,2.5-1.4c0.4-0.2,0.8-0.4,1.3-0.6c0.2-0.1,0.4-0.2,0.7-0.3
-	c0.2-0.1,0.4-0.2,0.7-0.3c0.9-0.4,1.8-0.7,2.7-1c0.2-0.1,0.5-0.1,0.7-0.2c0.2-0.1,0.5-0.1,0.7-0.2c0.5-0.1,0.9-0.2,1.4-0.4
-	c0.2-0.1,0.5-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0.2,0,0.5-0.1,0.7-0.1l0.4-0.1l0.4-0.1c0.2,0,0.5-0.1,0.7-0.1
-	c0.3,0,0.5-0.1,0.8-0.1c0.2,0,0.6-0.1,0.8-0.1c0.2,0,0.3,0,0.5-0.1h0.3h0.2h0.2c0.3,0,0.5,0,0.8-0.1h0.4c0,0,0.1,0,0,0h0.1h0.2
-	c0.2,0,0.5,0,0.7,0c0.9,0,1.8,0,2.7,0c1.8,0.1,3.6,0.3,5.3,0.6c3.4,0.6,6.7,1.7,9.6,3.2c2.9,1.4,5.6,3.2,7.8,5.1
-	c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.4c0.3,0.2,0.5,0.5,0.8,0.7c0.3,0.2,0.5,0.5,0.8,0.7c0.2,0.3,0.5,0.5,0.7,0.8
-	c1,1,1.9,2.1,2.7,3.1c1.6,2.1,2.9,4.2,3.9,6.2c0.1,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.1,0.2,0.2,0.4s0.2,0.5,0.4,0.7
-	c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.4,0.9,0.7,1.8,1,2.7c0.5,1.4,0.8,2.6,1.1,3.6c0.1,0.4,0.5,0.7,0.9,0.7
-	c0.5,0,0.8-0.4,0.8-0.9C123,52.7,123,51.4,122.9,49.9z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 142.5 145.6" style="enable-background:new 0 0 142.5 145.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#565656;}
+	.st1{fill:url(#SVGID_1_);}
+</style>
+<g>
+	<path class="st0" d="M28.7,131.5c-0.3,7.9-6.6,14.1-14.4,14.1C6.1,145.6,0,139,0,130.9s6.6-14.7,14.7-14.7c3.6,0,7.2,1.6,10.2,4.4
+		l-2.3,2.9c-2.3-2-5.1-3.4-7.9-3.4c-5.9,0-10.8,4.8-10.8,10.8c0,6.1,4.6,10.8,10.4,10.8c5.2,0,9.3-3.8,10.2-8.8H12.6v-3.5h16.1
+		V131.5z"/>
+	<path class="st0" d="M42.3,129.5h-2.2c-2.4,0-4.4,2-4.4,4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1,2.7-1.6,4.6-1.6h4.2L42.3,129.5z"/>
+	<path class="st0" d="M63.7,145.3h-3.4v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4V145.3z M59.7,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C57.1,141.2,59.1,139.3,59.7,137z"/>
+	<path class="st0" d="M71.5,124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3,3.1-6.8,7-6.8h4.7l-1.6,3.7h-3.1
+		C72.9,121.6,71.5,123,71.5,124.7z"/>
+	<path class="st0" d="M98.5,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H98.5z M94.5,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C92,141.2,93.9,139.3,94.5,137z"/>
+	<path class="st0" d="M119.4,133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4c-2.5,0-4.4,2-4.4,4.4v11.6h-3.9v-19.6h3.2v1.7
+		c1.4-1.3,3.3-2,5.2-2C115.8,125.5,119.4,129.2,119.4,133.8z"/>
+	<path class="st0" d="M142.4,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H142.4z M138.4,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C135.9,141.2,137.8,139.3,138.4,137z"/>
+</g>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.25" y1="10.4893" x2="71.25" y2="113.3415" gradientTransform="matrix(1 0 0 -1 0 148.6)">
+	<stop  offset="0" style="stop-color:#FCEE1F"/>
+	<stop  offset="1" style="stop-color:#F15B2A"/>
+</linearGradient>
+<path class="st1" d="M122.9,49.9c-0.2-1.9-0.5-4.1-1.1-6.5c-0.6-2.4-1.6-5-2.9-7.8c-1.4-2.7-3.1-5.6-5.4-8.3
+	c-0.9-1.1-1.9-2.1-2.9-3.2c1.6-6.3-1.9-11.8-1.9-11.8c-6.1-0.4-9.9,1.9-11.3,2.9c-0.2-0.1-0.5-0.2-0.7-0.3c-1-0.4-2.1-0.8-3.2-1.2
+	c-1.1-0.3-2.2-0.7-3.3-0.9c-1.1-0.3-2.3-0.5-3.5-0.7c-0.2,0-0.4-0.1-0.6-0.1C83.5,3.6,75.9,0,75.9,0c-8.7,5.6-10.4,13.1-10.4,13.1
+	s0,0.2-0.1,0.4c-0.5,0.1-0.9,0.3-1.4,0.4c-0.6,0.2-1.3,0.4-1.9,0.7c-0.6,0.3-1.3,0.5-1.9,0.8c-1.3,0.6-2.5,1.2-3.8,1.9
+	c-1.2,0.7-2.4,1.4-3.5,2.2c-0.2-0.1-0.3-0.2-0.3-0.2c-11.7-4.5-22.1,0.9-22.1,0.9c-0.9,12.5,4.7,20.3,5.8,21.7
+	c-0.3,0.8-0.5,1.5-0.8,2.3c-0.9,2.8-1.5,5.7-1.9,8.7c-0.1,0.4-0.1,0.9-0.2,1.3c-10.8,5.3-14,16.3-14,16.3c9,10.4,19.6,11,19.6,11
+	l0,0c1.3,2.4,2.9,4.7,4.6,6.8c0.7,0.9,1.5,1.7,2.3,2.6c-3.3,9.4,0.5,17.3,0.5,17.3c10.1,0.4,16.7-4.4,18.1-5.5c1,0.3,2,0.6,3,0.9
+	c3.1,0.8,6.3,1.3,9.4,1.4c0.8,0,1.6,0,2.4,0h0.4H80h0.5H81l0,0c4.7,6.8,13.1,7.7,13.1,7.7c5.9-6.3,6.3-12.4,6.3-13.8l0,0
+	c0,0,0,0,0-0.1s0-0.2,0-0.2l0,0c0-0.1,0-0.2,0-0.3c1.2-0.9,2.4-1.8,3.6-2.8c2.4-2.1,4.4-4.6,6.2-7.2c0.2-0.2,0.3-0.5,0.5-0.7
+	c6.7,0.4,11.4-4.2,11.4-4.2c-1.1-7-5.1-10.4-5.9-11l0,0c0,0,0,0-0.1-0.1l-0.1-0.1l0,0l-0.1-0.1c0-0.4,0.1-0.8,0.1-1.3
+	c0.1-0.8,0.1-1.5,0.1-2.3v-0.6v-0.3v-0.1c0-0.2,0-0.1,0-0.2v-0.5v-0.6c0-0.2,0-0.4,0-0.6s0-0.4-0.1-0.6l-0.1-0.6l-0.1-0.6
+	c-0.1-0.8-0.3-1.5-0.4-2.3c-0.7-3-1.9-5.9-3.4-8.4c-1.6-2.6-3.5-4.8-5.7-6.8c-2.2-1.9-4.6-3.5-7.2-4.6c-2.6-1.2-5.2-1.9-7.9-2.2
+	c-1.3-0.2-2.7-0.2-4-0.2h-0.5h-0.1h-0.2h-0.2h-0.5c-0.2,0-0.4,0-0.5,0c-0.7,0.1-1.4,0.2-2,0.3c-2.7,0.5-5.2,1.5-7.4,2.8
+	c-2.2,1.3-4.1,3-5.7,4.9s-2.8,3.9-3.6,6.1c-0.8,2.1-1.3,4.4-1.4,6.5c0,0.5,0,1.1,0,1.6c0,0.1,0,0.3,0,0.4v0.4c0,0.3,0,0.5,0.1,0.8
+	c0.1,1.1,0.3,2.1,0.6,3.1c0.6,2,1.5,3.8,2.7,5.4s2.5,2.8,4,3.8s3,1.7,4.6,2.2c1.6,0.5,3.1,0.7,4.5,0.6c0.2,0,0.4,0,0.5,0
+	c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0c0.2,0,0.3,0,0.5,0h0.1h0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5-0.1c0.2,0,0.3-0.1,0.5-0.1
+	c0.3-0.1,0.7-0.2,1-0.3c0.6-0.2,1.2-0.5,1.8-0.7c0.6-0.3,1.1-0.6,1.5-0.9c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.4,0.6-1.1,0.2-1.6
+	c-0.4-0.4-1-0.5-1.5-0.3C88,74,87.9,74,87.7,74.1c-0.4,0.2-0.9,0.4-1.3,0.5c-0.5,0.1-1,0.3-1.5,0.4c-0.3,0-0.5,0.1-0.8,0.1
+	c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0s-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0,0,0h-0.1h-0.1c-0.1,0-0.1,0-0.2,0
+	s-0.3,0-0.4-0.1c-1.1-0.2-2.3-0.5-3.4-1c-1.1-0.5-2.2-1.2-3.1-2.1c-1-0.9-1.8-1.9-2.5-3.1c-0.7-1.2-1.1-2.5-1.3-3.8
+	c-0.1-0.7-0.2-1.4-0.1-2.1c0-0.2,0-0.4,0-0.6c0,0.1,0,0,0,0v-0.1v-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.7,0.2-1.1c0.5-3,2-5.9,4.3-8.1
+	c0.6-0.6,1.2-1.1,1.9-1.5c0.7-0.5,1.4-0.9,2.1-1.2c0.7-0.3,1.5-0.6,2.3-0.8s1.6-0.4,2.4-0.4c0.4,0,0.8-0.1,1.2-0.1
+	c0.1,0,0.2,0,0.3,0h0.3h0.2c0.1,0,0,0,0,0h0.1h0.3c0.9,0.1,1.8,0.2,2.6,0.4c1.7,0.4,3.4,1,5,1.9c3.2,1.8,5.9,4.5,7.5,7.8
+	c0.8,1.6,1.4,3.4,1.7,5.3c0.1,0.5,0.1,0.9,0.2,1.4v0.3V66c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3v0.3v0.3c0,0.2,0,0.6,0,0.8
+	c0,0.5-0.1,1-0.1,1.5c-0.1,0.5-0.1,1-0.2,1.5s-0.2,1-0.3,1.5c-0.2,1-0.6,1.9-0.9,2.9c-0.7,1.9-1.7,3.7-2.9,5.3
+	c-2.4,3.3-5.7,6-9.4,7.7c-1.9,0.8-3.8,1.5-5.8,1.8c-1,0.2-2,0.3-3,0.3H81h-0.2h-0.3H80h-0.3c0.1,0,0,0,0,0h-0.1
+	c-0.5,0-1.1,0-1.6-0.1c-2.2-0.2-4.3-0.6-6.4-1.2c-2.1-0.6-4.1-1.4-6-2.4c-3.8-2-7.2-4.9-9.9-8.2c-1.3-1.7-2.5-3.5-3.5-5.4
+	s-1.7-3.9-2.3-5.9c-0.6-2-0.9-4.1-1-6.2v-0.4v-0.1v-0.1v-0.2V60v-0.1v-0.1v-0.2v-0.5V59l0,0v-0.2c0-0.3,0-0.5,0-0.8
+	c0-1,0.1-2.1,0.3-3.2c0.1-1.1,0.3-2.1,0.5-3.2c0.2-1.1,0.5-2.1,0.8-3.2c0.6-2.1,1.3-4.1,2.2-6c1.8-3.8,4.1-7.2,6.8-9.9
+	c0.7-0.7,1.4-1.3,2.2-1.9c0.3-0.3,1-0.9,1.8-1.4c0.8-0.5,1.6-1,2.5-1.4c0.4-0.2,0.8-0.4,1.3-0.6c0.2-0.1,0.4-0.2,0.7-0.3
+	c0.2-0.1,0.4-0.2,0.7-0.3c0.9-0.4,1.8-0.7,2.7-1c0.2-0.1,0.5-0.1,0.7-0.2c0.2-0.1,0.5-0.1,0.7-0.2c0.5-0.1,0.9-0.2,1.4-0.4
+	c0.2-0.1,0.5-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0.2,0,0.5-0.1,0.7-0.1l0.4-0.1l0.4-0.1c0.2,0,0.5-0.1,0.7-0.1
+	c0.3,0,0.5-0.1,0.8-0.1c0.2,0,0.6-0.1,0.8-0.1c0.2,0,0.3,0,0.5-0.1h0.3h0.2h0.2c0.3,0,0.5,0,0.8-0.1h0.4c0,0,0.1,0,0,0h0.1h0.2
+	c0.2,0,0.5,0,0.7,0c0.9,0,1.8,0,2.7,0c1.8,0.1,3.6,0.3,5.3,0.6c3.4,0.6,6.7,1.7,9.6,3.2c2.9,1.4,5.6,3.2,7.8,5.1
+	c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.4c0.3,0.2,0.5,0.5,0.8,0.7c0.3,0.2,0.5,0.5,0.8,0.7c0.2,0.3,0.5,0.5,0.7,0.8
+	c1,1,1.9,2.1,2.7,3.1c1.6,2.1,2.9,4.2,3.9,6.2c0.1,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.1,0.2,0.2,0.4s0.2,0.5,0.4,0.7
+	c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.4,0.9,0.7,1.8,1,2.7c0.5,1.4,0.8,2.6,1.1,3.6c0.1,0.4,0.5,0.7,0.9,0.7
+	c0.5,0,0.8-0.4,0.8-0.9C123,52.7,123,51.4,122.9,49.9z"/>
+</svg>

frontend/src/assets/Logos/quickstart.svg

@@ -1,21 +1,21 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<polygon style="fill:#FFD500;" points="382.395,228.568 291.215,228.568 330.762,10.199 129.603,283.43 220.785,283.43 
-	181.238,501.799 "/>
-<g>
-	<path style="fill:#3D3D3D;" d="M181.234,512c-1.355,0-2.726-0.271-4.033-0.833c-4.357-1.878-6.845-6.514-5.999-11.184
-		l37.371-206.353h-78.969c-3.846,0-7.367-2.164-9.103-5.597c-1.735-3.433-1.391-7.55,0.889-10.648L322.548,4.153
-		c2.814-3.822,7.891-5.196,12.25-3.32c4.357,1.878,6.845,6.514,5.999,11.184L303.427,218.37h78.969c3.846,0,7.367,2.164,9.103,5.597
-		c1.735,3.433,1.391,7.55-0.889,10.648L189.451,507.846C187.481,510.523,184.399,512,181.234,512z M149.777,273.231h71.007
-		c3.023,0,5.89,1.341,7.828,3.662c1.938,2.32,2.747,5.38,2.208,8.355l-31.704,175.065l163.105-221.545h-71.007
-		c-3.023,0-5.89-1.341-7.828-3.661c-1.938-2.32-2.747-5.38-2.208-8.355l31.704-175.065L149.777,273.231z"/>
-	<path style="fill:#3D3D3D;" d="M267.666,171.348c-0.604,0-1.215-0.054-1.829-0.165c-5.543-1.004-9.223-6.31-8.22-11.853l0.923-5.1
-		c1.003-5.543,6.323-9.225,11.852-8.219c5.543,1.004,9.223,6.31,8.22,11.853l-0.923,5.1
-		C276.797,167.892,272.503,171.348,267.666,171.348z"/>
-	<path style="fill:#3D3D3D;" d="M255.455,238.77c-0.604,0-1.215-0.054-1.83-0.165c-5.543-1.004-9.222-6.31-8.218-11.853
-		l7.037-38.864c1.004-5.543,6.317-9.225,11.854-8.219c5.543,1.004,9.222,6.31,8.219,11.853l-7.037,38.864
-		C264.587,235.314,260.293,238.77,255.455,238.77z"/>
-</g>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<polygon style="fill:#FFD500;" points="382.395,228.568 291.215,228.568 330.762,10.199 129.603,283.43 220.785,283.43 
+	181.238,501.799 "/>
+<g>
+	<path style="fill:#3D3D3D;" d="M181.234,512c-1.355,0-2.726-0.271-4.033-0.833c-4.357-1.878-6.845-6.514-5.999-11.184
+		l37.371-206.353h-78.969c-3.846,0-7.367-2.164-9.103-5.597c-1.735-3.433-1.391-7.55,0.889-10.648L322.548,4.153
+		c2.814-3.822,7.891-5.196,12.25-3.32c4.357,1.878,6.845,6.514,5.999,11.184L303.427,218.37h78.969c3.846,0,7.367,2.164,9.103,5.597
+		c1.735,3.433,1.391,7.55-0.889,10.648L189.451,507.846C187.481,510.523,184.399,512,181.234,512z M149.777,273.231h71.007
+		c3.023,0,5.89,1.341,7.828,3.662c1.938,2.32,2.747,5.38,2.208,8.355l-31.704,175.065l163.105-221.545h-71.007
+		c-3.023,0-5.89-1.341-7.828-3.661c-1.938-2.32-2.747-5.38-2.208-8.355l31.704-175.065L149.777,273.231z"/>
+	<path style="fill:#3D3D3D;" d="M267.666,171.348c-0.604,0-1.215-0.054-1.829-0.165c-5.543-1.004-9.223-6.31-8.22-11.853l0.923-5.1
+		c1.003-5.543,6.323-9.225,11.852-8.219c5.543,1.004,9.223,6.31,8.22,11.853l-0.923,5.1
+		C276.797,167.892,272.503,171.348,267.666,171.348z"/>
+	<path style="fill:#3D3D3D;" d="M255.455,238.77c-0.604,0-1.215-0.054-1.83-0.165c-5.543-1.004-9.222-6.31-8.218-11.853
+		l7.037-38.864c1.004-5.543,6.317-9.225,11.854-8.219c5.543,1.004,9.222,6.31,8.219,11.853l-7.037,38.864
+		C264.587,235.314,260.293,238.77,255.455,238.77z"/>
+</g>
 </svg>

frontend/src/components/AppLoading/AppLoading.tsx

@@ -13,7 +13,7 @@ function AppLoading(): JSX.Element {
 		try {
 			const theme = get(LOCALSTORAGE.THEME);
 			return theme !== THEME_MODE.LIGHT; // Return true for dark, false for light
-		} catch {
+		} catch (error) {
 			// If localStorage is not available, default to dark theme
 			return true;
 		}

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

@@ -9,7 +9,7 @@ jest.mock('../../../api/browser/localstorage/get', () => ({
 }));
 
 // Access the mocked function
-const mockGet = (getLocal as unknown) as jest.Mock;
+const mockGet = getLocal as unknown as jest.Mock;
 
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
@@ -23,7 +23,7 @@ describe('AppLoading', () => {
 
 	it('should render loading screen with dark theme by default', () => {
 		// Mock localStorage to return dark theme (or undefined for default)
-		mockGet.mockReturnValue();
+		mockGet.mockReturnValue(undefined);
 
 		render(<AppLoading />);
 
@@ -40,7 +40,7 @@ describe('AppLoading', () => {
 
 	it('should have proper structure and content', () => {
 		// Mock localStorage to return dark theme
-		mockGet.mockReturnValue();
+		mockGet.mockReturnValue(undefined);
 
 		render(<AppLoading />);
 

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

@@ -31,9 +31,8 @@ export function FilterSelect({
 	onChange,
 	isMultiple,
 }: SelectOptionConfig): JSX.Element {
-	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
-		filterType,
-	);
+	const { handleSearch, isFetching, options } =
+		useCeleryFilterOptions(filterType);
 
 	const urlQuery = useUrlQuery();
 	const history = useHistory();
@@ -51,7 +50,7 @@ export function FilterSelect({
 	// Memoize options to include the typed value if not present
 	const mergedOptions = useMemo(() => {
 		if (
-			searchValue.trim().length > 0 &&
+			!!searchValue.trim().length &&
 			!options.some((opt) => opt.value === searchValue)
 		) {
 			return [{ value: searchValue, label: searchValue }, ...options];

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

@@ -280,30 +280,28 @@ function getTableData(data: QueueOverviewResponse['data']): RowData[] {
 	];
 
 	const tableData: RowData[] =
-		data?.map(
-			(row, index: number): RowData => {
-				const rowData: Record<string, string | number> = {};
-				columnOrder.forEach((key) => {
-					const value = row.data[key as keyof typeof row.data];
-					if (typeof value === 'string' || typeof value === 'number') {
-						rowData[key] = value;
-					}
-				});
-				Object.entries(row.data).forEach(([key, value]) => {
-					if (
-						!columnOrder.includes(key) &&
-						(typeof value === 'string' || typeof value === 'number')
-					) {
-						rowData[key] = value;
-					}
-				});
+		data?.map((row, index: number): RowData => {
+			const rowData: Record<string, string | number> = {};
+			columnOrder.forEach((key) => {
+				const value = row.data[key as keyof typeof row.data];
+				if (typeof value === 'string' || typeof value === 'number') {
+					rowData[key] = value;
+				}
+			});
+			Object.entries(row.data).forEach(([key, value]) => {
+				if (
+					!columnOrder.includes(key) &&
+					(typeof value === 'string' || typeof value === 'number')
+				) {
+					rowData[key] = value;
+				}
+			});
 
-				return {
-					...rowData,
-					key: index,
-				};
-			},
-		) || [];
+			return {
+				...rowData,
+				key: index,
+			};
+		}) || [];
 
 	return tableData;
 }
@@ -480,10 +478,10 @@ export default function CeleryOverviewTable({
 		[searchText],
 	);
 
-	const filteredData = useMemo(() => getFilteredData(tableData), [
-		getFilteredData,
-		tableData,
-	]);
+	const filteredData = useMemo(
+		() => getFilteredData(tableData),
+		[getFilteredData, tableData],
+	);
 
 	const prevTableDataRef = useRef<string>();
 

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -13,9 +13,8 @@ import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
 import './CeleryTaskConfigOptions.styles.scss';
 
 function CeleryTaskConfigOptions(): JSX.Element {
-	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
-		'celery.task_name',
-	);
+	const { handleSearch, isFetching, options } =
+		useCeleryFilterOptions('celery.task_name');
 	const history = useHistory();
 	const location = useLocation();
 

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

@@ -469,8 +469,7 @@ export const celeryActiveTasksWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
-						id:
-							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
+						id: 'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},

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

@@ -127,22 +127,17 @@ function CeleryTaskLatencyGraph({
 	const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);
 
 	const onGraphClick = useCallback(
-		(type: string): OnClickPluginOpts['onClick'] => (
-			xValue,
-			yValue,
-			mouseX,
-			mouseY,
-			data,
-		): Promise<void> => {
-			const [firstDataPoint] = Object.entries(data || {});
-			const [entity, value] = firstDataPoint;
-			setEntityData({
-				entity,
-				value,
-			});
+		(type: string): OnClickPluginOpts['onClick'] =>
+			(xValue, yValue, mouseX, mouseY, data): Promise<void> => {
+				const [firstDataPoint] = Object.entries(data || {});
+				const [entity, value] = firstDataPoint;
+				setEntityData({
+					entity,
+					value,
+				});
 
-			return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
-		},
+				return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
+			},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[handleSetTimeStamp],
 	);

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

@@ -92,10 +92,10 @@ function CeleryTaskStateGraphConfig({
 							{isLoading
 								? '-'
 								: isError
-								? '-'
-								: Number.isNaN(values[index])
-								? '-'
-								: Math.round(Number(values[index]))}
+									? '-'
+									: Number.isNaN(values[index])
+										? '-'
+										: Math.round(Number(values[index]))}
 						</div>
 					</div>
 					{tab.key === barState && <div className="celery-task-states__indicator" />}

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

@@ -57,7 +57,7 @@ export const useGetValueFromWidget = (
 			return 'Error';
 		}
 
-		const value = Number.parseFloat(
+		const value = parseFloat(
 			query.data?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
 				?.values?.[0]?.value || 'NaN',
 		);

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -65,7 +65,7 @@ export function applyCeleryFilterOnWidgetData(
 									items: [...(queryItem.filters?.items || []), ...filters],
 									op: queryItem.filters?.op || 'AND',
 								},
-						  }
+							}
 						: queryItem,
 				),
 			},
@@ -104,11 +104,11 @@ export const createFiltersFromData = (
 	op: string;
 	value: string;
 }> => {
-	const excludeKeys = new Set(['A', 'A_without_unit']);
+	const excludeKeys = ['A', 'A_without_unit'];
 
 	return (
 		Object.entries(data)
-			.filter(([key]) => !excludeKeys.has(key))
+			.filter(([key]) => !excludeKeys.includes(key))
 			// eslint-disable-next-line sonarjs/no-identical-functions
 			.map(([key, value]) => ({
 				id: uuidv4(),

frontend/src/components/CeleryTask/useGetGraphCustomSeries.ts

@@ -9,7 +9,7 @@ import { paths } from './CeleryUtils';
 
 interface UseGetGraphCustomSeriesProps {
 	isDarkMode: boolean;
-	drawStyle?: typeof drawStyles[keyof typeof drawStyles];
+	drawStyle?: (typeof drawStyles)[keyof typeof drawStyles];
 	colorMapping?: Record<string, string>;
 }
 

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -37,9 +37,8 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 			preference.name === USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
 	)?.value as string;
 
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
+	const { mutate: updateUserPreferenceMutation } =
+		useMutation(updateUserPreference);
 
 	useEffect(() => {
 		// Update the seen version
@@ -60,11 +59,8 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 
 	const checkScroll = useCallback((): void => {
 		if (changelogContentSectionRef.current) {
-			const {
-				scrollHeight,
-				clientHeight,
-				scrollTop,
-			} = changelogContentSectionRef.current;
+			const { scrollHeight, clientHeight, scrollTop } =
+				changelogContentSectionRef.current;
 			const isAtBottom = scrollHeight - clientHeight - scrollTop <= 8;
 			setHasScroll(scrollHeight > clientHeight + 24 && !isAtBottom); // 24px - buffer height to show show more
 		}

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -14,9 +14,8 @@ import { getBaseUrl } from 'utils/basePath';
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
 
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
 
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -388,7 +388,7 @@ function ClientSideQBSearch(
 						({
 							label: key.key,
 							value: key,
-						} as Option),
+						}) as Option,
 				) || [],
 			);
 		}
@@ -440,8 +440,8 @@ function ClientSideQBSearch(
 			const values: Array<string | number | boolean> = [];
 			const { tagValue } = getTagToken(searchValue);
 			if (isArray(tagValue)) {
-				if (!isEmpty(tagValue.at(-1))) {
-					values.push(tagValue.at(-1));
+				if (!isEmpty(tagValue[tagValue.length - 1])) {
+					values.push(tagValue[tagValue.length - 1]);
 				}
 			} else if (!isEmpty(tagValue)) {
 				values.push(tagValue);
@@ -462,7 +462,7 @@ function ClientSideQBSearch(
 							({
 								label: checkCommaInValue(String(val)),
 								value: val,
-							} as Option),
+							}) as Option,
 					),
 				);
 			} else {
@@ -488,9 +488,9 @@ function ClientSideQBSearch(
 			const computedTagValue =
 				tag.value &&
 				Array.isArray(tag.value) &&
-				tag.value.at(-1) === ''
+				tag.value[tag.value.length - 1] === ''
 					? tag.value?.slice(0, -1)
-					: tag.value ?? '';
+					: (tag.value ?? '');
 			filterTags.items.push({
 				id: tag.id || uuid().slice(0, 8),
 				key: tag.key,
@@ -610,7 +610,7 @@ function ClientSideQBSearch(
 				searchValue={searchValue}
 				className={className}
 				rootClassName="query-builder-search client-side-qb-search"
-				disabled={attributeKeys.length === 0}
+				disabled={!attributeKeys.length}
 				style={selectStyle}
 				onSearch={handleSearch}
 				onSelect={handleDropdownSelect}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -32,6 +32,7 @@ function CreateServiceAccountModal(): JSX.Element {
 		SA_QUERY_PARAMS.CREATE_SA,
 		parseAsBoolean.withDefault(false),
 	);
+	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 
 	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 
@@ -47,29 +48,28 @@ function CreateServiceAccountModal(): JSX.Element {
 		},
 	});
 
-	const {
-		mutate: createServiceAccount,
-		isLoading: isSubmitting,
-	} = useCreateServiceAccount({
-		mutation: {
-			onSuccess: async () => {
-				toast.success('Service account created successfully');
-				reset();
-				await setIsOpen(null);
-				await invalidateListServiceAccounts(queryClient);
+	const { mutate: createServiceAccount, isLoading: isSubmitting } =
+		useCreateServiceAccount({
+			mutation: {
+				onSuccess: async (response) => {
+					toast.success('Service account created successfully');
+					reset();
+					await setIsOpen(null);
+					await invalidateListServiceAccounts(queryClient);
+					await setSelectedAccountId(response.data.id);
+				},
+				onError: (err) => {
+					const errMessage = convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					);
+					showErrorModal(errMessage as APIError);
+				},
 			},
-			onError: (err) => {
-				const errMessage = convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				);
-				showErrorModal(errMessage as APIError);
-			},
-		},
-	});
+		});
 
 	function handleClose(): void {
 		reset();
-		setIsOpen(null);
+		void setIsOpen(null);
 	}
 
 	function handleCreate(values: FormValues): void {

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -96,10 +96,8 @@ function CustomTimePicker({
 	maxTime,
 	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
-	const [
-		selectedTimePlaceholderValue,
-		setSelectedTimePlaceholderValue,
-	] = useState('Select / Enter Time Range');
+	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
+		useState('Select / Enter Time Range');
 
 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<CustomTimePickerInputStatus>(
@@ -147,7 +145,7 @@ function CustomTimePicker({
 			return `Last ${selectedTime}`;
 		}
 
-		const value = Number.parseInt(match[1], 10);
+		const value = parseInt(match[1], 10);
 		const unit = match[2];
 
 		// Map unit abbreviations to full words
@@ -312,7 +310,7 @@ function CustomTimePicker({
 
 			const match = inputValue.match(/^(\d+)([mhdw])$/) as RegExpMatchArray;
 
-			const value = Number.parseInt(match[1], 10);
+			const value = parseInt(match[1], 10);
 			const unit = match[2];
 
 			const currentTime = dayjs();

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -116,9 +116,10 @@ function CustomTimePickerPopoverContent({
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
-	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
-		pathname,
-	]);
+	const isLogsExplorerPage = useMemo(
+		() => pathname === ROUTES.LOGS_EXPLORER,
+		[pathname],
+	);
 
 	const url = new URLSearchParams(window.location.search);
 
@@ -154,8 +155,8 @@ function CustomTimePickerPopoverContent({
 		if (!customDateTimeVisible) {
 			const customTimeRanges = getCustomTimeRanges();
 
-			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
-				(range) => ({
+			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] =
+				customTimeRanges.map((range) => ({
 					label: `${dayjs(range.from)
 						.tz(timezone.value)
 						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
@@ -165,8 +166,7 @@ function CustomTimePickerPopoverContent({
 					to: range.to,
 					value: range.timestamp,
 					timestamp: range.timestamp,
-				}),
-			);
+				}));
 
 			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
 		}

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -21,7 +21,7 @@ interface RangePickerModalProps {
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler: (
 		dateTimeRange: DateTimeRangeType,
-		lexicalContext?: LexicalContext  ,
+		lexicalContext?: LexicalContext | undefined,
 	) => void;
 	selectedTime: string;
 	onTimeChange?: (

frontend/src/components/CustomTimePicker/timezoneUtils.ts

@@ -19,7 +19,7 @@ const TIMEZONE_TYPES = {
 	STANDARD: 'STANDARD',
 } as const;
 
-type TimezoneType = typeof TIMEZONE_TYPES[keyof typeof TIMEZONE_TYPES];
+type TimezoneType = (typeof TIMEZONE_TYPES)[keyof typeof TIMEZONE_TYPES];
 
 export const UTC_TIMEZONE: Timezone = {
 	name: 'Coordinated Universal Time — UTC, GMT',
@@ -82,7 +82,7 @@ const createTimezoneEntry = (
 		name: displayName,
 		value,
 		offset,
-		searchIndex: offset.replaceAll(/ /g, ''),
+		searchIndex: offset.replace(/ /g, ''),
 		...(hasDivider && { hasDivider }),
 	};
 };

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -13,7 +13,7 @@ import '@testing-library/jest-dom';
 import { DownloadFormats, DownloadRowCounts } from './constants';
 import DownloadOptionsMenu from './DownloadOptionsMenu';
 
-const mockDownloadExportData = jest.fn().mockResolvedValue();
+const mockDownloadExportData = jest.fn().mockResolvedValue(undefined);
 jest.mock('api/v1/download/downloadExportData', () => ({
 	downloadExportData: (...args: any[]): any => mockDownloadExportData(...args),
 	default: (...args: any[]): any => mockDownloadExportData(...args),
@@ -94,7 +94,7 @@ describe.each([
 	const testId = `periscope-btn-download-${dataSource}`;
 
 	beforeEach(() => {
-		mockDownloadExportData.mockReset().mockResolvedValue();
+		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
 		(message.success as jest.Mock).mockReset();
 		(message.error as jest.Mock).mockReset();
 		mockUseQueryBuilder.mockReturnValue({
@@ -213,7 +213,7 @@ describe.each([
 			const callArgs = mockDownloadExportData.mock.calls[0][0];
 			const query = callArgs.body.compositeQuery.queries[0];
 			expect(query.spec.groupBy).toBeUndefined();
-			expect(query.spec.having).toStrictEqual({ expression: '' });
+			expect(query.spec.having).toEqual({ expression: '' });
 		});
 	});
 
@@ -238,7 +238,7 @@ describe.each([
 			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
 			const callArgs = mockDownloadExportData.mock.calls[0][0];
 			const query = callArgs.body.compositeQuery.queries[0];
-			expect(query.spec.selectFields).toStrictEqual([
+			expect(query.spec.selectFields).toEqual([
 				expect.objectContaining({
 					name: 'http.status',
 					fieldDataType: 'int64',
@@ -322,7 +322,7 @@ describe('DownloadOptionsMenu for traces with queryTraceOperator', () => {
 	const testId = `periscope-btn-download-${dataSource}`;
 
 	beforeEach(() => {
-		mockDownloadExportData.mockReset().mockResolvedValue();
+		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
 		(message.success as jest.Mock).mockReset();
 	});
 

frontend/src/components/DraggableTableRow/index.tsx

@@ -41,8 +41,7 @@ function DraggableTableRow({
 	);
 }
 
-interface DraggableTableRowProps
-	extends React.HTMLAttributes<HTMLTableRowElement> {
+interface DraggableTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
 	index: number;
 	moveRow: (dragIndex: number, hoverIndex: number) => void;
 }

frontend/src/components/DraggableTableRow/tests/utils.test.ts

@@ -6,39 +6,39 @@ jest.mock('react-dnd', () => ({
 }));
 
 describe('Utils testing of DraggableTableRow component', () => {
-	it('Should dropHandler return true', () => {
+	test('Should dropHandler return true', () => {
 		const monitor = {
 			isOver: jest.fn().mockReturnValueOnce(true),
 		} as never;
 		const dropDataTruthy = dropHandler(monitor);
 
-		expect(dropDataTruthy).toStrictEqual({ isOver: true });
+		expect(dropDataTruthy).toEqual({ isOver: true });
 	});
 
-	it('Should dropHandler return false', () => {
+	test('Should dropHandler return false', () => {
 		const monitor = {
 			isOver: jest.fn().mockReturnValueOnce(false),
 		} as never;
 		const dropDataFalsy = dropHandler(monitor);
 
-		expect(dropDataFalsy).toStrictEqual({ isOver: false });
+		expect(dropDataFalsy).toEqual({ isOver: false });
 	});
 
-	it('Should dragHandler return true', () => {
+	test('Should dragHandler return true', () => {
 		const monitor = {
 			isDragging: jest.fn().mockReturnValueOnce(true),
 		} as never;
 		const dragDataTruthy = dragHandler(monitor);
 
-		expect(dragDataTruthy).toStrictEqual({ isDragging: true });
+		expect(dragDataTruthy).toEqual({ isDragging: true });
 	});
 
-	it('Should dragHandler return false', () => {
+	test('Should dragHandler return false', () => {
 		const monitor = {
 			isDragging: jest.fn().mockReturnValueOnce(false),
 		} as never;
 		const dragDataFalsy = dragHandler(monitor);
 
-		expect(dragDataFalsy).toStrictEqual({ isDragging: false });
+		expect(dragDataFalsy).toEqual({ isDragging: false });
 	});
 });

frontend/src/components/DraggableTableRow/utils.ts

@@ -6,9 +6,9 @@ export function dropHandler(monitor: DropTargetMonitor): { isOver: boolean } {
 	};
 }
 
-export function dragHandler(
-	monitor: DragSourceMonitor,
-): { isDragging: boolean } {
+export function dragHandler(monitor: DragSourceMonitor): {
+	isDragging: boolean;
+} {
 	return {
 		isDragging: monitor.isDragging(),
 	};

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -158,10 +158,8 @@ function EditMemberDrawer({
 		new Date(String(existingToken.expiresAt)) < new Date();
 
 	// Create/regenerate token mutation
-	const {
-		mutateAsync: createTokenMutation,
-		isLoading: isGeneratingLink,
-	} = useCreateResetPasswordToken();
+	const { mutateAsync: createTokenMutation, isLoading: isGeneratingLink } =
+		useCreateResetPasswordToken();
 
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
@@ -221,22 +219,20 @@ function EditMemberDrawer({
 	});
 
 	const makeRoleRetry = useCallback(
-		(
-			context: string,
-			rawRetry: () => Promise<void>,
-		) => async (): Promise<void> => {
-			try {
-				await rawRetry();
-				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-				refetchUser();
-			} catch (err) {
-				setSaveErrors((prev) =>
-					prev.map((e) =>
-						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
-					),
-				);
-			}
-		},
+		(context: string, rawRetry: () => Promise<void>) =>
+			async (): Promise<void> => {
+				try {
+					await rawRetry();
+					setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+					refetchUser();
+				} catch (err) {
+					setSaveErrors((prev) =>
+						prev.map((e) =>
+							e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+						),
+					);
+				}
+			},
 		[refetchUser],
 	);
 
@@ -280,7 +276,7 @@ function EditMemberDrawer({
 					: updateUser({
 							pathParams: { id: member.id },
 							data: { displayName: localDisplayName },
-					  })
+						})
 				: Promise.resolve();
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
@@ -389,7 +385,7 @@ function EditMemberDrawer({
 						? formatTimezoneAdjustedTimestamp(
 								String(response.data.expiresAt),
 								DATE_TIME_FORMATS.DASH_DATETIME,
-						  )
+							)
 						: null,
 				);
 				setHasCopiedResetLink(false);
@@ -498,8 +494,8 @@ function EditMemberDrawer({
 							isRootUser
 								? ROOT_USER_TOOLTIP
 								: isDeleted
-								? undefined
-								: 'You cannot modify your own role'
+									? undefined
+									: 'You cannot modify your own role'
 						}
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
@@ -622,13 +618,13 @@ function EditMemberDrawer({
 									{isGeneratingLink
 										? 'Generating...'
 										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
+											? getInviteButtonLabel(
+													isLoadingTokenStatus,
+													existingToken,
+													isTokenExpired,
+													tokenNotFound,
+												)
+											: 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>

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

@@ -361,10 +361,12 @@ describe('EditMemberDrawer', () => {
 
 		await user.click(screen.getByRole('button', { name: /delete member/i }));
 
-		await expect(screen.findByText(/are you sure you want to delete/i)).resolves.toBeInTheDocument();
+		expect(
+			await screen.findByText(/are you sure you want to delete/i),
+		).toBeInTheDocument();
 
 		const confirmBtns = screen.getAllByRole('button', { name: /delete member/i });
-		await user.click(confirmBtns.at(-1));
+		await user.click(confirmBtns[confirmBtns.length - 1]);
 
 		await waitFor(() => {
 			expect(mockDeleteMutate).toHaveBeenCalledWith({
@@ -439,10 +441,12 @@ describe('EditMemberDrawer', () => {
 
 		await user.click(screen.getByRole('button', { name: /revoke invite/i }));
 
-		await expect(screen.findByText(/Are you sure you want to revoke the invite/i)).resolves.toBeInTheDocument();
+		expect(
+			await screen.findByText(/Are you sure you want to revoke the invite/i),
+		).toBeInTheDocument();
 
 		const confirmBtns = screen.getAllByRole('button', { name: /revoke invite/i });
-		await user.click(confirmBtns.at(-1));
+		await user.click(confirmBtns[confirmBtns.length - 1]);
 
 		await waitFor(() => {
 			expect(mockDeleteMutate).toHaveBeenCalledWith({
@@ -549,7 +553,7 @@ describe('EditMemberDrawer', () => {
 			const confirmBtns = screen.getAllByRole('button', {
 				name: /delete member/i,
 			});
-			await user.click(confirmBtns.at(-1));
+			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
 				expect(showErrorModal).toHaveBeenCalledWith(
@@ -580,7 +584,7 @@ describe('EditMemberDrawer', () => {
 			const confirmBtns = screen.getAllByRole('button', {
 				name: /revoke invite/i,
 			});
-			await user.click(confirmBtns.at(-1));
+			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
 				expect(showErrorModal).toHaveBeenCalledWith(

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

@@ -180,7 +180,7 @@ it('should close the modal when the onCancel event is triggered', async () => {
 
 	await waitFor(() => {
 		// check if the modal is not visible
-		const modal = document.querySelectorAll('.ant-modal');
+		const modal = document.getElementsByClassName('ant-modal');
 		const style = window.getComputedStyle(modal[0]);
 		expect(style.display).toBe('none');
 	});

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -168,9 +168,12 @@
 		gap: 3px;
 		background: var(--l1-border);
 		border-radius: 20px;
-		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
+		box-shadow:
+			0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+			0px 66px 18px 0px rgba(0, 0, 0, 0.01),
+			0px 37px 22px 0px rgba(0, 0, 0, 0.03),
+			0px 17px 17px 0px rgba(0, 0, 0, 0.04),
+			0px 4px 9px 0px rgba(0, 0, 0, 0.04);
 	}
 
 	&__scroll-hint-text {

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

@@ -25,15 +25,14 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} =
-		error && 'error' in error
-			? error?.error?.error || {}
-			: {
-					url: undefined,
-					errors: [],
-					code: error.code || 500,
-					message: error.message || 'Something went wrong',
-			  };
+	} = error && 'error' in error
+		? error?.error?.error || {}
+		: {
+				url: undefined,
+				errors: [],
+				code: error.code || 500,
+				message: error.message || 'Something went wrong',
+			};
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -23,11 +23,8 @@ function MenuItemGenerator({
 	refetchAllView,
 	sourcePage,
 }: MenuItemLabelGeneratorProps): JSX.Element {
-	const {
-		panelType,
-		redirectWithQueryBuilderData,
-		updateAllQueriesOperators,
-	} = useQueryBuilder();
+	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
+		useQueryBuilder();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const { notifications } = useNotifications();

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -17,11 +17,8 @@ function SaveViewWithName({
 }: SaveViewWithNameProps): JSX.Element {
 	const [form] = Form.useForm<SaveViewFormProps>();
 	const { t } = useTranslation(['explorer']);
-	const {
-		currentQuery,
-		panelType,
-		redirectWithQueryBuilderData,
-	} = useQueryBuilder();
+	const { currentQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
 	const { notifications } = useNotifications();
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 

frontend/src/components/ExplorerCard/constants.ts

@@ -1,8 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url:
-		'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/ExplorerCard/utils.ts

@@ -34,7 +34,7 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
 		const query = mapQueryDataFromApi(compositeQuery);
 		return { query, name, id, panelType: compositeQuery.panelType, extraData };
 	}
-	return;
+	return undefined;
 };
 
 export const omitIdFromQuery = (query: Query | null): any => ({
@@ -198,7 +198,7 @@ export const deleteViewHandler = ({
 
 export const trimViewName = (viewName: string): string => {
 	if (viewName.length > 20) {
-		return `${viewName.slice(0, 20)}...`;
+		return `${viewName.substring(0, 20)}...`;
 	}
 	return viewName;
 };

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

@@ -55,9 +55,8 @@ function createMousedownHandler(
 			startDragPositionX = right;
 		}
 
-		const startValuePositionX = chart.scales.x.getValueForPixel(
-			startDragPositionX,
-		);
+		const startValuePositionX =
+			chart.scales.x.getValueForPixel(startDragPositionX);
 
 		dragData.onDragStart(startDragPositionX, startValuePositionX);
 	};
@@ -109,9 +108,8 @@ function createMouseupHandler(
 			endRelativePostionX = right;
 		}
 
-		const endValuePositionX = chart.scales.x.getValueForPixel(
-			endRelativePostionX,
-		);
+		const endValuePositionX =
+			chart.scales.x.getValueForPixel(endRelativePostionX);
 
 		dragData.onDragEnd(endRelativePostionX, endValuePositionX);
 

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

@@ -12,11 +12,12 @@ export type IntersectionCursorPluginOptions = {
 	gapSize?: number;
 };
 
-export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> = {
-	color: 'white',
-	dashSize: 3,
-	gapSize: 3,
-};
+export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> =
+	{
+		color: 'white',
+		dashSize: 3,
+		gapSize: 3,
+	};
 
 export function createIntersectionCursorPluginOptions(
 	isEnabled: boolean,

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

@@ -9,7 +9,7 @@ const getOrCreateLegendList = (
 	id: string,
 	isLonger: boolean,
 ): HTMLUListElement => {
-	const legendContainer = document.querySelector(`#${id}`);
+	const legendContainer = document.getElementById(id);
 	let listContainer = legendContainer?.querySelector('ul');
 
 	if (!listContainer) {
@@ -26,7 +26,7 @@ const getOrCreateLegendList = (
 		listContainer.style.flexWrap = 'wrap';
 		listContainer.style.justifyContent = 'center';
 		listContainer.style.fontSize = '0.75rem';
-		legendContainer?.append(listContainer);
+		legendContainer?.appendChild(listContainer);
 	}
 
 	return listContainer;
@@ -52,7 +52,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 		])
 			? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
 					chart,
-			  )
+				)
 			: null;
 
 		items?.forEach((item: Record<any, any>, index: number) => {
@@ -64,7 +64,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 			// li.style.marginTop = '5px';
 
 			li.onclick = (): void => {
-				// @ts-expect-error
+				// @ts-ignore
 				const { type } = chart.config;
 				if (type === 'pie' || type === 'doughnut') {
 					// Pie and doughnut charts only have a single dataset and visibility is per item
@@ -101,11 +101,11 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 				textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
 
 				const text = document.createTextNode(item.text);
-				textContainer.append(text);
+				textContainer.appendChild(text);
 
-				li.append(boxSpan);
-				li.append(textContainer);
-				ul.append(li);
+				li.appendChild(boxSpan);
+				li.appendChild(textContainer);
+				ul.appendChild(li);
 			}
 		});
 	},

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

@@ -9,7 +9,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'millisecond');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.millisecond,
 				);
 			}
@@ -17,7 +17,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'second');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.second,
 				);
 			}
@@ -25,7 +25,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'minute');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.minute,
 				);
 			}
@@ -33,7 +33,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'hour');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.hour,
 				);
 			}
@@ -41,7 +41,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'day');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.day,
 				);
 			}
@@ -49,7 +49,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'week');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.week,
 				);
 			}
@@ -57,7 +57,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'month');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.month,
 				);
 			}
@@ -65,7 +65,7 @@ describe('xAxisConfig for Chart', () => {
 				const start = dayjs();
 				const end = start.add(10, 'year');
 
-				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toStrictEqual(
+				expect(convertTimeRange(start.valueOf(), end.valueOf()).unitName).toEqual(
 					TIME_UNITS.year,
 				);
 			}

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

@@ -7,7 +7,7 @@ const testFullPrecisionGetYAxisFormattedValue = (
 ): string => getYAxisFormattedValue(value, format, PrecisionOptionsEnum.FULL);
 
 describe('getYAxisFormattedValue - none (full precision legacy assertions)', () => {
-	it('large integers and decimals', () => {
+	test('large integers and decimals', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('250034', 'none')).toBe(
 			'250034',
 		);
@@ -22,7 +22,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		);
 	});
 
-	it('preserves leading zeros after decimal until first non-zero', () => {
+	test('preserves leading zeros after decimal until first non-zero', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1.0000234', 'none')).toBe(
 			'1.0000234',
 		);
@@ -31,7 +31,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		);
 	});
 
-	it('trims to three significant decimals and removes trailing zeros', () => {
+	test('trims to three significant decimals and removes trailing zeros', () => {
 		expect(
 			testFullPrecisionGetYAxisFormattedValue('0.000000250034', 'none'),
 		).toBe('0.000000250034');
@@ -55,7 +55,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		).toBe('0.00000025');
 	});
 
-	it('whole numbers normalize', () => {
+	test('whole numbers normalize', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1000', 'none')).toBe('1000');
 		expect(testFullPrecisionGetYAxisFormattedValue('99.5458', 'none')).toBe(
 			'99.5458',
@@ -68,7 +68,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		);
 	});
 
-	it('strip redundant decimal zeros', () => {
+	test('strip redundant decimal zeros', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1000.000', 'none')).toBe(
 			'1000',
 		);
@@ -78,7 +78,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		expect(testFullPrecisionGetYAxisFormattedValue('1.000', 'none')).toBe('1');
 	});
 
-	it('edge values', () => {
+	test('edge values', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0', 'none')).toBe('0');
 		expect(testFullPrecisionGetYAxisFormattedValue('-0', 'none')).toBe('0');
 		expect(testFullPrecisionGetYAxisFormattedValue('Infinity', 'none')).toBe('∞');
@@ -92,7 +92,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		expect(testFullPrecisionGetYAxisFormattedValue('abc123', 'none')).toBe('NaN');
 	});
 
-	it('small decimals keep precision as-is', () => {
+	test('small decimals keep precision as-is', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0.0001', 'none')).toBe(
 			'0.0001',
 		);
@@ -104,7 +104,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 		);
 	});
 
-	it('simple decimals preserved', () => {
+	test('simple decimals preserved', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0.1', 'none')).toBe('0.1');
 		expect(testFullPrecisionGetYAxisFormattedValue('0.2', 'none')).toBe('0.2');
 		expect(testFullPrecisionGetYAxisFormattedValue('0.3', 'none')).toBe('0.3');
@@ -115,7 +115,7 @@ describe('getYAxisFormattedValue - none (full precision legacy assertions)', ()
 });
 
 describe('getYAxisFormattedValue - units (full precision legacy assertions)', () => {
-	it('ms', () => {
+	test('ms', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1500', 'ms')).toBe('1.5 s');
 		expect(testFullPrecisionGetYAxisFormattedValue('500', 'ms')).toBe('500 ms');
 		expect(testFullPrecisionGetYAxisFormattedValue('60000', 'ms')).toBe('1 min');
@@ -127,19 +127,19 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('s', () => {
+	test('s', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('90', 's')).toBe('1.5 mins');
 		expect(testFullPrecisionGetYAxisFormattedValue('30', 's')).toBe('30 s');
 		expect(testFullPrecisionGetYAxisFormattedValue('3600', 's')).toBe('1 hour');
 	});
 
-	it('m', () => {
+	test('m', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('90', 'm')).toBe('1.5 hours');
 		expect(testFullPrecisionGetYAxisFormattedValue('30', 'm')).toBe('30 min');
 		expect(testFullPrecisionGetYAxisFormattedValue('1440', 'm')).toBe('1 day');
 	});
 
-	it('bytes', () => {
+	test('bytes', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'bytes')).toBe(
 			'1 KiB',
 		);
@@ -149,7 +149,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('mbytes', () => {
+	test('mbytes', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'mbytes')).toBe(
 			'1 GiB',
 		);
@@ -161,7 +161,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('kbytes', () => {
+	test('kbytes', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'kbytes')).toBe(
 			'1 MiB',
 		);
@@ -173,7 +173,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('short', () => {
+	test('short', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('1000', 'short')).toBe('1 K');
 		expect(testFullPrecisionGetYAxisFormattedValue('1500', 'short')).toBe(
 			'1.5 K',
@@ -201,7 +201,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('percent', () => {
+	test('percent', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0.15', 'percent')).toBe(
 			'0.15%',
 		);
@@ -235,7 +235,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		).toBe('1.005555555595959%');
 	});
 
-	it('ratio', () => {
+	test('ratio', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0.5', 'ratio')).toBe(
 			'0.5 ratio',
 		);
@@ -247,7 +247,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('temperature units', () => {
+	test('temperature units', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('25', 'celsius')).toBe(
 			'25 °C',
 		);
@@ -267,13 +267,13 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		);
 	});
 
-	it('ms edge cases', () => {
+	test('ms edge cases', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0', 'ms')).toBe('0 ms');
 		expect(testFullPrecisionGetYAxisFormattedValue('-1500', 'ms')).toBe('-1.5 s');
 		expect(testFullPrecisionGetYAxisFormattedValue('Infinity', 'ms')).toBe('∞');
 	});
 
-	it('bytes edge cases', () => {
+	test('bytes edge cases', () => {
 		expect(testFullPrecisionGetYAxisFormattedValue('0', 'bytes')).toBe('0 B');
 		expect(testFullPrecisionGetYAxisFormattedValue('-1024', 'bytes')).toBe(
 			'-1 KiB',
@@ -282,7 +282,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 });
 
 describe('getYAxisFormattedValue - precision option tests', () => {
-	it('precision 0 drops decimal part', () => {
+	test('precision 0 drops decimal part', () => {
 		expect(getYAxisFormattedValue('1.2345', 'none', 0)).toBe('1');
 		expect(getYAxisFormattedValue('0.9999', 'none', 0)).toBe('0');
 		expect(getYAxisFormattedValue('12345.6789', 'none', 0)).toBe('12345');
@@ -294,7 +294,7 @@ describe('getYAxisFormattedValue - precision option tests', () => {
 		// with unit
 		expect(getYAxisFormattedValue('4353.81', 'ms', 0)).toBe('4 s');
 	});
-	it('precision 1,2,3,4 decimals', () => {
+	test('precision 1,2,3,4 decimals', () => {
 		expect(getYAxisFormattedValue('1.2345', 'none', 1)).toBe('1.2');
 		expect(getYAxisFormattedValue('1.2345', 'none', 2)).toBe('1.23');
 		expect(getYAxisFormattedValue('1.2345', 'none', 3)).toBe('1.234');
@@ -345,7 +345,7 @@ describe('getYAxisFormattedValue - precision option tests', () => {
 		expect(getYAxisFormattedValue('0.123456', 'percent', 4)).toBe('0.1235%'); // approximation
 	});
 
-	it('precision full uses up to DEFAULT_SIGNIFICANT_DIGITS significant digits', () => {
+	test('precision full uses up to DEFAULT_SIGNIFICANT_DIGITS significant digits', () => {
 		expect(
 			getYAxisFormattedValue(
 				'0.00002625429914148441',

frontend/src/components/Graph/utils.ts

@@ -95,7 +95,7 @@ export const getGraphOptions = (
 							},
 						],
 					},
-			  }
+				}
 			: {}),
 		title: {
 			display: title !== undefined,

frontend/src/components/Graph/xAxisConfig.ts

@@ -109,8 +109,8 @@ export const useXAxisTimeUnit = (
 			};
 			const time = getTimeStamp(timeStamp as Date | number);
 
-			minTimeLocal = Math.min(Number.parseInt(time.toString(), 10), minTimeLocal);
-			maxTimeLocal = Math.max(Number.parseInt(time.toString(), 10), maxTimeLocal);
+			minTimeLocal = Math.min(parseInt(time.toString(), 10), minTimeLocal);
+			maxTimeLocal = Math.max(parseInt(time.toString(), 10), maxTimeLocal);
 		});
 
 		localTime = {

frontend/src/components/Graph/yAxisConfig.ts

@@ -25,7 +25,7 @@ export const getYAxisFormattedValue = (
 	format: string,
 	precision: PrecisionOption = 2, // default precision requested
 ): string => {
-	const numValue = Number.parseFloat(value);
+	const numValue = parseFloat(value);
 
 	// Handle non-numeric or special values first.
 	if (isNaN(numValue)) {
@@ -79,10 +79,10 @@ export const getYAxisFormattedValue = (
 		}
 
 		const formatter = getValueFormat(format);
-		const formattedValue = formatter(numValue, computeDecimals());
+		const formattedValue = formatter(numValue, computeDecimals(), undefined);
 		if (formattedValue.text && formattedValue.text.includes('.')) {
 			formattedValue.text = formatDecimalWithLeadingZeros(
-				Number.parseFloat(formattedValue.text),
+				parseFloat(formattedValue.text),
 				precision,
 			);
 		}

frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -284,7 +284,7 @@ describe('GuardAuthZ', () => {
 
 		expect(
 			screen.getAllByText(
-				new RegExp(permission.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&')),
+				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
 			).length,
 		).toBeGreaterThan(0);
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -177,7 +177,9 @@
 	color: var(--destructive);
 	opacity: 0.6;
 	padding: 0;
-	transition: background-color 0.2s, opacity 0.2s;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
 	box-shadow: none;
 
 	&:hover {

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

@@ -90,9 +90,11 @@ describe('InviteMembersModal', () => {
 				screen.getByRole('button', { name: /invite team members/i }),
 			);
 
-			await expect(screen.findByText(
+			expect(
+				await screen.findByText(
 					'Please enter valid emails and select roles for team members',
-				)).resolves.toBeInTheDocument();
+				),
+			).toBeInTheDocument();
 		});
 
 		it('shows email-only message when email is invalid but role is selected', async () => {
@@ -110,7 +112,9 @@ describe('InviteMembersModal', () => {
 				screen.getByRole('button', { name: /invite team members/i }),
 			);
 
-			await expect(screen.findByText('Please enter valid emails for team members')).resolves.toBeInTheDocument();
+			expect(
+				await screen.findByText('Please enter valid emails for team members'),
+			).toBeInTheDocument();
 		});
 
 		it('shows role-only message when email is valid but role is missing', async () => {
@@ -126,7 +130,9 @@ describe('InviteMembersModal', () => {
 				screen.getByRole('button', { name: /invite team members/i }),
 			);
 
-			await expect(screen.findByText('Please select roles for team members')).resolves.toBeInTheDocument();
+			expect(
+				await screen.findByText('Please select roles for team members'),
+			).toBeInTheDocument();
 		});
 	});
 
@@ -198,7 +204,7 @@ describe('InviteMembersModal', () => {
 			await user.type(emailInputs[1], 'bob@signoz.io');
 			await user.click(screen.getAllByText('Select roles')[0]);
 			const editorOptions = await screen.findAllByText('Editor');
-			await user.click(editorOptions.at(-1));
+			await user.click(editorOptions[editorOptions.length - 1]);
 
 			await user.click(
 				screen.getByRole('button', { name: /invite team members/i }),
@@ -250,7 +256,7 @@ describe('InviteMembersModal', () => {
 		await user.type(emailInputs[1], 'bob@signoz.io');
 		await user.click(screen.getAllByText('Select roles')[0]);
 		const editorOptions = await screen.findAllByText('Editor');
-		await user.click(editorOptions.at(-1));
+		await user.click(editorOptions[editorOptions.length - 1]);
 
 		await user.click(
 			screen.getByRole('button', { name: /invite team members/i }),

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -47,9 +47,8 @@ function LaunchChatSupport({
 		featureFlagsFetchError,
 		isLoggedIn,
 	} = useAppContext();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
 
 	const { pathname } = useLocation();
 

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -26,7 +26,7 @@ function QueryBuilderSearchWrapper({
 		const tagFiltersLength = tagFilters.items.length;
 
 		if (
-			(!tagFiltersLength && (!filters || filters.items.length === 0)) ||
+			(!tagFiltersLength && (!filters || !filters.items.length)) ||
 			tagFiltersLength === filters?.items.length ||
 			!contextQuery
 		) {

frontend/src/components/LogDetail/constants.ts

@@ -5,7 +5,7 @@ export const VIEW_TYPES = {
 	INFRAMETRICS: 'INFRAMETRICS',
 } as const;
 
-export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];
+export type VIEWS = (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES];
 
 export const RESOURCE_KEYS = {
 	CLUSTER_NAME: 'k8s.cluster.name',

frontend/src/components/LogDetail/index.tsx

@@ -163,7 +163,7 @@ function LogDetailInner({
 	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
 
 	const listQuery = useMemo(() => {
-		if (!stagedQuery || stagedQuery.builder.queryData.length === 0) {
+		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
 		}
 
@@ -261,7 +261,7 @@ function LogDetailInner({
 											...query.filter,
 											expression: value,
 										},
-								  }
+									}
 								: query,
 						),
 					},

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -20,9 +20,10 @@ function AddToQueryHOC({
 		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], dataType);
 	};
 
-	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
-		fieldKey,
-	]);
+	const popOverContent = useMemo(
+		() => <span>Add to query: {fieldKey}</span>,
+		[fieldKey],
+	);
 
 	return (
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>

frontend/src/components/Logs/ListLogView/index.tsx

@@ -104,7 +104,7 @@ type ListLogViewProps = {
 	selectedFields: IField[];
 	onSetActiveLog: (
 		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
 	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
@@ -166,11 +166,11 @@ function ListLogView({
 				? formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  )
+					)
 				: formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp / 1e6,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  ),
+					),
 		[flattenLogData.timestamp, formatTimezoneAdjustedTimestamp],
 	);
 

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

@@ -24,10 +24,10 @@ export const Container = styled(Card)<{
 		fontSize === FontSize.SMALL
 			? `margin-bottom:0.1rem;`
 			: fontSize === FontSize.MEDIUM
-			? `margin-bottom: 0.2rem;`
-			: fontSize === FontSize.LARGE
-			? `margin-bottom:0.3rem;`
-			: ``}
+				? `margin-bottom: 0.2rem;`
+				: fontSize === FontSize.LARGE
+					? `margin-bottom:0.3rem;`
+					: ``}
 	cursor: pointer;
 
 	&:not(:hover) .log-line-action-buttons {
@@ -41,10 +41,10 @@ export const Container = styled(Card)<{
 			fontSize === FontSize.SMALL
 				? `padding:0.1rem 0.6rem;`
 				: fontSize === FontSize.MEDIUM
-				? `padding: 0.2rem 0.6rem;`
-				: fontSize === FontSize.LARGE
-				? `padding:0.3rem 0.6rem;`
-				: ``}
+					? `padding: 0.2rem 0.6rem;`
+					: fontSize === FontSize.LARGE
+						? `padding:0.3rem 0.6rem;`
+						: ``}
 
 		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
@@ -65,8 +65,8 @@ export const LogContainer = styled.div<LogContainerProps>`
 		fontSize === FontSize.SMALL
 			? `gap: 2px;`
 			: fontSize === FontSize.MEDIUM
-			? ` gap:4px;`
-			: `gap:6px;`}
+				? ` gap:4px;`
+				: `gap:6px;`}
 `;
 
 export const LogText = styled.div<LogTextProps>`

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -1,6 +1,4 @@
 .log-state-indicator {
-	padding-left: 8px;
-
 	.line {
 		margin: 0 8px;
 		min-height: 24px;

frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts

@@ -0,0 +1,43 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { LogType } from './LogStateIndicator';
+
+export function getRowBackgroundColor(
+	isDarkMode: boolean,
+	logType?: string,
+): string {
+	if (isDarkMode) {
+		switch (logType) {
+			case LogType.INFO:
+				return `${Color.BG_ROBIN_500}40`;
+			case LogType.WARN:
+				return `${Color.BG_AMBER_500}40`;
+			case LogType.ERROR:
+				return `${Color.BG_CHERRY_500}40`;
+			case LogType.TRACE:
+				return `${Color.BG_FOREST_400}40`;
+			case LogType.DEBUG:
+				return `${Color.BG_AQUA_500}40`;
+			case LogType.FATAL:
+				return `${Color.BG_SAKURA_500}40`;
+			default:
+				return `${Color.BG_ROBIN_500}40`;
+		}
+	}
+	switch (logType) {
+		case LogType.INFO:
+			return Color.BG_ROBIN_100;
+		case LogType.WARN:
+			return Color.BG_AMBER_100;
+		case LogType.ERROR:
+			return Color.BG_CHERRY_100;
+		case LogType.TRACE:
+			return Color.BG_FOREST_200;
+		case LogType.DEBUG:
+			return Color.BG_AQUA_100;
+		case LogType.FATAL:
+			return Color.BG_SAKURA_100;
+		default:
+			return Color.BG_VANILLA_300;
+	}
+}

frontend/src/components/Logs/LogStateIndicator/utils.test.ts

@@ -27,7 +27,7 @@ describe('getLogIndicatorType', () => {
 		expect(getLogIndicatorType(log)).toBe('TRACE');
 	});
 
-	it('severity_text should be used when severity_number is absent', () => {
+	it('severity_text should be used when severity_number is absent ', () => {
 		const log = {
 			date: '2024-02-29T12:34:46Z',
 			timestamp: 1646115296,
@@ -157,7 +157,7 @@ describe('logIndicatorBySeverityNumber', () => {
 	];
 	logLevelExpectations.forEach((e) => {
 		for (let sevNum = e.minSevNumber; sevNum <= e.maxSevNumber; sevNum++) {
-			const sevText = (Math.random() + 1).toString(36).slice(2);
+			const sevText = (Math.random() + 1).toString(36).substring(2);
 
 			const log = {
 				date: '2024-02-29T12:34:46Z',

frontend/src/components/Logs/RawLogView/index.tsx

@@ -88,11 +88,11 @@ function RawLogView({
 					? formatTimezoneAdjustedTimestamp(
 							data.timestamp,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					  )
+						)
 					: formatTimezoneAdjustedTimestamp(
 							data.timestamp / 1e6,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					  );
+						);
 			parts.push(date);
 		}
 

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

@@ -39,22 +39,22 @@ export const RawLogViewContainer = styled(Row)<{
 			fontSize === FontSize.SMALL
 				? `margin: 1px 0;`
 				: fontSize === FontSize.MEDIUM
-				? `margin: 1px 0;`
-				: `margin: 2px 0;`}
+					? `margin: 1px 0;`
+					: `margin: 2px 0;`}
 	}
 
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
 			: !$isReadOnly
-			? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
-			: ''}
+				? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
+				: ''}
 
 	${({ $isHightlightedLog, $isDarkMode }): string =>
 		$isHightlightedLog
 			? `background-color: ${
 					$isDarkMode ? Color.BG_ROBIN_600 : Color.BG_VANILLA_400
-			  };
+				};
 			  transition: background-color 2s ease-in;`
 			: ''}
 
@@ -104,8 +104,8 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px; padding:1px;`
 			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px; padding:1px;`
-			: `font-size:14px; line-height:24px; padding:2px;`}
+				? `font-size:13px; line-height:20px; padding:1px;`
+				: `font-size:14px; line-height:24px; padding:2px;`}
 
 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};

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

@@ -19,7 +19,7 @@ export interface RawLogViewProps {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onSetActiveLog?: (
 		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
 	) => void;
 	onClearActiveLog?: () => void;
 }

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

@@ -27,6 +27,6 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px;`
 			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px;`
-			: `font-size:14px; line-height:24px;`}
+				? `font-size:13px; line-height:20px;`
+				: `font-size:14px; line-height:24px;`}
 `;

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -0,0 +1,114 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+
+import type { TableColumnDef } from '../../TanStackTableView/types';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+
+type UseLogsTableColumnsProps = {
+	fields: IField[];
+	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
+};
+
+export function useLogsTableColumns({
+	fields,
+	fontSize,
+	appendTo = 'center',
+}: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	return useMemo<TableColumnDef<ILog>[]>(() => {
+		const stateIndicatorCol: TableColumnDef<ILog> = {
+			id: 'state-indicator',
+			header: '',
+			pin: 'left',
+			enableMove: false,
+			enableResize: false,
+			enableRemove: false,
+			canBeHidden: false,
+			width: { fixed: 24 },
+			cell: ({ row }): ReactElement => (
+				<LogStateIndicator
+					fontSize={fontSize}
+					severityText={row.severity_text as string}
+					severityNumber={row.severity_number as number}
+				/>
+			),
+		};
+
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
+
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					width: { default: 170, min: 170 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+									);
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
+				}
+			: null;
+
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => log.body,
+					canBeHidden: false,
+					width: { default: '100%', min: 300 },
+					cell: ({ value, isActive }): ReactElement => (
+						<TanStackTable.Text
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+						/>
+					),
+				}
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+}

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -34,9 +34,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 
 	const isDarkMode = useIsDarkMode();
 
-	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
-		logs,
-	]);
+	const flattenLogData = useMemo(
+		() => logs.map((log) => FlatLogData(log)),
+		[logs],
+	);
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -55,7 +56,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				title: name,
 				dataIndex: name,
 				accessorKey: name,
-				id: name.toLowerCase().replaceAll(/\./g, '_'),
+				id: name.toLowerCase().replace(/\./g, '_'),
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
@@ -115,11 +116,11 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 										? formatTimezoneAdjustedTimestamp(
 												field,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-										  )
+											)
 										: formatTimezoneAdjustedTimestamp(
 												field / 1e6,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-										  );
+											);
 								return {
 									children: (
 										<div className="table-timestamp">
@@ -129,7 +130,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								};
 							},
 						},
-				  ]
+					]
 				: []),
 			...(appendTo === 'center' ? fieldColumns : []),
 			...(fields.some((field) => field.name === 'body')
@@ -160,7 +161,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								),
 							}),
 						},
-				  ]
+					]
 				: []),
 			...(appendTo === 'end' ? fieldColumns : []),
 		];

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -35,13 +35,11 @@ function OptionsMenu({
 	const [fontSizeValue, setFontSizeValue] = useState<FontSize>(
 		fontSize?.value || FontSize.SMALL,
 	);
-	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState<boolean>(
-		false,
-	);
+	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
+		useState<boolean>(false);
 
-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] = useState(
-		false,
-	);
+	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
+		useState(false);
 
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
@@ -77,7 +75,7 @@ function OptionsMenu({
 	};
 
 	const handleSearchValueChange = useDebouncedFn((event): void => {
-		// @ts-expect-error
+		// @ts-ignore
 		const value = event?.target?.value || '';
 
 		if (addColumn && addColumn?.onSearch) {

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

@@ -72,7 +72,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 		fireEvent.click(formatButton);
 
 		const getMenuItems = (): Element[] =>
-			[...document.querySelectorAll('.menu-items .item')];
+			Array.from(document.querySelectorAll('.menu-items .item'));
 		const findItemByLabel = (label: string): Element | undefined =>
 			getMenuItems().find((el) => (el.textContent || '').includes(label));
 
@@ -136,7 +136,9 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 		fireEvent.click(fontButton);
 
 		// Choose MEDIUM
-		const optionButtons = [...document.querySelectorAll('.font-size-dropdown .option-btn')];
+		const optionButtons = Array.from(
+			document.querySelectorAll('.font-size-dropdown .option-btn'),
+		);
 		const mediumBtn = optionButtons[1] as HTMLElement;
 		fireEvent.click(mediumBtn);
 

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -50,7 +50,7 @@ function Code({
 	const match = /language-(\w+)/.exec(className || '');
 	return !inline && match ? (
 		<SyntaxHighlighter
-			// @ts-expect-error
+			// @ts-ignore
 			style={a11yDark}
 			language={match[1]}
 			PreTag="div"
@@ -115,7 +115,7 @@ function MarkdownRenderer({
 			className={className}
 			rehypePlugins={[rehypeRaw as any]}
 			components={{
-				// @ts-expect-error
+				// @ts-ignore
 				a: Link,
 				pre: ({ children }) =>
 					Pre({

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -26,9 +26,9 @@ function MessagingQueueHealthCheck({
 		isFetching: consumerLoading,
 	} = useOnboardingStatus(
 		{
-			enabled: serviceToInclude.filter(
+			enabled: !!serviceToInclude.filter(
 				(service) => service === MessagingQueueHealthCheckService.Consumers,
-			).length > 0,
+			).length,
 		},
 		MessagingQueueHealthCheckService.Consumers,
 	);
@@ -40,9 +40,9 @@ function MessagingQueueHealthCheck({
 		isFetching: producerLoading,
 	} = useOnboardingStatus(
 		{
-			enabled: serviceToInclude.filter(
+			enabled: !!serviceToInclude.filter(
 				(service) => service === MessagingQueueHealthCheckService.Producers,
-			).length > 0,
+			).length,
 		},
 		MessagingQueueHealthCheckService.Producers,
 	);
@@ -54,9 +54,9 @@ function MessagingQueueHealthCheck({
 		isFetching: kafkaLoading,
 	} = useOnboardingStatus(
 		{
-			enabled: serviceToInclude.filter(
+			enabled: !!serviceToInclude.filter(
 				(service) => service === MessagingQueueHealthCheckService.Kafka,
-			).length > 0,
+			).length,
 		},
 		MessagingQueueHealthCheckService.Kafka,
 	);

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -260,23 +260,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback((options: OptionData[]): {
-		sectionOptions: OptionData[];
-		nonSectionOptions: OptionData[];
-	} => {
-		const sectionOptions: OptionData[] = [];
-		const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback(
+		(
+			options: OptionData[],
+		): {
+			sectionOptions: OptionData[];
+			nonSectionOptions: OptionData[];
+		} => {
+			const sectionOptions: OptionData[] = [];
+			const nonSectionOptions: OptionData[] = [];
 
-		options.forEach((option) => {
-			if ('options' in option && Array.isArray(option.options)) {
-				sectionOptions.push(option);
-			} else {
-				nonSectionOptions.push(option);
-			}
-		});
+			options.forEach((option) => {
+				if ('options' in option && Array.isArray(option.options)) {
+					sectionOptions.push(option);
+				} else {
+					nonSectionOptions.push(option);
+				}
+			});
 
-		return { sectionOptions, nonSectionOptions };
-	}, []);
+			return { sectionOptions, nonSectionOptions };
+		},
+		[],
+	);
 
 	/**
 	 * Apply search filtering to options
@@ -607,7 +612,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			try {
 				const parts = text.split(
 					new RegExp(
-						`(${searchQuery.replaceAll(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
 						'gi',
 					),
 				);
@@ -615,7 +620,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					<>
 						{parts.map((part, i) => {
 							// Create a unique key that doesn't rely on array index
-							const uniqueKey = `${text.slice(0, 3)}-${part.slice(0, 3)}-${i}`;
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
 							return part.toLowerCase() === searchQuery.toLowerCase() ? (
 								<span key={uniqueKey} className="highlight-text">
@@ -819,7 +824,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const getLastVisibleChipIndex = useCallback((): number => {
 		const visibleIndices = getVisibleChipIndices();
 		return visibleIndices.length > 0
-			? visibleIndices.at(-1)
+			? visibleIndices[visibleIndices.length - 1]
 			: -1;
 	}, [getVisibleChipIndices]);
 
@@ -1629,7 +1634,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 							data={enhancedNonSectionOptions}
 							itemContent={(index, item): React.ReactNode =>
-								(mapOptions([item]) as unknown) as React.ReactElement
+								mapOptions([item]) as unknown as React.ReactElement
 							}
 							totalCount={enhancedNonSectionOptions.length}
 							itemSize={(): number => 40}
@@ -1671,7 +1676,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 										}}
 										data={section.options || []}
 										itemContent={(index, item): React.ReactNode =>
-											(mapOptions([item]) as unknown) as React.ReactElement
+											mapOptions([item]) as unknown as React.ReactElement
 										}
 										totalCount={section.options?.length || 0}
 										itemSize={(): number => 40}
@@ -1936,7 +1941,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								? {
 										borderColor: Color.BG_ROBIN_500,
 										backgroundColor: Color.BG_SLATE_400,
-								  }
+									}
 								: undefined
 						}
 					>

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -112,23 +112,28 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback((options: OptionData[]): {
-		sectionOptions: OptionData[];
-		nonSectionOptions: OptionData[];
-	} => {
-		const sectionOptions: OptionData[] = [];
-		const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback(
+		(
+			options: OptionData[],
+		): {
+			sectionOptions: OptionData[];
+			nonSectionOptions: OptionData[];
+		} => {
+			const sectionOptions: OptionData[] = [];
+			const nonSectionOptions: OptionData[] = [];
 
-		options.forEach((option) => {
-			if ('options' in option && Array.isArray(option.options)) {
-				sectionOptions.push(option);
-			} else {
-				nonSectionOptions.push(option);
-			}
-		});
+			options.forEach((option) => {
+				if ('options' in option && Array.isArray(option.options)) {
+					sectionOptions.push(option);
+				} else {
+					nonSectionOptions.push(option);
+				}
+			});
 
-		return { sectionOptions, nonSectionOptions };
-	}, []);
+			return { sectionOptions, nonSectionOptions };
+		},
+		[],
+	);
 
 	/**
 	 * Apply search filtering to options
@@ -152,7 +157,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			try {
 				const parts = text.split(
 					new RegExp(
-						`(${searchQuery.replaceAll(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
 						'gi',
 					),
 				);
@@ -160,7 +165,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					<>
 						{parts.map((part, i) => {
 							// Create a deterministic but unique key
-							const uniqueKey = `${text.slice(0, 3)}-${part.slice(0, 3)}-${i}`;
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
 							return part.toLowerCase() === searchQuery.toLowerCase() ? (
 								<span key={uniqueKey} className="highlight-text">
@@ -322,9 +327,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						processedOptions = filterOptionsBySearch(processedOptions, searchText);
 					}
 
-					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
-					);
+					const { sectionOptions, nonSectionOptions } =
+						splitOptions(processedOptions);
 
 					// Add custom option if needed
 					if (

frontend/src/components/NewSelect/__test__/CustomMultiSelect.comprehensive.test.tsx

@@ -61,7 +61,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 1. CUSTOM VALUES SUPPORT =====
 	describe('Custom Values Support (CS)', () => {
-		it('CS-01: Custom values persist in selected state', async () => {
+		test('CS-01: Custom values persist in selected state', async () => {
 			const { rerender } = renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -87,7 +87,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(screen.getByText('another-custom')).toBeInTheDocument();
 		});
 
-		it('CS-02: Partial matches create custom values', async () => {
+		test('CS-02: Partial matches create custom values', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -129,7 +129,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(combobox).toBeInTheDocument();
 		});
 
-		it('CS-03: Exact match filtering behavior', async () => {
+		test('CS-03: Exact match filtering behavior', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -154,14 +154,14 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted "frontend" text
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('Frontend');
 
 				// Frontend option should be visible in dropdown - use a simpler approach
 				const optionLabels = document.querySelectorAll('.option-label-text');
-				const hasFrontendOption = [...optionLabels].some((label) =>
+				const hasFrontendOption = Array.from(optionLabels).some((label) =>
 					label.textContent?.includes('Frontend'),
 				);
 				expect(hasFrontendOption).toBe(true);
@@ -176,7 +176,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('CS-04: Search filtering with "end" pattern', async () => {
+		test('CS-04: Search filtering with "end" pattern', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -201,19 +201,19 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted "end" text in the options
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('end');
 
 				// Check that Frontend and Backend options are present with highlighted text
 				const optionLabels = document.querySelectorAll('.option-label-text');
-				const hasFrontendOption = [...optionLabels].some(
+				const hasFrontendOption = Array.from(optionLabels).some(
 					(label) =>
 						label.textContent?.includes('Front') &&
 						label.textContent?.includes('end'),
 				);
-				const hasBackendOption = [...optionLabels].some(
+				const hasBackendOption = Array.from(optionLabels).some(
 					(label) =>
 						label.textContent?.includes('Back') && label.textContent?.includes('end'),
 				);
@@ -222,10 +222,10 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 				expect(hasBackendOption).toBe(true);
 
 				// Other options should be filtered out
-				const hasDatabaseOption = [...optionLabels].some((label) =>
+				const hasDatabaseOption = Array.from(optionLabels).some((label) =>
 					label.textContent?.includes('Database'),
 				);
-				const hasApiGatewayOption = [...optionLabels].some((label) =>
+				const hasApiGatewayOption = Array.from(optionLabels).some((label) =>
 					label.textContent?.includes('API Gateway'),
 				);
 
@@ -234,7 +234,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('CS-05: Comma-separated values behavior', async () => {
+		test('CS-05: Comma-separated values behavior', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -281,7 +281,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 2. SEARCH AND FILTERING =====
 	describe('Search and Filtering (SF)', () => {
-		it('SF-01: Selected values pushed to top', async () => {
+		test('SF-01: Selected values pushed to top', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -298,14 +298,14 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 				expect(dropdown).toBeInTheDocument();
 
 				const options = dropdown?.querySelectorAll('.option-label-text') || [];
-				const optionTexts = [...options].map((el) => el.textContent);
+				const optionTexts = Array.from(options).map((el) => el.textContent);
 
 				// Database should be at the top (after ALL option if present)
 				expect(optionTexts[0]).toBe('Database');
 			});
 		});
 
-		it('SF-02: Filtering with search text', async () => {
+		test('SF-02: Filtering with search text', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -332,14 +332,14 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted text within the Frontend option
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('Front');
 
 				// Should show Frontend option (highlighted) - use a simpler approach
 				const optionLabels = document.querySelectorAll('.option-label-text');
-				const hasFrontendOption = [...optionLabels].some((label) =>
+				const hasFrontendOption = Array.from(optionLabels).some((label) =>
 					label.textContent?.includes('Frontend'),
 				);
 				expect(hasFrontendOption).toBe(true);
@@ -350,7 +350,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('SF-03: Highlighting search matches', async () => {
+		test('SF-03: Highlighting search matches', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -374,14 +374,14 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			// Should highlight matching text in options
 			await waitFor(() => {
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('end');
 			});
 		});
 
-		it('SF-04: Search with no results', async () => {
+		test('SF-04: Search with no results', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -424,7 +424,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 3. KEYBOARD NAVIGATION =====
 	describe('Keyboard Navigation (KN)', () => {
-		it('KN-01: Arrow key navigation in dropdown', async () => {
+		test('KN-01: Arrow key navigation in dropdown', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -465,7 +465,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-02: Tab navigation to dropdown', async () => {
+		test('KN-02: Tab navigation to dropdown', async () => {
 			renderWithVirtuoso(
 				<div>
 					<input data-testid="prev-input" />
@@ -515,7 +515,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-03: Enter selection in dropdown', async () => {
+		test('KN-03: Enter selection in dropdown', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -540,7 +540,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(mockOnChange).toHaveBeenCalledWith(['frontend'], ['frontend']);
 		});
 
-		it('KN-04: Chip deletion with keyboard', async () => {
+		test('KN-04: Chip deletion with keyboard', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -586,7 +586,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 5. UI/UX BEHAVIORS =====
 	describe('UI/UX Behaviors (UI)', () => {
-		it('UI-01: Loading state does not block interaction', async () => {
+		test('UI-01: Loading state does not block interaction', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -603,7 +603,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-02: Component remains editable in all states', async () => {
+		test('UI-02: Component remains editable in all states', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -634,7 +634,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(combobox).not.toBeDisabled();
 		});
 
-		it('UI-03: Toggle/Only labels in dropdown', async () => {
+		test('UI-03: Toggle/Only labels in dropdown', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -656,7 +656,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-04: Should display values with loading info at bottom', async () => {
+		test('UI-04: Should display values with loading info at bottom', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -677,7 +677,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-05: Error state display in footer', async () => {
+		test('UI-05: Error state display in footer', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -696,7 +696,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-06: No data state display', async () => {
+		test('UI-06: No data state display', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={[]}
@@ -716,7 +716,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 6. CLEAR ACTIONS =====
 	describe('Clear Actions (CA)', () => {
-		it('CA-01: Ctrl+A selects all chips', async () => {
+		test('CA-01: Ctrl+A selects all chips', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -760,7 +760,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('CA-02: Clear icon removes all selections', async () => {
+		test('CA-02: Clear icon removes all selections', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -777,7 +777,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			}
 		});
 
-		it('CA-03: Individual chip removal', async () => {
+		test('CA-03: Individual chip removal', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -790,7 +790,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			const removeButtons = document.querySelectorAll(
 				'.ant-select-selection-item-remove',
 			);
-			expect(removeButtons).toHaveLength(2);
+			expect(removeButtons.length).toBe(2);
 
 			await user.click(removeButtons[1] as Element);
 
@@ -804,7 +804,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 7. SAVE AND SELECTION TRIGGERS =====
 	describe('Save and Selection Triggers (ST)', () => {
-		it('ST-01: ESC triggers save action', async () => {
+		test('ST-01: ESC triggers save action', async () => {
 			const mockDropdownChange = jest.fn();
 
 			renderWithVirtuoso(
@@ -837,7 +837,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('ST-02: Mouse selection works', async () => {
+		test('ST-02: Mouse selection works', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -859,7 +859,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			);
 		});
 
-		it('ST-03: ENTER in input field creates custom value', async () => {
+		test('ST-03: ENTER in input field creates custom value', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -892,7 +892,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('ST-04: Search text persistence', async () => {
+		test('ST-04: Search text persistence', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -932,7 +932,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 8. SPECIAL OPTIONS AND STATES =====
 	describe('Special Options and States (SO)', () => {
-		it('SO-01: ALL option appears first and separated', async () => {
+		test('SO-01: ALL option appears first and separated', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -954,7 +954,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('SO-02: ALL selection behavior', async () => {
+		test('SO-02: ALL selection behavior', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -981,7 +981,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			);
 		});
 
-		it('SO-03: ALL tag display when all selected', () => {
+		test('SO-03: ALL tag display when all selected', () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -996,7 +996,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(screen.queryByText('frontend')).not.toBeInTheDocument();
 		});
 
-		it('SO-04: Footer information display', async () => {
+		test('SO-04: Footer information display', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1017,7 +1017,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== GROUPED OPTIONS SUPPORT =====
 	describe('Grouped Options Support', () => {
-		it('handles grouped options correctly', async () => {
+		test('handles grouped options correctly', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockGroupedOptions} onChange={mockOnChange} />,
 			);
@@ -1041,7 +1041,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== ACCESSIBILITY TESTS =====
 	describe('Accessibility', () => {
-		it('has proper ARIA attributes', async () => {
+		test('has proper ARIA attributes', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1058,7 +1058,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('supports screen reader navigation', async () => {
+		test('supports screen reader navigation', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1079,7 +1079,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
 	describe('Advanced Keyboard Navigation (AKN)', () => {
-		it('AKN-01: Shift + Arrow + Del chip deletion', async () => {
+		test('AKN-01: Shift + Arrow + Del chip deletion', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -1137,7 +1137,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(combobox).toHaveFocus();
 		});
 
-		it('AKN-03: Mouse out closes dropdown', async () => {
+		test('AKN-03: Mouse out closes dropdown', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1164,7 +1164,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 10. ADVANCED FILTERING AND HIGHLIGHTING =====
 	describe('Advanced Filtering and Highlighting (AFH)', () => {
-		it('AFH-01: Highlighted values pushed to top', async () => {
+		test('AFH-01: Highlighted values pushed to top', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1189,14 +1189,14 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted text
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('front');
 
 				// Get all option items to check the order
 				const optionItems = document.querySelectorAll('.option-item');
-				const optionTexts = [...optionItems]
+				const optionTexts = Array.from(optionItems)
 					.map((item) => {
 						const labelElement = item.querySelector('.option-label-text');
 						return labelElement?.textContent?.trim();
@@ -1220,7 +1220,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('AFH-02: Distinction between selection Enter and save Enter', async () => {
+		test('AFH-02: Distinction between selection Enter and save Enter', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1267,7 +1267,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 11. ADVANCED CLEAR ACTIONS =====
 	describe('Advanced Clear Actions (ACA)', () => {
-		it('ACA-01: Clear action waiting behavior', async () => {
+		test('ACA-01: Clear action waiting behavior', async () => {
 			const mockOnChangeWithDelay = jest.fn().mockImplementation(
 				() =>
 					new Promise<void>((resolve) => {
@@ -1300,7 +1300,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 12. ADVANCED UI STATES =====
 	describe('Advanced UI States (AUS)', () => {
-		it('AUS-01: No data with previous value selected', async () => {
+		test('AUS-01: No data with previous value selected', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={[]}
@@ -1322,7 +1322,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(screen.getByText('previous-value')).toBeInTheDocument();
 		});
 
-		it('AUS-02: Always editable accessibility', async () => {
+		test('AUS-02: Always editable accessibility', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -1338,7 +1338,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			expect(combobox).not.toBeDisabled();
 		});
 
-		it('AUS-03: Sufficient space for search value', async () => {
+		test('AUS-03: Sufficient space for search value', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);
@@ -1372,7 +1372,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 13. REGEX AND CUSTOM VALUES =====
 	describe('Regex and Custom Values (RCV)', () => {
-		it('RCV-01: Regex pattern support', async () => {
+		test('RCV-01: Regex pattern support', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockOptions}
@@ -1418,7 +1418,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('RCV-02: Custom values treated as normal dropdown values', async () => {
+		test('RCV-02: Custom values treated as normal dropdown values', async () => {
 			const customOptions = [
 				...mockOptions,
 				{ label: 'custom-value', value: 'custom-value', type: 'custom' as const },
@@ -1456,7 +1456,7 @@ describe('CustomMultiSelect - Comprehensive Tests', () => {
 
 	// ===== 14. DROPDOWN PERSISTENCE =====
 	describe('Dropdown Persistence (DP)', () => {
-		it('DP-01: Dropdown stays open for non-save actions', async () => {
+		test('DP-01: Dropdown stays open for non-save actions', async () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect options={mockOptions} onChange={mockOnChange} />,
 			);

frontend/src/components/NewSelect/__test__/CustomMultiSelect.test.tsx

@@ -336,7 +336,7 @@ describe('CustomMultiSelect Component', () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockGroupedOptions}
-					value={('__ALL__' as unknown) as string[]}
+					value={'__ALL__' as unknown as string[]}
 				/>,
 			);
 

frontend/src/components/NewSelect/__test__/CustomSelect.comprehensive.test.tsx

@@ -50,7 +50,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 1. CUSTOM VALUES SUPPORT =====
 	describe('Custom Values Support (CS)', () => {
-		it('CS-02: Partial matches create custom values', async () => {
+		test('CS-02: Partial matches create custom values', async () => {
 			render(
 				<CustomSelect
 					options={mockOptions}
@@ -110,7 +110,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('CS-03: Exact match behavior', async () => {
+		test('CS-03: Exact match behavior', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -133,14 +133,14 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted "frontend" text
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('Frontend');
 
 				// Frontend option should be visible in dropdown - use a simpler approach
 				const optionContents = document.querySelectorAll('.option-content');
-				const hasFrontendOption = [...optionContents].some((content) =>
+				const hasFrontendOption = Array.from(optionContents).some((content) =>
 					content.textContent?.includes('Frontend'),
 				);
 				expect(hasFrontendOption).toBe(true);
@@ -161,7 +161,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 2. SEARCH AND FILTERING =====
 	describe('Search and Filtering (SF)', () => {
-		it('SF-01: Selected values pushed to top', async () => {
+		test('SF-01: Selected values pushed to top', async () => {
 			render(
 				<CustomSelect
 					options={mockOptions}
@@ -178,14 +178,14 @@ describe('CustomSelect - Comprehensive Tests', () => {
 				expect(dropdown).toBeInTheDocument();
 
 				const options = dropdown?.querySelectorAll('.option-content') || [];
-				const optionTexts = [...options].map((el) => el.textContent);
+				const optionTexts = Array.from(options).map((el) => el.textContent);
 
 				// Database should be at the top
 				expect(optionTexts[0]).toContain('Database');
 			});
 		});
 
-		it('SF-02: Real-time search filtering', async () => {
+		test('SF-02: Real-time search filtering', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -210,14 +210,14 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted text within the Frontend option
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('Front');
 
 				// Should show Frontend option (highlighted) - use a simpler approach
 				const optionContents = document.querySelectorAll('.option-content');
-				const hasFrontendOption = [...optionContents].some((content) =>
+				const hasFrontendOption = Array.from(optionContents).some((content) =>
 					content.textContent?.includes('Frontend'),
 				);
 				expect(hasFrontendOption).toBe(true);
@@ -228,7 +228,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('SF-03: Search highlighting', async () => {
+		test('SF-03: Search highlighting', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -250,14 +250,14 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			// Should highlight matching text in options
 			await waitFor(() => {
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('end');
 			});
 		});
 
-		it('SF-04: Search with partial matches', async () => {
+		test('SF-04: Search with partial matches', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -298,7 +298,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 3. KEYBOARD NAVIGATION =====
 	describe('Keyboard Navigation (KN)', () => {
-		it('KN-01: Arrow key navigation in dropdown', async () => {
+		test('KN-01: Arrow key navigation in dropdown', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -329,7 +329,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-02: Tab navigation to dropdown', async () => {
+		test('KN-02: Tab navigation to dropdown', async () => {
 			render(
 				<div>
 					<input data-testid="prev-input" />
@@ -355,7 +355,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-03: Enter selection in dropdown', async () => {
+		test('KN-03: Enter selection in dropdown', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -376,7 +376,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-04: Space key selection', async () => {
+		test('KN-04: Space key selection', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -396,7 +396,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('KN-05: Tab navigation within dropdown', async () => {
+		test('KN-05: Tab navigation within dropdown', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -417,7 +417,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 4. UI/UX BEHAVIORS =====
 	describe('UI/UX Behaviors (UI)', () => {
-		it('UI-01: Loading state does not block interaction', async () => {
+		test('UI-01: Loading state does not block interaction', async () => {
 			render(
 				<CustomSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -429,7 +429,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			expect(combobox).toHaveFocus();
 		});
 
-		it('UI-02: Component remains editable in all states', () => {
+		test('UI-02: Component remains editable in all states', () => {
 			render(
 				<CustomSelect
 					options={mockOptions}
@@ -444,7 +444,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			expect(combobox).not.toBeDisabled();
 		});
 
-		it('UI-03: Loading state display in footer', async () => {
+		test('UI-03: Loading state display in footer', async () => {
 			render(
 				<CustomSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -458,7 +458,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-04: Error state display in footer', async () => {
+		test('UI-04: Error state display in footer', async () => {
 			render(
 				<CustomSelect
 					options={mockOptions}
@@ -477,7 +477,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('UI-05: No data state display', async () => {
+		test('UI-05: No data state display', async () => {
 			render(
 				<CustomSelect
 					options={[]}
@@ -497,7 +497,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 6. SAVE AND SELECTION TRIGGERS =====
 	describe('Save and Selection Triggers (ST)', () => {
-		it('ST-01: Mouse selection works', async () => {
+		test('ST-01: Mouse selection works', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -520,7 +520,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 7. GROUPED OPTIONS SUPPORT =====
 	describe('Grouped Options Support', () => {
-		it('handles grouped options correctly', async () => {
+		test('handles grouped options correctly', async () => {
 			render(
 				<CustomSelect options={mockGroupedOptions} onChange={mockOnChange} />,
 			);
@@ -541,7 +541,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('grouped option selection works', async () => {
+		test('grouped option selection works', async () => {
 			render(
 				<CustomSelect options={mockGroupedOptions} onChange={mockOnChange} />,
 			);
@@ -566,7 +566,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 8. ACCESSIBILITY =====
 	describe('Accessibility', () => {
-		it('has proper ARIA attributes', async () => {
+		test('has proper ARIA attributes', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -580,7 +580,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('supports screen reader navigation', async () => {
+		test('supports screen reader navigation', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -596,7 +596,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('has proper focus management', async () => {
+		test('has proper focus management', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -617,7 +617,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 10. EDGE CASES =====
 	describe('Edge Cases', () => {
-		it('handles special characters in options', async () => {
+		test('handles special characters in options', async () => {
 			const specialOptions = [
 				{ label: 'Option with spaces', value: 'option-with-spaces' },
 				{ label: 'Option-with-dashes', value: 'option-with-dashes' },
@@ -638,7 +638,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('handles extremely long option labels', async () => {
+		test('handles extremely long option labels', async () => {
 			const longLabelOptions = [
 				{
 					label:
@@ -663,7 +663,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 11. ADVANCED KEYBOARD NAVIGATION =====
 	describe('Advanced Keyboard Navigation (AKN)', () => {
-		it('AKN-01: Mouse out closes dropdown', async () => {
+		test('AKN-01: Mouse out closes dropdown', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -684,7 +684,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('AKN-02: TAB navigation from input to dropdown', async () => {
+		test('AKN-02: TAB navigation from input to dropdown', async () => {
 			render(
 				<div>
 					<input data-testid="prev-input" />
@@ -722,7 +722,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 12. ADVANCED FILTERING AND HIGHLIGHTING =====
 	describe('Advanced Filtering and Highlighting (AFH)', () => {
-		it('AFH-01: Highlighted values pushed to top', async () => {
+		test('AFH-01: Highlighted values pushed to top', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -745,14 +745,14 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			await waitFor(() => {
 				// Check for highlighted text
 				const highlightedElements = document.querySelectorAll('.highlight-text');
-				const highlightTexts = [...highlightedElements].map(
+				const highlightTexts = Array.from(highlightedElements).map(
 					(el) => el.textContent,
 				);
 				expect(highlightTexts).toContain('front');
 
 				// Get all option items to check the order
 				const optionItems = document.querySelectorAll('.option-item');
-				const optionTexts = [...optionItems]
+				const optionTexts = Array.from(optionItems)
 					.map((item) => {
 						const contentElement = item.querySelector('.option-content');
 						return contentElement?.textContent?.trim();
@@ -776,7 +776,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('AFH-02: Distinction between selection Enter and save Enter', async () => {
+		test('AFH-02: Distinction between selection Enter and save Enter', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -830,7 +830,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 13. ADVANCED CLEAR ACTIONS =====
 	describe('Advanced Clear Actions (ACA)', () => {
-		it('ACA-01: Clear action waiting behavior', async () => {
+		test('ACA-01: Clear action waiting behavior', async () => {
 			const mockOnChangeWithDelay = jest.fn().mockImplementation(
 				() =>
 					new Promise((resolve) => {
@@ -860,7 +860,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			expect(mockOnChangeWithDelay).toHaveBeenCalled();
 		});
 
-		it('ACA-02: Single select clear behavior like text input', async () => {
+		test('ACA-02: Single select clear behavior like text input', async () => {
 			render(
 				<CustomSelect
 					options={mockOptions}
@@ -883,7 +883,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 14. ADVANCED UI STATES =====
 	describe('Advanced UI States (AUS)', () => {
-		it('AUS-01: No data with previous value selected', async () => {
+		test('AUS-01: No data with previous value selected', async () => {
 			render(
 				<CustomSelect
 					options={[]}
@@ -905,7 +905,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			expect(screen.getAllByText('previous-value')).toHaveLength(2);
 		});
 
-		it('AUS-02: Always editable accessibility', async () => {
+		test('AUS-02: Always editable accessibility', async () => {
 			render(
 				<CustomSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -921,7 +921,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			expect(combobox).not.toBeDisabled();
 		});
 
-		it('AUS-03: Sufficient space for search value', async () => {
+		test('AUS-03: Sufficient space for search value', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -950,7 +950,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('AUS-04: No spinners blocking user interaction', async () => {
+		test('AUS-04: No spinners blocking user interaction', async () => {
 			render(
 				<CustomSelect options={mockOptions} onChange={mockOnChange} loading />,
 			);
@@ -976,7 +976,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 15. REGEX AND CUSTOM VALUES =====
 	describe('Regex and Custom Values (RCV)', () => {
-		it('RCV-01: Regex pattern support', async () => {
+		test('RCV-01: Regex pattern support', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');
@@ -1019,7 +1019,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 			});
 		});
 
-		it('RCV-02: Custom values treated as normal dropdown values', async () => {
+		test('RCV-02: Custom values treated as normal dropdown values', async () => {
 			const customOptions = [
 				...mockOptions,
 				{ label: 'custom-value', value: 'custom-value', type: 'custom' as const },
@@ -1051,7 +1051,7 @@ describe('CustomSelect - Comprehensive Tests', () => {
 
 	// ===== 16. DROPDOWN PERSISTENCE =====
 	describe('Dropdown Persistence (DP)', () => {
-		it('DP-01: Dropdown closes only on save actions', async () => {
+		test('DP-01: Dropdown closes only on save actions', async () => {
 			render(<CustomSelect options={mockOptions} onChange={mockOnChange} />);
 
 			const combobox = screen.getByRole('combobox');

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -86,7 +86,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
 	describe('CustomSelect Integration (VI)', () => {
-		it('VI-01: Single select variable integration', async () => {
+		test('VI-01: Single select variable integration', async () => {
 			const variable = createMockVariable({
 				multiSelect: false,
 				type: 'CUSTOM',
@@ -130,7 +130,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
 	describe('CustomMultiSelect Integration (VI)', () => {
-		it('VI-02: Multi select variable integration', async () => {
+		test('VI-02: Multi select variable integration', async () => {
 			const variable = createMockVariable({
 				multiSelect: true,
 				type: 'CUSTOM',
@@ -174,7 +174,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 3. TEXTBOX VARIABLE TYPE =====
 	describe('Textbox Variable Integration', () => {
-		it('VI-03: Textbox variable handling', async () => {
+		test('VI-03: Textbox variable handling', async () => {
 			const variable = createMockVariable({
 				type: 'TEXTBOX',
 				selectedValue: 'initial-value',
@@ -219,7 +219,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
 	describe('Value Persistence and State Management', () => {
-		it('VI-04: All selected state handling', () => {
+		test('VI-04: All selected state handling', () => {
 			const variable = createMockVariable({
 				multiSelect: true,
 				type: 'CUSTOM',
@@ -243,7 +243,7 @@ describe('VariableItem Integration Tests', () => {
 			expect(screen.getByText('ALL')).toBeInTheDocument();
 		});
 
-		it('VI-05: Dropdown behavior with temporary selections', async () => {
+		test('VI-05: Dropdown behavior with temporary selections', async () => {
 			const variable = createMockVariable({
 				multiSelect: true,
 				type: 'CUSTOM',
@@ -277,7 +277,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
 	describe('Accessibility and User Experience', () => {
-		it('VI-06: Variable description tooltip', async () => {
+		test('VI-06: Variable description tooltip', async () => {
 			const variable = createMockVariable({
 				description: 'This variable controls the service selection',
 				type: 'CUSTOM',
@@ -310,7 +310,7 @@ describe('VariableItem Integration Tests', () => {
 			});
 		});
 
-		it('VI-07: Variable name display', () => {
+		test('VI-07: Variable name display', () => {
 			const variable = createMockVariable({
 				name: 'service_name',
 				type: 'CUSTOM',
@@ -331,7 +331,7 @@ describe('VariableItem Integration Tests', () => {
 			expect(screen.getByText('$service_name')).toBeInTheDocument();
 		});
 
-		it('VI-08: Max tag count behavior', async () => {
+		test('VI-08: Max tag count behavior', async () => {
 			const variable = createMockVariable({
 				multiSelect: true,
 				type: 'CUSTOM',
@@ -365,7 +365,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 8. SEARCH INTERACTION TESTS =====
 	describe('Search Interaction Tests', () => {
-		it('VI-14: Search persistence across dropdown open/close', async () => {
+		test('VI-14: Search persistence across dropdown open/close', async () => {
 			const variable = createMockVariable({
 				type: 'CUSTOM',
 				customValue: 'option1,option2,option3',
@@ -417,7 +417,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
 	describe('Advanced Keyboard Navigation (VI)', () => {
-		it('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
+		test('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
 			const variable = createMockVariable({
 				type: 'CUSTOM',
 				customValue: 'option1,option2,option3',
@@ -461,7 +461,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 11. ADVANCED UI STATES =====
 	describe('Advanced UI States (VI)', () => {
-		it('VI-19: No data with previous value selected in variable', async () => {
+		test('VI-19: No data with previous value selected in variable', async () => {
 			const variable = createMockVariable({
 				type: 'CUSTOM',
 				customValue: '',
@@ -499,7 +499,7 @@ describe('VariableItem Integration Tests', () => {
 			expect(combobox).toBeInTheDocument();
 		});
 
-		it('VI-20: Always editable accessibility in variable', async () => {
+		test('VI-20: Always editable accessibility in variable', async () => {
 			const variable = createMockVariable({
 				type: 'CUSTOM',
 				customValue: 'option1,option2',
@@ -530,7 +530,7 @@ describe('VariableItem Integration Tests', () => {
 
 	// ===== 13. DROPDOWN PERSISTENCE =====
 	describe('Dropdown Persistence (VI)', () => {
-		it('VI-24: Dropdown stays open for non-save actions in variable', async () => {
+		test('VI-24: Dropdown stays open for non-save actions in variable', async () => {
 			const variable = createMockVariable({
 				type: 'CUSTOM',
 				customValue: 'option1,option2,option3',

frontend/src/components/NewSelect/styles.scss

@@ -180,7 +180,9 @@ $custom-border-color: #2c3044;
 .custom-multiselect-dropdown-container {
 	z-index: 1050 !important;
 	padding: 0;
-	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
+	box-shadow:
+		0 3px 6px -4px rgba(0, 0, 0, 0.5),
+		0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
 	background-color: var(--l2-background);
 	border: 1px solid var(--l1-border);
@@ -804,8 +806,10 @@ $custom-border-color: #2c3044;
 	.custom-multiselect-dropdown-container {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l1-border);
-		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+		box-shadow:
+			0 3px 6px -4px rgba(0, 0, 0, 0.12),
+			0 6px 16px 0 rgba(0, 0, 0, 0.08),
+			0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
 		.empty-message {
 			color: var(--l2-foreground);
@@ -976,7 +980,9 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
+			transition:
+				opacity 0.2s ease,
+				visibility 0.2s ease;
 
 			.lightMode & {
 				color: rgba(0, 0, 0, 0.85);