fix(row): missing active styles

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>
Co-authored-by: Priyanshu Shrivastava <priyanshu@signoz.io>

.github/workflows/integrationci.yaml

@@ -55,6 +55,8 @@ jobs:
         sqlstore-provider:
           - postgres
           - sqlite
+        sqlite-mode:
+          - wal
         clickhouse-version:
           - 25.5.6
           - 25.12.5
@@ -102,6 +104,7 @@ jobs:
             --basetemp=./tmp/ \
             src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
+            --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \
             --clickhouse-version ${{matrix.clickhouse-version}} \
             --schema-migrator-version ${{matrix.schema-migrator-version}}

.gitignore

@@ -51,6 +51,8 @@ ee/query-service/tests/test-deploy/data/
 # local data
 *.backup
 *.db
+*.db-shm
+*.db-wal
 **/db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/

conf/example.yaml

@@ -86,7 +86,7 @@ sqlstore:
     # The path to the SQLite database file.
     path: /var/lib/signoz/signoz.db
     # The journal mode for the sqlite database. Supported values: delete, wal.
-    mode: delete
+    mode: wal
     # The timeout for the sqlite database to wait for a lock.
     busy_timeout: 10s
     # The default transaction locking behavior. Supported values: deferred, immediate, exclusive.

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.117.1
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

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.117.1
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     volumes:

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.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

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.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -327,27 +327,6 @@ components:
           nullable: true
           type: array
       type: object
-    AuthtypesStorableRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      type: object
     AuthtypesTransaction:
       properties:
         object:
@@ -371,7 +350,7 @@ components:
         id:
           type: string
         role:
-          $ref: '#/components/schemas/AuthtypesStorableRole'
+          $ref: '#/components/schemas/AuthtypesRole'
         roleId:
           type: string
         updatedAt:
@@ -381,6 +360,11 @@ components:
           type: string
       required:
       - id
+      - userId
+      - roleId
+      - createdAt
+      - updatedAt
+      - role
       type: object
     AuthtypesUserWithRoles:
       properties:

docs/contributing/go/integration.md

@@ -193,6 +193,7 @@ uv run pytest --basetemp=./tmp/ -vv --reuse src/passwordauthn/01_register.py::te
 Tests can be configured using pytest options:
 
 - `--sqlstore-provider` - Choose database provider (default: postgres)
+- `--sqlite-mode` - SQLite journal mode: `delete` or `wal` (default: delete). Only relevant when `--sqlstore-provider=sqlite`.
 - `--postgres-version` - PostgreSQL version (default: 15)
 - `--clickhouse-version` - ClickHouse version (default: 25.5.6)
 - `--zookeeper-version` - Zookeeper version (default: 3.7.1)
