chore: add initial version of query range design principles doc

conf/example.yaml

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

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/api/openapi.yml

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

docs/contributing/query-range.md

@@ -0,0 +1,216 @@
+# Query Range v5 — Design Principles & Architectural Contracts
+
+## Purpose of This Document
+
+This document defines the design principles, invariants, and architectural contracts of the Query Range v5 system. It is intended for the authors working on the querier and querier related parts codebase. Any change to the system must align with the principles described here. If a change would violate a principle, it must be flagged and discussed.
+
+---
+
+## Core Architectural Principle
+
+**The user speaks OpenTelemetry. The storage speaks ClickHouse. The system translates between them. These two worlds must never leak into each other.**
+
+Every design choice in Query Range flows from this separation. The user-facing API surface deals exclusively in `TelemetryFieldKey`: a representation of fields as they exist in the OpenTelemetry data model. The storage layer deals in ClickHouse column expressions, table names, and SQL fragments. The translation between them is mediated by a small set of composable abstractions with strict boundaries.
+
+---
+
+## The Central Type: `TelemetryFieldKey`
+
+`TelemetryFieldKey` is the atomic unit of the entire query system. Every filter, aggregation, group-by, order-by, and select operation is expressed in terms of field keys. Understanding its design contracts is non-negotiable.
+
+### Identity
+
+A field key is identified by three dimensions:
+
+- **Name** — the field name as the user knows it (`service.name`, `http.method`, `trace_id`)
+- **FieldContext** — where the field lives in the OTel model (`resource`, `attribute`, `span`, `log`, `body`, `scope`, `event`, `metric`)
+- **FieldDataType** — the data type (`string`, `bool`, `number`/`float64`/`int64`, array variants)
+
+### Invariant: Same name does not mean same field
+
+`status` as an attribute, `status` as a body JSON key, and `status` as a span-level field are **three different fields**. The context disambiguates. Code that resolves or compares field keys must always consider all three dimensions, never just the name.
+
+### Invariant: Normalization happens once, at the boundary
+
+`TelemetryFieldKey.Normalize()` is called during JSON unmarshaling. After normalization, the text representation `resource.service.name:string` and the programmatic construction `{Name: "service.name", FieldContext: Resource, FieldDataType: String}` are identical.
+
+**Consequence:** Downstream code must never re-parse or re-normalize field keys. If you find yourself splitting on `.` or `:` deep in the pipeline, something is wrong — the normalization should have already happened.
+
+### Invariant: The text format is `context.name:datatype`
+
+Parsing rules (implemented in `GetFieldKeyFromKeyText` and `Normalize`):
+
+1. Data type is extracted from the right, after the last `:`.
+2. Field context is extracted from the left, before the first `.`, if it matches a known context prefix.
+3. Everything remaining is the name.
+
+Special case: `log.body.X` normalizes to `{FieldContext: body, Name: X}` — the `log.body.` prefix collapses because body fields under log are a nested context.
+
+### Invariant: Historical aliases must be preserved
+
+The `fieldContexts` map includes aliases (`tag` -> `attribute`, `spanfield` -> `span`, `logfield` -> `log`). These exist because older database entries use these names. Removing or changing these aliases will break existing saved queries and dashboard configurations.
+
+---
+
+## The Abstraction Stack
+
+The query pipeline is built from four interfaces that compose vertically. Each layer has a single responsibility. Each layer depends only on the layers below it. This layering is intentional and must be preserved.
+
+```
+StatementBuilder          <- Orchestrates everything into executable SQL
+  ├── AggExprRewriter     <- Rewrites aggregation expressions (maps field refs to columns)
+  ├── ConditionBuilder    <- Builds WHERE predicates (field + operator + value -> SQL)
+  └── FieldMapper         <- Maps TelemetryFieldKey -> ClickHouse column expression
+```
+
+### FieldMapper
+
+**Contract:** Given a `TelemetryFieldKey`, return a ClickHouse column expression that yields the value for that field when used in a SELECT.
+
+**Principle:** This is the *only* place where field-to-column translation happens. No other layer should contain knowledge of how fields map to storage. If you need a column expression, go through the FieldMapper.
+
+**Why:** The user says `http.request.method`. ClickHouse might store it as `attributes_string['http.request.method']`, or as a materialized column `` `attribute_string_http$$request$$method` ``, or via a JSON access path in a body column. This variation is entirely contained within the FieldMapper. Everything above it is storage-agnostic.
+
+### ConditionBuilder
+
+**Contract:** Given a field key, an operator, and a value, produce a valid SQL predicate for a WHERE clause.
+
+**Dependency:** Uses FieldMapper for the left-hand side of the condition.
+
+**Principle:** The ConditionBuilder owns all the complexity of operator semantics, i.e type casting, array operators (`hasAny`/`hasAll` vs `=`), existence checks, and negative operator behavior. This complexity must not leak upward into the StatementBuilder.
+
+### AggExprRewriter
+
+**Contract:** Given a user-facing aggregation expression like `sum(duration_nano)`, resolve field references within it and produce valid ClickHouse SQL.
+
+**Dependency:** Uses FieldMapper to resolve field names within expressions.
+
+**Principle:** Aggregation expressions are user-authored strings that contain field references. The rewriter parses them, identifies field references, resolves each through the FieldMapper, and reassembles the expression.
+
+### StatementBuilder
+
+**Contract:** Given a complete `QueryBuilderQuery`, a time range, and a request type, produces an executable SQL statement.
+
+**Dependency:** Uses all three abstractions above.
+
+**Principle:** This is the composition layer. It does not contain field mapping logic, condition building logic, or expression rewriting logic. It orchestrates the other abstractions. If you find storage-specific logic creeping into the StatementBuilder, push it down into the appropriate abstraction.
+
+### Invariant: No layer skipping
+
+The StatementBuilder must not call FieldMapper directly to build conditions, it goes through the ConditionBuilder. The AggExprRewriter must not hardcode column names, it goes through the FieldMapper. Skipping layers creates hidden coupling and makes the system fragile to storage changes.
+
+---
+
+## Design Decisions as Constraints
+
+### Constraint: Formula evaluation happens in Go, not in ClickHouse
+
+Formulas (`A + B`, `A / B`, `sqrt(A*A + B*B)`) are evaluated application-side by `FormulaEvaluator`, not via ClickHouse JOINs.
+
+**Why this is a constraint, not just an implementation choice:** The original JOIN-based approach was abandoned because ClickHouse evaluates joins right-to-left, serializing execution unnecessarily. Running queries independently allows parallelism and caching of intermediate results. Any future optimization must not reintroduce the JOIN pattern without solving the serialization problem.
+
+**Consequence:** Individual query results must be independently cacheable. Formula evaluation must handle label matching, timestamp alignment, and missing values without requiring the queries to coordinate at the SQL level.
+
+### Constraint: Zero-defaulting is aggregation-dependent
+
+Only additive/counting aggregations (`count`, `count_distinct`, `sum`, `rate`) default missing values to zero. Statistical aggregations (`avg`, `min`, `max`, percentiles) must show gaps.
+
+**Why:** Absence of data has different meanings. No error requests in a time bucket means error count = 0. No requests at all means average latency is *unknown*, not 0. Conflating these is a correctness bug, not a display preference.
+
+**Enforcement:** `GetQueriesSupportingZeroDefault` determines which queries can default to zero. The `FormulaEvaluator` consumes this via `canDefaultZero`. Changes to aggregation handling must preserve this distinction.
+
+### Constraint: Existence semantics differ for positive vs negative operators
+
+- **Positive operators** (`=`, `>`, `LIKE`, `IN`, etc.) implicitly assert field existence. `http.method = GET` means "the field exists AND equals GET".
+- **Negative operators** (`!=`, `NOT IN`, `NOT LIKE`, etc.) do **not** add an existence check. `http.method != GET` includes records where the field doesn't exist at all.
+
+**Why:** The user's intent with negative operators is ambiguous. Rather than guess, we take the broader interpretation. Users can add an explicit `EXISTS` filter if they want the narrower one. This is documented in `AddDefaultExistsFilter`.
+
+**Consequence:** Any new operator must declare its existence behavior in `AddDefaultExistsFilter`. Do not add operators without considering this.
+
+### Constraint: Post-processing functions operate on result sets, not in SQL
+
+Functions like `cutOffMin`, `ewma`, `median`, `timeShift`, `fillZero`, `runningDiff`, and `cumulativeSum` are applied in Go on the returned time series, not pushed into ClickHouse SQL.
+
+**Why:** These are sequential time-series transformations that require complete, ordered result sets. Pushing them into SQL would complicate query generation, prevent caching of raw results, and make the functions harder to test. They are applied via `ApplyFunctions` after query execution.
+
+**Consequence:** New time-series transformation functions should follow this pattern i.e implement them as Go functions on `*TimeSeries`, not as SQL modifications.
+
+### Constraint: The API surface rejects unknown fields with suggestions
+
+All request types use custom `UnmarshalJSON` that calls `DisallowUnknownFields`. Unknown fields trigger error messages with Levenshtein-based suggestions ("did you mean: 'groupBy'?").
+
+**Why:** Silent acceptance of unknown fields causes subtle bugs. A misspelled `groupBy` results in ungrouped data with no indication of what went wrong. Failing fast with suggestions turns errors into actionable feedback.
+
+**Consequence:** Any new request type or query spec struct must implement custom unmarshaling with `UnmarshalJSONWithContext`. Do not use default `json.Unmarshal` for user-facing types.
+
+### Constraint: Validation is context-sensitive to request type
+
+What's valid depends on the `RequestType`. For aggregation requests (`time_series`, `scalar`, `distribution`), fields like `groupBy`, `aggregations`, `having`, and aggregation-referenced `orderBy` are validated. For non-aggregation requests (`raw`, `raw_stream`, `trace`), these fields are ignored.
+
+**Why:** A raw log query doesn't have aggregations, so requiring `aggregations` would be wrong. But a time-series query without aggregations is meaningless. The validation rules are request-type-aware to avoid both false positives and false negatives.
+
+**Consequence:** When adding new fields to query specs, consider which request types they apply to and gate validation accordingly.
+
+---
+
+## The Composite Query Model
+
+### Structure
+
+A `QueryRangeRequest` contains a `CompositeQuery` which holds `[]QueryEnvelope`. Each envelope is a discriminated union: a `Type` field determines how `Spec` is decoded.
+
+### Invariant: Query names are unique within a composite query
+
+Builder queries must have unique names. Formulas reference queries by name (`A`, `B`, `A.0`, `A.my_alias`). Duplicate names would make formula evaluation ambiguous.
+
+### Invariant: Multi-aggregation uses indexed or aliased references
+
+A single builder query can have multiple aggregations. They are accessed in formulas via:
+- Index: `A.0`, `A.1` (zero-based)
+- Alias: `A.total`, `A.error_count`
+
+The default (just `A`) resolves to index 0. This is the formula evaluation contract and must be preserved.
+
+### Invariant: Type-specific decoding through signal detection
+
+Builder queries are decoded by first peeking at the `signal` field in the raw JSON, then unmarshaling into the appropriate generic type (`QueryBuilderQuery[TraceAggregation]`, `QueryBuilderQuery[LogAggregation]`, `QueryBuilderQuery[MetricAggregation]`). This two-pass decoding is intentional — it allows each signal to have its own aggregation schema while sharing the query structure.
+
+---
+
+## The Metadata Layer
+
+### MetadataStore
+
+The `MetadataStore` interface provides runtime field discovery and type resolution. It answers questions like "what fields exist for this signal?" and "what are the data types of field X?".
+
+### Principle: Fields can be ambiguous until resolved
+
+The same name can map to multiple `TelemetryFieldKey` variants (different contexts, different types). The metadata store returns *all* variants. Resolution to a single field happens during query building, using the query's signal and any explicit context/type hints from the user.
+
+**Consequence:** Code that calls `GetKey` or `GetKeys` must handle multiple results. Do not assume a name maps to a single field.
+
+### Principle: Materialized fields are a performance optimization, not a semantic distinction
+
+A materialized field and its non-materialized equivalent represent the same logical field. The `Materialized` flag tells the FieldMapper to generate a simpler column expression. The user should never need to know whether a field is materialized.
+
+### Principle: JSON body fields require access plans
+
+Fields inside JSON body columns (`body.response.errors[].code`) need pre-computed `JSONAccessPlan` trees that encode the traversal path, including branching at array boundaries between `Array(JSON)` and `Array(Dynamic)` representations. These plans are computed during metadata resolution, not during query execution.
+
+---
+
+## Summary of Inviolable Rules
+
+1. **User-facing types never contain ClickHouse column names or SQL fragments.**
+2. **Field-to-column translation only happens in FieldMapper.**
+3. **Normalization happens once at the API boundary, never deeper.**
+4. **Historical aliases in fieldContexts and fieldDataTypes must not be removed.**
+5. **Formula evaluation stays in Go — do not push it into ClickHouse JOINs.**
+6. **Zero-defaulting is aggregation-type-dependent — do not universally default to zero.**
+7. **Positive operators imply existence, negative operators do not.**
+8. **Post-processing functions operate on Go result sets, not in SQL.**
+9. **All user-facing types reject unknown JSON fields with suggestions.**
+10. **Validation rules are gated by request type.**
+11. **Query names must be unique within a composite query.**
+12. **The four-layer abstraction stack (FieldMapper -> ConditionBuilder -> AggExprRewriter -> StatementBuilder) must not be bypassed or flattened.**

