chore: enchance clickhouse log_comment

frontend/.eslintrc.js

@@ -78,7 +78,7 @@ module.exports = {
 		// TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
 		'@typescript-eslint/no-empty-function': 'off', // Disallows empty function bodies
 		'@typescript-eslint/no-var-requires': 'error', // Disallows require() in TypeScript (use import instead)
-		'@typescript-eslint/ban-ts-comment': 'warn', // Allows @ts-ignore comments (sometimes needed for third-party libs)
+		'@typescript-eslint/ban-ts-comment': 'off', // Allows @ts-ignore comments (sometimes needed for third-party libs)
 		'no-empty-function': 'off', // Disabled in favor of TypeScript version above
 
 		// React rules
@@ -146,49 +146,6 @@ module.exports = {
 
 		// SonarJS - code quality and complexity
 		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
-
-		// State management governance
-		// Approved patterns: Zustand, nuqs (URL state), react-query (server state), useState/useRef/useReducer, localStorage/sessionStorage for simple cases
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'redux',
-						message:
-							'[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'react-redux',
-						message:
-							'[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'xstate',
-						message:
-							'[State mgmt] xstate is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						name: '@xstate/react',
-						message:
-							'[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						// Restrict React Context — useState/useRef/useReducer remain allowed
-						name: 'react',
-						importNames: ['createContext', 'useContext'],
-						message:
-							'[State mgmt] React Context is deprecated. Migrate shared state to Zustand.',
-					},
-					{
-						// immer used standalone as a store pattern is deprecated; Zustand bundles it internally
-						name: 'immer',
-						message:
-							'[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead.',
-					},
-				],
-			},
-		],
 	},
 	overrides: [
 		{

frontend/package.json

@@ -60,7 +60,6 @@
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
-		"@signozhq/toggle-group": "^0.0.1",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",

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

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details"
+	"roles": "Roles"
 }

frontend/public/locales/en/routes.json

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"role_details": "Role Details"
+	"roles": "Roles"
 }

frontend/src/AppRoutes/Private.tsx

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

frontend/src/AppRoutes/index.tsx

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

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

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

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

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

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

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

frontend/src/api/index.ts

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

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

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

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

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

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

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

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

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

frontend/src/assets/Error.tsx

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

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