@@ -202,7 +203,6 @@ Example:
 uv run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postgres-version=14 src/auth/
 ```
 
-
 ## What should I remember?
 
 - **Always use the `--reuse` flag** when setting up the environment to keep containers running
@@ -213,3 +213,4 @@ uv run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postg
 - **Use descriptive test names** that clearly indicate what is being tested
 - **Leverage fixtures** for common setup and authentication
 - **Test both success and failure scenarios** to ensure robust functionality
+- **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

ee/query-service/rules/anomaly.go

@@ -5,7 +5,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
-	"strings"
 	"sync"
 	"time"
 
@@ -50,7 +49,6 @@ func NewAnomalyRule(
 	logger *slog.Logger,
 	opts ...baserules.RuleOption,
 ) (*AnomalyRule, error) {
-
 	logger.Info("creating new AnomalyRule", slog.String("rule.id", id))
 
 	opts = append(opts, baserules.WithLogger(logger))
@@ -60,44 +58,44 @@ func NewAnomalyRule(
 		return nil, err
 	}
 
-	t := AnomalyRule{
+	r := AnomalyRule{
 		BaseRule: baseRule,
+		querier:  querier,
+		version:  p.Version,
+		logger:   logger.With(slog.String("rule.id", id)),
 	}
 
-	switch strings.ToLower(p.RuleCondition.Seasonality) {
-	case "hourly":
-		t.seasonality = anomaly.SeasonalityHourly
-	case "daily":
-		t.seasonality = anomaly.SeasonalityDaily
-	case "weekly":
-		t.seasonality = anomaly.SeasonalityWeekly
+	switch p.RuleCondition.Seasonality {
+	case ruletypes.SeasonalityHourly:
+		r.seasonality = anomaly.SeasonalityHourly
+	case ruletypes.SeasonalityDaily:
+		r.seasonality = anomaly.SeasonalityDaily
+	case ruletypes.SeasonalityWeekly:
+		r.seasonality = anomaly.SeasonalityWeekly
 	default:
-		t.seasonality = anomaly.SeasonalityDaily
+		r.seasonality = anomaly.SeasonalityDaily
 	}
 
-	logger.Info("using seasonality", slog.String("rule.id", id), slog.String("rule.seasonality", t.seasonality.StringValue()))
+	r.logger.Info("using seasonality", slog.String("rule.seasonality", r.seasonality.StringValue()))
 
-	if t.seasonality == anomaly.SeasonalityHourly {
-		t.provider = anomaly.NewHourlyProvider(
+	if r.seasonality == anomaly.SeasonalityHourly {
+		r.provider = anomaly.NewHourlyProvider(
 			anomaly.WithQuerier[*anomaly.HourlyProvider](querier),
-			anomaly.WithLogger[*anomaly.HourlyProvider](logger),
+			anomaly.WithLogger[*anomaly.HourlyProvider](r.logger),
 		)
-	} else if t.seasonality == anomaly.SeasonalityDaily {
-		t.provider = anomaly.NewDailyProvider(
+	} else if r.seasonality == anomaly.SeasonalityDaily {
+		r.provider = anomaly.NewDailyProvider(
 			anomaly.WithQuerier[*anomaly.DailyProvider](querier),
-			anomaly.WithLogger[*anomaly.DailyProvider](logger),
+			anomaly.WithLogger[*anomaly.DailyProvider](r.logger),
 		)
-	} else if t.seasonality == anomaly.SeasonalityWeekly {
-		t.provider = anomaly.NewWeeklyProvider(
+	} else if r.seasonality == anomaly.SeasonalityWeekly {
+		r.provider = anomaly.NewWeeklyProvider(
 			anomaly.WithQuerier[*anomaly.WeeklyProvider](querier),
-			anomaly.WithLogger[*anomaly.WeeklyProvider](logger),
+			anomaly.WithLogger[*anomaly.WeeklyProvider](r.logger),
 		)
 	}
 
-	t.querier = querier
-	t.version = p.Version
-	t.logger = logger
-	return &t, nil
+	return &r, nil
 }
 
 func (r *AnomalyRule) Type() ruletypes.RuleType {
@@ -105,8 +103,11 @@ func (r *AnomalyRule) Type() ruletypes.RuleType {
 }
 
 func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) *qbtypes.QueryRangeRequest {
-
-	r.logger.InfoContext(ctx, "prepare query range request", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()), slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()), slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()))
+	r.logger.InfoContext(
+		ctx, "prepare query range request", slog.Int64("ts", ts.UnixMilli()),
+		slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()),
+		slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()),
+	)
 
 	startTs, endTs := r.Timestamps(ts)
 	start, end := startTs.UnixMilli(), endTs.UnixMilli()
@@ -146,7 +147,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	}
 
 	if queryResult == nil {
-		r.logger.WarnContext(ctx, "nil qb result", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()))
+		r.logger.WarnContext(ctx, "nil qb result", slog.Int64("ts", ts.UnixMilli()))
 		return ruletypes.Vector{}, nil
 	}
 
@@ -157,7 +158,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
 		return ruletypes.Vector{*missingDataAlert}, nil
 	} else if !hasData {
-		r.logger.WarnContext(ctx, "no anomaly result", slog.String("rule.id", r.ID()))
+		r.logger.WarnContext(ctx, "no anomaly result")
 		return ruletypes.Vector{}, nil
 	}
 
@@ -165,7 +166,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 
 	scoresJSON, _ := json.Marshal(queryResult.Aggregations[0].AnomalyScores)
 	// TODO(srikanthccv): this could be noisy but we do this to answer false alert requests
-	r.logger.InfoContext(ctx, "anomaly scores", slog.String("rule.id", r.ID()), slog.String("anomaly.scores", string(scoresJSON)))
+	r.logger.InfoContext(ctx, "anomaly scores", slog.String("anomaly.scores", string(scoresJSON)))
 
 	// Filter out new series if newGroupEvalDelay is configured
 	seriesToProcess := queryResult.Aggregations[0].AnomalyScores
@@ -173,7 +174,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 		filteredSeries, filterErr := r.BaseRule.FilterNewSeries(ctx, ts, seriesToProcess)
 		// In case of error we log the error and continue with the original series
 		if filterErr != nil {
-			r.logger.ErrorContext(ctx, "error filtering new series", slog.String("rule.id", r.ID()), errors.Attr(filterErr))
+			r.logger.ErrorContext(ctx, "error filtering new series", errors.Attr(filterErr))
 		} else {
 			seriesToProcess = filteredSeries
 		}
@@ -181,7 +182,11 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 
 	for _, series := range seriesToProcess {
 		if !r.Condition().ShouldEval(series) {
-			r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", slog.String("rule.id", r.ID()), slog.Int("series.num_points", len(series.Values)), slog.Int("series.required_points", r.Condition().RequiredNumPoints))
+			r.logger.InfoContext(
+				ctx, "not enough data points to evaluate series, skipping",
+				slog.Int("series.num_points", len(series.Values)),
+				slog.Int("series.required_points", r.Condition().RequiredNumPoints),
+			)
 			continue
 		}
 		results, err := r.Threshold.Eval(series, r.Unit(), ruletypes.EvalData{
@@ -205,7 +210,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	var res ruletypes.Vector
 	var err error
 
-	r.logger.InfoContext(ctx, "running query", slog.String("rule.id", r.ID()))
+	r.logger.InfoContext(ctx, "running query")
 	res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
 
 	if err != nil {
@@ -231,7 +236,10 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 		value := valueFormatter.Format(smpl.V, r.Unit())
 		threshold := valueFormatter.Format(smpl.Target, smpl.TargetUnit)
-		r.logger.DebugContext(ctx, "alert template data for rule", slog.String("rule.id", r.ID()), slog.String("formatter.name", valueFormatter.Name()), slog.String("alert.value", value), slog.String("alert.threshold", threshold))
+		r.logger.DebugContext(
+			ctx, "alert template data for rule", slog.String("formatter.name", valueFormatter.Name()),
+			slog.String("alert.value", value), slog.String("alert.threshold", threshold),
+		)
 
 		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
 		// Inject some convenience variables that are easier to remember for users
@@ -251,7 +259,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 			result, err := tmpl.Expand()
 			if err != nil {
 				result = fmt.Sprintf("<error expanding template: %s>", err)
-				r.logger.ErrorContext(ctx, "expanding alert template failed", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.template_data", tmplData))
+				r.logger.ErrorContext(ctx, "expanding alert template failed", errors.Attr(err), slog.Any("alert.template_data", tmplData))
 			}
 			return result
 		}
@@ -281,7 +289,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		resultFPs[h] = struct{}{}
 
 		if _, ok := alerts[h]; ok {
-			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.String("rule.id", r.ID()), slog.Any("alert", alerts[h]))
+			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.Any("alert", alerts[h]))
 			err = errors.NewInternalf(errors.CodeInternal, "duplicate alert found, vector contains metrics with the same labelset after applying alert labels")
 			return 0, err
 		}
@@ -300,7 +308,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 	}
 
-	r.logger.InfoContext(ctx, "number of alerts found", slog.String("rule.id", r.ID()), slog.Int("alert.count", len(alerts)))
+	r.logger.InfoContext(ctx, "number of alerts found", slog.Int("alert.count", len(alerts)))
 	// alerts[h] is ready, add or update active list now
 	for h, a := range alerts {
 		// Check whether we already have alerting state for the identifying label set.
@@ -327,7 +335,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	for fp, a := range r.Active {
 		labelsJSON, err := json.Marshal(a.QueryResultLabels)
 		if err != nil {
-			r.logger.ErrorContext(ctx, "error marshaling labels", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.labels", a.Labels))
+			r.logger.ErrorContext(ctx, "error marshaling labels", errors.Attr(err), slog.Any("alert.labels", a.Labels))
 		}
 		if _, ok := resultFPs[fp]; !ok {
 			// If the alert was previously firing, keep it around for a given
@@ -382,7 +390,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 				state = ruletypes.StateFiring
 			}
 			a.State = state
-			r.logger.DebugContext(ctx, "converting alert state", slog.String("rule.id", r.ID()), slog.Any("alert.state", state))
+			r.logger.DebugContext(ctx, "converting alert state", slog.Any("alert.state", state))
 			itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
 				RuleID:       r.ID(),
 				RuleName:     r.Name(),
@@ -405,7 +413,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		itemsToAdd[idx] = item
 	}
 
-	r.RecordRuleStateHistory(ctx, prevState, currentState, itemsToAdd)
+	_ = r.RecordRuleStateHistory(ctx, itemsToAdd)
 
 	return len(r.Active), nil
 }

ee/query-service/rules/anomaly_test.go

@@ -67,7 +67,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
@@ -170,7 +170,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{

frontend/package.json

@@ -68,8 +68,8 @@
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
-    "@tanstack/react-table": "8.20.6",
-    "@tanstack/react-virtual": "3.11.2",
+    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
     "@uiw/codemirror-theme-github": "4.24.1",
     "@uiw/react-codemirror": "4.23.10",

frontend/public/Logos/hasura.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#1eb4d4" viewBox="0 0 24 24"><title>Hasura</title><path d="M23.558 8.172c.707-2.152.282-6.447-1.09-8.032a.42.42 0 0 0-.664.051l-1.69 2.59a1.32 1.32 0 0 1-1.737.276C16.544 1.885 14.354 1.204 12 1.204s-4.544.68-6.378 1.853a1.326 1.326 0 0 1-1.736-.276L2.196.191A.42.42 0 0 0 1.532.14C.16 1.728-.265 6.023.442 8.172c.236.716.3 1.472.16 2.207-.137.73-.276 1.61-.276 2.223C.326 18.898 5.553 24 11.997 24c6.447 0 11.671-5.105 11.671-11.398 0-.613-.138-1.494-.276-2.223a4.47 4.47 0 0 1 .166-2.207m-11.56 13.284c-4.984 0-9.036-3.96-9.036-8.827q0-.239.014-.473c.18-3.316 2.243-6.15 5.16-7.5 1.17-.546 2.481-.848 3.864-.848s2.69.302 3.864.85c2.917 1.351 4.98 4.187 5.16 7.501q.013.236.014.473c-.003 4.864-4.057 8.824-9.04 8.824m3.915-5.43-2.31-3.91-1.98-3.26a.26.26 0 0 0-.223-.125H9.508a.26.26 0 0 0-.227.13.25.25 0 0 0 .003.254l1.895 3.109-2.542 3.787a.25.25 0 0 0-.011.259.26.26 0 0 0 .23.132h1.905a.26.26 0 0 0 .218-.116l1.375-2.096 1.233 2.088a.26.26 0 0 0 .224.127h1.878c.094 0 .18-.049.224-.127a.24.24 0 0 0 0-.251z"/></svg>

frontend/public/Logos/n8n.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ea4b71" viewBox="0 0 24 24"><title>n8n</title><path d="M21.474 5.684a2.53 2.53 0 0 0-2.447 1.895H16.13a2.526 2.526 0 0 0-2.492 2.11l-.103.624a1.26 1.26 0 0 1-1.246 1.055h-1.001a2.527 2.527 0 0 0-4.893 0H4.973a2.527 2.527 0 1 0 0 1.264h1.422a2.527 2.527 0 0 0 4.894 0h1a1.26 1.26 0 0 1 1.247 1.055l.103.623a2.526 2.526 0 0 0 2.492 2.111h.37a2.527 2.527 0 1 0 0-1.263h-.37a1.26 1.26 0 0 1-1.246-1.056l-.103-.623A2.52 2.52 0 0 0 13.96 12a2.52 2.52 0 0 0 .82-1.48l.104-.622a1.26 1.26 0 0 1 1.246-1.056h2.896a2.527 2.527 0 1 0 2.447-3.158m0 1.263a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.264A1.263 1.263 0 0 1 20.21 8.21a1.263 1.263 0 0 1 1.264-1.263m-18.948 3.79A1.263 1.263 0 0 1 3.79 12a1.263 1.263 0 0 1-1.264 1.263A1.263 1.263 0 0 1 1.263 12a1.263 1.263 0 0 1 1.263-1.263m6.316 0A1.263 1.263 0 0 1 10.105 12a1.263 1.263 0 0 1-1.263 1.263A1.263 1.263 0 0 1 7.58 12a1.263 1.263 0 0 1 1.263-1.263m10.106 3.79a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.263 1.263 1.263 0 0 1-1.264-1.263 1.263 1.263 0 0 1 1.263-1.264"/></svg>

frontend/src/AppRoutes/Private.tsx

@@ -1,23 +1,17 @@
-import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { ReactChild, useCallback, useMemo } from 'react';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getAll from 'api/v1/user/get';
+import { useListUsers } from 'api/generated/services/users';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
-import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
-import { Organization } from 'types/api/user/getOrganization';
-import { UserResponse } from 'types/api/user/getUser';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -29,6 +23,7 @@ import routes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
@@ -61,20 +56,17 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const currentRoute = mapRoutes.get('current');
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
+	const orgData = useMemo(() => {
+		if (org && org.length > 0 && org[0].id !== undefined) {
+			return org[0];
+		}
+		return undefined;
+	}, [org]);
 
-	const { data: usersData, isFetching: isFetchingUsers } = useQuery<
-		SuccessResponseV2<UserResponse[]> | undefined,
-		APIError
-	>({
-		queryFn: () => {
-			if (orgData && orgData.id !== undefined) {
-				return getAll();
-			}
-			return undefined;
+	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
+		query: {
+			enabled: !isEmpty(orgData) && user.role === 'ADMIN',
 		},
-		queryKey: ['getOrgUser'],
-		enabled: !isEmpty(orgData) && user.role === 'ADMIN',
 	});
 
 	const checkFirstTimeUser = useCallback((): boolean => {
@@ -87,214 +79,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return remainingUsers.length === 1;
 	}, [usersData?.data]);
 
-	useEffect(() => {
-		if (
-			isCloudUserVal &&
-			!isFetchingOrgPreferences &&
-			orgPreferences &&
-			!isFetchingUsers &&
-			usersData &&
-			usersData.data
-		) {
-			const isOnboardingComplete = orgPreferences?.find(
-				(preference: OrgPreference) =>
-					preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
-			)?.value;
-
-			// Don't redirect to onboarding if workspace has issues (blocked, suspended, or restricted)
-			// User needs access to settings/billing to fix payment issues
-			const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
-			const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
-			const isWorkspaceAccessRestricted =
-				activeLicense?.state === LicenseState.TERMINATED ||
-				activeLicense?.state === LicenseState.EXPIRED ||
-				activeLicense?.state === LicenseState.CANCELLED;
-
-			const hasWorkspaceIssue =
-				isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
-
-			if (hasWorkspaceIssue) {
-				return;
-			}
-
-			const isFirstUser = checkFirstTimeUser();
-			if (
-				isFirstUser &&
-				!isOnboardingComplete &&
-				// if the current route is allowed to be overriden by org onboarding then only do the same
-				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
-			) {
-				history.push(ROUTES.ONBOARDING);
-			}
-		}
-	}, [
-		checkFirstTimeUser,
-		isCloudUserVal,
-		isFetchingOrgPreferences,
-		isFetchingUsers,
-		orgPreferences,
-		usersData,
-		pathname,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.state,
-	]);
-
-	const navigateToWorkSpaceBlocked = useCallback((): void => {
-		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(pathname === ROUTES.SETTINGS ||
-				pathname === ROUTES.ORG_SETTINGS ||
-				pathname === ROUTES.MEMBERS_SETTINGS ||
-				pathname === ROUTES.BILLING ||
-				pathname === ROUTES.MY_SETTINGS);
-
-		if (
-			pathname &&
-			pathname !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
-		) {
-			history.push(ROUTES.WORKSPACE_LOCKED);
-		}
-	}, [isAdmin, pathname]);
-
-	const navigateToWorkSpaceAccessRestricted = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
-			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const isTerminated = activeLicense.state === LicenseState.TERMINATED;
-			const isExpired = activeLicense.state === LicenseState.EXPIRED;
-			const isCancelled = activeLicense.state === LicenseState.CANCELLED;
-
-			const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
-
-			const { platform } = activeLicense;
-
-			if (isWorkspaceAccessRestricted && platform === LicensePlatform.CLOUD) {
-				navigateToWorkSpaceAccessRestricted();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		activeLicense,
-		navigateToWorkSpaceAccessRestricted,
-	]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense) {
-			const shouldBlockWorkspace = trialInfo?.workSpaceBlock;
-
-			if (
-				shouldBlockWorkspace &&
-				activeLicense?.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceBlocked();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.platform,
-		navigateToWorkSpaceBlocked,
-	]);
-
-	const navigateToWorkSpaceSuspended = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
-			history.push(ROUTES.WORKSPACE_SUSPENDED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const shouldSuspendWorkspace =
-				activeLicense.state === LicenseState.DEFAULTED;
-
-			if (
-				shouldSuspendWorkspace &&
-				activeLicense.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceSuspended();
-			}
-		}
-	}, [isFetchingActiveLicense, activeLicense, navigateToWorkSpaceSuspended]);
-
-	useEffect(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			setOrgData(org[0]);
-		}
-	}, [org]);
-
-	// if the feature flag is enabled and the current route is /get-started then redirect to /get-started-with-signoz-cloud
-	useEffect(() => {
-		if (
-			currentRoute?.path === ROUTES.GET_STARTED &&
-			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
-		) {
-			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-		}
-	}, [currentRoute, featureFlags]);
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	useEffect(() => {
-		// if it is an old route navigate to the new route
-		if (isOldRoute) {
-			// this will be handled by the redirect component below
-			return;
-		}
-
-		// if the current route is public dashboard then don't redirect to login
-		const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
-
-		if (isPublicDashboard) {
-			return;
-		}
-
-		// if the current route
-		if (currentRoute) {
-			const { isPrivate, key } = currentRoute;
-			if (isPrivate) {
-				if (isLoggedInState) {
-					const route = routePermission[key];
-					if (route && route.find((e) => e === user.role) === undefined) {
-						history.push(ROUTES.UN_AUTHORIZED);
-					}
-				} else {
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-					history.push(ROUTES.LOGIN);
-				}
-			} else if (isLoggedInState) {
-				const fromPathname = getLocalStorageApi(
-					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-				);
-				if (fromPathname) {
-					history.push(fromPathname);
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-					history.push(ROUTES.HOME);
-				}
-			} else {
-				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
-				// setup is not completed
-			}
-		} else if (isLoggedInState) {
-			const fromPathname = getLocalStorageApi(
-				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-			);
-			if (fromPathname) {
-				history.push(fromPathname);
-				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			} else {
-				history.push(ROUTES.HOME);
-			}
-		} else {
-			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-			history.push(ROUTES.LOGIN);
-		}
-	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
-
+	// Handle old routes - redirect to new routes
 	if (isOldRoute) {
 		const redirectUrl = oldNewRoutesMapping[pathname];
 		return (
@@ -308,7 +93,143 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 	}
 
-	// NOTE: disabling this rule as there is no need to have div
+	// Public dashboard - no redirect needed
+	const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
+	if (isPublicDashboard) {
+		return <>{children}</>;
+	}
+
+	// Check for workspace access restriction (cloud only)
+	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
+
+	if (!isFetchingActiveLicense && activeLicense && isCloudPlatform) {
+		const isTerminated = activeLicense.state === LicenseState.TERMINATED;
+		const isExpired = activeLicense.state === LicenseState.EXPIRED;
+		const isCancelled = activeLicense.state === LicenseState.CANCELLED;
+		const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
+
+		if (
+			isWorkspaceAccessRestricted &&
+			pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_ACCESS_RESTRICTED} />;
+		}
+
+		// Check for workspace suspended (DEFAULTED)
+		const shouldSuspendWorkspace = activeLicense.state === LicenseState.DEFAULTED;
+		if (shouldSuspendWorkspace && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
+			return <Redirect to={ROUTES.WORKSPACE_SUSPENDED} />;
+		}
+	}
+
+	// Check for workspace blocked (trial expired)
+	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
+		const isRouteEnabledForWorkspaceBlockedState =
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
+
+		if (
+			pathname !== ROUTES.WORKSPACE_LOCKED &&
+			!isRouteEnabledForWorkspaceBlockedState
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_LOCKED} />;
+		}
+	}
+
+	// Check for onboarding redirect (cloud users, first user, onboarding not complete)
+	if (
+		isCloudUserVal &&
+		!isFetchingOrgPreferences &&
+		orgPreferences &&
+		!isFetchingUsers &&
+		usersData &&
+		usersData.data
+	) {
+		const isOnboardingComplete = orgPreferences?.find(
+			(preference: OrgPreference) =>
+				preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
+		)?.value;
+
+		// Don't redirect to onboarding if workspace has issues
+		const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
+		const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
+		const isWorkspaceAccessRestricted =
+			activeLicense?.state === LicenseState.TERMINATED ||
+			activeLicense?.state === LicenseState.EXPIRED ||
+			activeLicense?.state === LicenseState.CANCELLED;
+
+		const hasWorkspaceIssue =
+			isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
+
+		if (!hasWorkspaceIssue) {
+			const isFirstUser = checkFirstTimeUser();
+			if (
+				isFirstUser &&
+				!isOnboardingComplete &&
+				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname) &&
+				pathname !== ROUTES.ONBOARDING
+			) {
+				return <Redirect to={ROUTES.ONBOARDING} />;
+			}
+		}
+	}
+
+	// Check for GET_STARTED → GET_STARTED_WITH_CLOUD redirect (feature flag)
+	if (
+		currentRoute?.path === ROUTES.GET_STARTED &&
+		featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
+	) {
+		return <Redirect to={ROUTES.GET_STARTED_WITH_CLOUD} />;
+	}
+
+	// Main routing logic
+	if (currentRoute) {
+		const { isPrivate, key } = currentRoute;
+		if (isPrivate) {
+			if (isLoggedInState) {
+				const route = routePermission[key];
+				if (route && route.find((e) => e === user.role) === undefined) {
+					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
+				}
+			} else {
+				// Save current path and redirect to login
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+				return <Redirect to={ROUTES.LOGIN} />;
+			}
+		} else if (isLoggedInState) {
+			// Non-private route, but user is logged in
+			const fromPathname = getLocalStorageApi(
+				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+			);
+			if (fromPathname) {
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+				return <Redirect to={fromPathname} />;
+			}
+			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
+				return <Redirect to={ROUTES.HOME} />;
+			}
+		}
+		// Non-private route, user not logged in - let login/signup pages handle it
+	} else if (isLoggedInState) {
+		// Unknown route, logged in
+		const fromPathname = getLocalStorageApi(
+			LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+		);
+		if (fromPathname) {
+			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+			return <Redirect to={fromPathname} />;
+		}
+		return <Redirect to={ROUTES.HOME} />;
+	} else {
+		// Unknown route, not logged in
+		setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+		return <Redirect to={ROUTES.LOGIN} />;
+	}
+
 	return <>{children}</>;
 }
 

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -6,7 +6,6 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { AppContext } from 'providers/App/App';
 import { IAppContext, IUser } from 'providers/App/types';
 import {
@@ -22,19 +21,6 @@ import { ROLES, USER_ROLES } from 'types/roles';
 
 import PrivateRoute from '../Private';
 
-// Mock history module
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: { pathname: '/', search: '', hash: '' },
-		listen: jest.fn(),
-		createHref: jest.fn(),
-	},
-}));
-
-const mockHistoryPush = history.push as jest.Mock;
-
 // Mock localStorage APIs
 const mockLocalStorage: Record<string, string> = {};
 jest.mock('api/browser/localstorage/get', () => ({
@@ -67,9 +53,12 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 
 // Mock react-query for users fetch
 let mockUsersData: { email: string }[] = [];
-jest.mock('api/v1/user/get', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve({ data: mockUsersData })),
+jest.mock('api/generated/services/users', () => ({
+	...jest.requireActual('api/generated/services/users'),
+	useListUsers: jest.fn(() => ({
+		data: { data: mockUsersData },
+		isFetching: false,
+	})),
 }));
 
 const queryClient = new QueryClient({
@@ -236,20 +225,18 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 }
 
 // Generic assertion helpers for navigation behavior
-// Using these allows easier refactoring when switching from history.push to Redirect component
+// Using location-based assertions since Private.tsx now uses Redirect component
 
 async function assertRedirectsTo(targetRoute: string): Promise<void> {
 	await waitFor(() => {
-		expect(mockHistoryPush).toHaveBeenCalledWith(targetRoute);
+		expect(screen.getByTestId('location-display')).toHaveTextContent(targetRoute);
 	});
 }
 
-function assertNoRedirect(): void {
-	expect(mockHistoryPush).not.toHaveBeenCalled();
-}
-
-function assertDoesNotRedirectTo(targetRoute: string): void {
-	expect(mockHistoryPush).not.toHaveBeenCalledWith(targetRoute);
+function assertStaysOnRoute(expectedRoute: string): void {
+	expect(screen.getByTestId('location-display')).toHaveTextContent(
+		expectedRoute,
+	);
 }
 
 function assertRendersChildren(): void {
@@ -347,7 +334,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});
 
 		it('should render children for public dashboard route when logged in without redirecting', () => {
@@ -359,7 +346,7 @@ describe('PrivateRoute', () => {
 			assertRendersChildren();
 			// Critical: without the isPublicDashboard early return, logged-in users
 			// would be redirected to HOME due to the non-private route handling
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});
 	});
 
@@ -417,7 +404,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should redirect to unauthorized when VIEWER tries to access admin-only route /alerts/new', async () => {
@@ -526,7 +513,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: true },
 			});
 
-			assertDoesNotRedirectTo(ROUTES.HOME);
+			assertStaysOnRoute(ROUTES.SOMETHING_WENT_WRONG);
 		});
 	});
 
@@ -538,7 +525,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should not redirect - login page handles its own routing
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.LOGIN);
 		});
 
 		it('should not redirect when not logged in user visits signup page', () => {
@@ -547,7 +534,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.SIGN_UP);
 		});
 
 		it('should not redirect when not logged in user visits password reset page', () => {
@@ -556,7 +543,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.PASSWORD_RESET);
 		});
 
 		it('should not redirect when not logged in user visits forgot password page', () => {
@@ -565,7 +552,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.FORGOT_PASSWORD);
 		});
 	});
 
@@ -654,7 +641,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Admin should be able to access settings even when workspace is blocked
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/billing when workspace is blocked', () => {
@@ -670,7 +657,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});
 
 		it('should allow ADMIN to access /settings/org-settings when workspace is blocked', () => {
@@ -686,7 +673,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.ORG_SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/members when workspace is blocked', () => {
@@ -702,7 +689,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MEMBERS_SETTINGS);
 		});
 
 		it('should allow ADMIN to access /settings/my-settings when workspace is blocked', () => {
@@ -718,7 +705,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});
 
 		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
@@ -829,7 +816,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
@@ -846,7 +833,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -916,7 +903,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect self-hosted users to workspace access restricted when license is terminated', () => {
@@ -933,7 +920,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect when license is ACTIVE', () => {
@@ -950,7 +937,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect when license is EVALUATING', () => {
@@ -967,7 +954,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1003,7 +990,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
@@ -1020,7 +1007,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1040,6 +1027,11 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
+			// Wait for the users query to complete and trigger re-render
+			await act(async () => {
+				await Promise.resolve();
+			});
+
 			await assertRedirectsTo(ROUTES.ONBOARDING);
 		});
 
@@ -1055,7 +1047,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding when onboarding is already complete', async () => {
@@ -1081,7 +1073,7 @@ describe('PrivateRoute', () => {
 
 			// Critical: if isOnboardingComplete check is broken (always false),
 			// this test would fail because all other conditions for redirect ARE met
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding for non-cloud users', () => {
@@ -1096,7 +1088,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not redirect to onboarding when on /workspace-locked route', () => {
@@ -1111,7 +1103,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect to onboarding when on /workspace-suspended route', () => {
@@ -1126,7 +1118,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
@@ -1153,7 +1145,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should NOT redirect to onboarding - user needs to access billing to fix payment
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
@@ -1177,7 +1169,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
@@ -1204,7 +1196,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_SUSPENDED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
@@ -1231,7 +1223,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_ACCESS_RESTRICTED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
@@ -1257,7 +1249,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -1299,7 +1291,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 
 		it('should not redirect when on GET_STARTED and ONBOARDING_V3 feature flag is not present', () => {
@@ -1311,7 +1303,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 
 		it('should not redirect when on different route even if ONBOARDING_V3 is active', () => {
@@ -1331,7 +1323,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1347,7 +1339,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 
 		it('should not fetch users when org data is not available', () => {
@@ -1390,9 +1382,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});
 
@@ -1433,22 +1423,40 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('should allow all roles to access /services route', () => {
-			const roles = [USER_ROLES.ADMIN, USER_ROLES.EDITOR, USER_ROLES.VIEWER];
-
-			roles.forEach((role) => {
-				jest.clearAllMocks();
-
-				renderPrivateRoute({
-					initialRoute: ROUTES.APPLICATION,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role: role as ROLES }),
-					},
-				});
-
-				assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+		it('should allow ADMIN to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.ADMIN as ROLES }),
+				},
 			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow EDITOR to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.EDITOR as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow VIEWER to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
 		});
 
 		it('should redirect VIEWER from /onboarding route (admin only)', async () => {
@@ -1478,7 +1486,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
 		});
 
 		it('should allow EDITOR to access /get-started route', () => {
@@ -1490,7 +1498,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 	});
 

frontend/src/AppRoutes/index.tsx

@@ -18,7 +18,7 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useThemeConfig } from 'hooks/useDarkMode';
+import { useIsDarkMode, useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
@@ -212,6 +212,12 @@ function App(): JSX.Element {
 		activeLicenseFetchError,
 	]);
 
+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		window.Pylon?.('setTheme', isDarkMode ? 'dark' : 'light');
+	}, [isDarkMode]);
+
 	useEffect(() => {
 		if (
 			pathname === ROUTES.ONBOARDING ||

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

@@ -425,39 +425,6 @@ export interface AuthtypesSessionContextDTO {
 	orgs?: AuthtypesOrgSessionContextDTO[] | null;
 }
 
-export interface AuthtypesStorableRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
 export interface AuthtypesTransactionDTO {
 	object: AuthtypesObjectDTO;
 	/**
@@ -475,25 +442,25 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: Date;
+	createdAt: Date;
 	/**
 	 * @type string
 	 */
 	id: string;
-	role?: AuthtypesStorableRoleDTO;
+	role: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
-	roleId?: string;
+	roleId: string;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: Date;
+	updatedAt: Date;
 	/**
 	 * @type string
 	 */
-	userId?: string;
+	userId: string;
 }
 
 export interface AuthtypesUserWithRolesDTO {

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -13,7 +13,9 @@ export interface HostListPayload {
 	orderBy?: {
 		columnName: string;
 		order: 'asc' | 'desc';
-	};
+	} | null;
+	start?: number;
+	end?: number;
 }
 
 export interface TimeSeriesValue {

frontend/src/api/organization/editOrg.ts

@@ -1,26 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/editOrg';
-
-const editOrg = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.put(`/orgs/me`, {
-			displayName: props.displayName,
-		});
-
-		return {
-			statusCode: 204,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default editOrg;

frontend/src/api/organization/getOrganization.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/getOrganization';
-
-const getOrganization = async (
-	token?: string,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/org`, {
-			headers: {
-				Authorization: `bearer ${token}`,
-			},
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getOrganization;

frontend/src/api/v1/user/get.ts

@@ -1,21 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { UserResponse } from 'types/api/user/getUser';
-import { PayloadProps } from 'types/api/user/getUsers';
-
-const getAll = async (): Promise<SuccessResponseV2<UserResponse[]>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/user`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getAll;

frontend/src/api/v1/user/id/get.ts

@@ -1,22 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props, UserResponse } from 'types/api/user/getUser';
-
-const getUser = async (
-	props: Props,
-): Promise<SuccessResponseV2<UserResponse>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/user/${props.userId}`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getUser;

frontend/src/api/v1/user/id/update.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Props } from 'types/api/user/editUser';
-
-const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.put(`/user/${props.userId}`, {
-			displayName: props.displayName,
-			role: props.role,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default update;

frontend/src/api/v1/user/me/get.ts

@@ -1,20 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, UserResponse } from 'types/api/user/getUser';
-
-const get = async (): Promise<SuccessResponseV2<UserResponse>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/user/me`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default get;

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -14,6 +14,8 @@ import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schem
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import './CreateServiceAccountModal.styles.scss';
 
@@ -28,6 +30,8 @@ function CreateServiceAccountModal(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);
 
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const {
 		control,
 		handleSubmit,
@@ -54,13 +58,10 @@ function CreateServiceAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (err) => {
-				const errMessage =
-					convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'An error occurred';
-				toast.error(`Failed to create service account: ${errMessage}`, {
-					richColors: true,
-				});
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
@@ -90,7 +91,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			showCloseButton
 			width="narrow"
 			className="create-sa-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="create-sa-modal__content">
 				<form

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

@@ -11,6 +11,16 @@ jest.mock('@signozhq/sonner', () => ({
 
 const mockToast = jest.mocked(toast);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const SERVICE_ACCOUNTS_ENDPOINT = '*/api/v1/service_accounts';
 
 function renderModal(): ReturnType<typeof render> {
@@ -92,10 +102,13 @@ describe('CreateServiceAccountModal', () => {
 		await user.click(submitBtn);
 
 		await waitFor(() => {
-			expect(mockToast.error).toHaveBeenCalledWith(
-				expect.stringMatching(/Failed to create service account/i),
-				expect.anything(),
+			expect(showErrorModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					getErrorMessage: expect.any(Function),
+				}),
 			);
+			const passedError = showErrorModal.mock.calls[0][0] as any;
+			expect(passedError.getErrorMessage()).toBe('Internal Server Error');
 		});
 
 		expect(

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -0,0 +1,75 @@
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { Trash2, X } from '@signozhq/icons';
+import { MemberRow } from 'components/MembersTable/MembersTable';
+
+interface DeleteMemberDialogProps {
+	open: boolean;
+	isInvited: boolean;
+	member: MemberRow | null;
+	isDeleting: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+function DeleteMemberDialog({
+	open,
+	isInvited,
+	member,
+	isDeleting,
+	onClose,
+	onConfirm,
+}: DeleteMemberDialogProps): JSX.Element {
+	const title = isInvited ? 'Revoke Invite' : 'Delete Member';
+
+	const body = isInvited ? (
+		<>
+			Are you sure you want to revoke the invite for{' '}
+			<strong>{member?.email}</strong>? They will no longer be able to join the
+			workspace using this invite.
+		</>
+	) : (
+		<>
+			Are you sure you want to delete{' '}
+			<strong>{member?.name || member?.email}</strong>? This will remove their
+			access to the workspace.
+		</>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title={title}
+			width="narrow"
+			className="alert-dialog delete-dialog"
+			showCloseButton={false}
+			disableOutsideClick={false}
+		>
+			<p className="delete-dialog__body">{body}</p>
+
+			<DialogFooter className="delete-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					disabled={isDeleting}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					{isDeleting ? 'Processing...' : title}
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default DeleteMemberDialog;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -45,8 +45,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
+		min-height: 32px;
+		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
 		border: 1px solid var(--border);
@@ -57,6 +57,13 @@
 		}
 	}
 
+	&__disabled-roles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-2);
+		flex: 1;
+	}
+
 	&__email-text {
 		font-size: var(--font-size-sm);
 		font-weight: var(--font-weight-normal);
@@ -76,35 +83,6 @@
 		opacity: 0.6;
 	}
 
-	&__role-select {
-		width: 100%;
-		height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 0 var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			line-height: 32px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
 	&__meta {
 		display: flex;
 		flex-direction: column;
@@ -168,6 +146,10 @@
 		flex-shrink: 0;
 	}
 
+	&__tooltip-wrapper {
+		display: inline-flex;
+	}
+
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,39 +1,67 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	ChevronDown,
-	Copy,
-	LockKeyhole,
-	RefreshCw,
-	Trash2,
-	X,
-} from '@signozhq/icons';
+import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useGetUser,
+	useUpdateMyUserV2,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
+import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
+import type { SaveError } from 'components/ServiceAccountDrawer/utils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
+import {
+	MemberRoleUpdateFailure,
+	useMemberRoleManager,
+} from 'hooks/member/useMemberRoleManager';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-import { popupContainer } from 'utils/selectPopupContainer';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import DeleteMemberDialog from './DeleteMemberDialog';
+import ResetLinkDialog from './ResetLinkDialog';
 
 import './EditMemberDrawer.styles.scss';
 
+const ROOT_USER_TOOLTIP = 'This operation is not supported for the root user';
+const SELF_DELETE_TOOLTIP =
+	'You cannot perform this action on your own account';
+
+function getDeleteTooltip(
+	isRootUser: boolean,
+	isSelf: boolean,
+): string | undefined {
+	if (isRootUser) {
+		return ROOT_USER_TOOLTIP;
+	}
+	if (isSelf) {
+		return SELF_DELETE_TOOLTIP;
+	}
+	return undefined;
+}
+
+function toSaveApiError(err: unknown): APIError {
+	return (
+		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
+	);
+}
+
 export interface EditMemberDrawerProps {
 	member: MemberRow | null;
 	open: boolean;
@@ -49,9 +77,12 @@ function EditMemberDrawer({
 	onComplete,
 }: EditMemberDrawerProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { user: currentUser } = useAppContext();
 
-	const [displayName, setDisplayName] = useState('');
-	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
+	const [localDisplayName, setLocalDisplayName] = useState('');
+	const [localRole, setLocalRole] = useState('');
+	const [isSaving, setIsSaving] = useState(false);
+	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
@@ -60,92 +91,247 @@ function EditMemberDrawer({
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
 
 	const isInvited = member?.status === MemberStatus.Invited;
+	const isDeleted = member?.status === MemberStatus.Deleted;
+	const isSelf = !!member?.id && member.id === currentUser?.id;
 
-	const { mutate: updateUser, isLoading: isSaving } = useUpdateUserDeprecated({
-		mutation: {
-			onSuccess: (): void => {
-				toast.success('Member details updated successfully', { richColors: true });
-				onComplete();
-				onClose();
-			},
-			onError: (err): void => {
-				const errMessage =
-					convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'An error occurred';
-				toast.error(`Failed to update member details: ${errMessage}`, {
-					richColors: true,
-				});
-			},
-		},
-	});
+	const { showErrorModal } = useErrorModal();
+
+	const {
+		data: fetchedUser,
+		isLoading: isFetchingUser,
+		refetch: refetchUser,
+	} = useGetUser(
+		{ id: member?.id ?? '' },
+		{ query: { enabled: open && !!member?.id } },
+	);
+
+	const isRootUser = !!fetchedUser?.data?.isRoot;
+
+	const {
+		roles: availableRoles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const {
+		fetchedRoleIds,
+		isLoading: isMemberRolesLoading,
+		applyDiff,
+	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
+
+	const fetchedDisplayName =
+		fetchedUser?.data?.displayName ?? member?.name ?? '';
+	const fetchedUserId = fetchedUser?.data?.id;
+	const fetchedUserDisplayName = fetchedUser?.data?.displayName;
+
+	const roleSessionRef = useRef<string | null>(null);
+
+	useEffect(() => {
+		if (fetchedUserId) {
+			setLocalDisplayName(fetchedUserDisplayName ?? member?.name ?? '');
+		}
+	}, [fetchedUserId, fetchedUserDisplayName, member?.name]);
+
+	useEffect(() => {
+		if (fetchedUserId) {
+			setSaveErrors([]);
+		}
+	}, [fetchedUserId]);
+
+	useEffect(() => {
+		if (!member?.id) {
+			roleSessionRef.current = null;
+		} else if (member.id !== roleSessionRef.current && !isMemberRolesLoading) {
+			setLocalRole(fetchedRoleIds[0] ?? '');
+			roleSessionRef.current = member.id;
+		}
+	}, [member?.id, fetchedRoleIds, isMemberRolesLoading]);
+
+	const isDirty =
+		member !== null &&
+		fetchedUser != null &&
+		(localDisplayName !== fetchedDisplayName ||
+			localRole !== (fetchedRoleIds[0] ?? ''));
+
+	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
+	const { mutateAsync: updateUser } = useUpdateUser();
 
 	const { mutate: deleteUser, isLoading: isDeleting } = useDeleteUser({
 		mutation: {
 			onSuccess: (): void => {
 				toast.success(
 					isInvited ? 'Invite revoked successfully' : 'Member deleted successfully',
-					{ richColors: true },
+					{ richColors: true, position: 'top-right' },
 				);
 				setShowDeleteConfirm(false);
 				onComplete();
 				onClose();
 			},
 			onError: (err): void => {
-				const errMessage =
-					convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'An error occurred';
-				const prefix = isInvited
-					? 'Failed to revoke invite'
-					: 'Failed to delete member';
-				toast.error(`${prefix}: ${errMessage}`, { richColors: true });
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
 
-	useEffect(() => {
-		if (member) {
-			setDisplayName(member.name ?? '');
-			setSelectedRole(member.role);
-		}
-	}, [member]);
-
-	const isDirty =
-		member !== null &&
-		(displayName !== (member.name ?? '') || selectedRole !== member.role);
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
+	const makeRoleRetry = useCallback(
+		(
+			context: string,
+			rawRetry: () => Promise<void>,
+		) => async (): Promise<void> => {
+			try {
+				await rawRetry();
+				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+				refetchUser();
+			} catch (err) {
+				setSaveErrors((prev) =>
+					prev.map((e) =>
+						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+					),
+				);
 			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
 		},
-		[formatTimezoneAdjustedTimestamp],
+		[refetchUser],
 	);
 
-	const handleSave = useCallback((): void => {
+	const retryNameUpdate = useCallback(async (): Promise<void> => {
+		if (!member) {
+			return;
+		}
+		try {
+			if (isSelf) {
+				await updateMyUser({ data: { displayName: localDisplayName } });
+			} else {
+				await updateUser({
+					pathParams: { id: member.id },
+					data: { displayName: localDisplayName },
+				});
+			}
+			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
+			refetchUser();
+		} catch (err) {
+			setSaveErrors((prev) =>
+				prev.map((e) =>
+					e.context === 'Name update' ? { ...e, apiError: toSaveApiError(err) } : e,
+				),
+			);
+		}
+	}, [member, isSelf, localDisplayName, updateMyUser, updateUser, refetchUser]);
+
+	const handleSave = useCallback(async (): Promise<void> => {
 		if (!member || !isDirty) {
 			return;
 		}
-		updateUser({
-			pathParams: { id: member.id },
-			data: { id: member.id, displayName, role: selectedRole },
-		});
-	}, [member, isDirty, displayName, selectedRole, updateUser]);
+		setSaveErrors([]);
+		setIsSaving(true);
+		try {
+			const nameChanged = localDisplayName !== fetchedDisplayName;
+			const rolesChanged = localRole !== (fetchedRoleIds[0] ?? '');
+
+			const namePromise = nameChanged
+				? isSelf
+					? updateMyUser({ data: { displayName: localDisplayName } })
+					: updateUser({
+							pathParams: { id: member.id },
+							data: { displayName: localDisplayName },
+					  })
+				: Promise.resolve();
+
+			const [nameResult, rolesResult] = await Promise.allSettled([
+				namePromise,
+				rolesChanged
+					? applyDiff([localRole].filter(Boolean), availableRoles)
+					: Promise.resolve([]),
+			]);
+
+			const errors: SaveError[] = [];
+
+			if (nameResult.status === 'rejected') {
+				errors.push({
+					context: 'Name update',
+					apiError: toSaveApiError(nameResult.reason),
+					onRetry: retryNameUpdate,
+				});
+			}
+
+			if (rolesResult.status === 'rejected') {
+				errors.push({
+					context: 'Roles update',
+					apiError: toSaveApiError(rolesResult.reason),
+					onRetry: async (): Promise<void> => {
+						const failures = await applyDiff(
+							[localRole].filter(Boolean),
+							availableRoles,
+						);
+						setSaveErrors((prev) => {
+							const rest = prev.filter((e) => e.context !== 'Roles update');
+							return [
+								...rest,
+								...failures.map((f: MemberRoleUpdateFailure) => {
+									const ctx = `Role '${f.roleName}'`;
+									return {
+										context: ctx,
+										apiError: toSaveApiError(f.error),
+										onRetry: makeRoleRetry(ctx, f.onRetry),
+									};
+								}),
+							];
+						});
+						refetchUser();
+					},
+				});
+			} else {
+				for (const failure of rolesResult.value ?? []) {
+					const context = `Role '${failure.roleName}'`;
+					errors.push({
+						context,
+						apiError: toSaveApiError(failure.error),
+						onRetry: makeRoleRetry(context, failure.onRetry),
+					});
+				}
+			}
+
+			if (errors.length > 0) {
+				setSaveErrors(errors);
+			} else {
+				toast.success('Member details updated successfully', {
+					richColors: true,
+					position: 'top-right',
+				});
+				onComplete();
+			}
+
+			refetchUser();
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		member,
+		isDirty,
+		isSelf,
+		localDisplayName,
+		localRole,
+		fetchedDisplayName,
+		fetchedRoleIds,
+		updateMyUser,
+		updateUser,
+		applyDiff,
+		availableRoles,
+		refetchUser,
+		retryNameUpdate,
+		makeRoleRetry,
+		onComplete,
+	]);
 
 	const handleDelete = useCallback((): void => {
 		if (!member) {
 			return;
 		}
-		deleteUser({
-			pathParams: { id: member.id },
-		});
+		deleteUser({ pathParams: { id: member.id } });
 	}, [member, deleteUser]);
 
 	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
@@ -168,37 +354,36 @@ function EditMemberDrawer({
 					position: 'top-right',
 				});
 			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
+		} catch (err) {
+			const errMsg = convertToApiError(
+				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+			);
+			showErrorModal(errMsg as APIError);
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, setLinkType, onClose]);
+	}, [member, isInvited, onClose, showErrorModal]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
-	const handleCopyResetLink = useCallback(async (): Promise<void> => {
+	const handleCopyResetLink = useCallback((): void => {
 		if (!resetLink) {
 			return;
 		}
 		copyToClipboard(resetLink);
-
 		setHasCopiedResetLink(true);
 		setTimeout(() => setHasCopiedResetLink(false), 2000);
-		toast.success(
+		const message =
 			linkType === 'invite'
 				? 'Invite link copied to clipboard'
-				: 'Reset link copied to clipboard',
-			{ richColors: true },
-		);
+				: 'Reset link copied to clipboard';
+		toast.success(message, { richColors: true, position: 'top-right' });
 	}, [resetLink, copyToClipboard, linkType]);
 
 	useEffect(() => {
 		if (copyState.error) {
 			toast.error('Failed to copy link', {
 				richColors: true,
+				position: 'top-right',
 			});
 		}
 	}, [copyState.error]);
@@ -210,139 +395,210 @@ function EditMemberDrawer({
 
 	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
 
-	const drawerContent = (
-		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-name">
-						Name
-					</label>
-					<Input
-						id="member-name"
-						value={displayName}
-						onChange={(e): void => setDisplayName(e.target.value)}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-					/>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-email">
-						Email Address
-					</label>
-					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-						<span className="edit-member-drawer__email-text">
-							{member?.email || '—'}
-						</span>
-						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-					</div>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-role">
-						Roles
-					</label>
-					<Select
-						id="member-role"
-						value={selectedRole}
-						onChange={(role): void => setSelectedRole(role as ROLES)}
-						className="edit-member-drawer__role-select"
-						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={popupContainer}
-					>
-						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
-						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
-						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
-					</Select>
-				</div>
-
-				<div className="edit-member-drawer__meta">
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Status</span>
-						{member?.status === MemberStatus.Active ? (
-							<Badge color="forest" variant="outline">
-								ACTIVE
-							</Badge>
-						) : (
-							<Badge color="amber" variant="outline">
-								INVITED
-							</Badge>
-						)}
-					</div>
-
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-					</div>
-					{!isInvited && (
-						<div className="edit-member-drawer__meta-item">
-							<span className="edit-member-drawer__meta-label">Last Modified</span>
-							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<Button
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-						onClick={(): void => setShowDeleteConfirm(true)}
-					>
-						<Trash2 size={12} />
-						{isInvited ? 'Revoke Invite' : 'Delete Member'}
-					</Button>
-
-					<div className="edit-member-drawer__footer-divider" />
-					<Button
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-						onClick={handleGenerateResetLink}
-						disabled={isGeneratingLink}
-					>
-						<RefreshCw size={12} />
-						{isGeneratingLink
-							? 'Generating...'
-							: isInvited
-							? 'Copy Invite Link'
-							: 'Generate Password Reset Link'}
-					</Button>
-				</div>
-
-				<div className="edit-member-drawer__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
-		</div>
+	const formatTimestamp = useCallback(
+		(ts: string | null | undefined): string => {
+			if (!ts) {
+				return '—';
+			}
+			const d = new Date(ts);
+			if (Number.isNaN(d.getTime())) {
+				return '—';
+			}
+			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
+		},
+		[formatTimezoneAdjustedTimestamp],
 	);
 
-	const deleteDialogTitle = isInvited ? 'Revoke Invite' : 'Delete Member';
-	const deleteDialogBody = isInvited ? (
-		<>
-			Are you sure you want to revoke the invite for{' '}
-			<strong>{member?.email}</strong>? They will no longer be able to join the
-			workspace using this invite.
-		</>
+	const drawerBody = isFetchingUser ? (
+		<Skeleton active paragraph={{ rows: 6 }} />
 	) : (
 		<>
-			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will remove their
-			access to the workspace.
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-name">
+					Name
+				</label>
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<Input
+						id="member-name"
+						value={localDisplayName}
+						onChange={(e): void => {
+							setLocalDisplayName(e.target.value);
+							setSaveErrors((prev) =>
+								prev.filter((err) => err.context !== 'Name update'),
+							);
+						}}
+						className="edit-member-drawer__input"
+						placeholder="Enter name"
+						disabled={isRootUser || isDeleted}
+					/>
+				</Tooltip>
+			</div>
+
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-email">
+					Email Address
+				</label>
+				<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+					<span className="edit-member-drawer__email-text">
+						{member?.email || '—'}
+					</span>
+					<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+				</div>
+			</div>
+
+			<div className="edit-member-drawer__field">
+				<label className="edit-member-drawer__label" htmlFor="member-role">
+					Roles
+				</label>
+				{isSelf || isRootUser || isDeleted ? (
+					<Tooltip
+						title={
+							isRootUser
+								? ROOT_USER_TOOLTIP
+								: isDeleted
+								? undefined
+								: 'You cannot modify your own role'
+						}
+					>
+						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+							<div className="edit-member-drawer__disabled-roles">
+								{localRole ? (
+									<Badge color="vanilla">
+										{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+									</Badge>
+								) : (
+									<span className="edit-member-drawer__email-text">—</span>
+								)}
+							</div>
+							<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+						</div>
+					</Tooltip>
+				) : (
+					<RolesSelect
+						id="member-role"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={refetchRoles}
+						value={localRole}
+						onChange={(role): void => {
+							setLocalRole(role ?? '');
+							setSaveErrors((prev) =>
+								prev.filter(
+									(err) =>
+										err.context !== 'Roles update' && !err.context.startsWith("Role '"),
+								),
+							);
+						}}
+						placeholder="Select role"
+						allowClear={false}
+					/>
+				)}
+			</div>
+
+			<div className="edit-member-drawer__meta">
+				<div className="edit-member-drawer__meta-item">
+					<span className="edit-member-drawer__meta-label">Status</span>
+					{member?.status === MemberStatus.Active ? (
+						<Badge color="forest" variant="outline">
+							ACTIVE
+						</Badge>
+					) : member?.status === MemberStatus.Deleted ? (
+						<Badge color="cherry" variant="outline">
+							DELETED
+						</Badge>
+					) : (
+						<Badge color="amber" variant="outline">
+							INVITED
+						</Badge>
+					)}
+				</div>
+
+				<div className="edit-member-drawer__meta-item">
+					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+				</div>
+				{!isInvited && (
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">Last Modified</span>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+					</div>
+				)}
+			</div>
+
+			{saveErrors.length > 0 && (
+				<div className="edit-member-drawer__save-errors">
+					{saveErrors.map((e) => (
+						<SaveErrorItem
+							key={e.context}
+							context={e.context}
+							apiError={e.apiError}
+							onRetry={e.onRetry}
+						/>
+					))}
+				</div>
+			)}
 		</>
 	);
-	const deleteConfirmLabel = isInvited ? 'Revoke Invite' : 'Delete Member';
+
+	const drawerContent = (
+		<div className="edit-member-drawer__layout">
+			<div className="edit-member-drawer__body">{drawerBody}</div>
+
+			{!isDeleted && (
+				<div className="edit-member-drawer__footer">
+					<div className="edit-member-drawer__footer-left">
+						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
+							</span>
+						</Tooltip>
+
+						<div className="edit-member-drawer__footer-divider" />
+						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser}
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink && 'Generating...'}
+									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
+									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
+								</Button>
+							</span>
+						</Tooltip>
+					</div>
+
+					<div className="edit-member-drawer__footer-right">
+						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+							<X size={14} />
+							Cancel
+						</Button>
+
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
+						>
+							{isSaving ? 'Saving...' : 'Save Member Details'}
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
 
 	return (
 		<>
@@ -363,82 +619,25 @@ function EditMemberDrawer({
 				className="edit-member-drawer"
 			/>
 
-			<DialogWrapper
+			<ResetLinkDialog
 				open={showResetLinkDialog}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowResetLinkDialog(false);
-						setLinkType(null);
-					}
+				linkType={linkType}
+				resetLink={resetLink}
+				hasCopied={hasCopiedResetLink}
+				onClose={(): void => {
+					setShowResetLinkDialog(false);
 				}}
-				title={linkType === 'invite' ? 'Invite Link' : 'Password Reset Link'}
-				showCloseButton
-				width="base"
-				className="reset-link-dialog"
-			>
-				<div className="reset-link-dialog__content">
-					<p className="reset-link-dialog__description">
-						{linkType === 'invite'
-							? 'Share this one-time link with the team member to complete their account setup.'
-							: 'This creates a one-time link the team member can use to set a new password for their SigNoz account.'}
-					</p>
-					<div className="reset-link-dialog__link-row">
-						<div className="reset-link-dialog__link-text-wrap">
-							<span className="reset-link-dialog__link-text">{resetLink}</span>
-						</div>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleCopyResetLink}
-							prefixIcon={
-								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
-							}
-							className="reset-link-dialog__copy-btn"
-						>
-							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
-						</Button>
-					</div>
-				</div>
-			</DialogWrapper>
+				onCopy={handleCopyResetLink}
+			/>
 
-			<DialogWrapper
+			<DeleteMemberDialog
 				open={showDeleteConfirm}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowDeleteConfirm(false);
-					}
-				}}
-				title={deleteDialogTitle}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">{deleteDialogBody}</p>
-
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setShowDeleteConfirm(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDeleting}
-						onClick={handleDelete}
-					>
-						<Trash2 size={12} />
-						{isDeleting ? 'Processing...' : deleteConfirmLabel}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
+				isInvited={isInvited}
+				member={member}
+				isDeleting={isDeleting}
+				onClose={(): void => setShowDeleteConfirm(false)}
+				onConfirm={handleDelete}
+			/>
 		</>
 	);
 }

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Check, Copy } from '@signozhq/icons';
+
+interface ResetLinkDialogProps {
+	open: boolean;
+	linkType: 'invite' | 'reset' | null;
+	resetLink: string | null;
+	hasCopied: boolean;
+	onClose: () => void;
+	onCopy: () => void;
+}
+
+function ResetLinkDialog({
+	open,
+	linkType,
+	resetLink,
+	hasCopied,
+	onClose,
+	onCopy,
+}: ResetLinkDialogProps): JSX.Element {
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title={linkType === 'invite' ? 'Invite Link' : 'Password Reset Link'}
+			showCloseButton
+			width="base"
+			className="reset-link-dialog"
+		>
+			<div className="reset-link-dialog__content">
+				<p className="reset-link-dialog__description">
+					{linkType === 'invite'
+						? 'Share this one-time link with the team member to complete their account setup.'
+						: 'This creates a one-time link the team member can use to set a new password for their SigNoz account.'}
+				</p>
+				<div className="reset-link-dialog__link-row">
+					<div className="reset-link-dialog__link-text-wrap">
+						<span className="reset-link-dialog__link-text">{resetLink}</span>
+					</div>
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="sm"
+						onClick={onCopy}
+						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						className="reset-link-dialog__copy-btn"
+					>
+						{hasCopied ? 'Copied!' : 'Copy'}
+					</Button>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ResetLinkDialog;

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

@@ -4,11 +4,18 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useGetUser,
+	useSetRoleByUserID,
+	useUpdateMyUserV2,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
+import {
+	listRolesSuccessResponse,
+	managedRoles,
+} from 'mocks-server/__mockdata__/roles';
+import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { ROLES } from 'types/roles';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
@@ -44,7 +51,10 @@ jest.mock('@signozhq/dialog', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
-	useUpdateUserDeprecated: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
 	getResetPasswordToken: jest.fn(),
 }));
 
@@ -69,25 +79,63 @@ jest.mock('react-use', () => ({
 	],
 }));
 
-const mockUpdateMutate = jest.fn();
+const ROLES_ENDPOINT = '*/api/v1/roles';
+
 const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
+const mockFetchedUser = {
+	data: {
+		id: 'user-1',
+		displayName: 'Alice Smith',
+		email: 'alice@signoz.io',
+		status: 'active',
+		userRoles: [
+			{
+				id: 'ur-1',
+				roleId: managedRoles[0].id,
+				role: managedRoles[0], // signoz-admin
+			},
+		],
+	},
+};
+
 const activeMember = {
 	id: 'user-1',
 	name: 'Alice Smith',
 	email: 'alice@signoz.io',
-	role: 'ADMIN' as ROLES,
 	status: MemberStatus.Active,
 	joinedOn: '1700000000000',
 	updatedAt: '1710000000000',
 };
 
+const selfMember = {
+	...activeMember,
+	id: 'some-user-id',
+};
+
+const rootMockFetchedUser = {
+	data: {
+		...mockFetchedUser.data,
+		id: 'root-user-1',
+		isRoot: true,
+	},
+};
+
 const invitedMember = {
 	id: 'abc123',
 	name: '',
 	email: 'bob@signoz.io',
-	role: 'VIEWER' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: '1700000000000',
 };
@@ -109,8 +157,27 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		(useUpdateUserDeprecated as jest.Mock).mockReturnValue({
-			mutate: mockUpdateMutate,
+		showErrorModal.mockClear();
+		server.use(
+			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+		(useGetUser as jest.Mock).mockReturnValue({
+			data: mockFetchedUser,
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
+			isLoading: false,
+		});
+		(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
+			isLoading: false,
+		});
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
 		(useDeleteUser as jest.Mock).mockReturnValue({
@@ -119,6 +186,10 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
 	it('renders active member details and disables Save when form is not dirty', () => {
 		renderDrawer();
 
@@ -130,16 +201,15 @@ describe('EditMemberDrawer', () => {
 		).toBeDisabled();
 	});
 
-	it('enables Save after editing name and calls update API on confirm', async () => {
+	it('enables Save after editing name and calls updateUser on confirm', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-			mutate: mockUpdateMutate.mockImplementation(() => {
-				options?.mutation?.onSuccess?.();
-			}),
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: mockMutateAsync,
 			isLoading: false,
-		}));
+		});
 
 		renderDrawer({ onComplete });
 
@@ -153,12 +223,90 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockUpdateMutate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					pathParams: { id: 'user-1' },
-					data: expect.objectContaining({ displayName: 'Alice Updated' }),
-				}),
-			);
+			expect(mockMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { displayName: 'Alice Updated' },
+			});
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	it('does not close the drawer after a successful save', async () => {
+		const onClose = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderDrawer({ onClose });
+
+		const nameInput = screen.getByDisplayValue('Alice Smith');
+		await user.clear(nameInput);
+		await user.type(nameInput, 'Alice Updated');
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole('button', { name: /save member details/i }),
+			).toBeInTheDocument();
+		});
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('selecting a different role calls setRole with the new role name', async () => {
+		const onComplete = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockSet = jest.fn().mockResolvedValue({});
+
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
+			isLoading: false,
+		});
+
+		renderDrawer({ onComplete });
+
+		// Open the roles dropdown and select signoz-editor
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-editor'));
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-editor' },
+			});
+			expect(onComplete).toHaveBeenCalled();
+		});
+	});
+
+	it('does not call removeRole when the role is changed', async () => {
+		const onComplete = jest.fn();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockSet = jest.fn().mockResolvedValue({});
+
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
+			isLoading: false,
+		});
+
+		renderDrawer({ onComplete });
+
+		// Switch from signoz-admin to signoz-viewer using single-select
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));
+
+		const saveBtn = screen.getByRole('button', { name: /save member details/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		await waitFor(() => {
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-viewer' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -239,16 +387,33 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
-	it('calls update API when saving changes for an invited member', async () => {
+	it('calls updateUser when saving name change for an invited member', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-			mutate: mockUpdateMutate.mockImplementation(() => {
-				options?.mutation?.onSuccess?.();
-			}),
+		(useGetUser as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					...mockFetchedUser.data,
+					id: 'abc123',
+					displayName: 'Bob',
+					userRoles: [
+						{
+							id: 'ur-2',
+							roleId: managedRoles[2].id,
+							role: managedRoles[2], // signoz-viewer
+						},
+					],
+				},
+			},
 			isLoading: false,
-		}));
+			refetch: jest.fn(),
+		});
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		});
 
 		renderDrawer({ member: { ...invitedMember, name: 'Bob' }, onComplete });
 
@@ -261,12 +426,10 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockUpdateMutate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					pathParams: { id: 'abc123' },
-					data: expect.objectContaining({ displayName: 'Bob Updated' }),
-				}),
-			);
+			expect(mockMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'abc123' },
+				data: { displayName: 'Bob Updated' },
+			});
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -280,16 +443,13 @@ describe('EditMemberDrawer', () => {
 			} as ReturnType<typeof convertToApiError>);
 		});
 
-		it('shows API error message when updateUser fails', async () => {
+		it('shows SaveErrorItem when updateUser fails for name change', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
-			(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
-				mutate: mockUpdateMutate.mockImplementation(() => {
-					options?.mutation?.onError?.({});
-				}),
+			(useUpdateUser as jest.Mock).mockReturnValue({
+				mutateAsync: jest.fn().mockRejectedValue(new Error('server error')),
 				isLoading: false,
-			}));
+			});
 
 			renderDrawer();
 
@@ -302,16 +462,14 @@ describe('EditMemberDrawer', () => {
 			await user.click(saveBtn);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to update member details: Something went wrong on server',
-					expect.anything(),
-				);
+				expect(
+					screen.getByText('Name update: Something went wrong on server'),
+				).toBeInTheDocument();
 			});
 		});
 
 		it('shows API error message when deleteUser fails for active member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
 			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
@@ -329,16 +487,20 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to delete member: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});
 
 		it('shows API error message when deleteUser fails for invited member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
 			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
@@ -356,14 +518,109 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to revoke invite: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});
 	});
 
+	describe('self user (isSelf)', () => {
+		it('disables Delete button when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(
+				screen.getByRole('button', { name: /delete member/i }),
+			).toBeDisabled();
+		});
+
+		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer({ member: selfMember });
+
+			await user.click(screen.getByRole('button', { name: /delete member/i }));
+
+			expect(
+				screen.queryByText(/are you sure you want to delete/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('keeps name input enabled when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(screen.getByDisplayValue('Alice Smith')).not.toBeDisabled();
+		});
+
+		it('keeps Reset Link button enabled when viewing own profile', () => {
+			renderDrawer({ member: selfMember });
+			expect(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			).not.toBeDisabled();
+		});
+	});
+
+	describe('root user', () => {
+		beforeEach(() => {
+			(useGetUser as jest.Mock).mockReturnValue({
+				data: rootMockFetchedUser,
+				isLoading: false,
+				refetch: jest.fn(),
+			});
+		});
+
+		it('disables name input for root user', () => {
+			renderDrawer();
+			expect(screen.getByDisplayValue('Alice Smith')).toBeDisabled();
+		});
+
+		it('disables Delete button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /delete member/i }),
+			).toBeDisabled();
+		});
+
+		it('disables Reset Link button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			).toBeDisabled();
+		});
+
+		it('disables Save button for root user', () => {
+			renderDrawer();
+			expect(
+				screen.getByRole('button', { name: /save member details/i }),
+			).toBeDisabled();
+		});
+
+		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer();
+
+			await user.click(screen.getByRole('button', { name: /delete member/i }));
+
+			expect(
+				screen.queryByText(/are you sure you want to delete/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderDrawer();
+
+			await user.click(
+				screen.getByRole('button', { name: /generate password reset link/i }),
+			);
+
+			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
+		});
+	});
+
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();

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

@@ -10,7 +10,12 @@ import APIError from 'types/api/error';
 import './ErrorContent.styles.scss';
 
 interface ErrorContentProps {
-	error: APIError;
+	error:
+		| APIError
+		| {
+				code: number;
+				message: string;
+		  };
 	icon?: ReactNode;
 }
 
@@ -20,7 +25,15 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error?.error?.error || {};
+	} =
+		error && 'error' in error
+			? error?.error?.error || {}
+			: {
+					url: undefined,
+					errors: [],
+					code: error.code || 500,
+					message: error.message || 'Something went wrong',
+			  };
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -10,6 +10,7 @@ import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
@@ -40,6 +41,8 @@ function InviteMembersModal({
 	onClose,
 	onComplete,
 }: InviteMembersModalProps): JSX.Element {
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const [rows, setRows] = useState<InviteRow[]>(() => [
 		EMPTY_ROW(),
 		EMPTY_ROW(),
@@ -197,17 +200,18 @@ function InviteMembersModal({
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', { richColors: true });
+			toast.success('Invites sent successfully', {
+				richColors: true,
+				position: 'top-right',
+			});
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
-			const apiErr = err as APIError;
-			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-			toast.error(errorMessage, { richColors: true });
+			showErrorModal(err as APIError);
 		} finally {
 			setIsSubmitting(false);
 		}
-	}, [rows, onComplete, resetAndClose, validateAllUsers]);
+	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
 
 	const touchedRows = rows.filter(isRowTouched);
 	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
@@ -224,7 +228,7 @@ function InviteMembersModal({
 			showCloseButton
 			width="wide"
 			className="invite-members-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="invite-members-modal__content">
 				<div className="invite-members-modal__table">
@@ -326,6 +330,7 @@ function InviteMembersModal({
 						size="sm"
 						onClick={handleSubmit}
 						disabled={isSubmitDisabled}
+						loading={isSubmitting}
 					>
 						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
 					</Button>

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

@@ -1,4 +1,3 @@
-import { toast } from '@signozhq/sonner';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { StatusCodes } from 'http-status-codes';
@@ -22,6 +21,16 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const mockSendInvite = jest.mocked(sendInvite);
 const mockInviteUsers = jest.mocked(inviteUsers);
 
@@ -34,6 +43,7 @@ const defaultProps = {
 describe('InviteMembersModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		showErrorModal.mockClear();
 		mockSendInvite.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { data: 'test', status: 'success' },
@@ -154,9 +164,10 @@ describe('InviteMembersModal', () => {
 	describe('error handling', () => {
 		it('shows BE message on single invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('An invite already exists for this email: single@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: single@signoz.io',
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -171,18 +182,16 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: single@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on bulk invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockInviteUsers.mockRejectedValue(
-				makeApiError('An invite already exists for this email: alice@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: alice@signoz.io',
 			);
+			mockInviteUsers.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -201,18 +210,17 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: alice@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on generic error', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('Internal server error', StatusCodes.INTERNAL_SERVER_ERROR),
+			const error = makeApiError(
+				'Internal server error',
+				StatusCodes.INTERNAL_SERVER_ERROR,
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -227,10 +235,7 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'Internal server error',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 	});

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

@@ -33,9 +33,6 @@
 		border: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-400);
 
-		.ant-btn-default {
-		}
-
 		.copy-log-btn {
 			border-left: 1px solid var(--bg-vanilla-400);
 			border-color: var(--bg-vanilla-400) !important;

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

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

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

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

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

@@ -15,13 +15,12 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
 		minWidth: '10rem',
-		width: '10rem',
+		width: 'auto',
 	};
 }
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '90rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss

@@ -0,0 +1,12 @@
+.logBodyCell {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	color: var(--l2-foreground);
+}

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

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

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -33,7 +33,7 @@
 	display: flex;
 	align-items: center;
 
-	.ant-typography {
+	p {
 		margin-bottom: 0;
 	}
 }
@@ -45,6 +45,7 @@
 }
 
 .paragraph {
+	margin: 0;
 	padding: 0px !important;
 	&.small {
 		font-size: 11px !important;

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TableColumnsType as ColumnsType, Typography } from 'antd';
+import { TableColumnsType as ColumnsType } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
@@ -43,7 +43,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const bodyColumnStyle = useMemo(
 		() => ({
 			...defaultTableStyle,
-			...(fields.length > 2 ? { width: '50rem' } : {}),
+			...(fields.length > 2 ? { width: 'auto' } : {}),
 		}),
 		[fields.length],
 	);
@@ -59,18 +59,18 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
-						style: isListViewPanel
-							? defaultListViewPanelStyle
-							: getDefaultCellStyle(isDarkMode),
+						style: {
+							...(isListViewPanel
+								? defaultListViewPanelStyle
+								: getDefaultCellStyle(isDarkMode)),
+							display: '-webkit-box',
+							WebkitLineClamp: linesPerRow,
+							WebkitBoxOrient: 'vertical',
+							overflow: 'hidden',
+							wordBreak: 'break-all',
+						},
 					},
-					children: (
-						<Typography.Paragraph
-							ellipsis={{ rows: linesPerRow }}
-							className={cx('paragraph', fontSize)}
-						>
-							{field}
-						</Typography.Paragraph>
-					),
+					children: <p className={cx('paragraph', fontSize)}>{field}</p>,
 				}),
 			}));
 
@@ -123,9 +123,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								return {
 									children: (
 										<div className="table-timestamp">
-											<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
-												{date}
-											</Typography.Paragraph>
+											<p className={cx('text', fontSize)}>{date}</p>
 										</div>
 									),
 								};

frontend/src/components/MembersTable/MembersTable.tsx

@@ -4,9 +4,7 @@ import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
 
 import './MembersTable.styles.scss';
 
@@ -14,7 +12,6 @@ export interface MemberRow {
 	id: string;
 	name?: string;
 	email: string;
-	role: ROLES;
 	status: MemberStatus;
 	joinedOn: string | null;
 	updatedAt?: string | null;
@@ -141,17 +138,6 @@ function MembersTable({
 				<NameEmailCell name={record.name} email={record.email} />
 			),
 		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			sorter: (a, b): number => a.role.localeCompare(b.role),
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{capitalize(role)}</Badge>
-			),
-		},
-
 		{
 			title: 'Status',
 			dataIndex: 'status',
@@ -224,7 +210,7 @@ function MembersTable({
 					index % 2 === 0 ? 'members-table-row--tinted' : ''
 				}
 				onRow={(record): React.HTMLAttributes<HTMLElement> => {
-					const isClickable = onRowClick && record.status !== MemberStatus.Deleted;
+					const isClickable = !!onRowClick;
 					return {
 						onClick: (): void => {
 							if (isClickable) {

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

@@ -1,6 +1,5 @@
 import { MemberStatus } from 'container/MembersSettings/utils';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { ROLES } from 'types/roles';
 
 import MembersTable, { MemberRow } from '../MembersTable';
 
@@ -9,7 +8,6 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-1',
 		name: 'Alice Smith',
 		email: 'alice@signoz.io',
-		role: 'ADMIN' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: '1700000000000',
 	},
@@ -17,7 +15,6 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-2',
 		name: 'Bob Jones',
 		email: 'bob@signoz.io',
-		role: 'VIEWER' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: null,
 	},
@@ -27,7 +24,6 @@ const mockInvitedMember: MemberRow = {
 	id: 'inv-abc',
 	name: '',
 	email: 'charlie@signoz.io',
-	role: 'EDITOR' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: null,
 };
@@ -47,12 +43,11 @@ describe('MembersTable', () => {
 		jest.clearAllMocks();
 	});
 
-	it('renders member rows with name, email, role badge, and ACTIVE status', () => {
+	it('renders member rows with name, email, and ACTIVE status', () => {
 		render(<MembersTable {...defaultProps} data={mockActiveMembers} />);
 
 		expect(screen.getByText('Alice Smith')).toBeInTheDocument();
 		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Admin')).toBeInTheDocument();
 		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
 	});
 
@@ -67,7 +62,6 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('INVITED')).toBeInTheDocument();
 		expect(screen.getByText('charlie@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('Editor')).toBeInTheDocument();
 	});
 
 	it('calls onRowClick with the member data when a row is clicked', async () => {
@@ -92,14 +86,13 @@ describe('MembersTable', () => {
 		);
 	});
 
-	it('renders DELETED badge and does not call onRowClick when a deleted member row is clicked', async () => {
+	it('renders DELETED badge and calls onRowClick when a deleted member row is clicked', async () => {
 		const onRowClick = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const deletedMember: MemberRow = {
 			id: 'user-del',
 			name: 'Dave Deleted',
 			email: 'dave@signoz.io',
-			role: 'VIEWER' as ROLES,
 			status: MemberStatus.Deleted,
 			joinedOn: null,
 		};
@@ -115,7 +108,7 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('DELETED')).toBeInTheDocument();
 		await user.click(screen.getByText('Dave Deleted'));
-		expect(onRowClick).not.toHaveBeenCalledWith(
+		expect(onRowClick).toHaveBeenCalledWith(
 			expect.objectContaining({ id: 'user-del' }),
 		);
 	});

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,21 +1,35 @@
 .quick-filters-container {
 	display: flex;
+	flex-direction: row;
 	height: 100%;
+	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {
+		flex: 0 0 0;
+		width: 0;
+		min-width: 0;
+		overflow: visible;
 		position: relative;
+		align-self: stretch;
 	}
 }
 
 .quick-filters {
 	display: flex;
 	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
 	height: 100%;
-	width: 100%;
+	min-height: 0;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
+	.overlay-scrollbar {
+		flex: 1;
+		min-height: 0;
+	}
+
 	.header {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: column;
 	position: absolute;
+	top: 0;
+	left: 0;
 	z-index: 999;
 	width: 342px;
 	background: var(--bg-slate-500);

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -88,3 +88,13 @@
 		color: var(--destructive);
 	}
 }
+
+.roles-single-select {
+	.ant-select-selector {
+		min-height: 32px;
+		background-color: var(--l2-background) !important;
+		border: 1px solid var(--border) !important;
+		border-radius: 2px;
+		padding: 2px var(--padding-2) !important;
+	}
+}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -85,7 +85,8 @@ interface BaseProps {
 interface SingleProps extends BaseProps {
 	mode?: 'single';
 	value?: string;
-	onChange?: (role: string) => void;
+	onChange?: (role: string | undefined) => void;
+	allowClear?: boolean;
 }
 
 interface MultipleProps extends BaseProps {
@@ -154,14 +155,15 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		);
 	}
 
-	const { value, onChange } = props as SingleProps;
+	const { value, onChange, allowClear = true } = props as SingleProps;
 	return (
 		<Select
 			id={id}
-			value={value}
+			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
-			className={cx('roles-select', className)}
+			allowClear={allowClear}
+			className={cx('roles-single-select', className)}
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -17,6 +17,8 @@ import { AxiosError } from 'axios';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import KeyCreatedPhase from './KeyCreatedPhase';
 import KeyFormPhase from './KeyFormPhase';
@@ -27,6 +29,7 @@ import './AddKeyModal.styles.scss';
 
 function AddKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isAddKeyOpen, setIsAddKeyOpen] = useQueryState(
 		SA_QUERY_PARAMS.ADD_KEY,
@@ -81,11 +84,11 @@ function AddKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to create key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -151,7 +154,7 @@ function AddKeyModal(): JSX.Element {
 			width="base"
 			className="add-key-modal"
 			showCloseButton
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -16,9 +16,12 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 function DeleteAccountModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId, setAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isDeleteOpen, setIsDeleteOpen] = useQueryState(
 		SA_QUERY_PARAMS.DELETE_SA,
@@ -45,11 +48,11 @@ function DeleteAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to delete service account';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -79,7 +82,7 @@ function DeleteAccountModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<p className="sa-delete-dialog__body">
 				Are you sure you want to delete <strong>{accountName}</strong>? This action

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -17,7 +17,9 @@ import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
 
 import { RevokeKeyContent } from '../RevokeKeyModal';
 import EditKeyForm from './EditKeyForm';
@@ -41,6 +43,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	const open = !!editKeyId && !!selectedAccountId;
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
 
 	const {
@@ -78,11 +81,11 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to update key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -102,12 +105,13 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					});
 				}
 			},
+			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -160,7 +164,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{isRevokeConfirmOpen ? (
 				<RevokeKeyContent

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -16,8 +16,8 @@ interface OverviewTabProps {
 	account: ServiceAccountRow;
 	localName: string;
 	onNameChange: (v: string) => void;
-	localRoles: string[];
-	onRolesChange: (v: string[]) => void;
+	localRole: string;
+	onRoleChange: (v: string | undefined) => void;
 	isDisabled: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
@@ -31,8 +31,8 @@ function OverviewTab({
 	account,
 	localName,
 	onNameChange,
-	localRoles,
-	onRolesChange,
+	localRole,
+	onRoleChange,
 	isDisabled,
 	availableRoles,
 	rolesLoading,
@@ -96,15 +96,10 @@ function OverviewTab({
 				{isDisabled ? (
 					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 						<div className="sa-drawer__disabled-roles">
-							{localRoles.length > 0 ? (
-								localRoles.map((roleId) => {
-									const role = availableRoles.find((r) => r.id === roleId);
-									return (
-										<Badge key={roleId} color="vanilla">
-											{role?.name ?? roleId}
-										</Badge>
-									);
-								})
+							{localRole ? (
+								<Badge color="vanilla">
+									{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+								</Badge>
 							) : (
 								<span className="sa-drawer__input-text">—</span>
 							)}
@@ -114,15 +109,14 @@ function OverviewTab({
 				) : (
 					<RolesSelect
 						id="sa-roles"
-						mode="multiple"
 						roles={availableRoles}
 						loading={rolesLoading}
 						isError={rolesError}
 						error={rolesErrorObj}
 						onRefetch={onRefetchRoles}
-						value={localRoles}
-						onChange={onRolesChange}
-						placeholder="Select roles"
+						value={localRole}
+						onChange={onRoleChange}
+						placeholder="Select role"
 					/>
 				)}
 			</div>

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -16,6 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 export interface RevokeKeyContentProps {
 	isRevoking: boolean;
@@ -56,6 +58,7 @@ export function RevokeKeyContent({
 
 function RevokeKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [revokeKeyId, setRevokeKeyId] = useQueryState(
 		SA_QUERY_PARAMS.REVOKE_KEY,
@@ -83,11 +86,11 @@ function RevokeKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -115,7 +118,7 @@ function RevokeKeyModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<RevokeKeyContent
 				isRevoking={isRevoking}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
@@ -8,7 +8,9 @@ import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
+	getGetServiceAccountRolesQueryKey,
 	getListServiceAccountsQueryKey,
+	useDeleteServiceAccountRole,
 	useGetServiceAccount,
 	useListServiceAccountKeys,
 	useUpdateServiceAccount,
@@ -23,7 +25,10 @@ import {
 	ServiceAccountStatus,
 	toServiceAccountRow,
 } from 'container/ServiceAccountsSettings/utils';
-import { useServiceAccountRoleManager } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import {
+	RoleUpdateFailure,
+	useServiceAccountRoleManager,
+} from 'hooks/serviceAccount/useServiceAccountRoleManager';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -32,7 +37,7 @@ import {
 	useQueryState,
 } from 'nuqs';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
+import { retryOn429, toAPIError } from 'utils/errorUtils';
 
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
@@ -49,6 +54,13 @@ export interface ServiceAccountDrawerProps {
 
 const PAGE_SIZE = 15;
 
+function toSaveApiError(err: unknown): APIError {
+	return (
+		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
+	);
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
@@ -80,7 +92,7 @@ function ServiceAccountDrawer({
 		parseAsBoolean.withDefault(false),
 	);
 	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
@@ -103,21 +115,35 @@ function ServiceAccountDrawer({
 		[accountData],
 	);
 
-	const { currentRoles, applyDiff } = useServiceAccountRoleManager(
-		selectedAccountId ?? '',
-	);
+	const {
+		currentRoles,
+		isLoading: isRolesLoading,
+		applyDiff,
+	} = useServiceAccountRoleManager(selectedAccountId ?? '');
+
+	const roleSessionRef = useRef<string | null>(null);
 
 	useEffect(() => {
 		if (account?.id) {
 			setLocalName(account?.name ?? '');
 			setKeysPage(1);
 		}
-		setSaveErrors([]);
 	}, [account?.id, account?.name, setKeysPage]);
 
 	useEffect(() => {
-		setLocalRoles(currentRoles.map((r) => r.id).filter(Boolean) as string[]);
-	}, [currentRoles]);
+		if (account?.id) {
+			setSaveErrors([]);
+		}
+	}, [account?.id]);
+
+	useEffect(() => {
+		if (!account?.id) {
+			roleSessionRef.current = null;
+		} else if (account.id !== roleSessionRef.current && !isRolesLoading) {
+			setLocalRole(currentRoles[0]?.id ?? '');
+			roleSessionRef.current = account.id;
+		}
+	}, [account?.id, currentRoles, isRolesLoading]);
 
 	const isDeleted =
 		account?.status?.toUpperCase() === ServiceAccountStatus.Deleted;
@@ -125,8 +151,7 @@ function ServiceAccountDrawer({
 	const isDirty =
 		account !== null &&
 		(localName !== (account.name ?? '') ||
-			JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify([...currentRoles.map((r) => r.id).filter(Boolean)].sort()));
+			localRole !== (currentRoles[0]?.id ?? ''));
 
 	const {
 		roles: availableRoles,
@@ -154,12 +179,26 @@ function ServiceAccountDrawer({
 
 	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
+	const { mutateAsync: deleteRole } = useDeleteServiceAccountRole({
+		mutation: {
+			retry: retryOn429,
+		},
+	});
 
-	const toSaveApiError = useCallback(
-		(err: unknown): APIError =>
-			convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
-			toAPIError(err as AxiosError<RenderErrorResponseDTO>),
-		[],
+	const executeRolesOperation = useCallback(
+		async (accountId: string): Promise<RoleUpdateFailure[]> => {
+			if (localRole === '' && currentRoles[0]?.id) {
+				await deleteRole({
+					pathParams: { id: accountId, rid: currentRoles[0].id },
+				});
+				await queryClient.invalidateQueries(
+					getGetServiceAccountRolesQueryKey({ id: accountId }),
+				);
+				return [];
+			}
+			return applyDiff([localRole].filter(Boolean), availableRoles);
+		},
+		[localRole, currentRoles, availableRoles, applyDiff, deleteRole, queryClient],
 	);
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -181,14 +220,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [
-		account,
-		localName,
-		updateMutateAsync,
-		refetchAccount,
-		queryClient,
-		toSaveApiError,
-	]);
+	}, [account, localName, updateMutateAsync, refetchAccount, queryClient]);
 
 	const handleNameChange = useCallback((name: string): void => {
 		setLocalName(name);
@@ -211,26 +243,39 @@ function ServiceAccountDrawer({
 				);
 			}
 		},
-		[toSaveApiError],
+		[],
+	);
+
+	const clearRoleErrors = useCallback((): void => {
+		setSaveErrors((prev) =>
+			prev.filter(
+				(e) => e.context !== 'Roles update' && !e.context.startsWith("Role '"),
+			),
+		);
+	}, []);
+
+	const failuresToSaveErrors = useCallback(
+		(failures: RoleUpdateFailure[]): SaveError[] =>
+			failures.map((f) => {
+				const ctx = `Role '${f.roleName}'`;
+				return {
+					context: ctx,
+					apiError: toSaveApiError(f.error),
+					onRetry: makeRoleRetry(ctx, f.onRetry),
+				};
+			}),
+		[makeRoleRetry],
 	);
 
 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await applyDiff(localRoles, availableRoles);
+			const failures = await executeRolesOperation(selectedAccountId ?? '');
 			if (failures.length === 0) {
 				setSaveErrors((prev) => prev.filter((e) => e.context !== 'Roles update'));
 			} else {
 				setSaveErrors((prev) => {
 					const rest = prev.filter((e) => e.context !== 'Roles update');
-					const roleErrors = failures.map((f) => {
-						const ctx = `Role '${f.roleName}'`;
-						return {
-							context: ctx,
-							apiError: toSaveApiError(f.error),
-							onRetry: makeRoleRetry(ctx, f.onRetry),
-						};
-					});
-					return [...rest, ...roleErrors];
+					return [...rest, ...failuresToSaveErrors(failures)];
 				});
 			}
 		} catch (err) {
@@ -240,7 +285,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [localRoles, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
+	}, [selectedAccountId, executeRolesOperation, failuresToSaveErrors]);
 
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -259,7 +304,7 @@ function ServiceAccountDrawer({
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				applyDiff(localRoles, availableRoles),
+				executeRolesOperation(account.id),
 			]);
 
 			const errors: SaveError[] = [];
@@ -279,14 +324,7 @@ function ServiceAccountDrawer({
 					onRetry: retryRolesUpdate,
 				});
 			} else {
-				for (const failure of rolesResult.value) {
-					const context = `Role '${failure.roleName}'`;
-					errors.push({
-						context,
-						apiError: toSaveApiError(failure.error),
-						onRetry: makeRoleRetry(context, failure.onRetry),
-					});
-				}
+				errors.push(...failuresToSaveErrors(rolesResult.value));
 			}
 
 			if (errors.length > 0) {
@@ -294,6 +332,7 @@ function ServiceAccountDrawer({
 			} else {
 				toast.success('Service account updated successfully', {
 					richColors: true,
+					position: 'top-right',
 				});
 				onSuccess({ closeDrawer: false });
 			}
@@ -307,17 +346,14 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
-		localRoles,
-		availableRoles,
 		updateMutateAsync,
-		applyDiff,
+		executeRolesOperation,
 		refetchAccount,
 		onSuccess,
 		queryClient,
-		toSaveApiError,
 		retryNameUpdate,
-		makeRoleRetry,
 		retryRolesUpdate,
+		failuresToSaveErrors,
 	]);
 
 	const handleClose = useCallback((): void => {
@@ -409,8 +445,11 @@ function ServiceAccountDrawer({
 								account={account}
 								localName={localName}
 								onNameChange={handleNameChange}
-								localRoles={localRoles}
-								onRolesChange={setLocalRoles}
+								localRole={localRole}
+								onRoleChange={(role): void => {
+									setLocalRole(role ?? '');
+									clearRoleErrors();
+								}}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}

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

@@ -139,20 +139,20 @@ describe('ServiceAccountDrawer', () => {
 		});
 	});
 
-	it('changing roles enables Save; clicking Save sends updated roles in payload', async () => {
-		const updateSpy = jest.fn();
+	it('changing roles enables Save; clicking Save sends role add request without delete', async () => {
 		const roleSpy = jest.fn();
+		const deleteSpy = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		server.use(
-			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
-				updateSpy(await req.json());
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
-			}),
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
 				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
 		);
 
 		renderDrawer();
@@ -167,12 +167,12 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(updateSpy).not.toHaveBeenCalled();
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
 					id: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
+			expect(deleteSpy).not.toHaveBeenCalled();
 		});
 	});
 
@@ -350,7 +350,7 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});
 
-	it('role update failure shows SaveErrorItem with the role name context', async () => {
+	it('role add failure shows SaveErrorItem with the role name context', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		server.use(
@@ -390,6 +390,42 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});
 
+	it('role add retries on 429 then succeeds without showing an error', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let roleAddCallCount = 0;
+
+		// First call → 429, second call → 200
+		server.use(
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) => {
+				roleAddCallCount += 1;
+				if (roleAddCallCount === 1) {
+					return res(ctx.status(429), ctx.json({ message: 'Too Many Requests' }));
+				}
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
+		);
+
+		renderDrawer();
+
+		await screen.findByDisplayValue('CI Bot');
+
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));
+
+		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await user.click(saveBtn);
+
+		// Retried after 429 — at least 2 calls, no error shown
+		await waitFor(
+			() => {
+				expect(roleAddCallCount).toBeGreaterThanOrEqual(2);
+			},
+			{ timeout: 5000 },
+		);
+		expect(screen.queryByText(/role assign failed/i)).not.toBeInTheDocument();
+	});
+
 	it('clicking Retry on a name-update error re-triggers the request; on success the error item is removed', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 

frontend/src/components/TanStackTableView/RowHoverContext.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable no-restricted-imports */
+import {
+	createContext,
+	ReactNode,
+	useCallback,
+	useContext,
+	useRef,
+} from 'react';
+/* eslint-enable no-restricted-imports */
+import { createStore, StoreApi, useStore } from 'zustand';
+
+const CLEAR_HOVER_DELAY_MS = 100;
+
+type RowHoverState = {
+	hoveredRowId: string | null;
+	clearTimeoutId: ReturnType<typeof setTimeout> | null;
+	setHoveredRowId: (id: string | null) => void;
+	scheduleClearHover: (rowId: string) => void;
+};
+
+const createRowHoverStore = (): StoreApi<RowHoverState> =>
+	createStore<RowHoverState>((set, get) => ({
+		hoveredRowId: null,
+		clearTimeoutId: null,
+		setHoveredRowId: (id: string | null): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+				set({ clearTimeoutId: null });
+			}
+			set({ hoveredRowId: id });
+		},
+		scheduleClearHover: (rowId: string): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+			}
+			const timeoutId = setTimeout(() => {
+				const current = get().hoveredRowId;
+				if (current === rowId) {
+					set({ hoveredRowId: null, clearTimeoutId: null });
+				}
+			}, CLEAR_HOVER_DELAY_MS);
+			set({ clearTimeoutId: timeoutId });
+		},
+	}));
+
+type RowHoverStore = StoreApi<RowHoverState>;
+
+const RowHoverContext = createContext<RowHoverStore | null>(null);
+
+export function RowHoverProvider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const storeRef = useRef<RowHoverStore | null>(null);
+	if (!storeRef.current) {
+		storeRef.current = createRowHoverStore();
+	}
+	return (
+		<RowHoverContext.Provider value={storeRef.current}>
+			{children}
+		</RowHoverContext.Provider>
+	);
+}
+
+const defaultStore = createRowHoverStore();
+
+export const useIsRowHovered = (rowId: string): boolean => {
+	const store = useContext(RowHoverContext);
+	// Selector returns true only if this specific row is hovered
+	const isHovered = useStore(
+		store ?? defaultStore,
+		(s) => s.hoveredRowId === rowId,
+	);
+	return store ? isHovered : false;
+};
+
+export const useSetRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			const current = store.getState().hoveredRowId;
+			if (current !== rowId) {
+				store.getState().setHoveredRowId(rowId);
+			}
+		}
+	}, [store, rowId]);
+};
+
+export const useClearRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			store.getState().scheduleClearHover(rowId);
+		}
+	}, [store, rowId]);
+};
+
+export default RowHoverContext;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -0,0 +1,111 @@
+import { ComponentProps, memo } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import cx from 'classnames';
+
+import { useClearRowHovered, useSetRowHovered } from './RowHoverContext';
+import { FlatItem, TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type VirtuosoTableRowProps<TData> = ComponentProps<
+	NonNullable<
+		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+	>
+>;
+
+function TanStackCustomTableRow<TData>({
+	children,
+	item,
+	context,
+	...props
+}: VirtuosoTableRowProps<TData>): JSX.Element {
+	const rowId = item.row.id;
+	const rowData = item.row.original;
+
+	// Stable callbacks for hover state management
+	const setHovered = useSetRowHovered(rowId);
+	const clearHovered = useClearRowHovered(rowId);
+
+	if (item.kind === 'expansion') {
+		return (
+			<tr {...props} className={tableStyles.tableRowExpansion}>
+				{children}
+			</tr>
+		);
+	}
+
+	const isActive = context?.isRowActive?.(rowData) ?? false;
+	const extraClass = context?.getRowClassName?.(rowData) ?? '';
+	const rowStyle = context?.getRowStyle?.(rowData);
+
+	const rowClassName = cx(
+		tableStyles.tableRow,
+		isActive && tableStyles.tableRowActive,
+		extraClass,
+	);
+
+	return (
+		<tr
+			{...props}
+			className={rowClassName}
+			style={rowStyle}
+			onMouseEnter={setHovered}
+			onMouseLeave={clearHovered}
+		>
+			{children}
+		</tr>
+	);
+}
+
+// Custom comparison - only re-render when row identity or computed values change
+function areTableRowPropsEqual<TData>(
+	prev: Readonly<VirtuosoTableRowProps<TData>>,
+	next: Readonly<VirtuosoTableRowProps<TData>>,
+): boolean {
+	// Different row = must re-render
+	if (prev.item.row.id !== next.item.row.id) {
+		return false;
+	}
+	// Different kind (row vs expansion) = must re-render
+	if (prev.item.kind !== next.item.kind) {
+		return false;
+	}
+	// Same row, same kind - check if computed values would differ
+	// We compare the context callbacks and row data to determine this
+	const prevData = prev.item.row.original;
+	const nextData = next.item.row.original;
+
+	// Row data reference changed = potential re-render needed
+	if (prevData !== nextData) {
+		return false;
+	}
+
+	// Context callbacks changed = computed values may differ
+	if (prev.context !== next.context) {
+		// If context changed, check if the actual computed values differ
+		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;
+		const nextActive = next.context?.isRowActive?.(nextData) ?? false;
+		if (prevActive !== nextActive) {
+			return false;
+		}
+
+		const prevClass = prev.context?.getRowClassName?.(prevData) ?? '';
+		const nextClass = next.context?.getRowClassName?.(nextData) ?? '';
+		if (prevClass !== nextClass) {
+			return false;
+		}
+
+		const prevStyle = prev.context?.getRowStyle?.(prevData);
+		const nextStyle = next.context?.getRowStyle?.(nextData);
+		if (prevStyle !== nextStyle) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default memo(
+	TanStackCustomTableRow,
+	areTableRowPropsEqual,
+) as typeof TanStackCustomTableRow;

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -0,0 +1,160 @@
+.tanstackHeaderCell {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	padding: 0;
+	transform: translate3d(
+		var(--tanstack-header-translate-x, 0px),
+		var(--tanstack-header-translate-y, 0px),
+		0
+	);
+	transition: var(--tanstack-header-transition, none);
+
+	&.isDragging {
+		opacity: 0.85;
+	}
+
+	&.isResizing {
+		background: var(--l2-background-hover);
+	}
+
+	&:last-child .cursorColResize {
+		display: none;
+		border-right: 1px solid var(--l2-border);
+	}
+}
+
+.tanstackHeaderContent {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	min-width: 0;
+	width: 100%;
+	cursor: default;
+	max-width: 100%;
+
+	&.hasResizeControl {
+		max-width: calc(100% - 5px);
+	}
+
+	&.hasActionControl {
+		max-width: calc(100% - 5px);
+	}
+
+	&.hasResizeControl.hasActionControl {
+		max-width: calc(100% - 10px);
+	}
+}
+
+.tanstackGripSlot {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	margin-right: 4px;
+	flex-shrink: 0;
+}
+
+.tanstackGripActivator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 12px;
+	height: 12px;
+	cursor: grab;
+	color: var(--l2-foreground);
+	opacity: 1;
+	touch-action: none;
+}
+
+.tanstackHeaderActionTrigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+
+	margin-left: auto;
+}
+
+.tanstackColumnActionsContent {
+	width: 140px;
+	padding: 0;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	box-shadow: none;
+}
+
+.tanstackRemoveColumnAction {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	min-height: 32px;
+	padding: 0 8px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	justify-content: flex-start;
+	cursor: pointer;
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	transition: background-color 120ms ease, color 120ms ease;
+
+	&:hover {
+		background: var(--l2-background-hover);
+		color: var(--l2-foreground);
+
+		.tanstackRemoveColumnActionIcon {
+			color: var(--l2-foreground);
+		}
+	}
+}
+
+.tanstackRemoveColumnActionIcon {
+	font-size: 11px;
+	color: var(--l2-foreground);
+	opacity: 0.95;
+}
+
+.tanstackHeaderCell .cursorColResize {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 5px;
+	cursor: col-resize;
+	z-index: 10;
+	touch-action: none;
+	background: transparent;
+}
+
+.tanstackHeaderCell.isResizing .cursorColResize {
+	background: var(--bg-robin-300);
+}
+
+.tanstackResizeHandleLine {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	width: 4px;
+	transform: translateX(-50%);
+	background: var(--l2-border);
+	opacity: 1;
+	pointer-events: none;
+	transition: background 120ms ease, width 120ms ease;
+}
+
+.tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
+	width: 2px;
+	background: var(--bg-robin-500);
+	transition: none;
+}

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -0,0 +1,193 @@
+import type {
+	CSSProperties,
+	MouseEvent as ReactMouseEvent,
+	TouchEvent as ReactTouchEvent,
+} from 'react';
+import { useMemo } from 'react';
+import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
+import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
+import cx from 'classnames';
+import { GripVertical } from 'lucide-react';
+
+import { TableColumnDef } from './types';
+
+import headerStyles from './TanStackHeaderRow.module.scss';
+import tableStyles from './TanStackTable.module.scss';
+
+type TanStackHeaderRowProps<TData = unknown> = {
+	column: TableColumnDef<TData>;
+	header?: TanStackHeader<TData, unknown>;
+	isDarkMode: boolean;
+	hasSingleColumn: boolean;
+	canRemoveColumn?: boolean;
+	onRemoveColumn?: (columnId: string) => void;
+};
+
+const GRIP_ICON_SIZE = 12;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function TanStackHeaderRow<TData>({
+	column,
+	header,
+	isDarkMode,
+	hasSingleColumn,
+	canRemoveColumn = false,
+	onRemoveColumn,
+}: TanStackHeaderRowProps<TData>): JSX.Element {
+	const columnId = column.id;
+	const isDragColumn = column.enableMove !== false && column.pin == null;
+	const isResizableColumn =
+		column.enableResize !== false && Boolean(header?.column.getCanResize());
+	const isColumnRemovable = Boolean(
+		canRemoveColumn && onRemoveColumn && column.enableRemove,
+	);
+	const isResizing = Boolean(header?.column.getIsResizing());
+	const resizeHandler = header?.getResizeHandler();
+	const headerText =
+		typeof column.header === 'string' && column.header
+			? column.header
+			: String(header?.id ?? columnId);
+	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
+	const handleResizeStart = (
+		event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
+	): void => {
+		event.preventDefault();
+		event.stopPropagation();
+		resizeHandler?.(event);
+	};
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({
+		id: columnId,
+		disabled: !isDragColumn,
+	});
+	const headerCellStyle = useMemo(
+		() =>
+			({
+				'--tanstack-header-translate-x': `${Math.round(transform?.x ?? 0)}px`,
+				'--tanstack-header-translate-y': `${Math.round(transform?.y ?? 0)}px`,
+				'--tanstack-header-transition': isResizing ? 'none' : transition || 'none',
+			} as CSSProperties),
+		[isResizing, transform?.x, transform?.y, transition],
+	);
+	const headerCellClassName = cx(
+		headerStyles.tanstackHeaderCell,
+		isDragging && headerStyles.isDragging,
+		isResizing && headerStyles.isResizing,
+	);
+	const headerContentClassName = cx(
+		headerStyles.tanstackHeaderContent,
+		isResizableColumn && headerStyles.hasResizeControl,
+		isColumnRemovable && headerStyles.hasActionControl,
+	);
+
+	const thClassName = cx(
+		tableStyles.tableHeaderCell,
+		headerCellClassName,
+		column.id,
+	);
+
+	return (
+		<th
+			ref={setNodeRef}
+			className={thClassName}
+			key={columnId}
+			style={headerCellStyle}
+			data-dark-mode={isDarkMode}
+			data-single-column={hasSingleColumn || undefined}
+		>
+			<span className={headerContentClassName}>
+				{isDragColumn ? (
+					<span className={headerStyles.tanstackGripSlot}>
+						<span
+							ref={setActivatorNodeRef}
+							{...attributes}
+							{...listeners}
+							role="button"
+							aria-label={`Drag ${String(
+								(typeof column.header === 'string' && column.header) ||
+									header?.id ||
+									columnId,
+							)} column`}
+							className={headerStyles.tanstackGripActivator}
+						>
+							<GripVertical size={GRIP_ICON_SIZE} />
+						</span>
+					</span>
+				) : null}
+				<span className="tanstack-header-title" title={headerTitleAttr}>
+					{header?.column?.columnDef
+						? flexRender(header.column.columnDef.header, header.getContext())
+						: typeof column.header === 'function'
+						? column.header()
+						: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
+				</span>
+				{isColumnRemovable && (
+					<Popover>
+						<PopoverTrigger asChild>
+							<span
+								role="button"
+								aria-label={`Column actions for ${headerTitleAttr}`}
+								className={headerStyles.tanstackHeaderActionTrigger}
+								onMouseDown={(event): void => {
+									event.stopPropagation();
+								}}
+							>
+								<MoreOutlined />
+							</span>
+						</PopoverTrigger>
+						<PopoverContent
+							align="end"
+							sideOffset={6}
+							className={headerStyles.tanstackColumnActionsContent}
+						>
+							<button
+								type="button"
+								className={headerStyles.tanstackRemoveColumnAction}
+								onClick={(event): void => {
+									event.preventDefault();
+									event.stopPropagation();
+									onRemoveColumn?.(column.id);
+								}}
+							>
+								<CloseOutlined
+									className={headerStyles.tanstackRemoveColumnActionIcon}
+								/>
+								Remove column
+							</button>
+						</PopoverContent>
+					</Popover>
+				)}
+			</span>
+			{isResizableColumn && (
+				<span
+					role="presentation"
+					className={headerStyles.cursorColResize}
+					title="Drag to resize column"
+					onClick={(event): void => {
+						event.preventDefault();
+						event.stopPropagation();
+					}}
+					onMouseDown={(event): void => {
+						handleResizeStart(event);
+					}}
+					onTouchStart={(event): void => {
+						handleResizeStart(event);
+					}}
+				>
+					<span className={headerStyles.tanstackResizeHandleLine} />
+				</span>
+			)}
+		</th>
+	);
+}
+
+export default TanStackHeaderRow;

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -0,0 +1,105 @@
+import { memo, useCallback } from 'react';
+import { Row as TanStackRowModel } from '@tanstack/react-table';
+
+import { useIsRowHovered } from './RowHoverContext';
+import { TanStackRowCell } from './TanStackRowCell';
+import { TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type TanStackRowCellsProps<TData> = {
+	row: TanStackRowModel<TData>;
+	context: TableRowContext<TData> | undefined;
+	itemKind: 'row' | 'expansion';
+	hasSingleColumn: boolean;
+};
+
+function TanStackRowCellsInner<TData>({
+	row,
+	context,
+	itemKind,
+	hasSingleColumn,
+}: TanStackRowCellsProps<TData>): JSX.Element {
+	// Only re-render this row when ITS hover state changes
+	const hasHovered = useIsRowHovered(row.id);
+	const rowData = row.original;
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	// Stable references via destructuring
+	const onRowClick = context?.onRowClick;
+	const onRowDeactivate = context?.onRowDeactivate;
+	const isRowActive = context?.isRowActive;
+
+	const handleClick = useCallback(() => {
+		const isActive = isRowActive?.(rowData) ?? false;
+		if (isActive && onRowDeactivate) {
+			onRowDeactivate();
+		} else {
+			onRowClick?.(rowData);
+		}
+	}, [isRowActive, onRowDeactivate, onRowClick, rowData]);
+
+	if (itemKind === 'expansion') {
+		return (
+			<td
+				colSpan={context?.colCount ?? 1}
+				className={tableStyles.tableCellExpansion}
+			>
+				{context?.renderExpandedRow?.(rowData)}
+			</td>
+		);
+	}
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TanStackRowCell
+						key={cell.id}
+						cell={cell}
+						hasSingleColumn={hasSingleColumn}
+						isLastCell={isLastCell}
+						hasHovered={hasHovered}
+						rowData={rowData}
+						onClick={handleClick}
+						renderRowActions={context?.renderRowActions}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
+// Custom comparison - only re-render when row data changes
+function areRowCellsPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellsProps<TData>>,
+	next: Readonly<TanStackRowCellsProps<TData>>,
+): boolean {
+	return (
+		// Row identity
+		prev.row.id === next.row.id &&
+		// Row kind (row vs expansion)
+		prev.itemKind === next.itemKind &&
+		// Row data reference
+		prev.row.original === next.row.original &&
+		// Layout
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		// Context callbacks for click handlers and row actions
+		prev.context?.onRowClick === next.context?.onRowClick &&
+		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
+		prev.context?.isRowActive === next.context?.isRowActive &&
+		prev.context?.renderRowActions === next.context?.renderRowActions &&
+		prev.context?.renderExpandedRow === next.context?.renderExpandedRow &&
+		prev.context?.colCount === next.context?.colCount
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TanStackRowCells = memo(
+	TanStackRowCellsInner,
+	areRowCellsPropsEqual as any,
+) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+
+export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackRowCell.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import type { Cell } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackRowCellProps<TData> = {
+	cell: Cell<TData, unknown>;
+	hasSingleColumn: boolean;
+	isLastCell: boolean;
+	hasHovered: boolean;
+	rowData: TData;
+	onClick: () => void;
+	renderRowActions?: (row: TData) => ReactNode;
+};
+
+function TanStackRowCellInner<TData>({
+	cell,
+	hasSingleColumn,
+	isLastCell,
+	hasHovered,
+	rowData,
+	onClick,
+	renderRowActions,
+}: TanStackRowCellProps<TData>): JSX.Element {
+	return (
+		<td
+			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
+			data-single-column={hasSingleColumn || undefined}
+			onClick={onClick}
+		>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+			{isLastCell && hasHovered && renderRowActions && (
+				<span className={tableStyles.tableViewRowActions}>
+					{renderRowActions(rowData)}
+				</span>
+			)}
+		</td>
+	);
+}
+
+function areTanStackRowCellPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellProps<TData>>,
+	next: Readonly<TanStackRowCellProps<TData>>,
+): boolean {
+	return (
+		prev.cell.id === next.cell.id &&
+		prev.cell.column.id === next.cell.column.id &&
+		Object.is(prev.cell.getValue(), next.cell.getValue()) &&
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		prev.isLastCell === next.isLastCell &&
+		prev.hasHovered === next.hasHovered &&
+		prev.onClick === next.onClick &&
+		prev.renderRowActions === next.renderRowActions &&
+		prev.rowData === next.rowData
+	);
+}
+
+const TanStackRowCellMemo = memo(
+	TanStackRowCellInner,
+	areTanStackRowCellPropsEqual,
+);
+
+TanStackRowCellMemo.displayName = 'TanStackRowCell';
+
+export const TanStackRowCell = TanStackRowCellMemo as typeof TanStackRowCellInner;

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -0,0 +1,105 @@
+.tanStackTable {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	table-layout: fixed;
+	min-width: 100%;
+	max-width: 100%;
+
+	& td,
+	& th {
+		overflow: hidden;
+		min-width: 0;
+		box-sizing: border-box;
+		vertical-align: middle;
+	}
+}
+
+.tableCellText {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	width: auto;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+	max-width: 100%;
+	word-break: break-all;
+}
+
+.tableViewRowActions {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	left: auto;
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 5;
+}
+
+.tableCell {
+	padding: 0.3rem;
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+}
+
+.tableRow {
+	cursor: pointer;
+	position: relative;
+
+	&:hover {
+		.tableCell {
+			background-color: var(--row-hover-bg) !important;
+		}
+	}
+
+	&.tableRowActive {
+		.tableCell {
+			background-color: var(--row-active-bg) !important;
+		}
+	}
+}
+
+.tableHeaderCell {
+	padding: 0.3rem;
+	height: 36px;
+	text-align: left;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
+	border-left: 1px solid var(--l2-border);
+	box-shadow: inset 0 -1px 0 var(--l2-border);
+	color: var(--l1-foreground);
+
+	// TODO: Remove this once background color (l1) is matching the actual background color of the page
+	&[data-dark-mode='true'] {
+		background: #0b0c0d;
+	}
+
+	&[data-dark-mode='false'] {
+		background: #fdfdfd;
+	}
+}
+
+.tableRowExpansion {
+	display: table-row;
+}
+
+.tableCellExpansion {
+	padding: 0.5rem;
+	vertical-align: top;
+}

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackTableTextProps = {
+	children?: ReactNode;
+	className?: string;
+};
+
+function TanStackTableText({
+	children,
+	className,
+}: TanStackTableTextProps): JSX.Element {
+	return (
+		<span className={cx(tableStyles.tableCellText, className)}>{children}</span>
+	);
+}
+
+export default TanStackTableText;

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -0,0 +1,135 @@
+.tanstackTableViewWrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	position: relative;
+	min-height: 0;
+}
+
+.tanstackFixedCol {
+	width: 32px;
+	min-width: 32px;
+	max-width: 32px;
+}
+
+.tanstackFillerCol {
+	width: 100%;
+	min-width: 0;
+}
+
+.tanstackActionsCol {
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+}
+
+.tanstackLoadMoreContainer {
+	width: 100%;
+	min-height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 0 12px;
+	flex-shrink: 0;
+}
+
+.tanstackTableVirtuoso {
+	width: 100%;
+	overflow-x: scroll;
+}
+
+.tanstackTableFootLoaderCell {
+	text-align: center;
+	padding: 8px 0;
+}
+
+.tanstackTableVirtuosoScroll {
+	width: 100%;
+	overflow-x: scroll;
+	scrollbar-width: thin;
+	scrollbar-color: var(--bg-slate-300) transparent;
+
+	&::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-slate-300);
+		border-radius: 9999px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-slate-200);
+	}
+
+	&.cellTypographySmall {
+		--tanstack-plain-cell-font-size: 11px;
+		--tanstack-plain-cell-line-height: 16px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 11px;
+			line-height: 16px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyMedium {
+		--tanstack-plain-cell-font-size: 13px;
+		--tanstack-plain-cell-line-height: 20px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 13px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyLarge {
+		--tanstack-plain-cell-font-size: 14px;
+		--tanstack-plain-cell-line-height: 24px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 14px;
+			line-height: 24px;
+			letter-spacing: -0.07px;
+		}
+	}
+}
+
+.tanstackLoadingOverlay {
+	position: absolute;
+	left: 50%;
+	bottom: 2rem;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 3;
+	border-radius: 8px;
+	padding: 8px 16px;
+}
+
+:global(.lightMode) .tanstackTableVirtuosoScroll {
+	scrollbar-color: var(--bg-vanilla-300) transparent;
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-vanilla-300);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-vanilla-100);
+	}
+}

frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx

@@ -0,0 +1,52 @@
+import type { Table } from '@tanstack/react-table';
+
+import type { TableColumnDef, TanStackTableProps } from './types';
+import { getColumnMinWidthPx } from './utils';
+
+import viewStyles from './TanStackTableView.module.scss';
+
+export function VirtuosoTableColGroup<TData>({
+	columns,
+	columnSizingProp,
+	table,
+}: {
+	columns: TableColumnDef<TData>[];
+	columnSizingProp: TanStackTableProps<TData>['columnSizing'];
+	table: Table<TData>;
+}): JSX.Element {
+	return (
+		<colgroup>
+			{columns.map((column, colIndex) => {
+				const columnId = column.id;
+				const isFixedColumn = column.width?.fixed != null;
+				const minWidthPx = getColumnMinWidthPx(column);
+				const persistedWidth = columnSizingProp?.[columnId];
+				const computedWidth = table.getColumn(columnId)?.getSize();
+				const effectiveWidth = persistedWidth ?? computedWidth;
+				if (isFixedColumn) {
+					return <col key={columnId} className={viewStyles.tanstackFixedCol} />;
+				}
+				const isLastColumn = colIndex === columns.length - 1;
+				if (isLastColumn) {
+					return (
+						<col
+							key={columnId}
+							style={{ width: '100%', minWidth: `${minWidthPx}px` }}
+						/>
+					);
+				}
+				const widthPx =
+					effectiveWidth != null ? Math.max(effectiveWidth, minWidthPx) : minWidthPx;
+				return (
+					<col
+						key={columnId}
+						style={{
+							width: `${widthPx}px`,
+							minWidth: `${minWidthPx}px`,
+						}}
+					/>
+				);
+			})}
+		</colgroup>
+	);
+}

frontend/src/components/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -0,0 +1,102 @@
+jest.mock('../TanStackTable.module.scss', () => ({
+	__esModule: true,
+	default: {
+		tableRow: 'tableRow',
+		tableRowActive: 'tableRowActive',
+		tableRowExpansion: 'tableRowExpansion',
+	},
+}));
+
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow from '../TanStackCustomTableRow';
+import type { FlatItem, TableRowContext } from '../types';
+
+const makeItem = (id: string): FlatItem<{ id: string }> => ({
+	kind: 'row',
+	row: { original: { id } } as never,
+});
+
+const virtuosoAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children', async () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={undefined}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('cell')).toBeInTheDocument();
+	});
+
+	it('applies active class when isRowActive returns true', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === '1',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
+	});
+
+	it('does not apply active class when isRowActive returns false', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === 'other',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
+	});
+
+	it('renders expansion row without RowHoverContext when kind is expansion', () => {
+		const item: FlatItem<{ id: string }> = {
+			kind: 'expansion',
+			row: { original: { id: '1' } } as never,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow {...virtuosoAttrs} item={item} context={undefined}>
+						<td>expanded content</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
+	});
+});

frontend/src/components/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { TableColumnDef } from '../types';
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (): any => ({
+		attributes: {},
+		listeners: {},
+		setNodeRef: jest.fn(),
+		setActivatorNodeRef: jest.fn(),
+		transform: null,
+		transition: null,
+		isDragging: false,
+	}),
+}));
+
+const col = (
+	id: string,
+	overrides?: Partial<TableColumnDef<unknown>>,
+): TableColumnDef<unknown> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+	...overrides,
+});
+
+const header = {
+	id: 'col',
+	column: {
+		getCanResize: () => true,
+		getIsResizing: () => false,
+		columnDef: { header: 'col' },
+	},
+	getResizeHandler: () => jest.fn(),
+	getContext: () => ({}),
+} as never;
+
+describe('TanStackHeaderRow', () => {
+	it('renders column title', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('timestamp', { header: 'timestamp' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(screen.getByTitle('Timestamp')).toBeInTheDocument();
+	});
+
+	it('shows grip icon when enableMove is not false and pin is not set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('body')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.getByRole('button', { name: /drag body/i }),
+		).toBeInTheDocument();
+	});
+
+	it('does NOT show grip icon when pin is set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('indicator', { pin: 'left' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /drag/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('shows remove button when enableRemove and canRemoveColumn are true', async () => {
+		const user = userEvent.setup();
+		const onRemoveColumn = jest.fn();
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name', { enableRemove: true })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={onRemoveColumn}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		await user.click(screen.getByRole('button', { name: /column actions/i }));
+		await user.click(await screen.findByText(/remove column/i));
+		expect(onRemoveColumn).toHaveBeenCalledWith('name');
+	});
+
+	it('does NOT show remove button when enableRemove is absent', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={jest.fn()}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /column actions/i }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -0,0 +1,162 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TableRowContext } from '../types';
+
+const flexRenderMock = jest.fn((def: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, _ctx?: unknown): unknown => flexRenderMock(def),
+}));
+
+type Row = { id: string };
+
+function buildMockRow(
+	cells: { id: string }[],
+	rowData: Row = { id: 'r1' },
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: rowData,
+		getVisibleCells: () =>
+			cells.map((c, i) => ({
+				id: `cell-${i}`,
+				column: {
+					id: c.id,
+					columnDef: { cell: (): string => `content-${c.id}` },
+				},
+				getContext: (): Record<string, unknown> => ({}),
+				getValue: (): string => `content-${c.id}`,
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => flexRenderMock.mockClear());
+
+	it('renders a cell per visible column', () => {
+		const row = buildMockRow([{ id: 'col-a' }, { id: 'col-b' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={undefined}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+	});
+
+	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = { colCount: 1, onRowClick };
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' });
+	});
+
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const onRowDeactivate = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			onRowDeactivate,
+			isRowActive: () => true,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
+	});
+
+	it('does not render renderRowActions before hover', () => {
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			renderRowActions: () => <button type="button">action</button>,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		// Row actions are not rendered until hover (useIsRowHovered returns false by default)
+		expect(
+			screen.queryByRole('button', { name: 'action' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders expansion cell with renderExpandedRow content', async () => {
+		const row = {
+			original: { id: 'r1' },
+			getVisibleCells: () => [],
+		} as never;
+		const ctx: TableRowContext<Row> = {
+			colCount: 3,
+			renderExpandedRow: (r) => <div>expanded-{r.id}</div>,
+		};
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="expansion"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	TableVirtuoso: forwardRef<unknown, { fixedHeaderContent?: () => JSX.Element }>(
+		function MockVirtuoso({ fixedHeaderContent }, _ref) {
+			return <div data-testid="virtuoso">{fixedHeaderContent?.()}</div>;
+		},
+	),
+}));
+
+jest.mock('../useTableParams', () => ({
+	useTableParams: (): Record<string, unknown> => ({
+		page: 1,
+		limit: 50,
+		orderBy: null,
+		setPage: jest.fn(),
+		setLimit: jest.fn(),
+		setOrderBy: jest.fn(),
+	}),
+}));
+
+jest.mock('../../Spinner', () => ({
+	__esModule: true,
+	default: ({ tip }: { tip: string }): JSX.Element => (
+		<div data-testid="spinner">{tip}</div>
+	),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+type Row = { id: string };
+
+const col = (): TableColumnDef<Row> => ({
+	id: 'id',
+	header: 'ID',
+	cell: ({ row }): string => row.id,
+	accessorKey: 'id',
+});
+
+const baseProps: TanStackTableProps<Row> = {
+	data: [{ id: '1' }],
+	columns: [col()],
+};
+
+describe('TanStackTable', () => {
+	it('renders virtuoso when not loading', () => {
+		render(<TanStackTable {...baseProps} />);
+		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+	});
+
+	it('shows loading spinner overlay when isLoading is true', () => {
+		render(<TanStackTable {...baseProps} isLoading />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('passes loadingTip to spinner', () => {
+		render(
+			<TanStackTable {...baseProps} isLoading loadingTip="Fetching hosts" />,
+		);
+		expect(screen.getByTestId('spinner')).toHaveTextContent('Fetching hosts');
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useTableColumns.test.tsx

@@ -0,0 +1,194 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { TableColumnDef } from '../types';
+import { useTableColumns } from '../useTableColumns';
+
+const mockGet = jest.fn();
+const mockSet = jest.fn();
+
+jest.mock('api/browser/localstorage/get', () => ({
+	__esModule: true,
+	default: (key: string): string | null => mockGet(key),
+}));
+
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void => mockSet(key, value),
+}));
+
+type Row = { id: string; name: string };
+
+const col = (id: string, pin?: 'left' | 'right'): TableColumnDef<Row> => ({
+	id,
+	header: id,
+	cell: ({ value }): string => String(value),
+	...(pin ? { pin } : {}),
+});
+
+describe('useTableColumns', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGet.mockReturnValue(null);
+		jest.useFakeTimers();
+	});
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('returns definitions in original order when no persisted state', () => {
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'timestamp',
+			'body',
+			'name',
+		]);
+	});
+
+	it('restores column order from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['name', 'body', 'timestamp'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'name',
+			'body',
+			'timestamp',
+		]);
+	});
+
+	it('pinned columns always stay first regardless of persisted order', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['body', 'indicator'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('indicator', 'left'), col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns[0].id).toBe('indicator');
+	});
+
+	it('excludes removed columns from tableProps.columns', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: {},
+				removedColumnIds: ['name'],
+			}),
+		);
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
+		expect(result.current.activeColumnIds).toEqual(['body']);
+	});
+
+	it('activeColumnIds reflects only currently visible columns', () => {
+		const defs = [col('body'), col('timestamp'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.activeColumnIds).toEqual(['body', 'timestamp', 'name']);
+	});
+
+	it('onRemoveColumn removes column and persists after debounce', () => {
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onRemoveColumn('body');
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['name']);
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"removedColumnIds":["body"]'),
+		);
+	});
+
+	it('onColumnOrderChange updates column order', () => {
+		const defs = [col('a'), col('b'), col('c')];
+		const { result } = renderHook(() => useTableColumns(defs));
+
+		act(() => {
+			result.current.tableProps.onColumnOrderChange([
+				col('c'),
+				col('b'),
+				col('a'),
+			]);
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('restores column sizing from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: { body: 400 },
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columnSizing).toEqual({ body: 400 });
+	});
+
+	it('debounces sizing writes to localStorage', () => {
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onColumnSizingChange({ body: 500 });
+		});
+		expect(mockSet).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"body":500'),
+		);
+	});
+
+	it('falls back to definitions order when localStorage is corrupt', () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockGet.mockReturnValue('not-json');
+		const defs = [col('a'), col('b')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'a',
+			'b',
+		]);
+		spy.mockRestore();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useTableParams.test.tsx

@@ -0,0 +1,105 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useTableParams } from '../useTableParams';
+
+jest.mock('utils/nuqsParsers', () => ({
+	parseAsJsonNoValidate: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+}));
+
+jest.mock('nuqs', () => ({
+	parseAsInteger: {
+		withDefault: (d: number): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	},
+	parseAsJson: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+	useQueryState: jest
+		.fn()
+		.mockImplementation((_key: string, parser: { _default: unknown }) => {
+			const [val, setVal] = (jest.requireActual(
+				'react',
+			) as typeof import('react')).useState(parser?._default);
+			return [val, setVal];
+		}),
+}));
+
+describe('useTableParams (local mode — enableQueryParams not set)', () => {
+	it('returns default page=1 and limit=50', () => {
+		const { result } = renderHook(() => useTableParams());
+		expect(result.current.page).toBe(1);
+		expect(result.current.limit).toBe(50);
+		expect(result.current.orderBy).toBeNull();
+	});
+
+	it('respects custom defaults', () => {
+		const { result } = renderHook(() =>
+			useTableParams(undefined, { page: 2, limit: 25 }),
+		);
+		expect(result.current.page).toBe(2);
+		expect(result.current.limit).toBe(25);
+	});
+
+	it('setPage updates page', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setPage(3);
+		});
+		expect(result.current.page).toBe(3);
+	});
+
+	it('setLimit updates limit', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setLimit(100);
+		});
+		expect(result.current.limit).toBe(100);
+	});
+
+	it('setOrderBy updates orderBy', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setOrderBy({ columnId: 'cpu', desc: true });
+		});
+		expect(result.current.orderBy).toEqual({ columnId: 'cpu', desc: true });
+	});
+});
+
+describe('useTableParams (URL mode — enableQueryParams set)', () => {
+	it('uses nuqs state when enableQueryParams=true', () => {
+		const { result } = renderHook(() => useTableParams(true));
+		expect(result.current.page).toBe(1);
+		act(() => {
+			result.current.setPage(5);
+		});
+		expect(result.current.page).toBe(5);
+	});
+
+	it('uses prefixed keys when enableQueryParams is a string', () => {
+		const { result } = renderHook(() => useTableParams('pods', { page: 2 }));
+		expect(result.current.page).toBe(2);
+		act(() => {
+			result.current.setPage(4);
+		});
+		expect(result.current.page).toBe(4);
+	});
+
+	it('local state is ignored when enableQueryParams is set', () => {
+		const { result: local } = renderHook(() => useTableParams());
+		const { result: url } = renderHook(() => useTableParams(true));
+		act(() => {
+			local.current.setPage(99);
+		});
+		expect(url.current.page).toBe(1);
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -0,0 +1,618 @@
+import type { ComponentProps, CSSProperties, Ref } from 'react';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { TableComponents } from 'react-virtuoso';
+import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
+import {
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	pointerWithin,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	horizontalListSortingStrategy,
+	SortableContext,
+} from '@dnd-kit/sortable';
+import { TooltipProvider } from '@signozhq/ui';
+import type { Row } from '@tanstack/react-table';
+import {
+	ColumnDef,
+	ColumnPinningState,
+	ExpandedState,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { Pagination } from 'antd';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import Spinner from '../Spinner';
+import { RowHoverProvider } from './RowHoverContext';
+import TanStackCustomTableRow from './TanStackCustomTableRow';
+import TanStackHeaderRow from './TanStackHeaderRow';
+import TanStackRowCells from './TanStackRow';
+import TanStackTableText from './TanStackTableText';
+import {
+	FlatItem,
+	TableRowContext,
+	TanStackTableHandle,
+	TanStackTableProps,
+} from './types';
+import { useTableParams } from './useTableParams';
+import { buildTanstackColumnDef } from './utils';
+import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
+
+import tableStyles from './TanStackTable.module.scss';
+import viewStyles from './TanStackTableView.module.scss';
+
+const COLUMN_DND_AUTO_SCROLL = {
+	layoutShiftCompensation: false as const,
+	threshold: { x: 0.2, y: 0 },
+};
+
+const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
+
+const PAGINATION_STYLE: CSSProperties = { marginTop: 12, textAlign: 'right' };
+
+const noopColumnSizing = (): void => {};
+
+function TanStackTableInner<TData>(
+	{
+		data,
+		columns,
+		columnSizing: columnSizingProp,
+		onColumnSizingChange,
+		onColumnOrderChange,
+		onRemoveColumn,
+		isLoading = false,
+		loadingTip = 'Loading',
+		enableQueryParams,
+		pagination,
+		onEndReached,
+		getRowStyle,
+		getRowClassName,
+		isRowActive,
+		renderRowActions,
+		onRowClick,
+		onRowDeactivate,
+		activeRowIndex,
+		renderExpandedRow,
+		getRowCanExpand,
+		tableScrollerProps,
+		plainTextCellLineClamp,
+		cellTypographySize,
+	}: TanStackTableProps<TData>,
+	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
+): JSX.Element {
+	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
+	const isDarkMode = useIsDarkMode();
+
+	const { page, limit, setPage, setLimit } = useTableParams(enableQueryParams, {
+		page: pagination?.defaultPage,
+		limit: pagination?.defaultLimit,
+	});
+
+	const [expanded, setExpanded] = useState<ExpandedState>({});
+
+	const columnPinning = useMemo<ColumnPinningState>(
+		() => ({
+			left: columns.filter((c) => c.pin === 'left').map((c) => c.id),
+			right: columns.filter((c) => c.pin === 'right').map((c) => c.id),
+		}),
+		[columns],
+	);
+
+	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
+		() => columns.map((colDef) => buildTanstackColumnDef(colDef, isRowActive)),
+		[columns, isRowActive],
+	);
+
+	const getRowId = useCallback((row: TData, index: number): string => {
+		const r = row as Record<string, unknown>;
+		if (r != null && typeof r.id !== 'undefined') {
+			return String(r.id);
+		}
+		return String(index);
+	}, []);
+
+	const tableGetRowCanExpand = useCallback(
+		(row: Row<TData>): boolean =>
+			getRowCanExpand ? getRowCanExpand(row.original) : true,
+		[getRowCanExpand],
+	);
+
+	const table = useReactTable({
+		data,
+		columns: tanstackColumns,
+		enableColumnResizing: true,
+		enableColumnPinning: true,
+		columnResizeMode: 'onChange',
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableExpanding: Boolean(renderExpandedRow),
+		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
+		onColumnSizingChange: onColumnSizingChange ?? noopColumnSizing,
+		onExpandedChange: setExpanded,
+		state: {
+			columnSizing: columnSizingProp ?? {},
+			columnPinning,
+			expanded,
+		},
+	});
+
+	const tableRows = table.getRowModel().rows;
+
+	const flatItems = useMemo<FlatItem<TData>[]>(() => {
+		const result: FlatItem<TData>[] = [];
+		for (const row of tableRows) {
+			result.push({ kind: 'row', row });
+			if (renderExpandedRow && row.getIsExpanded()) {
+				result.push({ kind: 'expansion', row });
+			}
+		}
+		return result;
+	}, [tableRows, renderExpandedRow]);
+
+	const flatIndexForActiveRow = useMemo(() => {
+		if (activeRowIndex == null || activeRowIndex < 0) {
+			return -1;
+		}
+		for (let i = 0; i < flatItems.length; i++) {
+			const item = flatItems[i];
+			if (item.kind === 'row' && item.row.index === activeRowIndex) {
+				return i;
+			}
+		}
+		return -1;
+	}, [activeRowIndex, flatItems]);
+
+	useEffect(() => {
+		if (flatIndexForActiveRow < 0) {
+			return;
+		}
+		virtuosoRef.current?.scrollToIndex({
+			index: flatIndexForActiveRow,
+			align: 'center',
+			behavior: 'auto',
+		});
+	}, [flatIndexForActiveRow]);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+	);
+
+	const columnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent): void => {
+			const { active, over } = event;
+			if (!over || active.id === over.id || !onColumnOrderChange) {
+				return;
+			}
+			const activeCol = columns.find((c) => c.id === String(active.id));
+			const overCol = columns.find((c) => c.id === String(over.id));
+			if (
+				!activeCol ||
+				!overCol ||
+				activeCol.pin != null ||
+				overCol.pin != null ||
+				activeCol.enableMove === false
+			) {
+				return;
+			}
+			const oldIndex = columns.findIndex((c) => c.id === String(active.id));
+			const newIndex = columns.findIndex((c) => c.id === String(over.id));
+			if (oldIndex === -1 || newIndex === -1) {
+				return;
+			}
+			onColumnOrderChange(arrayMove(columns, oldIndex, newIndex));
+		},
+		[columns, onColumnOrderChange],
+	);
+
+	const hasSingleColumn = useMemo(
+		() => columns.filter((c) => !c.pin && c.enableRemove !== false).length <= 1,
+		[columns],
+	);
+
+	const canRemoveColumn = !hasSingleColumn;
+
+	const flatHeaders = useMemo(
+		() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tanstackColumns, columnPinning],
+	);
+
+	const columnsById = useMemo(
+		() => new Map(columns.map((c) => [c.id, c] as const)),
+		[columns],
+	);
+
+	const virtuosoContext = useMemo<TableRowContext<TData>>(
+		() => ({
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			colCount: columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		}),
+		[
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		],
+	);
+
+	const itemContent = useCallback(
+		(_index: number, item: FlatItem<TData>): JSX.Element => (
+			<TanStackRowCells
+				row={item.row}
+				itemKind={item.kind}
+				context={virtuosoContext}
+				hasSingleColumn={hasSingleColumn}
+			/>
+		),
+		[virtuosoContext, hasSingleColumn],
+	);
+
+	const tableHeader = useCallback(() => {
+		return (
+			<DndContext
+				sensors={sensors}
+				collisionDetection={pointerWithin}
+				onDragEnd={handleDragEnd}
+				autoScroll={COLUMN_DND_AUTO_SCROLL}
+			>
+				<SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
+					<tr>
+						{flatHeaders.map((header) => {
+							const column = columnsById.get(header.id);
+							if (!column) {
+								return null;
+							}
+							return (
+								<TanStackHeaderRow
+									key={header.id}
+									column={column}
+									header={header}
+									isDarkMode={isDarkMode}
+									hasSingleColumn={hasSingleColumn}
+									onRemoveColumn={onRemoveColumn}
+									canRemoveColumn={canRemoveColumn}
+								/>
+							);
+						})}
+					</tr>
+				</SortableContext>
+			</DndContext>
+		);
+	}, [
+		sensors,
+		handleDragEnd,
+		columnIds,
+		flatHeaders,
+		columnsById,
+		isDarkMode,
+		hasSingleColumn,
+		onRemoveColumn,
+		canRemoveColumn,
+	]);
+
+	const handleEndReached = useCallback(
+		(index: number): void => {
+			onEndReached?.(index);
+		},
+		[onEndReached],
+	);
+
+	useImperativeHandle(
+		forwardedRef,
+		(): TanStackTableHandle =>
+			new Proxy(
+				{
+					goToPage: (p: number): void => {
+						setPage(p);
+						virtuosoRef.current?.scrollToIndex({
+							index: 0,
+							align: 'start',
+						});
+					},
+				} as TanStackTableHandle,
+				{
+					get(target, prop): unknown {
+						if (prop in target) {
+							return Reflect.get(target, prop);
+						}
+						const v = (virtuosoRef.current as unknown) as Record<string, unknown>;
+						const value = v?.[prop as string];
+						if (typeof value === 'function') {
+							return (value as (...a: unknown[]) => unknown).bind(virtuosoRef.current);
+						}
+						return value;
+					},
+				},
+			),
+		[setPage],
+	);
+
+	const showPagination = Boolean(pagination && !onEndReached);
+
+	const { className: tableScrollerClassName, ...restTableScrollerProps } =
+		tableScrollerProps ?? {};
+
+	const cellTypographyClass = useMemo((): string | undefined => {
+		if (cellTypographySize === 'small') {
+			return viewStyles.cellTypographySmall;
+		}
+		if (cellTypographySize === 'medium') {
+			return viewStyles.cellTypographyMedium;
+		}
+		if (cellTypographySize === 'large') {
+			return viewStyles.cellTypographyLarge;
+		}
+		return undefined;
+	}, [cellTypographySize]);
+
+	const virtuosoClassName = useMemo(
+		() =>
+			cx(
+				viewStyles.tanstackTableVirtuosoScroll,
+				cellTypographyClass,
+				tableScrollerClassName,
+			),
+		[cellTypographyClass, tableScrollerClassName],
+	);
+
+	const virtuosoTableStyle = useMemo(
+		() =>
+			({
+				'--tanstack-plain-body-line-clamp': plainTextCellLineClamp,
+			} as CSSProperties),
+		[plainTextCellLineClamp],
+	);
+
+	type VirtuosoTableComponentProps = ComponentProps<
+		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+	>;
+
+	const virtuosoComponents = useMemo(
+		() => ({
+			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
+				<table className={tableStyles.tanStackTable} style={style}>
+					<VirtuosoTableColGroup
+						columns={columns}
+						columnSizingProp={columnSizingProp}
+						table={table}
+					/>
+					{children}
+				</table>
+			),
+			TableRow: TanStackCustomTableRow,
+		}),
+		[columns, columnSizingProp, table],
+	);
+
+	return (
+		<div className={viewStyles.tanstackTableViewWrapper}>
+			<RowHoverProvider>
+				<TooltipProvider>
+					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						className={virtuosoClassName}
+						ref={virtuosoRef}
+						{...restTableScrollerProps}
+						data={flatItems}
+						totalCount={flatItems.length}
+						context={virtuosoContext}
+						increaseViewportBy={INCREASE_VIEWPORT_BY}
+						initialTopMostItemIndex={
+							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+						}
+						fixedHeaderContent={tableHeader}
+						itemContent={itemContent}
+						style={virtuosoTableStyle}
+						components={virtuosoComponents}
+						endReached={onEndReached ? handleEndReached : undefined}
+					/>
+					{isLoading && (
+						<div className={viewStyles.tanstackLoadingOverlay}>
+							<Spinner height="35px" tip={loadingTip} />
+						</div>
+					)}
+					{showPagination && pagination && (
+						<Pagination
+							style={PAGINATION_STYLE}
+							current={page}
+							pageSize={limit}
+							total={pagination.total}
+							showSizeChanger
+							onChange={(p, ps): void => {
+								setPage(p);
+								if (ps != null && ps !== limit) {
+									setLimit(ps);
+								}
+							}}
+						/>
+					)}
+				</TooltipProvider>
+			</RowHoverProvider>
+		</div>
+	);
+}
+
+const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
+	props: TanStackTableProps<TData> & {
+		ref?: React.Ref<TanStackTableHandle>;
+	},
+) => JSX.Element;
+
+const TanStackTableBase = memo(
+	TanStackTableForward,
+) as typeof TanStackTableForward;
+
+/**
+ * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
+ * optional drag-to-reorder headers, expandable rows, and Ant Design pagination or infinite scroll.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import TanStackTable from 'components/TanStackTableView';
+ * import type { TableColumnDef } from 'components/TanStackTableView/types';
+ *
+ * type Row = { id: string; name: string };
+ *
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'name',
+ *     header: 'Name',
+ *     accessorKey: 'name',
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>,
+ *   },
+ * ];
+ *
+ * function Example(): JSX.Element {
+ *   return <TanStackTable<Row> data={rows} columns={columns} />;
+ * }
+ * ```
+ *
+ * @example Column definitions — `accessorFn`, custom header, pinned column
+ * ```tsx
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'id',
+ *     header: 'ID',
+ *     accessorKey: 'id',
+ *     pin: 'left',
+ *     width: { min: 80, default: 120 },
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ *   {
+ *     id: 'computed',
+ *     header: () => <span>Computed</span>,
+ *     accessorFn: (row) => row.first + row.last,
+ *     enableMove: false,
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ * ];
+ * ```
+ *
+ * @example Controlled column sizing and reorder (persist in parent state)
+ * ```tsx
+ * import type { ColumnSizingState } from '@tanstack/react-table';
+ *
+ * const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+ *
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   columnSizing={columnSizing}
+ *   onColumnSizingChange={setColumnSizing}
+ *   onColumnOrderChange={setColumns}
+ *   onRemoveColumn={(id) => setColumns((cols) => cols.filter((c) => c.id !== id))}
+ * />
+ * ```
+ *
+ * @example Pagination (Ant Design). Omit `onEndReached` so the footer pager is shown.
+ * ```tsx
+ * <TanStackTable
+ *   data={pageRows}
+ *   columns={columns}
+ *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
+ *   enableQueryParams
+ * />
+ * ```
+ *
+ * @example Infinite scroll — use `onEndReached` instead of `pagination` (pagination UI is hidden when `onEndReached` is set).
+ * ```tsx
+ * <TanStackTable
+ *   data={accumulatedRows}
+ *   columns={columns}
+ *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
+ * />
+ * ```
+ *
+ * @example Loading overlay and typography for plain string/number cells
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isLoading={isFetching}
+ *   loadingTip="Loading logs…"
+ *   cellTypographySize="small"
+ *   plainTextCellLineClamp={2}
+ * />
+ * ```
+ *
+ * @example Row styling, selection, and actions
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isRowActive={(row) => row.id === selectedId}
+ *   activeRowIndex={selectedIndex}
+ *   onRowClick={(row) => setSelectedId(row.id)}
+ *   onRowDeactivate={() => setSelectedId(undefined)}
+ *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
+ *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
+ *   renderRowActions={(row) => <Button size="small">Open</Button>}
+ * />
+ * ```
+ *
+ * @example Expandable rows
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   renderExpandedRow={(row) => <pre>{JSON.stringify(row.raw, null, 2)}</pre>}
+ *   getRowCanExpand={(row) => Boolean(row.raw)}
+ * />
+ * ```
+ *
+ * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
+ * ```tsx
+ * import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+ *
+ * const ref = useRef<TanStackTableHandle>(null);
+ *
+ * <TanStackTable ref={ref} data={data} columns={columns} pagination={{ total, defaultLimit: 20 }} />;
+ *
+ * ref.current?.goToPage(2);
+ * ref.current?.scrollToIndex({ index: 0, align: 'start' });
+ * ```
+ *
+ * @example Scroll container props (className, `data-testid`, etc.). `data` is reserved by Virtuoso and cannot be passed here.
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-table' }}
+ * />
+ * ```
+ */
+const TanStackTable = Object.assign(TanStackTableBase, {
+	Text: TanStackTableText,
+});
+
+export default TanStackTable;

frontend/src/components/TanStackTableView/types.ts

@@ -0,0 +1,112 @@
+import {
+	CSSProperties,
+	Dispatch,
+	HTMLAttributes,
+	ReactNode,
+	SetStateAction,
+} from 'react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+import type {
+	ColumnSizingState,
+	Row as TanStackRowType,
+} from '@tanstack/react-table';
+
+export type SortState = { columnId: string; desc: boolean };
+
+/** Sets `--tanstack-plain-cell-*` on the scroll root via CSS module classes (no data attributes). */
+export type CellTypographySize = 'small' | 'medium' | 'large';
+
+export type TableCellContext<TData> = {
+	row: TData;
+	value: unknown;
+	isActive: boolean;
+	rowIndex: number;
+	isExpanded: boolean;
+	canExpand: boolean;
+	toggleExpanded: () => void;
+};
+
+export type TableColumnDef<TData> = {
+	id: string;
+	header: string | (() => ReactNode);
+	cell: (context: TableCellContext<TData>) => ReactNode;
+	accessorKey?: keyof TData & string;
+	accessorFn?: (row: TData) => unknown;
+	pin?: 'left' | 'right';
+	enableMove?: boolean;
+	enableResize?: boolean;
+	enableRemove?: boolean;
+	enableSort?: boolean;
+	width?: {
+		fixed?: number;
+		min?: number;
+		default?: number;
+	};
+};
+
+export type FlatItem<TData> =
+	| { kind: 'row'; row: TanStackRowType<TData> }
+	| { kind: 'expansion'; row: TanStackRowType<TData> };
+
+export type TableRowContext<TData> = {
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	colCount: number;
+	isDarkMode?: boolean;
+	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
+	plainTextCellLineClamp?: number;
+};
+
+export type PaginationProps = {
+	total: number;
+	defaultPage?: number;
+	defaultLimit?: number;
+};
+
+export type TanStackTableProps<TData> = {
+	data: TData[];
+	columns: TableColumnDef<TData>[];
+	columnSizing?: ColumnSizingState;
+	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn?: (id: string) => void;
+	isLoading?: boolean;
+	loadingTip?: string;
+	enableQueryParams?: boolean | string;
+	pagination?: PaginationProps;
+	onEndReached?: (index: number) => void;
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	activeRowIndex?: number;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	getRowCanExpand?: (row: TData) => boolean;
+	/**
+	 * Primitive cell values use `--tanstack-plain-cell-*` from the scroll container when `cellTypographySize` is set.
+	 */
+	plainTextCellLineClamp?: number;
+	/** Optional CSS-module typography tier for the scroll root (`--tanstack-plain-cell-font-size` / line-height + header `th`). */
+	cellTypographySize?: CellTypographySize;
+	/** Spread onto the Virtuoso scroll container. `data` is omitted — reserved by Virtuoso. */
+	tableScrollerProps?: Omit<HTMLAttributes<HTMLDivElement>, 'data'>;
+};
+
+export type TanStackTableHandle = TableVirtuosoHandle & {
+	goToPage: (page: number) => void;
+};
+
+export type TableColumnsState<TData> = {
+	columns: TableColumnDef<TData>[];
+	columnSizing: ColumnSizingState;
+	onColumnSizingChange: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn: (id: string) => void;
+};