ee/query-service/rules/anomaly.go

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

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

@@ -117,7 +117,6 @@
 		"lucide-react": "0.498.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
-		"nuqs": "2.8.8",
 		"overlayscrollbars": "^2.8.1",
 		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
@@ -131,7 +130,7 @@
 		"react-dom": "18.2.0",
 		"react-drag-listview": "2.0.0",
 		"react-error-boundary": "4.0.11",
-		"react-force-graph-2d": "^1.29.1",
+		"react-force-graph": "^1.43.0",
 		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
@@ -163,8 +162,7 @@
 		"webpack": "5.94.0",
 		"webpack-dev-server": "^5.2.1",
 		"webpack-retry-chunk-load-plugin": "3.1.1",
-		"xstate": "^4.31.0",
-		"zustand": "5.0.11"
+		"xstate": "^4.31.0"
 	},
 	"browserslist": {
 		"production": [
@@ -289,4 +287,4 @@
 		"on-headers": "^1.1.0",
 		"tmp": "0.2.4"
 	}
-}
+}

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

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

frontend/public/locales/en/routes.json

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"members": "Members"
+	"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/generated/services/sigNoz.schemas.ts

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

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/infraMonitoring/getHostLists.ts

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

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

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

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

@@ -1,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/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;
 			}
 		}
@@ -245,11 +248,6 @@ declare module 'chart.js' {
 	}
 }
 
-const intlNumberFormatter = new Intl.NumberFormat('en-US', {
-	useGrouping: false,
-	maximumFractionDigits: 20,
-});
-
 /**
  * Formats a number for display, preserving leading zeros after the decimal point
  * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
@@ -272,7 +270,10 @@ export const formatDecimalWithLeadingZeros = (
 	}
 
 	// Use toLocaleString to get a full decimal representation without scientific notation.
-	const numStr = intlNumberFormatter.format(value);
+	const numStr = value.toLocaleString('en-US', {
+		useGrouping: false,
+		maximumFractionDigits: 20,
+	});
 
 	const [integerPart, decimalPart = ''] = numStr.split('.');
 

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,
@@ -87,13 +86,8 @@ function LogDetailInner({
 		const handleClickOutside = (e: MouseEvent): void => {
 			const target = e.target as HTMLElement;
 
-			// Don't close if clicking on drawer content, overlays, or portal elements
-			if (
-				target.closest('[data-log-detail-ignore="true"]') ||
-				target.closest('.cm-tooltip-autocomplete') ||
-				target.closest('.drawer-popover') ||
-				target.closest('.query-status-popover')
-			) {
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
 				return;
 			}
 
@@ -110,7 +104,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 ||
@@ -407,11 +400,7 @@ function LogDetailInner({
 			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip
-						title={removeEscapeCharacters(log?.body)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
 						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 					</Tooltip>
 
@@ -426,6 +415,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}
@@ -476,7 +466,6 @@ function LogDetailInner({
 								title="Show Filters"
 								placement="topLeft"
 								aria-label="Show Filters"
-								mouseLeaveDelay={0}
 							>
 								<Button
 									className="action-btn"
@@ -492,7 +481,6 @@ function LogDetailInner({
 							aria-label={
 								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
 							}
-							mouseLeaveDelay={0}
 						>
 							<Button
 								className="action-btn"
@@ -574,9 +562,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,12 +25,9 @@ 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"
-				placement="top"
-				content={popOverContent}
-			>
+			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
 		</div>

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -32,7 +32,6 @@ function CopyClipboardHOC({
 		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
-				overlayClassName="drawer-popover"
 				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
 			>
 				{children}

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/config.ts

@@ -21,7 +21,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '90rem',
+	maxWidth: '60rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

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/MembersTable/MembersTable.styles.scss

@@ -1,259 +0,0 @@
-// ─── Table wrapper ────────────────────────────────────────────────────────────
-.members-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-// ─── Ant Design Table overrides ───────────────────────────────────────────────
-.members-table {
-	// Flatten Ant Design chrome
-	.ant-table {
-		background: transparent;
-		font-size: 14px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	// ── Header ──────────────────────────────────────────────────────────────
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--bg-ink-500, #0b0c0e);
-			font-family: Inter, sans-serif;
-			font-size: 11px;
-			font-weight: 600;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--vanilla-400, #c0c1c3);
-			line-height: 18px;
-			padding: 8px 16px;
-			border-bottom: none !important;
-			border-top: none !important;
-
-			// Remove the column divider pseudo-element
-			&::before {
-				display: none !important;
-			}
-
-			// Sorter icon color
-			.ant-table-column-sorter {
-				color: var(--vanilla-400, #c0c1c3);
-				opacity: 0.6;
-			}
-
-			.ant-table-column-sorter-up.active,
-			.ant-table-column-sorter-down.active {
-				color: var(--vanilla-100, #ffffff);
-				opacity: 1;
-			}
-		}
-	}
-
-	// ── Body rows ────────────────────────────────────────────────────────────
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: 8px 16px;
-			background: transparent;
-			transition: none;
-		}
-
-		// Even-indexed rows (0, 2, 4 …) get a subtle tint — matches Figma
-		> tr.members-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-
-		// Hover — slightly brighter tint
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	// Remove outer table border
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	// ── Status cell — right-align badge and add 4px right padding ─────────
-	.member-status-cell {
-		padding-right: 4px !important;
-	}
-}
-
-// ─── Name / Email cell ────────────────────────────────────────────────────────
-.member-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	height: 22px;
-	overflow: hidden;
-
-	.member-name {
-		font-size: 14px;
-		font-weight: 500;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.member-email {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--slate-50, #62687c);
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-// ─── Permissions dash ─────────────────────────────────────────────────────────
-.member-dash {
-	font-size: 14px;
-	color: var(--slate-50, #62687c);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-// ─── Joined On ────────────────────────────────────────────────────────────────
-.member-joined-date {
-	font-size: 14px;
-	font-weight: 400;
-	color: var(--vanilla-400, #c0c1c3);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	white-space: nowrap;
-}
-
-.member-joined-dash {
-	font-size: 14px;
-	color: var(--slate-50, #62687c);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-// ─── Empty state ─────────────────────────────────────────────────────────────
-.members-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 48px 16px;
-	gap: 8px;
-
-	&__emoji {
-		font-size: 24px;
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--vanilla-400, #c0c1c3);
-		margin: 0;
-		line-height: 20px;
-
-		strong {
-			font-weight: 500;
-			color: var(--vanilla-100, #ffffff);
-		}
-	}
-}
-
-// ─── Pagination ───────────────────────────────────────────────────────────────
-.members-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 8px 16px;
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.members-pagination-range {
-		font-family: Inter, sans-serif;
-		font-size: 12px;
-		color: var(--vanilla-400, #c0c1c3);
-	}
-
-	.members-pagination-total {
-		font-family: Inter, sans-serif;
-		font-size: 12px;
-		color: var(--vanilla-400, #c0c1c3);
-		opacity: 0.5;
-	}
-}
-
-// ─── Light mode overrides ─────────────────────────────────────────────────────
-.lightMode {
-	.members-table {
-		.ant-table-thead {
-			> tr > th,
-			> tr > td {
-				background: #f5f5f7;
-				color: #5a5f6e;
-			}
-		}
-
-		.ant-table-tbody {
-			> tr.members-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.member-name-email-cell {
-		.member-name {
-			color: #1d1f29;
-		}
-
-		.member-email {
-			color: #5a5f6e;
-		}
-	}
-
-	.member-dash,
-	.member-joined-dash {
-		color: #5a5f6e;
-	}
-
-	.member-joined-date {
-		color: #1d1f29;
-	}
-
-	.members-empty-state {
-		&__text {
-			color: #5a5f6e;
-
-			strong {
-				color: #1d1f29;
-			}
-		}
-	}
-
-	.members-pagination-range,
-	.members-pagination-total {
-		color: #5a5f6e;
-	}
-}

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,228 +0,0 @@
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './MembersTable.styles.scss';
-
-export interface MemberRow {
-	id: string;
-	name: string;
-	email: string;
-	role: ROLES;
-	status: 'Active' | 'Invited';
-	joinedOn: string | null;
-}
-
-interface MembersTableProps {
-	data: MemberRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onSortChange?: (
-		sorter: SorterResult<MemberRow> | SorterResult<MemberRow>[],
-	) => void;
-}
-
-function formatRoleLabel(role: string): string {
-	return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase();
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="member-name-email-cell">
-			{name && (
-				<span className="member-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="member-tooltip">
-				<span className="member-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
-	if (status === 'Active') {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="amber" variant="outline">
-			INVITED
-		</Badge>
-	);
-}
-
-function MembersEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="members-empty-state">
-			<span className="members-empty-state__emoji">🧐</span>
-			{searchQuery ? (
-				<p className="members-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="members-empty-state__text">No members found</p>
-			)}
-		</div>
-	);
-}
-
-function MembersTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onSortChange,
-}: MembersTableProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatJoinedOn = (date: string | null): string => {
-		if (!date) {
-			return '—';
-		}
-		const d = new Date(date);
-		if (Number.isNaN(d.getTime())) {
-			return '—';
-		}
-		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
-	};
-
-	const columns: ColumnsType<MemberRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{formatRoleLabel(role)}</Badge>
-			),
-		},
-		{
-			title: 'Permissions',
-			key: 'permissions',
-			width: 250,
-			render: (): JSX.Element => <span className="member-dash">&#8213;</span>,
-		},
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 100,
-			align: 'right' as const,
-			className: 'member-status-cell',
-			sorter: (a, b): number => a.status.localeCompare(b.status),
-			render: (status: MemberRow['status']): JSX.Element => (
-				<StatusBadge status={status} />
-			),
-		},
-		{
-			title: 'Joined On',
-			dataIndex: 'joinedOn',
-			key: 'joinedOn',
-			width: 220,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				if (!a.joinedOn && !b.joinedOn) {
-					return 0;
-				}
-				if (!a.joinedOn) {
-					return 1;
-				}
-				if (!b.joinedOn) {
-					return -1;
-				}
-				return new Date(a.joinedOn).getTime() - new Date(b.joinedOn).getTime();
-			},
-			render: (joinedOn: string | null): JSX.Element => {
-				const formatted = formatJoinedOn(joinedOn);
-				const isDash = formatted === '—';
-				return (
-					<span className={isDash ? 'member-joined-dash' : 'member-joined-date'}>
-						{formatted}
-					</span>
-				);
-			},
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="members-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="members-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="members-table-wrapper">
-			<Table<MemberRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'members-table-row--tinted' : ''
-				}
-				onChange={(_, __, sorter): void => {
-					if (onSortChange) {
-						onSortChange(
-							sorter as SorterResult<MemberRow> | SorterResult<MemberRow>[],
-						);
-					}
-				}}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <MembersEmptyState searchQuery={searchQuery} />,
-				}}
-				className="members-table"
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="members-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default MembersTable;

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';
@@ -10,6 +11,7 @@ import {
 	startCompletion,
 } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
@@ -84,7 +86,6 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
-	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -95,7 +96,6 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
-	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -252,8 +252,7 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key &&
-				!showFilterSuggestionsWithoutMetric
+				!queryData.aggregateAttribute?.key
 			) {
 				setKeySuggestions([]);
 				return;
@@ -302,7 +301,6 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
-			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -391,6 +389,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,
@@ -565,7 +564,15 @@ function QuerySearch({
 		const lastPos = lastPosRef.current;
 
 		if (newPos.line !== lastPos.line || newPos.ch !== lastPos.ch) {
-			setCursorPos(newPos);
+			setCursorPos((lastPos) => {
+				if (newPos.ch !== lastPos.ch && newPos.ch === 0) {
+					Sentry.captureEvent({
+						message: `Cursor jumped to start of line from ${lastPos.ch} to ${newPos.ch}`,
+						level: 'warning',
+					});
+				}
+				return newPos;
+			});
 			lastPosRef.current = newPos;
 
 			if (doc) {
@@ -669,6 +676,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 +1094,7 @@ function QuerySearch({
 				!(isLoadingSuggestions && lastKeyRef.current === keyName);
 
 			if (shouldFetch) {
+				// eslint-disable-next-line sonarjs/no-identical-functions
 				debouncedFetchValueSuggestions({
 					key: keyName,
 					searchText,
@@ -1319,10 +1328,7 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				<Tooltip
-					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
-					placement="left"
-				>
+				<Tooltip title={getTooltipContent()} placement="left">
 					<a
 						href="https://signoz.io/docs/userguide/search-syntax/"
 						target="_blank"
@@ -1556,7 +1562,6 @@ QuerySearch.defaultProps = {
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
-	showFilterSuggestionsWithoutMetric: false,
 };
 
 export default QuerySearch;