@@ -26,5 +26,4 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/tooltip';

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

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

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
@@ -91,6 +90,7 @@ const getColumnSearchProps = (
 		clearFilters,
 		close,
 	}): JSX.Element => (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div style={{ padding: 8 }} onKeyDown={(e): void => e.stopPropagation()}>
 			<Input
 				ref={searchInput}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

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

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

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

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

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

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

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

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

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

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

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

frontend/src/components/CustomTimePicker/timezoneUtils.ts

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

frontend/src/components/DraggableTableRow/index.tsx

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

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

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

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

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

frontend/src/components/ErrorPopover/ErrorPopover.tsx

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

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

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

frontend/src/components/ExplorerCard/utils.ts

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

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

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

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

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

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

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

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

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

frontend/src/components/Graph/hasData.ts

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

frontend/src/components/Graph/utils.ts

@@ -1,5 +1,6 @@
 import { MutableRefObject } from 'react';
 import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+// eslint-disable-next-line import/namespace -- side-effect import that registers Chart.js date adapter
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -207,6 +208,7 @@ export const getGraphOptions = (
 			cubicInterpolationMode: 'monotone',
 		},
 		point: {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			hoverBackgroundColor: (ctx: any): string => {
 				if (ctx?.element?.options?.borderColor) {
 					return ctx.element.options.borderColor;
@@ -233,6 +235,7 @@ export const getGraphOptions = (
 			);
 
 			if (interactions[0]) {
+				// eslint-disable-next-line no-param-reassign
 				nearestDatasetIndex.current = interactions[0].datasetIndex;
 			}
 		}

frontend/src/components/Graph/xAxisConfig.ts

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

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

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

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

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

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

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

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

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

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

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

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

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

frontend/src/components/Input/index.tsx

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

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -112,6 +112,8 @@ function LaunchChatSupport({
 		} else {
 			logEvent(eventName, attributes);
 			if (window.pylon && !chatMessageDisabled) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
 				window.Pylon('showNewMessage', defaultTo(message, ''));
 			}
 		}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -48,6 +48,7 @@ function QueryBuilderSearchWrapper({
 		setContextQuery({ ...nextQuery });
 	};
 
+	// eslint-disable-next-line react/jsx-no-useless-fragment
 	if (!contextQuery || !isEdit) {
 		return <></>;
 	}

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -55,7 +55,6 @@ import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 
 import './LogDetails.styles.scss';
 
-/* eslint-disable-next-line sonarjs/cognitive-complexity */
 function LogDetailInner({
 	log,
 	onClose,
@@ -110,7 +109,6 @@ function LogDetailInner({
 
 	// Keyboard navigation - handle up/down arrow keys
 	// Only listen when in OVERVIEW tab
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
 		if (
 			!logs ||
@@ -426,6 +424,7 @@ function LogDetailInner({
 					>
 						<Radio.Button
 							className={
+								// eslint-disable-next-line sonarjs/no-duplicate-string
 								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
 							}
 							value={VIEW_TYPES.OVERVIEW}
@@ -574,9 +573,11 @@ function LogDetailInner({
 function LogDetail(props: LogDetailProps): JSX.Element {
 	const { log } = props;
 	if (!log) {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
 		return <></>;
 	}
 
+	// eslint-disable-next-line react/jsx-props-no-spreading
 	return <LogDetailInner {...(props as LogDetailInnerProps)} />;
 }
 

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -25,6 +25,7 @@ function AddToQueryHOC({
 	]);
 
 	return (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
 			<Popover
 				overlayClassName="drawer-popover"

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

@@ -70,6 +70,9 @@
 		padding-left: 0;
 	}
 	transition: background-color 0.2s ease-in;
+	&:hover {
+		background-color: rgba(171, 189, 255, 0.04) !important;
+	}
 }
 
 .log-selected-fields {
@@ -180,6 +183,11 @@
 	.log-value {
 		color: var(--text-slate-400);
 	}
+	.log-line {
+		&:hover {
+			background-color: var(--text-vanilla-200) !important;
+		}
+	}
 }
 
 .dark {

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Card } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
@@ -48,12 +49,6 @@ export const Container = styled(Card)<{
 
 		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
-	}
-
-	&:hover .ant-card-body {
-		${({ $isDarkMode, $logType }): string =>
-			getActiveLogBackground(true, $isDarkMode, $logType)}
-	}
 `;
 
 export const LogContainer = styled.div<LogContainerProps>`

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -78,6 +78,7 @@ const SEVERITY_VARIANT_CLASSES: Record<string, string> = {
 	Wrn: 'severity-warn-4',
 
 	// Error variants - cherry-600 to cherry-200
+	// eslint-disable-next-line sonarjs/no-duplicate-string
 	ERROR: 'severity-error-0',
 	Error: 'severity-error-1',
 	error: 'severity-error-2',
@@ -89,9 +90,11 @@ const SEVERITY_VARIANT_CLASSES: Record<string, string> = {
 	FAIL: 'severity-error-0',
 
 	// Fatal variants - sakura-600 to sakura-200
+	// eslint-disable-next-line sonarjs/no-duplicate-string
 	FATAL: 'severity-fatal-0',
 	Fatal: 'severity-fatal-1',
 	fatal: 'severity-fatal-2',
+	// eslint-disable-next-line sonarjs/no-duplicate-string
 	critical: 'severity-fatal-3',
 	Critical: 'severity-fatal-4',
 	CRITICAL: 'severity-fatal-0',

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { ILog } from 'types/api/logs/log';
 
 import { getLogIndicatorType, getLogIndicatorTypeForTable } from './utils';

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
@@ -7,6 +8,7 @@ import styled from 'styled-components';
 import {
 	getActiveLogBackground,
 	getCustomHighlightBackground,
+	getDefaultLogBackground,
 } from 'utils/logs';
 
 import { RawLogContentProps } from './types';
@@ -46,9 +48,7 @@ export const RawLogViewContainer = styled(Row)<{
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
-			: !$isReadOnly
-			? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
-			: ''}
+			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
 
 	${({ $isHightlightedLog, $isDarkMode }): string =>
 		$isHightlightedLog

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 

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

@@ -84,6 +84,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				// We do not need any title and data index for the log state indicator
 				title: '',
 				dataIndex: '',
+				// eslint-disable-next-line sonarjs/no-duplicate-string
 				key: 'state-indicator',
 				accessorKey: 'state-indicator',
 				id: 'state-indicator',

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
@@ -77,6 +80,7 @@ function OptionsMenu({
 	};
 
 	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		const value = event?.target?.value || '';
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import React, { useState } from 'react';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import cx from 'classnames';

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import ReactMarkdown from 'react-markdown';
@@ -51,6 +53,7 @@ function Code({
 	const match = /language-(\w+)/.exec(className || '');
 	return !inline && match ? (
 		<SyntaxHighlighter
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			style={a11yDark}
 			language={match[1]}
@@ -113,6 +116,7 @@ function MarkdownRenderer({
 		<ReactMarkdown
 			rehypePlugins={[rehypeRaw as any]}
 			components={{
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				a: Link,
 				pre: ({ children }) =>

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { useEffect, useMemo, useState } from 'react';
 import { Button } from 'antd';
 import cx from 'classnames';

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -1,4 +1,9 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/function-component-definition */
 import React, {
 	useCallback,
 	useEffect,

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/function-component-definition */
 import React, {
 	useCallback,
 	useEffect,

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

@@ -1,3 +1,5 @@
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable sonarjs/no-duplicate-string */
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

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

@@ -1,3 +1,5 @@
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable sonarjs/no-duplicate-string */
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

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

@@ -1,5 +1,5 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { render, screen, waitFor } from '@testing-library/react';
@@ -65,6 +65,7 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 		<Provider store={mockStore}>
 			<QueryClientProvider client={queryClient}>
 				<VirtuosoMockContext.Provider
+					// eslint-disable-next-line react/jsx-no-constructed-context-values
 					value={{ viewportHeight: 300, itemHeight: 40 }}
 				>
 					{children}

frontend/src/components/NewSelect/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 
 import { OptionData } from './types';

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/jsx-props-no-spreading */
+
 import { useEffect, useRef, useState } from 'react';
 import { Input, InputProps, InputRef, Tooltip } from 'antd';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -1,9 +1,7 @@
 import {
-	// eslint-disable-next-line no-restricted-imports
 	createContext,
 	ReactNode,
 	useCallback,
-	// eslint-disable-next-line no-restricted-imports
 	useContext,
 	useMemo,
 	useState,

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -78,10 +78,14 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 		[handleChangeQueryData],
 	);
 
-	const showAggregationInterval = useMemo(
-		() => panelType !== PANEL_TYPES.VALUE,
-		[panelType],
-	);
+	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (panelType === PANEL_TYPES.VALUE) {
+			return false;
+		}
+
+		return true;
+	}, [panelType]);
 
 	const disableOperatorSelector =
 		!queryAggregation.metricName || queryAggregation.metricName === '';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
@@ -247,6 +248,8 @@ function QueryAddOns({
 				filteredAddOns.some((addOn) => addOn.key === view.key),
 			),
 		);
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [panelType, isListViewPanel, query, showReduceTo]);
 
 	const handleOptionClick = (e: RadioChangeEvent): void => {

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -26,6 +26,7 @@ function QueryAggregationOptions({
 	queryData: IBuilderQuery | IBuilderTraceOperator;
 }): JSX.Element {
 	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
 		if (panelType === PANEL_TYPES.VALUE) {
 			return false;
 		}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -1,4 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable react/no-this-in-sfc */
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
@@ -145,6 +149,7 @@ const stopEventsExtension = EditorView.domEventHandlers({
 	},
 });
 
+// eslint-disable-next-line react/no-this-in-sfc
 function QueryAggregationSelect({
 	onChange,
 	queryData,

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+/* eslint-disable react/require-default-props */
 import { Button, Tooltip, Typography } from 'antd';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CheckCircleFilled } from '@ant-design/icons';
@@ -391,6 +392,7 @@ function QuerySearch({
 
 	// Use callback to prevent dependency changes on each render
 	const fetchValueSuggestions = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
 		async ({
 			key,
 			searchText,
@@ -669,6 +671,7 @@ function QuerySearch({
 	};
 
 	// Enhanced myCompletions function to better use context including query pairs
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	function autoSuggestions(context: CompletionContext): CompletionResult | null {
 		// This matches words before the cursor position
 		// eslint-disable-next-line no-useless-escape
@@ -1086,6 +1089,7 @@ function QuerySearch({
 				!(isLoadingSuggestions && lastKeyRef.current === keyName);
 
 			if (shouldFetch) {
+				// eslint-disable-next-line sonarjs/no-identical-functions
 				debouncedFetchValueSuggestions({
 					key: keyName,
 					searchText,

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable sonarjs/no-duplicate-string */
+
 import { useCallback } from 'react';
 import { Button, Tooltip, Typography } from 'antd';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/__tests__/traceOperatorContextUtils.test.ts

@@ -1,3 +1,6 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/cognitive-complexity */
+
 import { Token } from 'antlr4';
 import TraceOperatorGrammarLexer from 'parser/TraceOperatorParser/TraceOperatorGrammarLexer';
 

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/traceOperatorContextUtils.ts

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable no-continue */
 
 import { CharStreams, CommonTokenStream, Token } from 'antlr4';
 import TraceOperatorGrammarLexer from 'parser/TraceOperatorParser/TraceOperatorGrammarLexer';
@@ -289,6 +290,7 @@ export function getCurrentTraceExpressionPair(
 		// Find the rightmost pair whose end position is before or at the cursor
 		let bestMatch: ITraceExpressionPair | null = null;
 
+		// eslint-disable-next-line no-restricted-syntax
 		for (const pair of expressionPairs) {
 			const { position } = pair;
 			const pairEnd =

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable import/named */
 import { EditorView } from '@uiw/react-codemirror';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { fireEvent, render, userEvent, waitFor } from 'tests/test-utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import type { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -365,36 +367,4 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 		dispatchSpy.mockRestore();
 	});
-
-	it('fetches key suggestions for metrics even without aggregateAttribute.key when showFilterSuggestionsWithoutMetric is true', async () => {
-		const mockedGetKeys = getKeySuggestions as jest.MockedFunction<
-			typeof getKeySuggestions
-		>;
-		mockedGetKeys.mockClear();
-
-		const queryData = {
-			...initialQueriesMap.metrics.builder.queryData[0],
-			aggregateAttribute: {
-				key: '',
-				dataType: DataTypes.String,
-				type: 'string',
-			},
-		};
-
-		render(
-			<QuerySearch
-				onChange={jest.fn()}
-				queryData={queryData}
-				dataSource={DataSource.METRICS}
-				showFilterSuggestionsWithoutMetric
-			/>,
-		);
-
-		await waitFor(
-			() => {
-				expect(mockedGetKeys).toHaveBeenCalled();
-			},
-			{ timeout: 2000 },
-		);
-	});
 });

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable react/display-name */
 import { jest } from '@jest/globals';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -27,14 +28,14 @@ import { QueryBuilderV2 } from '../../QueryBuilderV2';
 jest.mock(
 	'../QueryAggregation/QueryAggregation',
 	() =>
-		function QueryAggregation() {
+		function () {
 			return <div>QueryAggregation</div>;
 		},
 );
 jest.mock(
 	'../MerticsAggregateSection/MetricsAggregateSection',
 	() =>
-		function MetricsAggregateSection() {
+		function () {
 			return <div>MetricsAggregateSection</div>;
 		},
 );

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -1,4 +1,4 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
+/* eslint-disable */
 import {
 	fireEvent,
 	render,
@@ -7,46 +7,40 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 // Mocks: only what is required for this component to render and for us to assert handler calls
 const mockHandleChangeQueryData = jest.fn();
 const mockHandleSetQueryData = jest.fn();
 
 jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
-	useQueryOperations: (): {
-		handleChangeQueryData: typeof mockHandleChangeQueryData;
-	} => ({
+	useQueryOperations: () => ({
 		handleChangeQueryData: mockHandleChangeQueryData,
 	}),
 }));
 
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): {
-		handleSetQueryData: typeof mockHandleSetQueryData;
-	} => ({
+	useQueryBuilder: () => ({
 		handleSetQueryData: mockHandleSetQueryData,
 	}),
 }));
 
 jest.mock('container/QueryBuilder/filters/GroupByFilter/GroupByFilter', () => ({
-	GroupByFilter: ({ onChange }: any): JSX.Element => (
-		<button
-			data-testid="groupby"
-			onClick={(): void => onChange(['service.name'])}
-		>
+	GroupByFilter: ({ onChange }: any) => (
+		<button data-testid="groupby" onClick={() => onChange(['service.name'])}>
 			GroupByFilter
 		</button>
 	),
 }));
 
 jest.mock('container/QueryBuilder/filters/OrderByFilter/OrderByFilter', () => ({
-	OrderByFilter: ({ onChange }: any): JSX.Element => (
+	OrderByFilter: ({ onChange }: any) => (
 		<button
 			data-testid="orderby"
-			onClick={(): void => onChange([{ columnName: 'duration', order: 'desc' }])}
+			onClick={() => onChange([{ columnName: 'duration', order: 'desc' }])}
 		>
 			OrderByFilter
 		</button>
@@ -55,12 +49,9 @@ jest.mock('container/QueryBuilder/filters/OrderByFilter/OrderByFilter', () => ({
 
 jest.mock('../QueryV2/QueryAddOns/HavingFilter/HavingFilter', () => ({
 	__esModule: true,
-	default: ({ onChange, onClose }: any): JSX.Element => (
+	default: ({ onChange, onClose }: any) => (
 		<div>
-			<button
-				data-testid="having-change"
-				onClick={(): void => onChange('p99 > 500')}
-			>
+			<button data-testid="having-change" onClick={() => onChange('p99 > 500')}>
 				HavingFilter
 			</button>
 			<button data-testid="having-close" onClick={onClose}>

frontend/src/components/QueryBuilderV2/__tests__/previousQuery.utils.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import '@testing-library/jest-dom';

frontend/src/components/QueryBuilderV2/__tests__/utils.test.ts

@@ -1,3 +1,5 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable import/no-unresolved */
 import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
 import {
 	BaseAutocompleteData,

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

@@ -53,6 +53,7 @@ const MOCK_SERVICE_NAMES = [MQ_KAFKA, OTEL_DEMO, OTLP_PYTHON, SAMPLE_FLASK];
 const createMockFilter = (
 	overrides: Partial<MockFilterConfig> = {},
 ): MockFilterConfig => ({
+	// eslint-disable-next-line sonarjs/no-duplicate-string
 	title: 'Service Name',
 	attributeKey: {
 		key: SERVICE_NAME_KEY,
@@ -150,6 +151,7 @@ describe('CheckboxFilter - User Flows', () => {
 		// User should see the filter is automatically opened (not collapsed)
 		expect(screen.getByText('Service Name')).toBeInTheDocument();
 		await waitFor(() => {
+			// eslint-disable-next-line sonarjs/no-duplicate-string
 			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 

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

@@ -1,4 +1,7 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { Fragment, useMemo, useState } from 'react';
 import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
 import cx from 'classnames';

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Collapse } from 'antd';
 import {

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import { useMemo } from 'react';
 import {
 	closestCenter,

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import { memo, useEffect, useState } from 'react';
 import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import { ColumnGroupType, ColumnType } from 'antd/es/table';

frontend/src/components/ResizeTable/ResizableHeader.tsx

@@ -20,6 +20,7 @@ function ResizableHeader(props: ResizableHeaderProps): JSX.Element {
 	);
 
 	if (!width) {
+		// eslint-disable-next-line react/jsx-props-no-spreading
 		return <th {...restProps} className="resizable-header" />;
 	}
 
@@ -32,6 +33,7 @@ function ResizableHeader(props: ResizableHeaderProps): JSX.Element {
 			draggableOpts={enableUserSelectHack}
 			minConstraints={[150, 0]}
 		>
+			{/* eslint-disable-next-line react/jsx-props-no-spreading */}
 			<th {...restProps} className="resizable-header" />
 		</Resizable>
 	);