frontend/src/components/TanStackTableView/useTableColumns.ts

@@ -0,0 +1,200 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
+
+import { TableColumnDef, TableColumnsState } from './types';
+
+const DEBOUNCE_MS = 250;
+
+type PersistedState = {
+	columnOrder: string[];
+	columnSizing: ColumnSizingState;
+	removedColumnIds: string[];
+};
+
+const EMPTY: PersistedState = {
+	columnOrder: [],
+	columnSizing: {},
+	removedColumnIds: [],
+};
+
+function readStorage(storageKey: string): PersistedState {
+	const raw = getFromLocalstorage(storageKey);
+	if (!raw) {
+		return EMPTY;
+	}
+	try {
+		const parsed = JSON.parse(raw) as PersistedState;
+		return {
+			columnOrder: Array.isArray(parsed.columnOrder) ? parsed.columnOrder : [],
+			columnSizing:
+				parsed.columnSizing && typeof parsed.columnSizing === 'object'
+					? Object.fromEntries(
+							Object.entries(parsed.columnSizing).filter(
+								([, v]) => typeof v === 'number' && Number.isFinite(v) && v > 0,
+							),
+					  )
+					: {},
+			removedColumnIds: Array.isArray(parsed.removedColumnIds)
+				? parsed.removedColumnIds
+				: [],
+		};
+	} catch (e) {
+		console.error('useTableColumns: failed to parse storage', e);
+		return EMPTY;
+	}
+}
+
+type UseTableColumnsOptions = { storageKey?: string };
+
+type UseTableColumnsResult<TData> = {
+	tableProps: TableColumnsState<TData>;
+	activeColumnIds: string[];
+};
+
+export function useTableColumns<TData>(
+	definitions: TableColumnDef<TData>[],
+	options?: UseTableColumnsOptions,
+): UseTableColumnsResult<TData> {
+	const { storageKey } = options ?? {};
+
+	const [persisted, setPersisted] = useState<PersistedState>(() =>
+		storageKey ? readStorage(storageKey) : EMPTY,
+	);
+
+	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(
+		() => persisted.columnSizing,
+	);
+
+	const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const persistedRef = useRef(persisted);
+	persistedRef.current = persisted;
+	const columnSizingRef = useRef(columnSizing);
+	columnSizingRef.current = columnSizing;
+
+	const scheduleWrite = useCallback(() => {
+		if (!storageKey) {
+			return;
+		}
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+		}
+		pendingRef.current = setTimeout(() => {
+			setToLocalstorage(
+				storageKey,
+				JSON.stringify({
+					...persistedRef.current,
+					columnSizing: columnSizingRef.current,
+				}),
+			);
+		}, DEBOUNCE_MS);
+	}, [storageKey]);
+
+	useEffect(() => {
+		scheduleWrite();
+		return (): void => {
+			if (pendingRef.current !== null) {
+				clearTimeout(pendingRef.current);
+			}
+		};
+	}, [columnSizing, scheduleWrite]);
+
+	const handleColumnSizingChange: Dispatch<
+		SetStateAction<ColumnSizingState>
+	> = useCallback((updater) => {
+		setColumnSizing((prev) =>
+			typeof updater === 'function' ? updater(prev) : updater,
+		);
+	}, []);
+
+	const handleColumnOrderChange = useCallback(
+		(updated: TableColumnDef<TData>[]) => {
+			const newOrder = updated.map((c) => c.id);
+			setPersisted((prev) => {
+				const next = { ...prev, columnOrder: newOrder };
+				if (storageKey) {
+					setToLocalstorage(
+						storageKey,
+						JSON.stringify({
+							...next,
+							columnSizing: columnSizingRef.current,
+						}),
+					);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const handleRemoveColumn = useCallback(
+		(id: string) => {
+			setPersisted((prev) => {
+				if (prev.removedColumnIds.includes(id)) {
+					return prev;
+				}
+				const next = {
+					...prev,
+					removedColumnIds: [...prev.removedColumnIds, id],
+				};
+				if (storageKey) {
+					if (pendingRef.current !== null) {
+						clearTimeout(pendingRef.current);
+					}
+					pendingRef.current = setTimeout(() => {
+						setToLocalstorage(
+							storageKey,
+							JSON.stringify({
+								...next,
+								columnSizing: columnSizingRef.current,
+							}),
+						);
+					}, DEBOUNCE_MS);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const columns = useMemo<TableColumnDef<TData>[]>(() => {
+		const removedSet = new Set(persisted.removedColumnIds);
+		const active = definitions.filter((d) => !removedSet.has(d.id));
+
+		if (persisted.columnOrder.length === 0) {
+			return active;
+		}
+
+		const orderMap = new Map(persisted.columnOrder.map((id, i) => [id, i]));
+		const pinned = active.filter((c) => c.pin != null);
+		const rest = active.filter((c) => c.pin == null);
+		const sortedRest = [...rest].sort((a, b) => {
+			const ai = orderMap.get(a.id) ?? Infinity;
+			const bi = orderMap.get(b.id) ?? Infinity;
+			return ai - bi;
+		});
+		return [...pinned, ...sortedRest];
+	}, [definitions, persisted]);
+
+	const activeColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	return {
+		tableProps: {
+			columns,
+			columnSizing,
+			onColumnSizingChange: handleColumnSizingChange,
+			onColumnOrderChange: handleColumnOrderChange,
+			onRemoveColumn: handleRemoveColumn,
+		},
+		activeColumnIds,
+	};
+}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { SortState } from './types';
+
+const NUQS_OPTIONS = { history: 'push' as const };
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 50;
+
+type Defaults = { page?: number; limit?: number; orderBy?: SortState | null };
+
+type TableParamsResult = {
+	page: number;
+	limit: number;
+	orderBy: SortState | null;
+	setPage: (p: number) => void;
+	setLimit: (l: number) => void;
+	setOrderBy: (s: SortState | null) => void;
+};
+
+export function useTableParams(
+	enableQueryParams?: boolean | string,
+	defaults?: Defaults,
+): TableParamsResult {
+	const prefix = typeof enableQueryParams === 'string' ? enableQueryParams : '';
+	const sep = prefix ? '_' : '';
+	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
+	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
+	const orderByDefault = defaults?.orderBy ?? null;
+
+	const [localPage, setLocalPage] = useState(pageDefault);
+	const [localLimit, setLocalLimit] = useState(limitDefault);
+	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
+		orderByDefault,
+	);
+
+	const [urlPage, setUrlPage] = useQueryState(
+		`${prefix}${sep}page`,
+		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlLimit, setUrlLimit] = useQueryState(
+		`${prefix}${sep}limit`,
+		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlOrderBy, setUrlOrderBy] = useQueryState(
+		`${prefix}${sep}order_by`,
+		parseAsJsonNoValidate<SortState | null>()
+			.withDefault(orderByDefault as never)
+			.withOptions(NUQS_OPTIONS),
+	);
+
+	if (enableQueryParams) {
+		return {
+			page: urlPage,
+			limit: urlLimit,
+			orderBy: urlOrderBy as SortState | null,
+			setPage: setUrlPage,
+			setLimit: setUrlLimit,
+			setOrderBy: setUrlOrderBy,
+		};
+	}
+
+	return {
+		page: localPage,
+		limit: localLimit,
+		orderBy: localOrderBy,
+		setPage: setLocalPage,
+		setLimit: setLocalLimit,
+		setOrderBy: setLocalOrderBy,
+	};
+}

frontend/src/components/TanStackTableView/utils.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { TableColumnDef } from './types';
+
+export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
+	column.id;
+
+const REM_PX = 16;
+const MIN_WIDTH_DEFAULT_REM = 12;
+
+export const getColumnMinWidthPx = <TData>(
+	column: TableColumnDef<TData>,
+): number => {
+	if (column.width?.fixed != null) {
+		return column.width.fixed;
+	}
+	if (column.width?.min != null) {
+		return column.width.min;
+	}
+	return MIN_WIDTH_DEFAULT_REM * REM_PX;
+};
+
+export function buildTanstackColumnDef<TData>(
+	colDef: TableColumnDef<TData>,
+	isRowActive?: (row: TData) => boolean,
+): ColumnDef<TData> {
+	const isFixed = colDef.width?.fixed != null;
+	const fixedWidth = colDef.width?.fixed;
+	const minWidthPx = getColumnMinWidthPx(colDef);
+	return {
+		id: colDef.id,
+		header:
+			typeof colDef.header === 'string'
+				? colDef.header
+				: (): ReactNode =>
+						typeof colDef.header === 'function' ? colDef.header() : null,
+		accessorFn: (row: TData): unknown => {
+			if (colDef.accessorFn) {
+				return colDef.accessorFn(row);
+			}
+			if (colDef.accessorKey) {
+				return (row as Record<string, unknown>)[colDef.accessorKey];
+			}
+			return undefined;
+		},
+		enableResizing: colDef.enableResize !== false && !isFixed,
+		enableSorting: colDef.enableSort === true,
+		minSize: fixedWidth ?? minWidthPx,
+		size: colDef.width?.default ?? fixedWidth,
+		maxSize: fixedWidth,
+		cell: ({ row, getValue }): ReactNode => {
+			const rowData = row.original;
+			return colDef.cell({
+				row: rowData,
+				value: getValue(),
+				isActive: isRowActive?.(rowData) ?? false,
+				rowIndex: row.index,
+				isExpanded: row.getIsExpanded(),
+				canExpand: row.getCanExpand(),
+				toggleExpanded: (): void => {
+					row.toggleExpanded();
+				},
+			});
+		},
+	};
+}

frontend/src/constants/localStorage.ts

@@ -12,6 +12,7 @@ export enum LOCALSTORAGE {
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
+	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -13,7 +13,7 @@ import uPlot from 'uplot';
 
 import { ChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 200;
 
 export default function ChartWrapper({

frontend/src/container/FormAlertRules/index.tsx

@@ -838,22 +838,20 @@ function FormAlertRules({
 			>
 				<div className="overview-header">
 					<div className="alert-type-container">
-						{isNewRule && (
-							<Typography.Title level={5} className="alert-type-title">
-								<BellDot size={14} />
+						<Typography.Title level={5} className="alert-type-title">
+							<BellDot size={14} />
 
-								{alertDef.alertType === AlertTypes.ANOMALY_BASED_ALERT &&
-									'Anomaly Detection Alert'}
-								{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT &&
-									'Metrics Based Alert'}
-								{alertDef.alertType === AlertTypes.LOGS_BASED_ALERT &&
-									'Logs Based Alert'}
-								{alertDef.alertType === AlertTypes.TRACES_BASED_ALERT &&
-									'Traces Based Alert'}
-								{alertDef.alertType === AlertTypes.EXCEPTIONS_BASED_ALERT &&
-									'Exceptions Based Alert'}
-							</Typography.Title>
-						)}
+							{alertDef.alertType === AlertTypes.ANOMALY_BASED_ALERT &&
+								'Anomaly Detection Alert'}
+							{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT &&
+								'Metrics Based Alert'}
+							{alertDef.alertType === AlertTypes.LOGS_BASED_ALERT &&
+								'Logs Based Alert'}
+							{alertDef.alertType === AlertTypes.TRACES_BASED_ALERT &&
+								'Traces Based Alert'}
+							{alertDef.alertType === AlertTypes.EXCEPTIONS_BASED_ALERT &&
+								'Exceptions Based Alert'}
+						</Typography.Title>
 					</div>
 
 					<Button

frontend/src/container/Home/Home.tsx

@@ -264,20 +264,22 @@ export default function Home(): JSX.Element {
 
 	return (
 		<div className="home-container">
-			<PersistedAnnouncementBanner
-				type="info"
-				storageKey={LOCALSTORAGE.DISMISSED_API_KEYS_DEPRECATION_BANNER}
-				action={{
-					label: 'Go to Service Accounts',
-					onClick: (): void => history.push(ROUTES.SERVICE_ACCOUNTS_SETTINGS),
-				}}
-			>
-				<>
-					<strong>API keys</strong> have been deprecated in favour of{' '}
-					<strong>Service accounts</strong>. The existing API Keys have been migrated
-					to service accounts.
-				</>
-			</PersistedAnnouncementBanner>
+			{user?.role === USER_ROLES.ADMIN && (
+				<PersistedAnnouncementBanner
+					type="info"
+					storageKey={LOCALSTORAGE.DISMISSED_API_KEYS_DEPRECATION_BANNER}
+					action={{
+						label: 'Go to Service Accounts',
+						onClick: (): void => history.push(ROUTES.SERVICE_ACCOUNTS_SETTINGS),
+					}}
+				>
+					<>
+						<strong>API keys</strong> have been deprecated in favour of{' '}
+						<strong>Service accounts</strong>. The existing API Keys have been
+						migrated to service accounts.
+					</>
+				</PersistedAnnouncementBanner>
+			)}
 
 			<div className="sticky-header">
 				<Header

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -1,41 +1,52 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { useQuery } from 'react-query';
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { HostListPayload } from 'api/infraMonitoring/getHostLists';
+import {
+	getHostLists,
+	HostListPayload,
+	HostListResponse,
+} from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	useInfraMonitoringCurrentPage,
 	useInfraMonitoringFiltersHosts,
 	useInfraMonitoringOrderByHosts,
 } from 'container/InfraMonitoringK8s/hooks';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
-import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { Filter } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
-import { AppState } from 'store/reducers';
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { useAppContext } from 'providers/App/App';
+import { useGlobalTimeStore } from 'store/globalTime';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IBuilderQuery,
+	Query,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 
-import { FeatureKeys } from '../../constants/features';
-import { useAppContext } from '../../providers/App/App';
 import HostsListControls from './HostsListControls';
 import HostsListTable from './HostsListTable';
 import { getHostListsQuery, GetHostsQuickFiltersConfig } from './utils';
 
 import './InfraMonitoring.styles.scss';
-function HostsList(): JSX.Element {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 
+const defaultFilters: TagFilter = { items: [], op: 'and' };
+const baseQuery = getHostListsQuery();
+
+function HostsList(): JSX.Element {
 	const [currentPage, setCurrentPage] = useInfraMonitoringCurrentPage();
 	const [filters, setFilters] = useInfraMonitoringFiltersHosts();
 	const [orderBy, setOrderBy] = useInfraMonitoringOrderByHosts();
@@ -62,57 +73,49 @@ function HostsList(): JSX.Element {
 
 	const { pageSize, setPageSize } = usePageSize('hosts');
 
-	const query = useMemo(() => {
-		const baseQuery = getHostListsQuery();
-		return {
-			...baseQuery,
-			limit: pageSize,
-			offset: (currentPage - 1) * pageSize,
-			filters,
-			start: Math.floor(minTime / 1000000),
-			end: Math.floor(maxTime / 1000000),
-			orderBy,
-		};
-	}, [pageSize, currentPage, filters, minTime, maxTime, orderBy]);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
+	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
 
-	const queryKey = useMemo(() => {
-		if (selectedHostName) {
-			return [
-				'hostList',
+	const queryKey = useMemo(
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTime,
+				REACT_QUERY_KEY.GET_HOST_LIST,
 				String(pageSize),
 				String(currentPage),
 				JSON.stringify(filters),
 				JSON.stringify(orderBy),
-			];
-		}
-		return [
-			'hostList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(filters),
-			JSON.stringify(orderBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		pageSize,
-		currentPage,
-		filters,
-		orderBy,
-		selectedHostName,
-		minTime,
-		maxTime,
-	]);
-
-	const { data, isFetching, isLoading, isError } = useGetHostList(
-		query as HostListPayload,
-		{
-			queryKey,
-			enabled: !!query,
-			keepPreviousData: true,
-		},
+			),
+		[pageSize, currentPage, filters, orderBy, selectedTime],
 	);
 
+	const { data, isFetching, isLoading, isError } = useQuery<
+		SuccessResponse<HostListResponse> | ErrorResponse,
+		Error
+	>({
+		queryKey,
+		queryFn: ({ signal }) => {
+			const { minTime, maxTime } = getMinMaxTime();
+
+			const payload: HostListPayload = {
+				...baseQuery,
+				limit: pageSize,
+				offset: (currentPage - 1) * pageSize,
+				filters: filters ?? defaultFilters,
+				orderBy,
+				start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+				end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+			};
+
+			return getHostLists(payload, signal);
+		},
+		enabled: true,
+		keepPreviousData: true,
+		refetchInterval: isRefreshEnabled ? refreshInterval : false,
+	});
+
 	const hostMetricsData = useMemo(() => data?.payload?.data?.records || [], [
 		data,
 	]);
@@ -227,7 +230,7 @@ function HostsList(): JSX.Element {
 						isError={isError}
 						tableData={data}
 						hostMetricsData={hostMetricsData}
-						filters={filters || { items: [], op: 'AND' }}
+						filters={filters ?? defaultFilters}
 						currentPage={currentPage}
 						setCurrentPage={setCurrentPage}
 						onHostClick={handleHostClick}

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -10,6 +10,7 @@ import {
 } from 'antd';
 import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { InfraMonitoringEvents } from 'constants/events';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
@@ -26,9 +27,40 @@ import {
 function EmptyOrLoadingView(
 	viewState: EmptyOrLoadingViewProps,
 ): React.ReactNode {
-	const { isError, errorMessage } = viewState;
-	if (isError) {
-		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
+	if (viewState.showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
+	}
+	const { isError, data } = viewState;
+	if (isError || data?.error || (data?.statusCode || 0) >= 300) {
+		return (
+			<ErrorContent
+				error={{
+					code: data?.statusCode || 500,
+					message: data?.error || 'Something went wrong',
+				}}
+			/>
+		);
 	}
 	if (viewState.showHostsEmptyState) {
 		return (
@@ -76,30 +108,6 @@ function EmptyOrLoadingView(
 			</div>
 		);
 	}
-	if (viewState.showTableLoadingState) {
-		return (
-			<div className="hosts-list-loading-state">
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-			</div>
-		);
-	}
 	return null;
 }
 
@@ -190,7 +198,8 @@ export default function HostsListTable({
 		!isLoading &&
 		formattedHostMetricsData.length === 0 &&
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
-		!filters.items.length;
+		!filters.items.length &&
+		!endTimeBeforeRetention;
 
 	const showEndTimeBeforeRetentionMessage =
 		!isFetching &&
@@ -211,7 +220,7 @@ export default function HostsListTable({
 
 	const emptyOrLoadingView = EmptyOrLoadingView({
 		isError,
-		errorMessage: data?.error ?? '',
+		data,
 		showHostsEmptyState,
 		sentAnyHostMetricsData,
 		isSendingIncorrectK8SAgentMetrics,

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -2,8 +2,8 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-import * as useGetHostListHooks from 'hooks/infraMonitoring/useGetHostList';
+import { render, waitFor } from '@testing-library/react';
+import * as getHostListsApi from 'api/infraMonitoring/getHostLists';
 import { withNuqsTestingAdapter } from 'nuqs/adapters/testing';
 import * as appContextHooks from 'providers/App/App';
 import * as timezoneHooks from 'providers/Timezone';
@@ -19,6 +19,10 @@ jest.mock('lib/getMinMax', () => ({
 		maxTime: 1713738000000,
 		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
 	})),
+	getMinMaxForSelectedTime: jest.fn().mockReturnValue({
+		minTime: 1713734400000000000,
+		maxTime: 1713738000000000000,
+	}),
 }));
 jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	__esModule: true,
@@ -41,7 +45,13 @@ jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
 	),
 }));
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retry: false,
+		},
+	},
+});
 
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),
@@ -80,27 +90,40 @@ jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
 		offset: 0,
 	},
 } as any);
-jest.spyOn(useGetHostListHooks, 'useGetHostList').mockReturnValue({
-	data: {
-		payload: {
-			data: {
-				records: [
-					{
-						hostName: 'test-host',
-						active: true,
-						cpu: 0.75,
-						memory: 0.65,
-						wait: 0.03,
-					},
-				],
-				isSendingK8SAgentMetrics: false,
-				sentAnyHostMetricsData: true,
-			},
+
+jest.spyOn(getHostListsApi, 'getHostLists').mockResolvedValue({
+	statusCode: 200,
+	error: null,
+	message: 'Success',
+	payload: {
+		status: 'success',
+		data: {
+			type: 'list',
+			records: [
+				{
+					hostName: 'test-host',
+					active: true,
+					os: 'linux',
+					cpu: 0.75,
+					cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					memory: 0.65,
+					memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					wait: 0.03,
+					waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					load15: 0.5,
+					load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
+				},
+			],
+			groups: null,
+			total: 1,
+			sentAnyHostMetricsData: true,
+			isSendingK8SAgentMetrics: false,
+			endTimeBeforeRetention: false,
 		},
 	},
-	isLoading: false,
-	isError: false,
-} as any);
+	params: {} as any,
+});
+
 jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	user: {
 		role: 'admin',
@@ -128,22 +151,11 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 const Wrapper = withNuqsTestingAdapter({ searchParams: {} });
 
 describe('HostsList', () => {
-	it('renders hosts list table', () => {
-		const { container } = render(
-			<Wrapper>
-				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
-						<Provider store={store}>
-							<HostsList />
-						</Provider>
-					</MemoryRouter>
-				</QueryClientProvider>
-			</Wrapper>,
-		);
-		expect(container.querySelector('.hosts-list-table')).toBeInTheDocument();
+	beforeEach(() => {
+		queryClient.clear();
 	});
 
-	it('renders filters', () => {
+	it('renders hosts list table', async () => {
 		const { container } = render(
 			<Wrapper>
 				<QueryClientProvider client={queryClient}>
@@ -155,6 +167,25 @@ describe('HostsList', () => {
 				</QueryClientProvider>
 			</Wrapper>,
 		);
-		expect(container.querySelector('.filters')).toBeInTheDocument();
+		await waitFor(() => {
+			expect(container.querySelector('.hosts-list-table')).toBeInTheDocument();
+		});
+	});
+
+	it('renders filters', async () => {
+		const { container } = render(
+			<Wrapper>
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter>
+						<Provider store={store}>
+							<HostsList />
+						</Provider>
+					</MemoryRouter>
+				</QueryClientProvider>
+			</Wrapper>,
+		);
+		await waitFor(() => {
+			expect(container.querySelector('.filters')).toBeInTheDocument();
+		});
 	});
 });

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,8 +1,13 @@
 import { Dispatch, SetStateAction } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag, Tooltip, Typography } from 'antd';
-import { TableColumnType as ColumnType } from 'antd';
+import {
+	Progress,
+	TableColumnType as ColumnType,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
 import { SortOrder } from 'antd/lib/table/interface';
 import {
 	HostData,
@@ -13,8 +18,6 @@ import {
 	FiltersType,
 	IQuickFiltersConfig,
 } from 'components/QuickFilters/types';
-import TabLabel from 'components/TabLabel';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { TriangleAlert } from 'lucide-react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -22,9 +25,6 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { OrderBySchemaType } from '../InfraMonitoringK8s/schemas';
-import HostsList from './HostsList';
-
-import './InfraMonitoring.styles.scss';
 
 export interface HostRowData {
 	key?: string;
@@ -112,7 +112,10 @@ export interface HostsListTableProps {
 
 export interface EmptyOrLoadingViewProps {
 	isError: boolean;
-	errorMessage: string;
+	data:
+		| ErrorResponse<string>
+		| SuccessResponse<HostListResponse, unknown>
+		| undefined;
 	showHostsEmptyState: boolean;
 	sentAnyHostMetricsData: boolean;
 	isSendingIncorrectK8SAgentMetrics: boolean;
@@ -141,14 +144,6 @@ function mapOrderByToSortOrder(
 		: undefined;
 }
 
-export const getTabsItems = (): TabsProps['items'] => [
-	{
-		label: <TabLabel label="List View" isDisabled={false} tooltipText="" />,
-		key: PANEL_TYPES.LIST,
-		children: <HostsList />,
-	},
-];
-
 export const getHostsListColumns = (
 	orderBy: OrderBySchemaType,
 ): ColumnType<HostRowData>[] => [

frontend/src/container/LiveLogs/LiveLogsContainer/LiveLogsContainer.styles.scss

@@ -1,3 +1,16 @@
+.live-logs-container {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+.live-logs-content {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-height: 0;
+}
+
 .live-logs-chart-container {
 	height: 200px;
 	min-height: 200px;
@@ -5,6 +18,12 @@
 	border-right: none;
 }
 
+.live-logs-list-container {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
 .live-logs-settings-panel {
 	display: flex;
 	align-items: center;

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -18,6 +18,19 @@
 }
 
 .live-logs-list {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-height: 0;
+
+	.ant-card,
+	.ant-card-body {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+		flex-direction: column;
+	}
+
 	.live-logs-list-loading {
 		padding: 16px;
 		text-align: center;

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -1,14 +1,26 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
-import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
+import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
@@ -16,6 +28,7 @@ import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -30,7 +43,10 @@ function LiveLogsList({
 	isLoading,
 	handleChangeSelectedView,
 }: LiveLogsListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();
 
 	const { isConnectionLoading } = useEventSource();
 
@@ -50,7 +66,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -66,9 +82,46 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<HTMLElement>): void => {
+			event.preventDefault();
+			event.stopPropagation();
+			const urlQuery = new URLSearchParams(window.location.search);
+			urlQuery.delete(QueryParams.activeLogId);
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.activeLogId, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs: formattedLogs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});
 
 	const getItemContent = useCallback(
@@ -158,28 +211,48 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<InfinityTableView
-							ref={ref}
+						<TanStackTable
+							ref={ref as React.Ref<TanStackTableHandle>}
+							{...tableProps}
+							plainTextCellLineClamp={options.maxLines}
+							cellTypographySize={options.fontSize}
+							onRemoveColumn={handleRemoveColumn}
+							data={formattedLogs}
 							isLoading={false}
-							tableViewProps={{
-								logs: formattedLogs,
-								fields: selectedFields,
-								linesPerRow: options.maxLines,
-								fontSize: options.fontSize,
-								appendTo: 'end',
-								activeLogIndex,
+							isRowActive={(log): boolean => log.id === activeLog?.id}
+							getRowStyle={(log): CSSProperties =>
+								({
+									'--row-active-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+									'--row-hover-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+								} as CSSProperties)
+							}
+							onRowClick={(log): void => {
+								handleSetActiveLog(log);
 							}}
-							handleChangeSelectedView={handleChangeSelectedView}
-							logs={formattedLogs}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-							activeLog={activeLog}
+							onRowDeactivate={handleCloseLogDetail}
+							activeRowIndex={activeLogIndex}
+							renderRowActions={(log): ReactNode => (
+								<LogLinesActionButtons
+									handleShowContext={(e): void => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+									}}
+									onLogCopy={makeOnLogCopy(log)}
+								/>
+							)}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<OverlayScrollbar isVirtuoso>
 								<Virtuoso
-									ref={ref}
+									ref={ref as React.Ref<VirtuosoHandle>}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 									data={formattedLogs}
 									totalCount={formattedLogs.length}

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -221,7 +221,7 @@ function ColumnView({
 		onColumnOrderChange(formattedColumns);
 	};
 
-	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
+	const handleRowClick = (row: Row<Record<string, string>>): void => {
 		const currentLog = logs.find(({ id }) => id === row.original.id);
 
 		setShowActiveLog(true);

frontend/src/container/LogsExplorerList/InfinityTableView/config.ts

@@ -4,18 +4,11 @@ import { FontSize } from 'container/OptionsMenu/types';
 export const infinityDefaultStyles: CSSProperties = {
 	width: '100%',
 	overflowX: 'scroll',
-	marginTop: '15px',
 };
 
-export function getInfinityDefaultStyles(fontSize: FontSize): CSSProperties {
+export function getInfinityDefaultStyles(_fontSize: FontSize): CSSProperties {
 	return {
 		width: '100%',
 		overflowX: 'scroll',
-		marginTop:
-			fontSize === FontSize.SMALL
-				? '10px'
-				: fontSize === FontSize.MEDIUM
-				? '12px'
-				: '15px',
 	};
 }

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -14,6 +14,78 @@ interface TableHeaderCellStyledProps {
 
 export const TableStyled = styled.table`
 	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+`;
+
+/**
+ * TanStack column sizing uses table-layout:fixed + colgroup widths; without clipping,
+ * cell content overflows visually on top of neighbouring columns (overlap / "ghost" text).
+ */
+export const TanStackTableStyled = styled(TableStyled)`
+	table-layout: fixed;
+	width: 100%;
+	min-width: 100%;
+	max-width: 100%;
+
+	& td,
+	& th {
+		overflow: hidden;
+		min-width: 0;
+		box-sizing: border-box;
+		vertical-align: middle;
+	}
+
+	& td.table-actions-cell {
+		overflow: visible;
+	}
+
+	& td.body {
+		word-break: break-word;
+		overflow-wrap: anywhere;
+	}
+
+	/* Let nested body HTML / line-clamp shrink inside fixed columns */
+	& td.body > * {
+		min-width: 0;
+		max-width: 100%;
+	}
+
+	/* Long column titles: ellipsis when wider than the column (TanStackHeaderRow) */
+	& thead th .tanstack-header-title {
+		min-width: 0;
+		flex: 1 1 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	& thead th .tanstack-header-title > * {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+	}
+
+	& td.logs-table-filler-cell,
+	& th.logs-table-filler-header {
+		padding: 0 !important;
+		min-width: 0;
+		border-left: none;
+	}
+
+	& th.logs-table-actions-header {
+		position: sticky;
+		right: 0;
+		z-index: 2;
+		width: 0 !important;
+		min-width: 0 !important;
+		max-width: 0 !important;
+		padding: 0 !important;
+		overflow: visible;
+		white-space: nowrap;
+		border-left: none;
+	}
 `;
 
 const getTimestampColumnWidth = (
@@ -46,6 +118,19 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 
 	${({ columnKey, $hasSingleColumn }): string =>
 		getTimestampColumnWidth(columnKey, $hasSingleColumn)}
+
+	&.table-actions-cell {
+		position: sticky;
+		right: 0;
+		z-index: 2;
+		width: 0;
+		min-width: 0;
+		max-width: 0;
+		padding: 0 !important;
+		white-space: nowrap;
+		overflow: visible;
+		background-color: inherit;
+	}
 `;
 
 export const TableRowStyled = styled.tr<{
@@ -64,7 +149,10 @@ export const TableRowStyled = styled.tr<{
 	position: relative;
 
 	.log-line-action-buttons {
-		display: none;
+		display: flex;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 80ms linear;
 	}
 
 	&:hover {
@@ -73,13 +161,25 @@ export const TableRowStyled = styled.tr<{
 				getActiveLogBackground(true, $isDarkMode, $logType)}
 		}
 		.log-line-action-buttons {
-			display: flex;
+			opacity: 1;
+			pointer-events: auto;
 		}
 	}
+	${({ $isActiveLog }): string =>
+		$isActiveLog
+			? `
+		.log-line-action-buttons {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	`
+			: ''}
 `;
 
 export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 	padding: 0.5rem;
+	height: 36px;
+	text-align: left;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -98,6 +198,12 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 			: ``};
 	${({ $isLogIndicator }): string =>
 		$isLogIndicator ? 'padding: 0px; width: 1%;' : ''}
+	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
+	box-shadow: inset 0 -1px 0 var(--l2-border);
+	&:first-child {
+		border-left: 1px solid var(--l2-border);
+	}
 	color: ${(props): string =>
 		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
 

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -5,6 +5,8 @@ import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
+	isFetching?: boolean;
+	onRemoveColumn?: (columnKey: string) => void;
 	tableViewProps: Omit<UseTableViewProps, 'onOpenLogsContext' | 'onClickExpand'>;
 	infitiyTableProps?: {
 		onEndReached: (index: number) => void;

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -8,7 +8,7 @@
 	line-height: 18px;
 	letter-spacing: -0.005em;
 	text-align: left;
-	min-height: 500px;
+	min-height: 0;
 
 	.logs-list-table-view-container {
 		.data-table-container {
@@ -24,11 +24,11 @@
 						color: white !important;
 
 						.cursor-col-resize {
-							width: 3px !important;
+							width: 24px !important;
 							cursor: col-resize !important;
-							opacity: 0.5 !important;
-							background-color: var(--bg-ink-500) !important;
-							border: 1px solid var(--bg-ink-500) !important;
+							opacity: 1 !important;
+							background-color: transparent !important;
+							border: none !important;
 
 							&:hover {
 								opacity: 1 !important;
@@ -85,7 +85,7 @@
 			}
 
 			thead {
-				z-index: 0 !important;
+				z-index: 2 !important;
 			}
 
 			.log-state-indicator {

frontend/src/container/LogsExplorerList/index.tsx

@@ -1,16 +1,28 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-// components
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
@@ -19,13 +31,13 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import APIError from 'types/api/error';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import NoLogs from '../NoLogs/NoLogs';
-import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
 import {
@@ -50,7 +62,10 @@ function LogsExplorerList({
 	isFilterApplied,
 	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();
 	const { activeLogId } = useCopyLogLink();
 
 	const {
@@ -61,7 +76,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -84,9 +99,46 @@ function LogsExplorerList({
 		[options],
 	);
 
+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<HTMLElement>): void => {
+			event.preventDefault();
+			event.stopPropagation();
+			const urlQuery = new URLSearchParams(window.location.search);
+			urlQuery.delete(QueryParams.activeLogId);
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.activeLogId, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});
 
 	useEffect(() => {
@@ -155,23 +207,46 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<InfinityTableView
-					ref={ref}
-					isLoading={isLoading}
-					tableViewProps={{
-						logs,
-						fields: selectedFields,
-						linesPerRow: options.maxLines,
-						fontSize: options.fontSize,
-						appendTo: 'end',
-						activeLogIndex,
+				<TanStackTable
+					ref={ref as React.Ref<TanStackTableHandle>}
+					{...tableProps}
+					plainTextCellLineClamp={options.maxLines}
+					cellTypographySize={options.fontSize}
+					onRemoveColumn={handleRemoveColumn}
+					data={logs}
+					isLoading={isLoading || isFetching}
+					loadingTip="Getting Logs"
+					onEndReached={onEndReached}
+					isRowActive={(log): boolean =>
+						log.id === activeLog?.id || log.id === activeLogId
+					}
+					getRowStyle={(log): CSSProperties =>
+						({
+							'--row-active-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+							'--row-hover-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+						} as CSSProperties)
+					}
+					onRowClick={(log): void => {
+						handleSetActiveLog(log);
 					}}
-					infitiyTableProps={{ onEndReached }}
-					handleChangeSelectedView={handleChangeSelectedView}
-					logs={logs}
-					onSetActiveLog={handleSetActiveLog}
-					onClearActiveLog={handleCloseLogDetail}
-					activeLog={activeLog}
+					onRowDeactivate={handleCloseLogDetail}
+					activeRowIndex={activeLogIndex}
+					renderRowActions={(log): ReactNode => (
+						<LogLinesActionButtons
+							handleShowContext={(e): void => {
+								e.preventDefault();
+								e.stopPropagation();
+								handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+							}}
+							onLogCopy={makeOnLogCopy(log)}
+						/>
+					)}
 				/>
 			);
 		}
@@ -196,7 +271,7 @@ function LogsExplorerList({
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
 						key={activeLogIndex || 'logs-virtuoso'}
-						ref={ref}
+						ref={ref as React.Ref<VirtuosoHandle>}
 						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 						data={logs}
 						endReached={onEndReached}
@@ -216,11 +291,14 @@ function LogsExplorerList({
 		logs,
 		onEndReached,
 		getItemContent,
-		selectedFields,
-		handleChangeSelectedView,
+		isFetching,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
+		tableProps,
+		handleRemoveColumn,
+		isDarkMode,
+		makeOnLogCopy,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {

frontend/src/container/LogsExplorerList/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const InfinityWrapperStyled = styled.div`
 	flex: 1;
-	height: 40rem !important;
 	display: flex;
 	height: 100%;
+	min-height: 0;
 `;

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -1,6 +1,7 @@
 .logs-explorer-views-container {
 	margin-bottom: 24px;
 	flex: 1;
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
 
@@ -9,6 +10,7 @@
 		display: flex;
 		flex-direction: column;
 		flex: 1;
+		min-height: 0;
 		padding-bottom: 10px;
 
 		.views-tabs-container {
@@ -195,6 +197,7 @@
 
 		.logs-explorer-views-type-content {
 			flex: 1;
+			min-height: 0;
 			display: flex;
 			flex-direction: column;
 
@@ -210,12 +213,32 @@
 				}
 			}
 
+			.table-view-container {
+				flex: 1;
+				min-height: 0;
+				overflow-y: visible;
+			}
+
 			.time-series-view-container {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+				overflow-y: visible;
+
 				.time-series-view-container-header {
 					display: flex;
 					justify-content: flex-start;
 					align-items: center;
 					padding: 12px;
+					flex-shrink: 0;
+				}
+
+				.time-series-view {
+					flex-shrink: 0;
+					height: 65vh;
+					min-height: 450px;
+					padding-bottom: 140px;
 				}
 			}
 		}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -499,16 +499,18 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
-						<LogsExplorerTable
-							data={
-								(data?.payload?.data?.newResult?.data?.result ||
-									data?.payload?.data?.result ||
-									[]) as QueryDataV3[]
-							}
-							isLoading={isLoading || isFetching}
-							isError={isError}
-							error={error as APIError}
-						/>
+						<div className="table-view-container">
+							<LogsExplorerTable
+								data={
+									(data?.payload?.data?.newResult?.data?.result ||
+										data?.payload?.data?.result ||
+										[]) as QueryDataV3[]
+								}
+								isLoading={isLoading || isFetching}
+								isError={isError}
+								error={error as APIError}
+							/>
+						</div>
 					)}
 				</div>
 			</div>

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,17 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/button';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
-import getAll from 'api/v1/user/get';
+import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useAppContext } from 'providers/App/App';
 import { toISOString } from 'utils/app';
 
 import { FilterMode, MemberStatus, toMemberStatus } from './utils';
@@ -21,7 +19,6 @@ import './MembersSettings.styles.scss';
 const PAGE_SIZE = 20;
 
 function MembersSettings(): JSX.Element {
-	const { org } = useAppContext();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
 
@@ -34,18 +31,14 @@ function MembersSettings(): JSX.Element {
 	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
 	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
 
-	const { data: usersData, isLoading, refetch: refetchUsers } = useQuery({
-		queryFn: getAll,
-		queryKey: ['getOrgUser', org?.[0]?.id],
-	});
+	const { data: usersData, isLoading, refetch: refetchUsers } = useListUsers();
 
 	const allMembers = useMemo(
 		(): MemberRow[] =>
 			(usersData?.data ?? []).map((user) => ({
 				id: user.id,
 				name: user.displayName,
-				email: user.email,
-				role: user.role,
+				email: user.email ?? '',
 				status: toMemberStatus(user.status ?? ''),
 				joinedOn: toISOString(user.createdAt),
 				updatedAt: toISOString(user?.updatedAt),
@@ -58,15 +51,15 @@ function MembersSettings(): JSX.Element {
 
 		if (filterMode === FilterMode.Invited) {
 			result = result.filter((m) => m.status === MemberStatus.Invited);
+		} else if (filterMode === FilterMode.Deleted) {
+			result = result.filter((m) => m.status === MemberStatus.Deleted);
 		}
 
 		if (searchQuery.trim()) {
 			const q = searchQuery.toLowerCase();
 			result = result.filter(
 				(m) =>
-					m?.name?.toLowerCase().includes(q) ||
-					m.email.toLowerCase().includes(q) ||
-					m.role.toLowerCase().includes(q),
+					m?.name?.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
 			);
 		}
 
@@ -98,6 +91,9 @@ function MembersSettings(): JSX.Element {
 	const pendingCount = allMembers.filter(
 		(m) => m.status === MemberStatus.Invited,
 	).length;
+	const deletedCount = allMembers.filter(
+		(m) => m.status === MemberStatus.Deleted,
+	).length;
 	const totalCount = allMembers.length;
 
 	const filterMenuItems: MenuProps['items'] = [
@@ -127,12 +123,27 @@ function MembersSettings(): JSX.Element {
 				setPage(1);
 			},
 		},
+		{
+			key: FilterMode.Deleted,
+			label: (
+				<div className="members-filter-option">
+					<span>Deleted ⎯ {deletedCount}</span>
+					{filterMode === FilterMode.Deleted && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Deleted);
+				setPage(1);
+			},
+		},
 	];
 
 	const filterLabel =
 		filterMode === FilterMode.All
 			? `All members ⎯ ${totalCount}`
-			: `Pending invites ⎯ ${pendingCount}`;
+			: filterMode === FilterMode.Invited
+			? `Pending invites ⎯ ${pendingCount}`
+			: `Deleted ⎯ ${deletedCount}`;
 
 	const handleInviteComplete = useCallback((): void => {
 		refetchUsers();
@@ -148,7 +159,6 @@ function MembersSettings(): JSX.Element {
 
 	const handleMemberEditComplete = useCallback((): void => {
 		refetchUsers();
-		setSelectedMember(null);
 	}, [refetchUsers]);
 
 	return (
@@ -181,7 +191,7 @@ function MembersSettings(): JSX.Element {
 					<div className="members-settings__search">
 						<Input
 							type="search"
-							placeholder="Search by name, email, or role..."
+							placeholder="Search by name or email..."
 							value={searchQuery}
 							onChange={(e): void => {
 								setSearchQuery(e.target.value);

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,6 +1,6 @@
+import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { UserResponse } from 'types/api/user/getUser';
 
 import MembersSettings from '../MembersSettings';
 
@@ -11,47 +11,39 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
-const USERS_ENDPOINT = '*/api/v1/user';
+const USERS_ENDPOINT = '*/api/v2/users';
 
-const mockUsers: UserResponse[] = [
+const mockUsers: TypesUserDTO[] = [
 	{
 		id: 'user-1',
 		displayName: 'Alice Smith',
 		email: 'alice@signoz.io',
-		role: 'ADMIN',
 		status: 'active',
-		createdAt: '2024-01-01T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-01T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'user-2',
 		displayName: 'Bob Jones',
 		email: 'bob@signoz.io',
-		role: 'VIEWER',
 		status: 'active',
-		createdAt: '2024-01-02T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-02T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'inv-1',
 		displayName: '',
 		email: 'charlie@signoz.io',
-		role: 'EDITOR',
 		status: 'pending_invite',
-		createdAt: '2024-01-03T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-03T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'user-3',
 		displayName: 'Dave Deleted',
 		email: 'dave@signoz.io',
-		role: 'VIEWER',
 		status: 'deleted',
-		createdAt: '2024-01-04T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-04T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 ];
@@ -106,7 +98,7 @@ describe('MembersSettings (integration)', () => {
 		await screen.findByText('Alice Smith');
 
 		await user.type(
-			screen.getByPlaceholderText(/Search by name, email, or role/i),
+			screen.getByPlaceholderText(/Search by name or email/i),
 			'bob',
 		);
 
@@ -125,14 +117,14 @@ describe('MembersSettings (integration)', () => {
 		await screen.findByText('Member Details');
 	});
 
-	it('does not open EditMemberDrawer when a deleted member row is clicked', async () => {
+	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		render(<MembersSettings />);
 
 		await user.click(await screen.findByText('Dave Deleted'));
 
-		expect(screen.queryByText('Member Details')).not.toBeInTheDocument();
+		expect(screen.queryByText('Member Details')).toBeInTheDocument();
 	});
 
 	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {