fix(run-button): wrong validation when click into the button directly

.gitignore

@@ -51,8 +51,6 @@ 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/

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

ee/query-service/rules/anomaly.go

@@ -49,6 +49,7 @@ 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))
@@ -58,44 +59,44 @@ func NewAnomalyRule(
 		return nil, err
 	}
 
-	r := AnomalyRule{
+	t := AnomalyRule{
 		BaseRule: baseRule,
-		querier:  querier,
-		version:  p.Version,
-		logger:   logger.With(slog.String("rule.id", id)),
 	}
 
 	switch p.RuleCondition.Seasonality {
 	case ruletypes.SeasonalityHourly:
-		r.seasonality = anomaly.SeasonalityHourly
+		t.seasonality = anomaly.SeasonalityHourly
 	case ruletypes.SeasonalityDaily:
-		r.seasonality = anomaly.SeasonalityDaily
+		t.seasonality = anomaly.SeasonalityDaily
 	case ruletypes.SeasonalityWeekly:
-		r.seasonality = anomaly.SeasonalityWeekly
+		t.seasonality = anomaly.SeasonalityWeekly
 	default:
-		r.seasonality = anomaly.SeasonalityDaily
+		t.seasonality = anomaly.SeasonalityDaily
 	}
 
-	r.logger.Info("using seasonality", slog.String("rule.seasonality", r.seasonality.StringValue()))
+	logger.Info("using seasonality", slog.String("rule.id", id), slog.String("rule.seasonality", t.seasonality.StringValue()))
 
-	if r.seasonality == anomaly.SeasonalityHourly {
-		r.provider = anomaly.NewHourlyProvider(
+	if t.seasonality == anomaly.SeasonalityHourly {
+		t.provider = anomaly.NewHourlyProvider(
 			anomaly.WithQuerier[*anomaly.HourlyProvider](querier),
-			anomaly.WithLogger[*anomaly.HourlyProvider](r.logger),
+			anomaly.WithLogger[*anomaly.HourlyProvider](logger),
 		)
-	} else if r.seasonality == anomaly.SeasonalityDaily {
-		r.provider = anomaly.NewDailyProvider(
+	} else if t.seasonality == anomaly.SeasonalityDaily {
+		t.provider = anomaly.NewDailyProvider(
 			anomaly.WithQuerier[*anomaly.DailyProvider](querier),
-			anomaly.WithLogger[*anomaly.DailyProvider](r.logger),
+			anomaly.WithLogger[*anomaly.DailyProvider](logger),
 		)
-	} else if r.seasonality == anomaly.SeasonalityWeekly {
-		r.provider = anomaly.NewWeeklyProvider(
+	} else if t.seasonality == anomaly.SeasonalityWeekly {
+		t.provider = anomaly.NewWeeklyProvider(
 			anomaly.WithQuerier[*anomaly.WeeklyProvider](querier),
-			anomaly.WithLogger[*anomaly.WeeklyProvider](r.logger),
+			anomaly.WithLogger[*anomaly.WeeklyProvider](logger),
 		)
 	}
 
-	return &r, nil
+	t.querier = querier
+	t.version = p.Version
+	t.logger = logger
+	return &t, nil
 }
 
 func (r *AnomalyRule) Type() ruletypes.RuleType {
@@ -103,11 +104,8 @@ 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.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.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()))
 
 	startTs, endTs := r.Timestamps(ts)
 	start, end := startTs.UnixMilli(), endTs.UnixMilli()
@@ -147,7 +145,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	}
 
 	if queryResult == nil {
-		r.logger.WarnContext(ctx, "nil qb result", slog.Int64("ts", ts.UnixMilli()))
+		r.logger.WarnContext(ctx, "nil qb result", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()))
 		return ruletypes.Vector{}, nil
 	}
 
@@ -158,7 +156,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")
+		r.logger.WarnContext(ctx, "no anomaly result", slog.String("rule.id", r.ID()))
 		return ruletypes.Vector{}, nil
 	}
 
@@ -166,7 +164,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("anomaly.scores", string(scoresJSON)))
+	r.logger.InfoContext(ctx, "anomaly scores", slog.String("rule.id", r.ID()), slog.String("anomaly.scores", string(scoresJSON)))
 
 	// Filter out new series if newGroupEvalDelay is configured
 	seriesToProcess := queryResult.Aggregations[0].AnomalyScores
@@ -174,7 +172,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", errors.Attr(filterErr))
+			r.logger.ErrorContext(ctx, "error filtering new series", slog.String("rule.id", r.ID()), errors.Attr(filterErr))
 		} else {
 			seriesToProcess = filteredSeries
 		}
@@ -182,11 +180,7 @@ 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.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.String("rule.id", r.ID()), 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{
@@ -210,7 +204,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")
+	r.logger.InfoContext(ctx, "running query", slog.String("rule.id", r.ID()))
 	res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
 
 	if err != nil {
@@ -236,10 +230,7 @@ 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("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("rule.id", r.ID()), 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
@@ -259,7 +250,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", errors.Attr(err), slog.Any("alert.template_data", tmplData))
+				r.logger.ErrorContext(ctx, "expanding alert template failed", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.template_data", tmplData))
 			}
 			return result
 		}
@@ -289,7 +280,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.Any("alert", alerts[h]))
+			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.String("rule.id", r.ID()), 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
 		}
@@ -308,7 +299,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 	}
 
-	r.logger.InfoContext(ctx, "number of alerts found", slog.Int("alert.count", len(alerts)))
+	r.logger.InfoContext(ctx, "number of alerts found", slog.String("rule.id", r.ID()), 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.
@@ -335,7 +326,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", errors.Attr(err), slog.Any("alert.labels", a.Labels))
+			r.logger.ErrorContext(ctx, "error marshaling labels", slog.String("rule.id", r.ID()), 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
@@ -390,7 +381,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.Any("alert.state", state))
+			r.logger.DebugContext(ctx, "converting alert state", slog.String("rule.id", r.ID()), slog.Any("alert.state", state))
 			itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
 				RuleID:       r.ID(),
 				RuleName:     r.Name(),
@@ -413,7 +404,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		itemsToAdd[idx] = item
 	}
 
-	_ = r.RecordRuleStateHistory(ctx, itemsToAdd)
+	r.RecordRuleStateHistory(ctx, prevState, currentState, itemsToAdd)
 
 	return len(r.Active), nil
 }

frontend/src/AppRoutes/Private.tsx

@@ -1,4 +1,4 @@
-import { ReactChild, useCallback, useMemo } from 'react';
+import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -8,10 +8,12 @@ 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 { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
+import { Organization } from 'types/api/user/getOrganization';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -23,7 +25,6 @@ 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;
@@ -56,12 +57,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const currentRoute = mapRoutes.get('current');
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const orgData = useMemo(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			return org[0];
-		}
-		return undefined;
-	}, [org]);
+	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
 
 	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
 		query: {
@@ -79,7 +75,214 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return remainingUsers.length === 1;
 	}, [usersData?.data]);
 
-	// Handle old routes - redirect to new routes
+	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]);
+
 	if (isOldRoute) {
 		const redirectUrl = oldNewRoutesMapping[pathname];
 		return (
@@ -93,143 +296,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 	}
 
-	// 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} />;
-	}
-
+	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }
 

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

@@ -6,6 +6,7 @@ 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 {
@@ -21,6 +22,19 @@ 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', () => ({
@@ -225,18 +239,20 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 }
 
 // Generic assertion helpers for navigation behavior
-// Using location-based assertions since Private.tsx now uses Redirect component
+// Using these allows easier refactoring when switching from history.push to Redirect component
 
 async function assertRedirectsTo(targetRoute: string): Promise<void> {
 	await waitFor(() => {
-		expect(screen.getByTestId('location-display')).toHaveTextContent(targetRoute);
+		expect(mockHistoryPush).toHaveBeenCalledWith(targetRoute);
 	});
 }
 
-function assertStaysOnRoute(expectedRoute: string): void {
-	expect(screen.getByTestId('location-display')).toHaveTextContent(
-		expectedRoute,
-	);
+function assertNoRedirect(): void {
+	expect(mockHistoryPush).not.toHaveBeenCalled();
+}
+
+function assertDoesNotRedirectTo(targetRoute: string): void {
+	expect(mockHistoryPush).not.toHaveBeenCalledWith(targetRoute);
 }
 
 function assertRendersChildren(): void {
@@ -334,7 +350,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute('/public/dashboard/abc123');
+			assertNoRedirect();
 		});
 
 		it('should render children for public dashboard route when logged in without redirecting', () => {
@@ -346,7 +362,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
-			assertStaysOnRoute('/public/dashboard/abc123');
+			assertNoRedirect();
 		});
 	});
 
@@ -404,7 +420,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute(ROUTES.HOME);
+			assertNoRedirect();
 		});
 
 		it('should redirect to unauthorized when VIEWER tries to access admin-only route /alerts/new', async () => {
@@ -513,7 +529,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: true },
 			});
 
-			assertStaysOnRoute(ROUTES.SOMETHING_WENT_WRONG);
+			assertDoesNotRedirectTo(ROUTES.HOME);
 		});
 	});
 
@@ -525,7 +541,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should not redirect - login page handles its own routing
-			assertStaysOnRoute(ROUTES.LOGIN);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits signup page', () => {
@@ -534,7 +550,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.SIGN_UP);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits password reset page', () => {
@@ -543,7 +559,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.PASSWORD_RESET);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits forgot password page', () => {
@@ -552,7 +568,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.FORGOT_PASSWORD);
+			assertNoRedirect();
 		});
 	});
 
@@ -641,7 +657,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Admin should be able to access settings even when workspace is blocked
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/billing when workspace is blocked', () => {
@@ -657,7 +673,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.BILLING);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/org-settings when workspace is blocked', () => {
@@ -673,7 +689,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.ORG_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/members when workspace is blocked', () => {
@@ -689,7 +705,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.MEMBERS_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/my-settings when workspace is blocked', () => {
@@ -705,7 +721,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.MY_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
@@ -816,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
@@ -833,7 +849,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 	});
 
@@ -903,7 +919,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect self-hosted users to workspace access restricted when license is terminated', () => {
@@ -920,7 +936,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect when license is ACTIVE', () => {
@@ -937,7 +953,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect when license is EVALUATING', () => {
@@ -954,7 +970,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -990,7 +1006,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
@@ -1007,7 +1023,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 	});
 
@@ -1027,11 +1043,6 @@ 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);
 		});
 
@@ -1047,7 +1058,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when onboarding is already complete', async () => {
@@ -1073,7 +1084,7 @@ describe('PrivateRoute', () => {
 
 			// Critical: if isOnboardingComplete check is broken (always false),
 			// this test would fail because all other conditions for redirect ARE met
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding for non-cloud users', () => {
@@ -1088,7 +1099,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when on /workspace-locked route', () => {
@@ -1103,7 +1114,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when on /workspace-suspended route', () => {
@@ -1118,7 +1129,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
@@ -1145,7 +1156,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should NOT redirect to onboarding - user needs to access billing to fix payment
-			assertStaysOnRoute(ROUTES.BILLING);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
@@ -1169,7 +1180,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
@@ -1196,7 +1207,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_SUSPENDED, not ONBOARDING
-			await assertRedirectsTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
@@ -1223,7 +1234,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_ACCESS_RESTRICTED, not ONBOARDING
-			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
@@ -1249,7 +1260,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 	});
 
@@ -1291,7 +1302,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 
 		it('should not redirect when on GET_STARTED and ONBOARDING_V3 feature flag is not present', () => {
@@ -1303,7 +1314,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 
 		it('should not redirect when on different route even if ONBOARDING_V3 is active', () => {
@@ -1323,7 +1334,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 	});
 
@@ -1339,7 +1350,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not fetch users when org data is not available', () => {
@@ -1382,7 +1393,9 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -1423,40 +1436,22 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(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 }),
-				},
+		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);
 			});
-
-			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 () => {
@@ -1486,7 +1481,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
+			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
 		});
 
 		it('should allow EDITOR to access /get-started route', () => {
@@ -1498,7 +1493,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
 		});
 	});
 

frontend/src/__tests__/query_range_v5.util.ts

@@ -0,0 +1,126 @@
+import { rest, RestRequest } from 'msw';
+
+import { ENVIRONMENT } from '../constants/env';
+import { server } from '../mocks-server/server';
+import { MetricRangePayloadV5 } from '../types/api/v5/queryRange';
+
+const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
+
+export type MockLogsOptions = {
+	offset?: number;
+	pageSize?: number;
+	hasMore?: boolean;
+	delay?: number;
+	onReceiveRequest?: (
+		req: RestRequest,
+	) =>
+		| undefined
+		| void
+		| Omit<MockLogsOptions, 'onReceiveRequest'>
+		| Promise<Omit<MockLogsOptions, 'onReceiveRequest'>>
+		| Promise<void>;
+};
+
+const createLogsResponse = ({
+	offset = 0,
+	pageSize = 100,
+	hasMore = true,
+}: MockLogsOptions): MetricRangePayloadV5 => {
+	const itemsForThisPage = hasMore ? pageSize : pageSize / 2;
+
+	return {
+		data: {
+			type: 'raw',
+			data: {
+				results: [
+					{
+						queryName: 'A',
+						rows: Array.from({ length: itemsForThisPage }, (_, index) => {
+							const cumulativeIndex = offset + index;
+							const baseTimestamp = new Date('2024-02-15T21:20:22Z').getTime();
+							const currentTimestamp = new Date(
+								baseTimestamp - cumulativeIndex * 1000,
+							);
+							const timestampString = currentTimestamp.toISOString();
+							const id = `log-id-${cumulativeIndex}`;
+							const logLevel = ['INFO', 'WARN', 'ERROR'][cumulativeIndex % 3];
+							const service = ['frontend', 'backend', 'database'][cumulativeIndex % 3];
+
+							return {
+								timestamp: timestampString,
+								data: {
+									attributes_bool: {},
+									attributes_float64: {},
+									attributes_int64: {},
+									attributes_string: {
+										host_name: 'test-host',
+										log_level: logLevel,
+										service,
+									},
+									body: `${timestampString} ${logLevel} ${service} Log message ${cumulativeIndex}`,
+									id,
+									resources_string: {
+										'host.name': 'test-host',
+									},
+									severity_number: [9, 13, 17][cumulativeIndex % 3],
+									severity_text: logLevel,
+									span_id: `span-${cumulativeIndex}`,
+									trace_flags: 0,
+									trace_id: `trace-${cumulativeIndex}`,
+								},
+							};
+						}),
+					},
+				],
+			},
+			meta: {
+				bytesScanned: 0,
+				durationMs: 0,
+				rowsScanned: 0,
+				stepIntervals: {},
+			},
+		},
+	};
+};
+
+export function mockQueryRangeV5WithLogsResponse({
+	hasMore = true,
+	offset = 0,
+	pageSize = 100,
+	delay = 0,
+	onReceiveRequest,
+}: MockLogsOptions = {}): void {
+	server.use(
+		rest.post(QUERY_RANGE_URL, async (req, res, ctx) =>
+			res(
+				...(delay ? [ctx.delay(delay)] : []),
+				ctx.status(200),
+				ctx.json(
+					createLogsResponse(
+						(await onReceiveRequest?.(req)) ?? {
+							hasMore,
+							pageSize,
+							offset,
+						},
+					),
+				),
+			),
+		),
+	);
+}
+
+export function mockQueryRangeV5WithError(
+	error: string,
+	statusCode = 500,
+): void {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_, res, ctx) =>
+			res(
+				ctx.status(statusCode),
+				ctx.json({
+					error,
+				}),
+			),
+		),
+	);
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -14,8 +14,6 @@ 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';
 
@@ -30,8 +28,6 @@ function CreateServiceAccountModal(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);
 
-	const { showErrorModal, isErrorModalVisible } = useErrorModal();
-
 	const {
 		control,
 		handleSubmit,
@@ -58,10 +54,13 @@ function CreateServiceAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (err) => {
-				const errMessage = convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				);
-				showErrorModal(errMessage as APIError);
+				const errMessage =
+					convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'An error occurred';
+				toast.error(`Failed to create service account: ${errMessage}`, {
+					richColors: true,
+				});
 			},
 		},
 	});
@@ -91,7 +90,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			showCloseButton
 			width="narrow"
 			className="create-sa-modal"
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			<div className="create-sa-modal__content">
 				<form

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

@@ -11,16 +11,6 @@ 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> {
@@ -102,13 +92,10 @@ describe('CreateServiceAccountModal', () => {
 		await user.click(submitBtn);
 
 		await waitFor(() => {
-			expect(showErrorModal).toHaveBeenCalledWith(
-				expect.objectContaining({
-					getErrorMessage: expect.any(Function),
-				}),
+			expect(mockToast.error).toHaveBeenCalledWith(
+				expect.stringMatching(/Failed to create service account/i),
+				expect.anything(),
 			);
-			const passedError = showErrorModal.mock.calls[0][0] as any;
-			expect(passedError.getErrorMessage()).toBe('Internal Server Error');
 		});
 
 		expect(

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
@@ -28,7 +28,6 @@ import {
 	useMemberRoleManager,
 } from 'hooks/member/useMemberRoleManager';
 import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
@@ -91,11 +90,8 @@ 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 { showErrorModal } = useErrorModal();
-
 	const {
 		data: fetchedUser,
 		isLoading: isFetchingUser,
@@ -115,39 +111,26 @@ function EditMemberDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
-	const {
-		fetchedRoleIds,
-		isLoading: isMemberRolesLoading,
-		applyDiff,
-	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
+	const { fetchedRoleIds, 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 ?? '');
 		}
+		setSaveErrors([]);
 	}, [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]);
+		setLocalRole(fetchedRoleIds[0] ?? '');
+	}, [fetchedRoleIds]);
 
 	const isDirty =
 		member !== null &&
@@ -170,10 +153,17 @@ function EditMemberDrawer({
 				onClose();
 			},
 			onError: (err): void => {
-				const errMessage = convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				);
-				showErrorModal(errMessage as APIError);
+				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,
+					position: 'top-right',
+				});
 			},
 		},
 	});
@@ -354,15 +344,15 @@ function EditMemberDrawer({
 					position: 'top-right',
 				});
 			}
-		} catch (err) {
-			const errMsg = convertToApiError(
-				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-			);
-			showErrorModal(errMsg as APIError);
+		} catch {
+			toast.error('Failed to generate password reset link', {
+				richColors: true,
+				position: 'top-right',
+			});
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose, showErrorModal]);
+	}, [member, isInvited, onClose]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -429,7 +419,7 @@ function EditMemberDrawer({
 						}}
 						className="edit-member-drawer__input"
 						placeholder="Enter name"
-						disabled={isRootUser || isDeleted}
+						disabled={isRootUser}
 					/>
 				</Tooltip>
 			</div>
@@ -450,15 +440,9 @@ function EditMemberDrawer({
 				<label className="edit-member-drawer__label" htmlFor="member-role">
 					Roles
 				</label>
-				{isSelf || isRootUser || isDeleted ? (
+				{isSelf || isRootUser ? (
 					<Tooltip
-						title={
-							isRootUser
-								? ROOT_USER_TOOLTIP
-								: isDeleted
-								? undefined
-								: 'You cannot modify your own role'
-						}
+						title={isRootUser ? ROOT_USER_TOOLTIP : '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">
@@ -483,7 +467,7 @@ function EditMemberDrawer({
 						onRefetch={refetchRoles}
 						value={localRole}
 						onChange={(role): void => {
-							setLocalRole(role ?? '');
+							setLocalRole(role);
 							setSaveErrors((prev) =>
 								prev.filter(
 									(err) =>
@@ -492,7 +476,6 @@ function EditMemberDrawer({
 							);
 						}}
 						placeholder="Select role"
-						allowClear={false}
 					/>
 				)}
 			</div>
@@ -504,10 +487,6 @@ function EditMemberDrawer({
 						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
-					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="cherry" variant="outline">
-							DELETED
-						</Badge>
 					) : (
 						<Badge color="amber" variant="outline">
 							INVITED
@@ -546,57 +525,55 @@ function EditMemberDrawer({
 		<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">
+				<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 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>
 	);
 

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

@@ -84,16 +84,6 @@ 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',
@@ -157,7 +147,6 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		showErrorModal.mockClear();
 		server.use(
 			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
@@ -470,6 +459,7 @@ describe('EditMemberDrawer', () => {
 
 		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(() => {
@@ -487,20 +477,16 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				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',
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to delete member: Something went wrong on server',
+					expect.anything(),
 				);
 			});
 		});
 
 		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(() => {
@@ -518,14 +504,9 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				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',
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to revoke invite: Something went wrong on server',
+					expect.anything(),
 				);
 			});
 		});

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -21,8 +20,6 @@ import {
 	initialQueryState,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { getFiltersFromParams } from 'container/InfraMonitoringK8s/commonUtils';
-import { INFRA_MONITORING_K8S_PARAMS_KEYS } from 'container/InfraMonitoringK8s/constants';
 import {
 	CustomTimeType,
 	Time,
@@ -52,15 +49,22 @@ import {
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuidv4 } from 'uuid';
 
+import {
+	useInfraMonitoringTracesFilters,
+	useInfraMonitoringView,
+} from '../../container/InfraMonitoringK8s/hooks';
+import { convertFiltersToExpression } from '../QueryBuilderV2/utils';
 import { VIEW_TYPES, VIEWS } from './constants';
 import Containers from './Containers/Containers';
 import { HostDetailProps } from './HostMetricDetail.interfaces';
-import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailedView';
+import { useInfraMonitoringHostLogsExpression } from './HostMetricsLogs/hooks';
+import HostMetricsLogs from './HostMetricsLogs/HostMetricsLogs';
 import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
 import Metrics from './Metrics/Metrics';
 import Processes from './Processes/Processes';
 
 import './HostMetricsDetail.styles.scss';
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function HostMetricsDetails({
 	host,
@@ -71,8 +75,6 @@ function HostMetricsDetails({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const [searchParams, setSearchParams] = useSearchParams();
-
 	const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
 		minTime,
 	]);
@@ -95,23 +97,14 @@ function HostMetricsDetails({
 			: (selectedTime as Time),
 	);
 
-	const [selectedView, setSelectedView] = useState<VIEWS>(
-		(searchParams.get('view') as VIEWS) || VIEWS.METRICS,
-	);
+	const [selectedView, setSelectedView] = useInfraMonitoringView();
+	const [traceFilters, setTraceFilters] = useInfraMonitoringTracesFilters();
+	const [, setHostMetricLogExpression] = useInfraMonitoringHostLogsExpression();
+
 	const isDarkMode = useIsDarkMode();
 
-	const initialFilters = useMemo(() => {
-		const urlView = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW);
-		const queryKey =
-			urlView === VIEW_TYPES.LOGS
-				? INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS
-				: INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS;
-		const filters = getFiltersFromParams(searchParams, queryKey);
-		if (filters) {
-			return filters;
-		}
-
-		return {
+	const [initialFilters] = useState(
+		traceFilters || {
 			op: 'AND',
 			items: [
 				{
@@ -126,11 +119,7 @@ function HostMetricsDetails({
 					value: host?.hostName || '',
 				},
 			],
-		};
-	}, [host?.hostName, searchParams]);
-
-	const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>(
-		initialFilters,
+		},
 	);
 
 	const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
@@ -147,7 +136,6 @@ function HostMetricsDetails({
 	}, [host]);
 
 	useEffect(() => {
-		setLogFilters(initialFilters);
 		setTracesFilters(initialFilters);
 	}, [initialFilters]);
 
@@ -169,12 +157,7 @@ function HostMetricsDetails({
 		setSelectedView(e.target.value);
 		if (host?.hostName) {
 			setSelectedView(e.target.value);
-			setSearchParams({
-				...Object.fromEntries(searchParams.entries()),
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: e.target.value,
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(null),
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(null),
-			});
+			setTraceFilters(null);
 		}
 		logEvent(InfraMonitoringEvents.TabChanged, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -210,52 +193,32 @@ function HostMetricsDetails({
 		[],
 	);
 
-	const handleChangeLogFilters = useCallback(
-		(value: IBuilderQuery['filters'], view: VIEWS) => {
-			setLogFilters((prevFilters) => {
-				const hostNameFilter = prevFilters?.items?.find(
-					(item) => item.key?.key === 'host.name',
-				);
-				const paginationFilter = value?.items?.find(
-					(item) => item.key?.key === 'id',
-				);
-				const newFilters = value?.items?.filter(
-					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
-				);
-
-				if (newFilters && newFilters?.length > 0) {
-					logEvent(InfraMonitoringEvents.FilterApplied, {
-						entity: InfraMonitoringEvents.HostEntity,
-						view: InfraMonitoringEvents.LogsView,
-						page: InfraMonitoringEvents.DetailedPage,
-					});
-				}
-
-				const updatedFilters = {
-					op: 'AND',
-					items: [
-						hostNameFilter,
-						...(newFilters || []),
-						...(paginationFilter ? [paginationFilter] : []),
-					].filter((item): item is TagFilterItem => item !== undefined),
-				};
-
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(
-						updatedFilters,
-					),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
-				});
-				return updatedFilters;
-			});
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
+	const initialLogsExpression = useMemo(
+		() =>
+			convertFiltersToExpression({
+				items: [
+					{
+						id: uuidv4(),
+						key: {
+							key: 'host.name',
+							dataType: DataTypes.String,
+							type: 'resource',
+							id: 'host.name--string--resource--false',
+						},
+						op: '=',
+						value: host?.hostName || '',
+					},
+				],
+				op: 'AND',
+			}).expression,
+		[host?.hostName],
 	);
 
+	const [hostMetricLogsExpr] = useInfraMonitoringHostLogsExpression();
+
 	const handleChangeTracesFilters = useCallback(
 		(value: IBuilderQuery['filters'], view: VIEWS) => {
+			setSelectedView(view);
 			setTracesFilters((prevFilters) => {
 				const hostNameFilter = prevFilters?.items?.find(
 					(item) => item.key?.key === 'host.name',
@@ -269,27 +232,16 @@ function HostMetricsDetails({
 					});
 				}
 
-				const updatedFilters = {
+				return {
 					op: 'AND',
 					items: [
 						hostNameFilter,
 						...(value?.items?.filter((item) => item.key?.key !== 'host.name') || []),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
-
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(
-						updatedFilters,
-					),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
-				});
-
-				return updatedFilters;
 			});
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
+		[setSelectedView],
 	);
 
 	const handleExplorePagesRedirect = (): void => {
@@ -308,11 +260,6 @@ function HostMetricsDetails({
 		});
 
 		if (selectedView === VIEW_TYPES.LOGS) {
-			const filtersWithoutPagination = {
-				...logFilters,
-				items: logFilters?.items?.filter((item) => item.key?.key !== 'id') || [],
-			};
-
 			const compositeQuery = {
 				...initialQueryState,
 				queryType: 'builder',
@@ -322,7 +269,11 @@ function HostMetricsDetails({
 						{
 							...initialQueryBuilderFormValuesMap.logs,
 							aggregateOperator: LogsAggregatorOperator.NOOP,
-							filters: filtersWithoutPagination,
+							filter: { expression: hostMetricLogsExpr },
+							expression: hostMetricLogsExpr,
+							having: {
+								expression: '',
+							},
 						},
 					],
 				},
@@ -362,7 +313,9 @@ function HostMetricsDetails({
 	const handleClose = (): void => {
 		setSelectedInterval(selectedTime as Time);
 		lastSelectedInterval.current = null;
-		setSearchParams({});
+		setSelectedView(null);
+		setTraceFilters(null);
+		setHostMetricLogExpression(null);
 
 		if (selectedTime !== 'custom') {
 			const { maxTime, minTime } = GetMinMax(selectedTime);
@@ -564,12 +517,11 @@ function HostMetricsDetails({
 						/>
 					)}
 					{selectedView === VIEW_TYPES.LOGS && (
-						<HostMetricLogsDetailedView
+						<HostMetricsLogs
 							timeRange={modalTimeRange}
 							isModalTimeSelection={isModalTimeSelection}
 							handleTimeChange={handleTimeChange}
-							handleChangeLogFilters={handleChangeLogFilters}
-							logFilters={logFilters}
+							initialExpression={initialLogsExpression}
 							selectedInterval={selectedInterval}
 						/>
 					)}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.module.scss

@@ -0,0 +1,66 @@
+.header {
+	display: flex;
+	justify-content: flex-end;
+	padding: var(--spacing-4) 0px;
+	border-radius: 3px;
+
+	gap: var(--spacing-4);
+}
+
+.logs {
+	border: 1px solid var(--border);
+	margin-top: var(--spacing-4);
+}
+
+.listContainer {
+	flex: 1;
+	height: calc(100vh - 278px) !important;
+	display: flex;
+	height: 100%;
+
+	:global(.raw-log-content) {
+		width: 100%;
+		text-wrap: inherit;
+		word-wrap: break-word;
+	}
+}
+
+.listCard {
+	width: 100%;
+	margin-top: 12px;
+
+	:global(.ant-card-body) {
+		padding: 0;
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.logsLoadingSkeleton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 8px 0;
+
+	:global(.ant-skeleton-input-sm) {
+		height: 18px;
+	}
+}
+
+.noLogsFound {
+	height: 50vh;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 24px;
+	box-sizing: border-box;
+
+	p {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -1,133 +0,0 @@
-.host-metrics-logs-container {
-	margin-top: 1rem;
-
-	.filter-section {
-		flex: 1;
-
-		.ant-select-selector {
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400) !important;
-			background-color: var(--bg-ink-300) !important;
-
-			input {
-				font-size: 12px;
-			}
-
-			.ant-tag .ant-typography {
-				font-size: 12px;
-			}
-		}
-	}
-
-	.host-metrics-logs-header {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-
-		padding: 12px;
-		border-radius: 3px;
-		border: 1px solid var(--bg-slate-500);
-	}
-
-	.host-metrics-logs {
-		margin-top: 1rem;
-
-		.virtuoso-list {
-			overflow-y: hidden !important;
-
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-				height: 0.3rem;
-			}
-
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-slate-300);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background: var(--bg-slate-200);
-			}
-
-			.ant-row {
-				width: fit-content;
-			}
-		}
-
-		.skeleton-container {
-			height: 100%;
-			padding: 16px;
-		}
-	}
-}
-
-.host-metrics-logs-list-container {
-	flex: 1;
-	height: calc(100vh - 272px) !important;
-	display: flex;
-	height: 100%;
-
-	.raw-log-content {
-		width: 100%;
-		text-wrap: inherit;
-		word-wrap: break-word;
-	}
-}
-
-.host-metrics-logs-list-card {
-	width: 100%;
-	margin-top: 12px;
-
-	.ant-card-body {
-		padding: 0;
-
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.logs-loading-skeleton {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 8px 0;
-
-	.ant-skeleton-input-sm {
-		height: 18px;
-	}
-}
-
-.no-logs-found {
-	height: 50vh;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	padding: 24px;
-	box-sizing: border-box;
-
-	.ant-typography {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}
-
-.lightMode {
-	.filter-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		.ant-select-selector {
-			border-color: var(--bg-vanilla-300) !important;
-			background-color: var(--bg-vanilla-100) !important;
-			color: var(--bg-ink-200);
-		}
-	}
-}

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

@@ -1,100 +0,0 @@
-import { useMemo } from 'react';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { VIEWS } from '../constants';
-import HostMetricsLogs from './HostMetricsLogs';
-
-import './HostMetricLogs.styles.scss';
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
-	logFilters: IBuilderQuery['filters'];
-	selectedInterval: Time;
-}
-
-function HostMetricLogsDetailedView({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	handleChangeLogFilters,
-	logFilters,
-	selectedInterval,
-}: Props): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-	const updatedCurrentQuery = useMemo(
-		() => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						dataSource: DataSource.LOGS,
-						aggregateOperator: 'noop',
-						aggregateAttribute: {
-							...currentQuery.builder.queryData[0].aggregateAttribute,
-						},
-						filters: {
-							items:
-								logFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
-								[],
-							op: 'AND',
-						},
-					},
-				],
-			},
-		}),
-		[currentQuery, logFilters?.items],
-	);
-
-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
-	return (
-		<div className="host-metrics-logs-container">
-			<div className="host-metrics-logs-header">
-				<div className="filter-section">
-					{query && (
-						<QueryBuilderSearch
-							query={query as IBuilderQuery}
-							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
-							disableNavigationShortcuts
-						/>
-					)}
-				</div>
-				<div className="datetime-section">
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
-					/>
-				</div>
-			</div>
-			<HostMetricsLogs timeRange={timeRange} filters={logFilters} />
-		</div>
-	);
-}
-
-export default HostMetricLogsDetailedView;

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

@@ -1,87 +1,165 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useQuery } from 'react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
 import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { InfraMonitoringEvents } from 'constants/events';
 import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import useDebounce from 'hooks/useDebounce';
+import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
 import { ILog } from 'types/api/logs/log';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { validateQuery } from 'utils/queryValidationUtils';
 
-import { getHostLogsQueryPayload } from './constants';
+import {
+	useInfiniteHostMetricLogs,
+	useInfraMonitoringHostLogsExpression,
+} from './hooks';
 import NoLogsContainer from './NoLogsContainer';
+import { getHostLogsQueryPayload } from './utils';
 
-import './HostMetricLogs.styles.scss';
+import styles from './HostMetricLogs.module.scss';
 
 interface Props {
+	initialExpression: string;
 	timeRange: {
 		startTime: number;
 		endTime: number;
 	};
-	filters: IBuilderQuery['filters'];
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
 }
 
-function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+const EXPRESSION_DEBOUNCE_TIME_MS = 300;
+
+function HostMetricsLogs({
+	initialExpression,
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	selectedInterval,
+}: Props): JSX.Element {
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+	const [
+		filterExpression,
+		setFilterExpression,
+	] = useInfraMonitoringHostLogsExpression();
+
+	const [inputExpression, setInputExpression] = useState(
+		filterExpression || initialExpression,
+	);
+
+	useEffect(() => {
+		// If expression is present in the URL, prefer it and don't override it.
+		// Otherwise, initialize URL state from the host's default expression.
+		if (filterExpression) {
+			setInputExpression(filterExpression);
+			return;
+		}
+
+		setInputExpression(initialExpression);
+		setFilterExpression(initialExpression);
+	}, [filterExpression, initialExpression, setFilterExpression]);
+
+	const debouncedFilterExpression = useDebounce(
+		filterExpression?.trim() || initialExpression,
+		EXPRESSION_DEBOUNCE_TIME_MS,
+	);
+
 	const {
 		activeLog,
-		onAddToQuery,
 		selectedTab,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const basePayload = getHostLogsQueryPayload(
-		timeRange.startTime,
-		timeRange.endTime,
-		filters,
+	const onAddToQuery = useCallback(
+		(fieldKey: string, fieldValue: string, operator: string): void => {
+			handleCloseLogDetail();
+
+			const partExpression = generateFilterQuery({
+				fieldKey,
+				fieldValue,
+				type: getOldLogsOperatorFromNew(operator),
+			});
+
+			const newExpression = inputExpression.trim()
+				? `${inputExpression} AND ${partExpression}`
+				: partExpression;
+
+			setInputExpression(newExpression);
+			setFilterExpression(newExpression);
+		},
+		[inputExpression, setFilterExpression, handleCloseLogDetail],
 	);
+
+	const handleFilterChange = useCallback((expression: string): void => {
+		setInputExpression(expression);
+	}, []);
+
 	const {
 		logs,
-		hasReachedEndOfLogs,
-		isPaginating,
-		currentPage,
-		setIsPaginating,
-		handleNewData,
 		loadMoreLogs,
-		queryPayload,
-	} = useHandleLogsPagination({
-		timeRange,
-		filters,
-		excludeFilterKeys: ['host.name'],
-		basePayload,
+		hasNextPage,
+		isFetchingNextPage,
+		isLoading,
+		isFetching,
+		isError,
+		refetch,
+	} = useInfiniteHostMetricLogs({
+		expression: debouncedFilterExpression,
+		startTime: timeRange.startTime,
+		endTime: timeRange.endTime,
 	});
 
-	const { data, isLoading, isFetching, isError } = useQuery({
-		queryKey: [
-			'hostMetricsLogs',
-			timeRange.startTime,
-			timeRange.endTime,
-			filters,
-			currentPage,
-		],
-		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
-		enabled: !!queryPayload,
-		keepPreviousData: isPaginating,
-	});
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const validation = validateQuery(updatedExpression || inputExpression);
+			if (validation.isValid) {
+				setFilterExpression(updatedExpression || inputExpression);
 
-	useEffect(() => {
-		if (data?.payload?.data?.newResult?.data?.result) {
-			handleNewData(data.payload.data.newResult.data.result);
-		}
-	}, [data, handleNewData]);
+				logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.HostEntity,
+					view: InfraMonitoringEvents.LogsView,
+					page: InfraMonitoringEvents.DetailedPage,
+				});
 
-	useEffect(() => {
-		setIsPaginating(false);
-	}, [data, setIsPaginating]);
+				refetch();
+			}
+		},
+		[inputExpression, refetch, setFilterExpression],
+	);
+
+	const queryData = useMemo(
+		() =>
+			getHostLogsQueryPayload({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+				// this should use inputExpression to show suggestions correctly
+				// while we don't accept the final expression yet
+				expression: inputExpression,
+			}).queryData,
+		[timeRange.startTime, timeRange.endTime, inputExpression],
+	);
 
 	const handleScrollToLog = useScrollToLog({
 		logs,
@@ -122,22 +200,21 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 	const renderFooter = useCallback(
 		(): JSX.Element | null => (
 			<>
-				{isFetching ? (
-					<div className="logs-loading-skeleton"> Loading more logs ... </div>
-				) : hasReachedEndOfLogs ? (
-					<div className="logs-loading-skeleton"> *** End *** </div>
+				{isFetchingNextPage ? (
+					<div className={styles.logsLoadingSkeleton}> Loading more logs ... </div>
+				) : !hasNextPage && logs.length > 0 ? (
+					<div className={styles.logsLoadingSkeleton}> *** End *** </div>
 				) : null}
 			</>
 		),
-		[isFetching, hasReachedEndOfLogs],
+		[isFetchingNextPage, hasNextPage, logs.length],
 	);
 
 	const renderContent = useMemo(
 		() => (
-			<Card bordered={false} className="host-metrics-logs-list-card">
+			<Card bordered={false} className={styles.listCard}>
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
-						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
 						ref={virtuosoRef}
 						data={logs}
@@ -155,32 +232,60 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		[logs, loadMoreLogs, getItemContent, renderFooter],
 	);
 
+	const showInitialLoading = isLoading || (isFetching && logs.length === 0);
+
 	return (
-		<div className="host-metrics-logs">
-			{isLoading && <LogsLoading />}
-			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
-			{isError && !isLoading && <LogsError />}
-			{!isLoading && !isError && logs.length > 0 && (
-				<div
-					className="host-metrics-logs-list-container"
-					data-log-detail-ignore="true"
-				>
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
+		<>
+			<div className={styles.header}>
+				<DateTimeSelectionV2
+					showAutoRefresh
+					showRefreshText={false}
+					hideShareModal
+					isModalTimeSelection={isModalTimeSelection}
+					onTimeChange={handleTimeChange}
+					defaultRelativeTime="5m"
+					modalSelectedInterval={selectedInterval}
+					modalInitialStartTime={timeRange.startTime * 1000}
+					modalInitialEndTime={timeRange.endTime * 1000}
 				/>
-			)}
-		</div>
+				<RunQueryBtn
+					isLoadingQueries={isLoading || isFetching}
+					onStageRunQuery={(): void => handleRunQuery()}
+				/>
+			</div>
+
+			<QuerySearch
+				queryData={queryData}
+				onChange={handleFilterChange}
+				dataSource={DataSource.LOGS}
+				onRun={handleRunQuery}
+			/>
+
+			<div className={styles.logs}>
+				{showInitialLoading && <LogsLoading />}
+				{!showInitialLoading && !isError && logs.length === 0 && (
+					<NoLogsContainer />
+				)}
+				{isError && !showInitialLoading && <LogsError />}
+				{!showInitialLoading && !isError && logs.length > 0 && (
+					<div className={styles.listContainer} data-log-detail-ignore="true">
+						{renderContent}
+					</div>
+				)}
+				{selectedTab && activeLog && (
+					<LogDetail
+						log={activeLog}
+						onClose={handleCloseLogDetail}
+						logs={logs}
+						onNavigateLog={handleSetActiveLog}
+						selectedTab={selectedTab}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onAddToQuery}
+						onScrollToLog={handleScrollToLog}
+					/>
+				)}
+			</div>
+		</>
 	);
 }
 

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

@@ -1,16 +1,15 @@
 import { Color } from '@signozhq/design-tokens';
-import { Typography } from 'antd';
 import { Ghost } from 'lucide-react';
 
-const { Text } = Typography;
+import styles from './HostMetricLogs.module.scss';
 
 export default function NoLogsContainer(): React.ReactElement {
 	return (
-		<div className="no-logs-found">
-			<Text type="secondary">
+		<div className={styles.noLogsFound}>
+			<p>
 				<Ghost size={24} color={Color.BG_AMBER_500} /> No logs found for this host
 				in the selected time range.
-			</Text>
+			</p>
 		</div>
 	);
 }

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

@@ -0,0 +1,899 @@
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { act, render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import { mockQueryRangeV5WithLogsResponse } from '../../../../__tests__/query_range_v5.util';
+import HostMetricsLogs from '../HostMetricsLogs';
+
+jest.mock('react-virtuoso', () => {
+	const actual = jest.requireActual('react-virtuoso');
+	return {
+		...actual,
+		Virtuoso: ({
+			data,
+			itemContent,
+			endReached,
+			components,
+			className,
+		}: {
+			data?: any[];
+			itemContent?: (index: number, item: any) => React.ReactNode;
+			endReached?: (index: number) => void;
+			components?: { Footer?: React.ComponentType };
+			className?: string;
+		}): JSX.Element => (
+			<div data-testid="virtuoso-mock" className={className}>
+				{Array.isArray(data) &&
+					data.map((item, index) => (
+						<div key={item?.id ?? index} data-testid={`virtuoso-item-${index}`}>
+							{itemContent?.(index, item)}
+						</div>
+					))}
+				<button
+					type="button"
+					data-testid="virtuoso-end-reached"
+					onClick={(): void => endReached?.((data?.length || 0) - 1)}
+				>
+					endReached
+				</button>
+				{components?.Footer ? <components.Footer /> : null}
+			</div>
+		),
+	};
+});
+
+const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
+const FIELDS_KEYS_URL = `${ENVIRONMENT.baseURL}/api/v1/fields/keys`;
+const FIELDS_VALUES_URL = `${ENVIRONMENT.baseURL}/api/v1/fields/values`;
+
+const defaultProps = {
+	initialExpression: 'host_name = "test-host"',
+	timeRange: {
+		startTime: 1708000000,
+		endTime: 1708003600,
+	},
+	isModalTimeSelection: false,
+	handleTimeChange: jest.fn(),
+	selectedInterval: '15m' as const,
+};
+
+// Mock OverlayScrollbar to avoid scroll behavior issues in tests
+jest.mock('components/OverlayScrollbar/OverlayScrollbar', () => ({
+	__esModule: true,
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+	__esModule: true,
+	default: ({
+		onTimeChange,
+	}: {
+		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
+	}): JSX.Element => {
+		return (
+			<div className="datetime-section" data-testid="datetime-selection">
+				<button
+					data-testid="time-picker-btn"
+					onClick={(): void => {
+						onTimeChange?.('5m');
+					}}
+				>
+					Select Time
+				</button>
+			</div>
+		);
+	},
+}));
+
+const createFieldKeysResponse = (): any => ({
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {},
+	},
+});
+
+const createFieldValuesResponse = (): any => ({
+	status: 'success',
+	data: {
+		values: {
+			stringValues: [],
+			numberValues: [],
+			boolValues: [],
+		},
+	},
+});
+
+const renderComponent = (
+	props = defaultProps,
+	searchParams?: Record<string, string>,
+): ReturnType<typeof render> =>
+	render(
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+			<VirtuosoMockContext.Provider
+				value={{ viewportHeight: 600, itemHeight: 50 }}
+			>
+				<HostMetricsLogs {...props} />
+			</VirtuosoMockContext.Provider>
+		</NuqsTestingAdapter>,
+	);
+
+describe('HostMetricsLogs', () => {
+	beforeEach(() => {
+		window.history.pushState({}, 'Test', '/');
+		server.use(
+			rest.get(FIELDS_KEYS_URL, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(createFieldKeysResponse())),
+			),
+			rest.get(FIELDS_VALUES_URL, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(createFieldValuesResponse())),
+			),
+		);
+	});
+
+	describe('loading state', () => {
+		it('should show loading state while fetching logs', async () => {
+			let resolveRequest: (value: any) => void;
+			const pendingPromise = new Promise<void>((resolve) => {
+				resolveRequest = resolve;
+			});
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async () => await pendingPromise,
+			});
+
+			renderComponent();
+
+			expect(
+				await screen.findByText('pending_data_placeholder'),
+			).toBeInTheDocument();
+
+			act(() => {
+				resolveRequest!(true);
+			});
+		});
+	});
+
+	describe('empty state', () => {
+		it('should show no logs message when no logs are returned', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 0,
+			});
+
+			renderComponent();
+
+			await waitFor(async () => {
+				expect(
+					await screen.findByText(/No logs found for this host/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('error state', () => {
+		it('should show error state when API returns error', async () => {
+			server.use(
+				rest.post(QUERY_RANGE_URL, (_, res, ctx) =>
+					res(ctx.status(500), ctx.json({ error: 'Internal Server Error' })),
+				),
+			);
+
+			renderComponent();
+
+			await waitFor(async () => {
+				expect(
+					await screen.findByText(/Something went wrong/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('success state', () => {
+		it('should render logs when API returns data', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+			});
+
+			renderComponent();
+
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+		});
+
+		it('should render initial expression in QuerySearch editor', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				const editorText =
+					document.querySelector('.query-where-clause-editor')?.textContent || '';
+				expect(editorText).toContain('host_name');
+				expect(editorText).toContain('test-host');
+			});
+		});
+
+		it('should render the filter section', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(
+					document.querySelector('.code-mirror-where-clause'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('should render date time selection component', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				// DateTimeSelectionV2 renders a time picker button
+				expect(document.querySelector('.datetime-section')).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('pagination', () => {
+		it('should send correct offset for pagination', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					const querySpec = payload.compositeQuery?.queries?.[0]?.spec;
+					const offset = querySpec?.offset ?? 0;
+
+					return {
+						offset,
+						pageSize: 100,
+						hasMore: offset === 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+			const querySpec = firstPayload.compositeQuery?.queries?.[0]?.spec;
+			expect(querySpec?.offset).toBe(0);
+		});
+
+		it('should fetch next page when virtuoso endReached is triggered', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					const querySpec = payload.compositeQuery?.queries?.[0]?.spec;
+					const offset = querySpec?.offset ?? 0;
+
+					return {
+						offset,
+						pageSize: 100,
+						hasMore: offset === 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+
+			expect(requestPayloads[0]?.compositeQuery?.queries?.[0]?.spec?.offset).toBe(
+				0,
+			);
+
+			await userEvent.click(screen.getByTestId('virtuoso-end-reached'));
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(2);
+			});
+
+			expect(requestPayloads[1]?.compositeQuery?.queries?.[0]?.spec?.offset).toBe(
+				100,
+			);
+		});
+	});
+
+	describe('filter expression', () => {
+		it('should include initial expression in the query', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+			const querySpec = firstPayload.compositeQuery?.queries?.[0]?.spec;
+
+			expect(querySpec?.filter?.expression).toContain('host_name = "test-host"');
+		});
+
+		it('should load expression from URL and persist it in the query', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 100,
+						offset: 0,
+						hasMore: true,
+					};
+				},
+			});
+
+			const urlExpression = 'service = "from-url"';
+
+			renderComponent(defaultProps, { hostMetricsLogsExpression: urlExpression });
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			expect(
+				requestPayloads[0]?.compositeQuery?.queries?.[0]?.spec?.filter?.expression,
+			).toContain(urlExpression);
+
+			await userEvent.click(screen.getByTestId('virtuoso-end-reached'));
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(2);
+			});
+
+			expect(
+				requestPayloads[1]?.compositeQuery?.queries?.[0]?.spec?.filter?.expression,
+			).toContain(urlExpression);
+		});
+
+		it('should use custom expression when provided', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			const customExpression = 'service = "custom-service"';
+
+			renderComponent({
+				...defaultProps,
+				initialExpression: customExpression,
+			});
+
+			// Wait for debounce and potential re-renders to settle
+			await waitFor(
+				() => {
+					const hasCustomExpression = requestPayloads.some((payload) => {
+						const querySpec = payload.compositeQuery?.queries?.[0]?.spec;
+						return querySpec?.filter?.expression?.includes('custom-service');
+					});
+					expect(hasCustomExpression).toBe(true);
+				},
+				{ timeout: 2000 },
+			);
+		});
+	});
+
+	describe('time range', () => {
+		it('should include correct time range in the query', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			const customTimeRange = {
+				startTime: 1700000000,
+				endTime: 1700003600,
+			};
+
+			renderComponent({
+				...defaultProps,
+				timeRange: customTimeRange,
+			});
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+
+			// V5 API expects milliseconds (seconds * 1000)
+			expect(firstPayload.start).toBe(customTimeRange.startTime * 1000);
+			expect(firstPayload.end).toBe(customTimeRange.endTime * 1000);
+		});
+	});
+
+	describe('query structure', () => {
+		it('should send correct query structure to the API', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+			const querySpec = firstPayload.compositeQuery?.queries?.[0]?.spec;
+
+			expect(querySpec?.signal).toBe('logs');
+			expect(querySpec?.order).toEqual(
+				expect.arrayContaining([
+					expect.objectContaining({
+						key: expect.objectContaining({ name: 'timestamp' }),
+						direction: 'desc',
+					}),
+				]),
+			);
+		});
+
+		it('should send request type as raw for logs list', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+			expect(firstPayload.requestType).toBe('raw');
+		});
+
+		it('should include pageSize in the query', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstPayload = requestPayloads[0];
+			const querySpec = firstPayload.compositeQuery?.queries?.[0]?.spec;
+
+			// Should have a limit set for pagination
+			expect(querySpec?.limit).toBeDefined();
+			expect(typeof querySpec?.limit).toBe('number');
+		});
+	});
+
+	describe('component props', () => {
+		it('should render datetime section with isModalTimeSelection', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent({
+				...defaultProps,
+				isModalTimeSelection: true,
+			});
+
+			await waitFor(() => {
+				expect(document.querySelector('.datetime-section')).toBeInTheDocument();
+			});
+		});
+
+		it('should render component with handleTimeChange', async () => {
+			const mockHandleTimeChange = jest.fn();
+
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent({
+				...defaultProps,
+				handleTimeChange: mockHandleTimeChange,
+			});
+
+			await waitFor(() => {
+				expect(document.querySelector('.datetime-section')).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('log detail interactions', () => {
+		it('should open log detail drawer when clicking on a log', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent();
+
+			// Wait for logs to render
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+
+			// Click on the first log
+			const logElement = await screen.findByText(/Log message 0/);
+			await userEvent.click(logElement);
+
+			// Log detail drawer should open - it contains "Log details" title
+			await waitFor(async () => {
+				expect(await screen.findByText('Log details')).toBeInTheDocument();
+			});
+		});
+
+		it('should close log detail drawer when clicking on the same log again', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent();
+
+			// Wait for logs to render
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+
+			// Click on the first log to open
+			const logElement = await screen.findByText(/Log message 0/);
+			await userEvent.click(logElement);
+
+			// Wait for drawer to open
+			await waitFor(async () => {
+				expect(await screen.findByText('Log details')).toBeInTheDocument();
+			});
+
+			// Click on the same log to close (through the close button)
+			const closeButton = document.querySelector('.ant-drawer-close');
+			if (closeButton) {
+				await userEvent.click(closeButton);
+			}
+
+			// Drawer should close
+			await waitFor(() => {
+				expect(screen.queryByText('Log details')).not.toBeInTheDocument();
+			});
+		});
+
+		it('should display log body in detail drawer', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent();
+
+			// Wait for logs to render
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+
+			// Click on the first log to open drawer
+			const logElement = await screen.findByText(/Log message 0/);
+			await userEvent.click(logElement);
+
+			// Wait for drawer to open
+			await waitFor(async () => {
+				expect(await screen.findByText('Log details')).toBeInTheDocument();
+			});
+
+			// Verify the drawer tabs are displayed
+			// The drawer should show the Overview tab
+			await waitFor(async () => {
+				expect(await screen.findByText('Overview')).toBeInTheDocument();
+			});
+
+			// Verify other tabs are present
+			expect(await screen.findByText('JSON')).toBeInTheDocument();
+			expect(await screen.findByText('Context')).toBeInTheDocument();
+		});
+	});
+
+	describe('log detail filter actions', () => {
+		it('should apply filter-in from log detail and close the drawer', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(async () => {
+				expect(await screen.findByText(/Log message 0/)).toBeInTheDocument();
+			});
+
+			await userEvent.click(await screen.findByText(/Log message 0/));
+
+			await waitFor(async () => {
+				expect(await screen.findByText('Log details')).toBeInTheDocument();
+			});
+
+			const serviceRow = await waitFor(() => {
+				const attributeNameCells = Array.from(
+					document.querySelectorAll('.attribute-name'),
+				);
+				const serviceCell = attributeNameCells.find((cell) =>
+					(cell.textContent || '').toLowerCase().includes('service'),
+				);
+				const row = serviceCell?.closest('tr');
+				if (!row) {
+					throw new Error('Service attribute row not found');
+				}
+				return row;
+			});
+
+			const filterButtons = serviceRow.querySelectorAll('button.filter-btn');
+			expect(filterButtons?.length).toBeGreaterThanOrEqual(2);
+
+			await userEvent.click(filterButtons[0] as HTMLButtonElement);
+
+			await waitFor(() => {
+				expect(screen.queryByText('Log details')).not.toBeInTheDocument();
+			});
+
+			await waitFor(
+				() => {
+					const matched = requestPayloads.some((payload) => {
+						const expression =
+							payload.compositeQuery?.queries?.[0]?.spec?.filter?.expression || '';
+						return (
+							(expression.includes('attributes_string.service') ||
+								expression.includes('service')) &&
+							expression.includes("('frontend')") &&
+							expression.includes('IN')
+						);
+					});
+					expect(matched).toBe(true);
+				},
+				{ timeout: 2500 },
+			);
+		});
+
+		it('should apply filter-out from log detail and close the drawer', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			renderComponent();
+
+			await waitFor(async () => {
+				const el = await screen.findByText(/Log message 0/);
+
+				expect(el).toBeInTheDocument();
+			});
+
+			await userEvent.click(await screen.findByText(/Log message 0/));
+
+			await waitFor(async () => {
+				expect(await screen.findByText('Log details')).toBeInTheDocument();
+			});
+
+			const serviceRow = await waitFor(() => {
+				const attributeNameCells = Array.from(
+					document.querySelectorAll('.attribute-name'),
+				);
+				const serviceCell = attributeNameCells.find((cell) =>
+					(cell.textContent || '').toLowerCase().includes('service'),
+				);
+				const row = serviceCell?.closest('tr');
+				if (!row) {
+					throw new Error('Service attribute row not found');
+				}
+				return row;
+			});
+
+			const filterButtons = serviceRow.querySelectorAll('button.filter-btn');
+			expect(filterButtons?.length).toBeGreaterThanOrEqual(2);
+
+			// the second button that represents filter out
+			await userEvent.click(filterButtons[1] as HTMLButtonElement);
+
+			await waitFor(() => {
+				expect(screen.queryByText('Log details')).not.toBeInTheDocument();
+			});
+
+			await waitFor(
+				() => {
+					const matched = requestPayloads.some((payload) => {
+						const expression =
+							payload.compositeQuery?.queries?.[0]?.spec?.filter?.expression || '';
+						return (
+							(expression.includes('attributes_string.service') ||
+								expression.includes('service')) &&
+							expression.includes("('frontend')") &&
+							(expression.includes('NIN') || expression.includes('NOT_IN'))
+						);
+					});
+					expect(matched).toBe(true);
+				},
+				{ timeout: 2500 },
+			);
+		});
+	});
+
+	describe('time range change', () => {
+		it('should use different time ranges for different renders', async () => {
+			const requestPayloads: any[] = [];
+
+			mockQueryRangeV5WithLogsResponse({
+				onReceiveRequest: async (req) => {
+					const payload = await req.json();
+					requestPayloads.push(payload);
+
+					return {
+						pageSize: 5,
+						offset: 0,
+					};
+				},
+			});
+
+			// First render with initial time range
+			const { unmount } = renderComponent();
+
+			// Wait for initial fetch
+			await waitFor(() => {
+				expect(requestPayloads.length).toBeGreaterThanOrEqual(1);
+			});
+
+			const firstStartTime = requestPayloads[0].start;
+			expect(firstStartTime).toBe(defaultProps.timeRange.startTime * 1000);
+
+			// Unmount and render again with different time range
+			unmount();
+
+			const newTimeRange = {
+				startTime: 1709000000,
+				endTime: 1709003600,
+			};
+
+			renderComponent({
+				...defaultProps,
+				timeRange: newTimeRange,
+			});
+
+			// Wait for fetch with new time range
+			await waitFor(() => {
+				const hasNewTimeRange = requestPayloads.some(
+					(p) => p.start === newTimeRange.startTime * 1000,
+				);
+				expect(hasNewTimeRange).toBe(true);
+			});
+		});
+
+		it('should call handleTimeChange callback when time picker is clicked', async () => {
+			const mockHandleTimeChange = jest.fn();
+
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				offset: 0,
+			});
+
+			renderComponent({
+				...defaultProps,
+				handleTimeChange: mockHandleTimeChange,
+			});
+
+			// Wait for component to render
+			await waitFor(() => {
+				expect(screen.getByTestId('time-picker-btn')).toBeInTheDocument();
+			});
+
+			// Click the time picker button (from mock)
+			await userEvent.click(screen.getByTestId('time-picker-btn'));
+
+			// Verify the callback was called
+			expect(mockHandleTimeChange).toHaveBeenCalledWith('5m');
+		});
+	});
+});

frontend/src/components/HostMetricsDetail/HostMetricsLogs/__tests__/hooks.test.tsx

@@ -0,0 +1,240 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+import {
+	mockQueryRangeV5WithError,
+	mockQueryRangeV5WithLogsResponse,
+} from '../../../../__tests__/query_range_v5.util';
+import { useInfiniteHostMetricLogs } from '../hooks';
+
+const createWrapper = (): React.FC<{ children: React.ReactNode }> => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+	return function Wrapper({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element {
+		return (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		);
+	};
+};
+
+describe('useInfiniteHostMetricLogs', () => {
+	const defaultParams = {
+		expression: 'host_name = "test-host"',
+		startTime: 1708000000,
+		endTime: 1708003600,
+	};
+
+	describe('initial state', () => {
+		it('should return initial loading state', () => {
+			mockQueryRangeV5WithLogsResponse({
+				delay: 100,
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			expect(result.current.isLoading).toBe(true);
+			expect(result.current.logs).toEqual([]);
+		});
+	});
+
+	describe('successful data fetching', () => {
+		it('should return logs after successful fetch', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 5,
+				hasMore: true,
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isLoading).toBe(false);
+			});
+
+			expect(result.current.error).toBeFalsy();
+			expect(result.current.logs.length).toBe(5);
+			expect(result.current.isError).toBe(false);
+		});
+
+		it('should set hasNextPage based on response size', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 100,
+				hasMore: true,
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isLoading).toBe(false);
+			});
+
+			expect(result.current.hasNextPage).toBe(true);
+		});
+
+		it('should not have next page when response is smaller than page size', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 100,
+				hasMore: false,
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isLoading).toBe(false);
+			});
+
+			expect(result.current.hasNextPage).toBe(false);
+		});
+	});
+
+	describe('empty state', () => {
+		it('should return empty logs array when no data', async () => {
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 0,
+				hasMore: false,
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isLoading).toBe(false);
+			});
+
+			expect(result.current.logs).toEqual([]);
+			expect(result.current.hasNextPage).toBe(false);
+		});
+	});
+
+	describe('error handling', () => {
+		it('should set isError on API failure', async () => {
+			mockQueryRangeV5WithError('Internal Server Error');
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isError).toBe(true);
+			});
+
+			expect(result.current.logs).toEqual([]);
+		});
+	});
+
+	describe('query disabled state', () => {
+		it('should not fetch when expression is empty', async () => {
+			const requestCount = { count: 0 };
+
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 0,
+				hasMore: false,
+				onReceiveRequest: (): void => {
+					requestCount.count += 1;
+				},
+			});
+
+			const { result } = renderHook(
+				() =>
+					useInfiniteHostMetricLogs({
+						...defaultParams,
+						expression: '',
+					}),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			// Wait a bit to ensure no request is made
+			await new Promise((resolve) => {
+				setTimeout(resolve, 300);
+			});
+
+			expect(requestCount.count).toBe(0);
+			expect(result.current.isLoading).toBe(false);
+		});
+	});
+
+	describe('load more functionality', () => {
+		it('should fetch next page when loadMoreLogs is called', async () => {
+			const requestCount = { count: 0 };
+
+			mockQueryRangeV5WithLogsResponse({
+				pageSize: 100,
+				offset: 0,
+				hasMore: true,
+				onReceiveRequest: () => {
+					requestCount.count += 1;
+
+					if (requestCount.count > 1) {
+						return { offset: 100, pageSize: 100, hasMore: false };
+					}
+
+					return undefined;
+				},
+			});
+
+			const { result } = renderHook(
+				() => useInfiniteHostMetricLogs(defaultParams),
+				{
+					wrapper: createWrapper(),
+				},
+			);
+
+			await waitFor(() => {
+				expect(result.current.isLoading).toBe(false);
+			});
+
+			expect(result.current.logs.length).toBe(100);
+			expect(result.current.hasNextPage).toBe(true);
+			expect(requestCount.count).toBe(1);
+
+			act(() => {
+				result.current.loadMoreLogs();
+			});
+
+			await waitFor(() => {
+				expect(result.current.logs.length).toBe(150);
+			});
+
+			expect(result.current.hasNextPage).toBe(false);
+			expect(requestCount.count).toBe(2);
+		});
+	});
+});

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -1,61 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { v4 as uuidv4 } from 'uuid';
-
-export const getHostLogsQueryPayload = (
-	start: number,
-	end: number,
-	filters: IBuilderQuery['filters'],
-): GetQueryResultsProps => ({
-	graphType: PANEL_TYPES.LIST,
-	selectedTime: 'GLOBAL_TIME',
-	query: {
-		clickhouse_sql: [],
-		promql: [],
-		builder: {
-			queryData: [
-				{
-					dataSource: DataSource.LOGS,
-					queryName: 'A',
-					aggregateOperator: 'noop',
-					aggregateAttribute: {
-						id: '------false',
-						dataType: DataTypes.String,
-						key: '',
-						type: '',
-					},
-					timeAggregation: 'rate',
-					spaceAggregation: 'sum',
-					functions: [],
-					filters,
-					expression: 'A',
-					disabled: false,
-					stepInterval: 60,
-					having: [],
-					limit: null,
-					orderBy: [
-						{
-							columnName: 'timestamp',
-							order: 'desc',
-						},
-					],
-					groupBy: [],
-					legend: '',
-					reduceTo: ReduceOperators.AVG,
-					offset: 0,
-					pageSize: 100,
-				},
-			],
-			queryFormulas: [],
-			queryTraceOperator: [],
-		},
-		id: uuidv4(),
-		queryType: EQueryType.QUERY_BUILDER,
-	},
-	start,
-	end,
-});

frontend/src/components/HostMetricsDetail/HostMetricsLogs/hooks.ts

@@ -0,0 +1,107 @@
+import { useCallback, useMemo } from 'react';
+import { useInfiniteQuery } from 'react-query';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { parseAsString, useQueryState, UseQueryStateReturn } from 'nuqs';
+import { ILog } from 'types/api/logs/log';
+
+import { getHostLogsQueryPayload } from './utils';
+
+export function useInfiniteHostMetricLogs({
+	expression,
+	startTime,
+	endTime,
+}: {
+	expression: string;
+	startTime: number;
+	endTime: number;
+}): {
+	logs: ILog[];
+	isLoading: boolean;
+	isFetching: boolean;
+	isFetchingNextPage: boolean;
+	isError: boolean;
+	error?: unknown;
+	hasNextPage: boolean;
+	loadMoreLogs: () => void;
+	refetch: () => void;
+} {
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		isError,
+		error,
+		hasNextPage,
+		fetchNextPage,
+		refetch,
+	} = useInfiniteQuery({
+		queryKey: ['hostMetricsLogs', startTime, endTime, expression],
+		queryFn: async ({ pageParam = 0 }) => {
+			const { query } = getHostLogsQueryPayload({
+				start: startTime,
+				end: endTime,
+				expression,
+				offset: pageParam,
+				pageSize: DEFAULT_PER_PAGE_VALUE,
+			});
+			return GetMetricQueryRange(query, ENTITY_VERSION_V5);
+		},
+		getNextPageParam: (lastPage, allPages) => {
+			const list = lastPage?.payload?.data?.newResult?.data?.result?.[0]?.list;
+			if (!list || list.length < DEFAULT_PER_PAGE_VALUE) {
+				return undefined;
+			}
+			return allPages.length * DEFAULT_PER_PAGE_VALUE;
+		},
+		enabled: !!expression,
+	});
+
+	const logs = useMemo<ILog[]>(() => {
+		if (!data?.pages) {
+			return [];
+		}
+
+		return data.pages.flatMap((page) => {
+			const list = page.payload.data.newResult.data.result?.[0]?.list;
+			if (!list) {
+				return [];
+			}
+
+			return list.map(
+				(item) =>
+					({
+						...item.data,
+						timestamp: item.timestamp,
+					} as ILog),
+			);
+		});
+	}, [data?.pages]);
+
+	const loadMoreLogs = useCallback(() => {
+		if (hasNextPage && !isFetchingNextPage) {
+			fetchNextPage();
+		}
+	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+	return {
+		logs,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		isError,
+		error,
+		hasNextPage: !!hasNextPage,
+		loadMoreLogs,
+		refetch,
+	};
+}
+
+export function useInfraMonitoringHostLogsExpression(): UseQueryStateReturn<
+	string,
+	undefined
+> {
+	return useQueryState('hostMetricsLogsExpression', parseAsString);
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/utils.ts

@@ -0,0 +1,86 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface HostLogsQueryParams {
+	start: number;
+	end: number;
+	expression: string;
+	offset?: number;
+	pageSize?: number;
+}
+
+export const getHostLogsQueryPayload = ({
+	start,
+	end,
+	expression,
+	offset = 0,
+	pageSize = DEFAULT_PER_PAGE_VALUE,
+}: HostLogsQueryParams): {
+	query: GetQueryResultsProps;
+	queryData: IBuilderQuery;
+} => {
+	const queryData: IBuilderQuery = {
+		dataSource: DataSource.LOGS,
+		queryName: 'A',
+		aggregateOperator: 'noop',
+		aggregateAttribute: {
+			id: '------false',
+			dataType: DataTypes.String,
+			key: '',
+			type: '',
+		},
+		timeAggregation: 'rate',
+		spaceAggregation: 'sum',
+		functions: [],
+		filter: { expression },
+		expression,
+		having: {
+			expression: '',
+		},
+		disabled: false,
+		stepInterval: 60,
+		limit: null,
+		orderBy: [
+			{
+				columnName: 'timestamp',
+				order: 'desc',
+			},
+			{
+				columnName: 'id',
+				order: 'desc',
+			},
+		],
+		groupBy: [],
+		legend: '',
+		reduceTo: ReduceOperators.AVG,
+		offset,
+		pageSize,
+	};
+
+	return {
+		query: {
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			query: {
+				clickhouse_sql: [],
+				promql: [],
+				builder: {
+					queryData: [queryData],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				id: uuidv4(),
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			start,
+			end,
+		},
+		queryData,
+	};
+};

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -10,7 +10,6 @@ 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';
@@ -41,8 +40,6 @@ function InviteMembersModal({
 	onClose,
 	onComplete,
 }: InviteMembersModalProps): JSX.Element {
-	const { showErrorModal, isErrorModalVisible } = useErrorModal();
-
 	const [rows, setRows] = useState<InviteRow[]>(() => [
 		EMPTY_ROW(),
 		EMPTY_ROW(),
@@ -207,11 +204,13 @@ function InviteMembersModal({
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
-			showErrorModal(err as APIError);
+			const apiErr = err as APIError;
+			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
+			toast.error(errorMessage, { richColors: true, position: 'top-right' });
 		} finally {
 			setIsSubmitting(false);
 		}
-	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
+	}, [rows, onComplete, resetAndClose, validateAllUsers]);
 
 	const touchedRows = rows.filter(isRowTouched);
 	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
@@ -228,7 +227,7 @@ function InviteMembersModal({
 			showCloseButton
 			width="wide"
 			className="invite-members-modal"
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			<div className="invite-members-modal__content">
 				<div className="invite-members-modal__table">
@@ -330,7 +329,6 @@ 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,3 +1,4 @@
+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';
@@ -21,16 +22,6 @@ 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);
 
@@ -43,7 +34,6 @@ const defaultProps = {
 describe('InviteMembersModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		showErrorModal.mockClear();
 		mockSendInvite.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { data: 'test', status: 'success' },
@@ -164,10 +154,9 @@ describe('InviteMembersModal', () => {
 	describe('error handling', () => {
 		it('shows BE message on single invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'An invite already exists for this email: single@signoz.io',
+			mockSendInvite.mockRejectedValue(
+				makeApiError('An invite already exists for this email: single@signoz.io'),
 			);
-			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -182,16 +171,18 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
+				expect(toast.error).toHaveBeenCalledWith(
+					'An invite already exists for this email: single@signoz.io',
+					expect.anything(),
+				);
 			});
 		});
 
 		it('shows BE message on bulk invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'An invite already exists for this email: alice@signoz.io',
+			mockInviteUsers.mockRejectedValue(
+				makeApiError('An invite already exists for this email: alice@signoz.io'),
 			);
-			mockInviteUsers.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -210,17 +201,18 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
+				expect(toast.error).toHaveBeenCalledWith(
+					'An invite already exists for this email: alice@signoz.io',
+					expect.anything(),
+				);
 			});
 		});
 
 		it('shows BE message on generic error', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'Internal server error',
-				StatusCodes.INTERNAL_SERVER_ERROR,
+			mockSendInvite.mockRejectedValue(
+				makeApiError('Internal server error', StatusCodes.INTERNAL_SERVER_ERROR),
 			);
-			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -235,7 +227,10 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
+				expect(toast.error).toHaveBeenCalledWith(
+					'Internal server error',
+					expect.anything(),
+				);
 			});
 		});
 	});

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

@@ -28,6 +28,17 @@
 	}
 }
 
+// In table/column view, keep action buttons visible at the viewport's right edge
+.log-line-action-buttons.table-view-log-actions {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	left: auto;
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 5;
+}
+
 .lightMode {
 	.log-line-action-buttons {
 		border: 1px solid var(--bg-vanilla-400);

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

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

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

@@ -1,43 +0,0 @@
-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/useLogsTableColumns.module.scss

@@ -1,12 +0,0 @@
-.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

@@ -1,117 +0,0 @@
-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: 24 },
-			cell: ({ row }): ReactElement => (
-				<LogStateIndicator
-					fontSize={fontSize}
-					severityText={row.severity_text as string}
-					severityNumber={row.severity_number as number}
-				/>
-			),
-		};
-
-		const fieldColumns: TableColumnDef<ILog>[] = fields
-			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
-			.map(
-				(f): TableColumnDef<ILog> => ({
-					id: f.name,
-					header: f.name,
-					accessorFn: (log): unknown => FlatLogData(log)[f.name],
-					enableRemove: true,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => (
-						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-					),
-				}),
-			);
-
-		const timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					width: { min: 170, max: 220 },
-					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/MembersTable/MembersTable.tsx

@@ -210,7 +210,7 @@ function MembersTable({
 					index % 2 === 0 ? 'members-table-row--tinted' : ''
 				}
 				onRow={(record): React.HTMLAttributes<HTMLElement> => {
-					const isClickable = !!onRowClick;
+					const isClickable = onRowClick && record.status !== MemberStatus.Deleted;
 					return {
 						onClick: (): void => {
 							if (isClickable) {

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

@@ -86,7 +86,7 @@ describe('MembersTable', () => {
 		);
 	});
 
-	it('renders DELETED badge and calls onRowClick when a deleted member row is clicked', async () => {
+	it('renders DELETED badge and does not call onRowClick when a deleted member row is clicked', async () => {
 		const onRowClick = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const deletedMember: MemberRow = {
@@ -108,7 +108,7 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('DELETED')).toBeInTheDocument();
 		await user.click(screen.getByText('Dave Deleted'));
-		expect(onRowClick).toHaveBeenCalledWith(
+		expect(onRowClick).not.toHaveBeenCalledWith(
 			expect.objectContaining({ id: 'user-del' }),
 		);
 	});

frontend/src/components/RolesSelect/RolesSelect.tsx

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

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

@@ -17,8 +17,6 @@ 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';
@@ -29,7 +27,6 @@ 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,
@@ -84,11 +81,11 @@ function AddKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				showErrorModal(
+				const errMessage =
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
+					)?.getErrorMessage() || 'Failed to create key';
+				toast.error(errMessage, { richColors: true });
 			},
 		},
 	});
@@ -154,7 +151,7 @@ function AddKeyModal(): JSX.Element {
 			width="base"
 			className="add-key-modal"
 			showCloseButton
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -16,12 +16,9 @@ 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,
@@ -48,11 +45,11 @@ function DeleteAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (error) => {
-				showErrorModal(
+				const errMessage =
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
+					)?.getErrorMessage() || 'Failed to delete service account';
+				toast.error(errMessage, { richColors: true });
 			},
 		},
 	});
@@ -82,7 +79,7 @@ function DeleteAccountModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			<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,9 +17,7 @@ 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';
@@ -43,7 +41,6 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	const open = !!editKeyId && !!selectedAccountId;
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
 
 	const {
@@ -81,11 +78,11 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				showErrorModal(
+				const errMessage =
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
+					)?.getErrorMessage() || 'Failed to update key';
+				toast.error(errMessage, { richColors: true });
 			},
 		},
 	});
@@ -105,13 +102,12 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					});
 				}
 			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) => {
-				showErrorModal(
+				const errMessage =
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
+					)?.getErrorMessage() || 'Failed to revoke key';
+				toast.error(errMessage, { richColors: true });
 			},
 		},
 	});
@@ -164,7 +160,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			{isRevokeConfirmOpen ? (
 				<RevokeKeyContent

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -17,7 +17,7 @@ interface OverviewTabProps {
 	localName: string;
 	onNameChange: (v: string) => void;
 	localRole: string;
-	onRoleChange: (v: string | undefined) => void;
+	onRoleChange: (v: string) => void;
 	isDisabled: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -16,8 +16,6 @@ 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;
@@ -58,7 +56,6 @@ 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,
@@ -86,11 +83,11 @@ function RevokeKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				showErrorModal(
+				const errMessage =
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
+					)?.getErrorMessage() || 'Failed to revoke key';
+				toast.error(errMessage, { richColors: true });
 			},
 		},
 	});
@@ -118,7 +115,7 @@ function RevokeKeyModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={isErrorModalVisible}
+			disableOutsideClick={false}
 		>
 			<RevokeKeyContent
 				isRevoking={isRevoking}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
@@ -8,9 +8,7 @@ import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	getGetServiceAccountRolesQueryKey,
 	getListServiceAccountsQueryKey,
-	useDeleteServiceAccountRole,
 	useGetServiceAccount,
 	useListServiceAccountKeys,
 	useUpdateServiceAccount,
@@ -25,10 +23,7 @@ import {
 	ServiceAccountStatus,
 	toServiceAccountRow,
 } from 'container/ServiceAccountsSettings/utils';
-import {
-	RoleUpdateFailure,
-	useServiceAccountRoleManager,
-} from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import { useServiceAccountRoleManager } from 'hooks/serviceAccount/useServiceAccountRoleManager';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -37,7 +32,7 @@ import {
 	useQueryState,
 } from 'nuqs';
 import APIError from 'types/api/error';
-import { retryOn429, toAPIError } from 'utils/errorUtils';
+import { toAPIError } from 'utils/errorUtils';
 
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
@@ -54,13 +49,6 @@ 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,
@@ -115,35 +103,21 @@ function ServiceAccountDrawer({
 		[accountData],
 	);
 
-	const {
-		currentRoles,
-		isLoading: isRolesLoading,
-		applyDiff,
-	} = useServiceAccountRoleManager(selectedAccountId ?? '');
-
-	const roleSessionRef = useRef<string | null>(null);
+	const { currentRoles, applyDiff } = useServiceAccountRoleManager(
+		selectedAccountId ?? '',
+	);
 
 	useEffect(() => {
 		if (account?.id) {
 			setLocalName(account?.name ?? '');
 			setKeysPage(1);
 		}
+		setSaveErrors([]);
 	}, [account?.id, account?.name, setKeysPage]);
 
 	useEffect(() => {
-		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]);
+		setLocalRole(currentRoles[0]?.id ?? '');
+	}, [currentRoles]);
 
 	const isDeleted =
 		account?.status?.toUpperCase() === ServiceAccountStatus.Deleted;
@@ -179,26 +153,12 @@ 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 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 toSaveApiError = useCallback(
+		(err: unknown): APIError =>
+			convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+			toAPIError(err as AxiosError<RenderErrorResponseDTO>),
+		[],
 	);
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -220,7 +180,14 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [account, localName, updateMutateAsync, refetchAccount, queryClient]);
+	}, [
+		account,
+		localName,
+		updateMutateAsync,
+		refetchAccount,
+		queryClient,
+		toSaveApiError,
+	]);
 
 	const handleNameChange = useCallback((name: string): void => {
 		setLocalName(name);
@@ -243,39 +210,29 @@ function ServiceAccountDrawer({
 				);
 			}
 		},
-		[],
-	);
-
-	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],
+		[toSaveApiError],
 	);
 
 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await executeRolesOperation(selectedAccountId ?? '');
+			const failures = await applyDiff(
+				[localRole].filter(Boolean),
+				availableRoles,
+			);
 			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');
-					return [...rest, ...failuresToSaveErrors(failures)];
+					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];
 				});
 			}
 		} catch (err) {
@@ -285,7 +242,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [selectedAccountId, executeRolesOperation, failuresToSaveErrors]);
+	}, [localRole, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
 
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -304,7 +261,7 @@ function ServiceAccountDrawer({
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				executeRolesOperation(account.id),
+				applyDiff([localRole].filter(Boolean), availableRoles),
 			]);
 
 			const errors: SaveError[] = [];
@@ -324,7 +281,14 @@ function ServiceAccountDrawer({
 					onRetry: retryRolesUpdate,
 				});
 			} else {
-				errors.push(...failuresToSaveErrors(rolesResult.value));
+				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) {
@@ -346,14 +310,17 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
+		localRole,
+		availableRoles,
 		updateMutateAsync,
-		executeRolesOperation,
+		applyDiff,
 		refetchAccount,
 		onSuccess,
 		queryClient,
+		toSaveApiError,
 		retryNameUpdate,
+		makeRoleRetry,
 		retryRolesUpdate,
-		failuresToSaveErrors,
 	]);
 
 	const handleClose = useCallback((): void => {
@@ -446,10 +413,7 @@ function ServiceAccountDrawer({
 								localName={localName}
 								onNameChange={handleNameChange}
 								localRole={localRole}
-								onRoleChange={(role): void => {
-									setLocalRole(role ?? '');
-									clearRoleErrors();
-								}}
+								onRoleChange={setLocalRole}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}

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

@@ -390,42 +390,6 @@ 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/TanStackCustomTableRow.tsx

@@ -1,141 +0,0 @@
-import { ComponentProps, memo } from 'react';
-import { TableComponents } from 'react-virtuoso';
-import cx from 'classnames';
-
-import TanStackRowCells from './TanStackRow';
-import {
-	useClearRowHovered,
-	useSetRowHovered,
-} from './TanStackTableStateContext';
-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>({
-	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}>
-				<TanStackRowCells
-					row={item.row}
-					itemKind={item.kind}
-					context={context}
-					hasSingleColumn={context?.hasSingleColumn ?? false}
-					columnOrderKey={context?.columnOrderKey ?? ''}
-					columnVisibilityKey={context?.columnVisibilityKey ?? ''}
-				/>
-			</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}
-		>
-			<TanStackRowCells
-				row={item.row}
-				itemKind={item.kind}
-				context={context}
-				hasSingleColumn={context?.hasSingleColumn ?? false}
-				columnOrderKey={context?.columnOrderKey ?? ''}
-				columnVisibilityKey={context?.columnVisibilityKey ?? ''}
-			/>
-		</tr>
-	);
-}
-
-// Custom comparison - only re-render when row identity or computed values change
-// eslint-disable-next-line sonarjs/cognitive-complexity
-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;
-	}
-
-	// Column layout changed = must re-render cells
-	if (prev.context?.hasSingleColumn !== next.context?.hasSingleColumn) {
-		return false;
-	}
-	if (prev.context?.columnOrderKey !== next.context?.columnOrderKey) {
-		return false;
-	}
-
-	if (prev.context?.columnVisibilityKey !== next.context?.columnVisibilityKey) {
-		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.tsx

@@ -1,255 +0,0 @@
-import type {
-	CSSProperties,
-	MouseEvent as ReactMouseEvent,
-	TouchEvent as ReactTouchEvent,
-} from 'react';
-import { useCallback, 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 { ChevronDown, ChevronUp, GripVertical } from 'lucide-react';
-
-import { SortState, 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;
-	orderBy?: SortState | null;
-	onSort?: (sort: SortState | null) => void;
-};
-
-const GRIP_ICON_SIZE = 12;
-
-const SORT_ICON_SIZE = 14;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow<TData>({
-	column,
-	header,
-	isDarkMode,
-	hasSingleColumn,
-	canRemoveColumn = false,
-	onRemoveColumn,
-	orderBy,
-	onSort,
-}: 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 isSortable = column.enableSort === true && Boolean(onSort);
-	const currentSortDirection =
-		orderBy?.columnName === columnId ? orderBy.order : null;
-	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 handleSortClick = useCallback((): void => {
-		if (!isSortable || !onSort) {
-			return;
-		}
-		if (currentSortDirection === null) {
-			onSort({ columnName: columnId, order: 'asc' });
-		} else if (currentSortDirection === 'asc') {
-			onSort({ columnName: columnId, order: 'desc' });
-		} else {
-			onSort(null);
-		}
-	}, [isSortable, onSort, currentSortDirection, columnId]);
-
-	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,
-		isSortable && headerStyles.isSortable,
-	);
-
-	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}
-				{isSortable ? (
-					<button
-						type="button"
-						className={cx(
-							'tanstack-header-title',
-							headerStyles.tanstackSortButton,
-							currentSortDirection && headerStyles.isSorted,
-						)}
-						title={headerTitleAttr}
-						onClick={handleSortClick}
-						aria-sort={
-							currentSortDirection === 'asc'
-								? 'ascending'
-								: currentSortDirection === 'desc'
-								? 'descending'
-								: 'none'
-						}
-					>
-						<span className={headerStyles.tanstackSortLabel}>
-							{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>
-						<span className={headerStyles.tanstackSortIndicator}>
-							{currentSortDirection === 'asc' ? (
-								<ChevronUp size={SORT_ICON_SIZE} />
-							) : currentSortDirection === 'desc' ? (
-								<ChevronDown size={SORT_ICON_SIZE} />
-							) : null}
-						</span>
-					</button>
-				) : (
-					<span
-						className={cx('tanstack-header-title', headerStyles.tanstackHeaderTitle)}
-						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

@@ -1,142 +0,0 @@
-import type { MouseEvent } from 'react';
-import { memo, useCallback } from 'react';
-import { Row as TanStackRowModel } from '@tanstack/react-table';
-
-import { TanStackRowCell } from './TanStackRowCell';
-import { useIsRowHovered } from './TanStackTableStateContext';
-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;
-	columnOrderKey: string;
-	columnVisibilityKey: string;
-};
-
-function TanStackRowCellsInner<TData>({
-	row,
-	context,
-	itemKind,
-	hasSingleColumn,
-	columnOrderKey: _columnOrderKey,
-	columnVisibilityKey: _columnVisibilityKey,
-}: 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 onRowClickNewTab = context?.onRowClickNewTab;
-	const onRowDeactivate = context?.onRowDeactivate;
-	const isRowActive = context?.isRowActive;
-	const getRowKeyData = context?.getRowKeyData;
-	const rowIndex = row.index;
-
-	const handleClick = useCallback(
-		(event: MouseEvent<HTMLTableCellElement>) => {
-			const keyData = getRowKeyData?.(rowIndex);
-			const itemKey = keyData?.itemKey ?? '';
-
-			// Handle ctrl+click or cmd+click (open in new tab)
-			if ((event.ctrlKey || event.metaKey) && onRowClickNewTab) {
-				onRowClickNewTab(rowData, itemKey);
-				return;
-			}
-
-			const isActive = isRowActive?.(rowData) ?? false;
-			if (isActive && onRowDeactivate) {
-				onRowDeactivate();
-			} else {
-				onRowClick?.(rowData, itemKey);
-			}
-		},
-		[
-			isRowActive,
-			onRowDeactivate,
-			onRowClick,
-			onRowClickNewTab,
-			rowData,
-			getRowKeyData,
-			rowIndex,
-		],
-	);
-
-	if (itemKind === 'expansion') {
-		const keyData = getRowKeyData?.(rowIndex);
-		return (
-			<td
-				colSpan={context?.colCount ?? 1}
-				className={tableStyles.tableCellExpansion}
-			>
-				{context?.renderExpandedRow?.(
-					rowData,
-					keyData?.finalKey ?? '',
-					keyData?.groupMeta,
-				)}
-			</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 &&
-		// Layout
-		prev.hasSingleColumn === next.hasSingleColumn &&
-		// Column order - re-render when columns are reordered
-		prev.columnOrderKey === next.columnOrderKey &&
-		// Column visibility - re-render when columns are shown/hidden
-		prev.columnVisibilityKey === next.columnVisibilityKey &&
-		// Context callbacks for click handlers and row actions
-		prev.context?.onRowClick === next.context?.onRowClick &&
-		prev.context?.onRowClickNewTab === next.context?.onRowClickNewTab &&
-		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
-		prev.context?.isRowActive === next.context?.isRowActive &&
-		prev.context?.getRowKeyData === next.context?.getRowKeyData &&
-		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

@@ -1,86 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-import { memo } from 'react';
-import type { Cell } from '@tanstack/react-table';
-import { flexRender } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-import cx from 'classnames';
-
-import { useShouldShowCellSkeleton } from './TanStackTableStateContext';
-
-import tableStyles from './TanStackTable.module.scss';
-import skeletonStyles from './TanStackTableSkeleton.module.scss';
-
-export type TanStackRowCellProps<TData> = {
-	cell: Cell<TData, unknown>;
-	hasSingleColumn: boolean;
-	isLastCell: boolean;
-	hasHovered: boolean;
-	rowData: TData;
-	onClick: (event: MouseEvent<HTMLTableCellElement>) => void;
-	renderRowActions?: (row: TData) => ReactNode;
-};
-
-function TanStackRowCellInner<TData>({
-	cell,
-	hasSingleColumn,
-	isLastCell,
-	hasHovered,
-	rowData,
-	onClick,
-	renderRowActions,
-}: TanStackRowCellProps<TData>): JSX.Element {
-	const showSkeleton = useShouldShowCellSkeleton();
-
-	return (
-		<td
-			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
-			data-single-column={hasSingleColumn || undefined}
-			onClick={onClick}
-		>
-			{showSkeleton ? (
-				<Skeleton.Input
-					active
-					size="small"
-					className={skeletonStyles.cellSkeleton}
-				/>
-			) : (
-				flexRender(cell.column.columnDef.cell, cell.getContext())
-			)}
-			{isLastCell && hasHovered && renderRowActions && !showSkeleton && (
-				<span className={tableStyles.tableViewRowActions}>
-					{renderRowActions(rowData)}
-				</span>
-			)}
-		</td>
-	);
-}
-
-function areTanStackRowCellPropsEqual<TData>(
-	prev: Readonly<TanStackRowCellProps<TData>>,
-	next: Readonly<TanStackRowCellProps<TData>>,
-): boolean {
-	if (next.cell.id.startsWith('skeleton-')) {
-		return false;
-	}
-
-	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

@@ -1,99 +0,0 @@
-.tanStackTable {
-	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0;
-	table-layout: fixed;
-
-	& 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;
-	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/TanStackTable.tsx

@@ -1,645 +0,0 @@
-import type { ComponentProps, CSSProperties } from 'react';
-import {
-	forwardRef,
-	memo,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react';
-import type { TableComponents } from 'react-virtuoso';
-import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
-import { LoadingOutlined } from '@ant-design/icons';
-import {
-	DndContext,
-	DragEndEvent,
-	PointerSensor,
-	pointerWithin,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import {
-	arrayMove,
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import {
-	ComboboxSimple,
-	ComboboxSimpleItem,
-	TooltipProvider,
-} from '@signozhq/ui';
-import { Pagination } from '@signozhq/ui';
-import type { Row } from '@tanstack/react-table';
-import {
-	ColumnDef,
-	ColumnPinningState,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { Spin } from 'antd';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import {
-	ColumnVisibilitySync,
-	TableLoadingSync,
-	TanStackTableStateProvider,
-} from './TanStackTableStateContext';
-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 noopColumnSizing = (): void => {};
-const noopColumnVisibility = (): void => {};
-
-const paginationPageSizeItems: ComboboxSimpleItem[] = [10, 20, 30, 50, 100].map(
-	(value) => ({
-		value: value.toString(),
-		label: value.toString(),
-		displayValue: value.toString(),
-	}),
-);
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackTableInner<TData>(
-	{
-		data,
-		columns,
-		columnSizing: columnSizingProp,
-		onColumnSizingChange,
-		columnVisibility: columnVisibilityProp,
-		onColumnVisibilityChange,
-		onColumnOrderChange,
-		onRemoveColumn,
-		isLoading = false,
-		skeletonRowCount = 10,
-		enableQueryParams,
-		pagination,
-		onEndReached,
-		getRowId: getRowIdProp,
-		getRowKey,
-		getItemKey,
-		groupBy,
-		getGroupKey,
-		getRowStyle,
-		getRowClassName,
-		isRowActive,
-		renderRowActions,
-		onRowClick,
-		onRowClickNewTab,
-		onRowDeactivate,
-		activeRowIndex,
-		renderExpandedRow,
-		getRowCanExpand,
-		tableScrollerProps,
-		plainTextCellLineClamp,
-		cellTypographySize,
-		className,
-		testId,
-		prefixPaginationContent,
-		suffixPaginationContent,
-	}: TanStackTableProps<TData>,
-	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
-): JSX.Element {
-	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-	const isDarkMode = useIsDarkMode();
-
-	const {
-		page,
-		limit,
-		setPage,
-		setLimit,
-		orderBy,
-		setOrderBy,
-		expanded,
-		setExpanded,
-	} = useTableParams(enableQueryParams, {
-		page: pagination?.defaultPage,
-		limit: pagination?.defaultLimit,
-	});
-
-	// Track previous data for loading states
-	const prevDataRef = useRef<TData[]>(data);
-	const prevDataSizeRef = useRef(data.length || limit || skeletonRowCount);
-
-	// Update refs when we have real data (not loading)
-	if (!isLoading && data.length > 0) {
-		prevDataRef.current = data;
-		prevDataSizeRef.current = data.length;
-	}
-
-	// Effective data: use current data, previous data, or fake data for skeleton
-	const effectiveData = useMemo((): TData[] => {
-		// Have current data - use it
-		if (data.length > 0) {
-			return data;
-		}
-		// No current data but have previous data - use previous (avoids flash)
-		if (prevDataRef.current.length > 0) {
-			return prevDataRef.current;
-		}
-		// No data at all - create fake data for skeleton rows if loading
-		if (isLoading) {
-			const fakeCount = prevDataSizeRef.current || limit || skeletonRowCount;
-			return Array.from({ length: fakeCount }, (_, i) => ({
-				id: `skeleton-${i}`,
-			})) as TData[];
-		}
-		// Not loading and no data - return empty
-		return data;
-	}, [isLoading, data, limit, skeletonRowCount]);
-
-	// Compute key data for each row (handles duplicates, group prefixes)
-	// Skip computation when loading - skeleton data doesn't have the required properties
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const rowKeyData = useMemo(() => {
-		if (!getRowKey || isLoading) {
-			return undefined;
-		}
-
-		const keyCount = new Map<string, number>();
-
-		return effectiveData.map((item, index) => {
-			const itemIdentifier = getRowKey(item);
-			const itemKey = getItemKey?.(item) ?? itemIdentifier;
-			const groupMeta = groupBy?.length ? getGroupKey?.(item) : undefined;
-
-			// Build rowKey with group prefix when grouped
-			let rowKey: string;
-			if (groupBy?.length && groupMeta) {
-				const groupKeyStr = Object.values(groupMeta).join('-');
-				if (groupKeyStr && itemIdentifier) {
-					rowKey = `${groupKeyStr}-${itemIdentifier}`;
-				} else {
-					rowKey = groupKeyStr || itemIdentifier || String(index);
-				}
-			} else {
-				rowKey = itemIdentifier || String(index);
-			}
-
-			const count = keyCount.get(rowKey) || 0;
-			keyCount.set(rowKey, count + 1);
-			const finalKey = count > 0 ? `${rowKey}-${count}` : rowKey;
-
-			return { finalKey, itemKey, groupMeta };
-		});
-	}, [effectiveData, getRowKey, getItemKey, groupBy, getGroupKey, isLoading]);
-
-	const getRowKeyData = useCallback((index: number) => rowKeyData?.[index], [
-		rowKeyData,
-	]);
-
-	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, getRowKeyData),
-			),
-		[columns, isRowActive, getRowKeyData],
-	);
-
-	const getRowId = useCallback(
-		(row: TData, index: number): string => {
-			// Use rowKeyData if available (new API)
-			if (rowKeyData) {
-				return rowKeyData[index]?.finalKey ?? String(index);
-			}
-			// Legacy: use getRowIdProp
-			if (getRowIdProp) {
-				return getRowIdProp(row, index);
-			}
-			const r = row as Record<string, unknown>;
-			if (r != null && typeof r.id !== 'undefined') {
-				return String(r.id);
-			}
-			return String(index);
-		},
-		[rowKeyData, getRowIdProp],
-	);
-
-	const tableGetRowCanExpand = useCallback(
-		(row: Row<TData>): boolean =>
-			getRowCanExpand ? getRowCanExpand(row.original) : true,
-		[getRowCanExpand],
-	);
-
-	const table = useReactTable({
-		data: effectiveData,
-		columns: tanstackColumns,
-		enableColumnResizing: true,
-		enableColumnPinning: true,
-		columnResizeMode: 'onChange',
-		getCoreRowModel: getCoreRowModel(),
-		getRowId,
-		enableExpanding: Boolean(renderExpandedRow),
-		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
-		onColumnSizingChange: onColumnSizingChange ?? noopColumnSizing,
-		onColumnVisibilityChange: onColumnVisibilityChange ?? noopColumnVisibility,
-		onExpandedChange: setExpanded,
-		state: {
-			columnSizing: columnSizingProp ?? {},
-			columnVisibility: columnVisibilityProp ?? {},
-			columnPinning,
-			expanded,
-		},
-	});
-
-	// Keep refs to avoid recreating virtuosoComponents on every resize/render
-	const tableRef = useRef(table);
-	tableRef.current = table;
-	const columnsRef = useRef(columns);
-	columnsRef.current = columns;
-
-	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;
-		// expanded needs to be here, otherwise the rows are not updated when you click to expand
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [tableRows, renderExpandedRow, expanded]);
-
-	// keep previous count just to avoid flashing the pagination component
-	const prevTotalCountRef = useRef(pagination?.total || 0);
-	if (pagination?.total && pagination?.total > 0) {
-		prevTotalCountRef.current = pagination?.total;
-	}
-	const effectiveTotalCount = !isLoading
-		? pagination?.total || 0
-		: prevTotalCountRef.current;
-
-	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, columnVisibilityProp],
-	);
-
-	const columnsById = useMemo(
-		() => new Map(columns.map((c) => [c.id, c] as const)),
-		[columns],
-	);
-
-	const visibleColumnsCount = table.getVisibleFlatColumns().length;
-
-	const columnOrderKey = useMemo(() => columnIds.join(','), [columnIds]);
-	const columnVisibilityKey = useMemo(
-		() =>
-			table
-				.getVisibleFlatColumns()
-				.map((c) => c.id)
-				.join(','),
-		// we want to explicitly have table out of this deps
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[columnVisibilityProp, columnIds],
-	);
-
-	const virtuosoContext = useMemo<TableRowContext<TData>>(
-		() => ({
-			getRowStyle,
-			getRowClassName,
-			isRowActive,
-			renderRowActions,
-			onRowClick,
-			onRowClickNewTab,
-			onRowDeactivate,
-			renderExpandedRow,
-			getRowKeyData,
-			colCount: visibleColumnsCount,
-			isDarkMode,
-			plainTextCellLineClamp,
-			hasSingleColumn,
-			columnOrderKey,
-			columnVisibilityKey,
-		}),
-		[
-			getRowStyle,
-			getRowClassName,
-			isRowActive,
-			renderRowActions,
-			onRowClick,
-			onRowClickNewTab,
-			onRowDeactivate,
-			renderExpandedRow,
-			getRowKeyData,
-			visibleColumnsCount,
-			isDarkMode,
-			plainTextCellLineClamp,
-			hasSingleColumn,
-			columnOrderKey,
-			columnVisibilityKey,
-		],
-	);
-
-	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}
-									orderBy={orderBy}
-									onSort={setOrderBy}
-								/>
-							);
-						})}
-					</tr>
-				</SortableContext>
-			</DndContext>
-		);
-	}, [
-		sensors,
-		handleDragEnd,
-		columnIds,
-		flatHeaders,
-		columnsById,
-		isDarkMode,
-		hasSingleColumn,
-		onRemoveColumn,
-		canRemoveColumn,
-		orderBy,
-		setOrderBy,
-	]);
-
-	const handleEndReached = useCallback(
-		(index: number): void => {
-			onEndReached?.(index);
-		},
-		[onEndReached],
-	);
-
-	// Show loading spinner at the bottom for infinite scroll mode
-	const isInfiniteScrollMode = Boolean(onEndReached);
-	const showInfiniteScrollLoader = isInfiniteScrollMode && isLoading;
-
-	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']>
-	>;
-
-	// Use refs in virtuosoComponents to keep the component reference stable during resize
-	// This prevents Virtuoso from re-rendering all rows when columns are resized
-	const virtuosoComponents = useMemo(
-		() => ({
-			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
-				<table className={tableStyles.tanStackTable} style={style}>
-					<VirtuosoTableColGroup
-						columns={columnsRef.current}
-						table={tableRef.current}
-					/>
-					{children}
-				</table>
-			),
-			TableRow: TanStackCustomTableRow,
-		}),
-		[],
-	);
-
-	return (
-		<div className={cx(viewStyles.tanstackTableViewWrapper, className)}>
-			<TanStackTableStateProvider>
-				<TableLoadingSync
-					isLoading={isLoading}
-					isInfiniteScrollMode={isInfiniteScrollMode}
-				/>
-				<ColumnVisibilitySync visibility={columnVisibilityProp ?? {}} />
-				<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}
-						style={virtuosoTableStyle}
-						components={virtuosoComponents}
-						endReached={onEndReached ? handleEndReached : undefined}
-						data-testid={testId}
-					/>
-					{showInfiniteScrollLoader && (
-						<div
-							className={viewStyles.tanstackLoadingOverlay}
-							data-testid="tanstack-infinite-loader"
-						>
-							<Spin indicator={<LoadingOutlined spin />} tip="Loading more..." />
-						</div>
-					)}
-					{showPagination && pagination && (
-						<div className={viewStyles.paginationContainer}>
-							{prefixPaginationContent}
-							<Pagination
-								current={page}
-								pageSize={limit}
-								total={effectiveTotalCount}
-								onPageChange={(p): void => {
-									setPage(p);
-								}}
-							/>
-							<div className={viewStyles.paginationPageSize}>
-								<ComboboxSimple
-									value={limit?.toString()}
-									defaultValue="10"
-									onChange={(value): void => setLimit(+value)}
-									items={paginationPageSizeItems}
-								/>
-							</div>
-							{suffixPaginationContent}
-						</div>
-					)}
-				</TooltipProvider>
-			</TanStackTableStateProvider>
-		</div>
-	);
-}
-
-const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
-	props: TanStackTableProps<TData> & {
-		ref?: React.Ref<TanStackTableHandle>;
-	},
-) => JSX.Element;
-
-export const TanStackTableBase = memo(
-	TanStackTableForward,
-) as typeof TanStackTableForward;

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

@@ -1,21 +0,0 @@
-.headerSkeleton {
-	width: 60% !important;
-	min-width: 50px !important;
-	height: 16px !important;
-
-	:global(.ant-skeleton-input) {
-		min-width: 50px !important;
-		height: 16px !important;
-	}
-}
-
-.cellSkeleton {
-	width: 80% !important;
-	min-width: 40px !important;
-	height: 14px !important;
-
-	:global(.ant-skeleton-input) {
-		min-width: 40px !important;
-		height: 14px !important;
-	}
-}

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -1,129 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-
-import { TableColumnDef } from './types';
-import {
-	getColumnInitialSize,
-	getColumnMaxWidth,
-	getColumnMinWidthPx,
-} from './utils';
-
-import tableStyles from './TanStackTable.module.scss';
-import styles from './TanStackTableSkeleton.module.scss';
-
-type TanStackTableSkeletonProps<TData> = {
-	columns: TableColumnDef<TData>[];
-	rowCount: number;
-	isDarkMode: boolean;
-	columnSizing?: ColumnSizingState;
-};
-
-export function TanStackTableSkeleton<TData>({
-	columns,
-	rowCount,
-	isDarkMode,
-	columnSizing,
-}: TanStackTableSkeletonProps<TData>): JSX.Element {
-	const rows = useMemo(() => Array.from({ length: rowCount }, (_, i) => i), [
-		rowCount,
-	]);
-
-	return (
-		<table className={tableStyles.tanStackTable}>
-			<colgroup>
-				{columns.map((column) => {
-					const isFixedColumn = column.width?.fixed != null;
-					const hasDefaultWidth = column.width?.default != null;
-					const hasMinMax = column.width?.min != null && column.width?.max != null;
-					const minWidthPx = getColumnMinWidthPx(column);
-					const maxWidthPx = getColumnMaxWidth(column);
-					const persistedWidth = columnSizing?.[column.id];
-
-					// Fixed columns get exact width with no flexibility
-					if (isFixedColumn) {
-						const fixedWidth = column.width?.fixed;
-						return (
-							<col
-								key={column.id}
-								style={{
-									width: fixedWidth,
-									minWidth: fixedWidth,
-									maxWidth: fixedWidth,
-								}}
-							/>
-						);
-					}
-
-					// User has resized this column - use persisted width
-					if (persistedWidth != null) {
-						const width = Math.max(persistedWidth, minWidthPx);
-						return (
-							<col
-								key={column.id}
-								style={{
-									width,
-									minWidth: minWidthPx,
-									maxWidth: maxWidthPx,
-								}}
-							/>
-						);
-					}
-
-					// Columns with min+max but no default: auto-size within bounds
-					if (hasMinMax && !hasDefaultWidth) {
-						return (
-							<col
-								key={column.id}
-								style={{
-									minWidth: minWidthPx,
-									maxWidth: maxWidthPx,
-								}}
-							/>
-						);
-					}
-
-					// For other columns, use initial size with min/max constraints
-					return (
-						<col
-							key={column.id}
-							style={{
-								width: getColumnInitialSize(column),
-								minWidth: minWidthPx,
-								maxWidth: maxWidthPx,
-							}}
-						/>
-					);
-				})}
-			</colgroup>
-			<thead>
-				<tr>
-					{columns.map((column) => (
-						<th
-							key={column.id}
-							className={tableStyles.tableHeaderCell}
-							data-dark-mode={isDarkMode}
-						>
-							{typeof column.header === 'function' ? (
-								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
-							) : (
-								column.header
-							)}
-						</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((rowIndex) => (
-					<tr key={rowIndex} className={tableStyles.tableRow}>
-						{columns.map((column) => (
-							<td key={column.id} className={tableStyles.tableCell}>
-								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-}

frontend/src/components/TanStackTableView/TanStackTableStateContext.tsx

@@ -1,227 +0,0 @@
-/* eslint-disable no-restricted-imports */
-import {
-	createContext,
-	ReactNode,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-} from 'react';
-/* eslint-enable no-restricted-imports */
-import { VisibilityState } from '@tanstack/react-table';
-import { createStore, StoreApi, useStore } from 'zustand';
-
-const CLEAR_HOVER_DELAY_MS = 100;
-
-type TableState = {
-	// Hover state
-	hoveredRowId: string | null;
-	clearTimeoutId: ReturnType<typeof setTimeout> | null;
-	setHoveredRowId: (id: string | null) => void;
-	scheduleClearHover: (rowId: string) => void;
-
-	// Loading state
-	isLoading: boolean;
-	setIsLoading: (loading: boolean) => void;
-
-	// Infinite scroll mode - when enabled, cells don't show skeleton on load
-	isInfiniteScrollMode: boolean;
-	setIsInfiniteScrollMode: (enabled: boolean) => void;
-
-	// Column visibility state
-	columnVisibility: VisibilityState;
-	setColumnVisibility: (visibility: VisibilityState) => void;
-};
-
-const createTableStateStore = (): StoreApi<TableState> =>
-	createStore<TableState>((set, get) => ({
-		// Hover state
-		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 });
-		},
-
-		// Loading state
-		isLoading: false,
-		setIsLoading: (loading: boolean): void => {
-			set({ isLoading: loading });
-		},
-
-		// Infinite scroll mode
-		isInfiniteScrollMode: false,
-		setIsInfiniteScrollMode: (enabled: boolean): void => {
-			set({ isInfiniteScrollMode: enabled });
-		},
-
-		// Column visibility state
-		columnVisibility: {},
-		setColumnVisibility: (visibility: VisibilityState): void => {
-			set({ columnVisibility: visibility });
-		},
-	}));
-
-type TableStateStore = StoreApi<TableState>;
-
-const TanStackTableStateContext = createContext<TableStateStore | null>(null);
-
-export function TanStackTableStateProvider({
-	children,
-}: {
-	children: ReactNode;
-}): JSX.Element {
-	const storeRef = useRef<TableStateStore | null>(null);
-	if (!storeRef.current) {
-		storeRef.current = createTableStateStore();
-	}
-	return (
-		<TanStackTableStateContext.Provider value={storeRef.current}>
-			{children}
-		</TanStackTableStateContext.Provider>
-	);
-}
-
-const defaultStore = createTableStateStore();
-
-// Hover hooks
-export const useIsRowHovered = (rowId: string): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	const isHovered = useStore(
-		store ?? defaultStore,
-		(s) => s.hoveredRowId === rowId,
-	);
-	return store ? isHovered : false;
-};
-
-export const useSetRowHovered = (rowId: string): (() => void) => {
-	const store = useContext(TanStackTableStateContext);
-	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(TanStackTableStateContext);
-	return useCallback(() => {
-		if (store) {
-			store.getState().scheduleClearHover(rowId);
-		}
-	}, [store, rowId]);
-};
-
-// Loading hooks
-export const useIsTableLoading = (): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(store ?? defaultStore, (s) => s.isLoading);
-};
-
-export const useSetTableLoading = (): ((loading: boolean) => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(
-		(loading: boolean) => {
-			if (store) {
-				store.getState().setIsLoading(loading);
-			}
-		},
-		[store],
-	);
-};
-
-// Sync component to update loading state from props
-export function TableLoadingSync({
-	isLoading,
-	isInfiniteScrollMode,
-}: {
-	isLoading: boolean;
-	isInfiniteScrollMode: boolean;
-}): null {
-	const store = useContext(TanStackTableStateContext);
-
-	// Sync on mount and when props change
-	useEffect(() => {
-		if (store) {
-			store.getState().setIsLoading(isLoading);
-			store.getState().setIsInfiniteScrollMode(isInfiniteScrollMode);
-		}
-	}, [isLoading, isInfiniteScrollMode, store]);
-
-	return null;
-}
-
-// Hook to check if cells should show skeleton (loading but not infinite scroll mode)
-export const useShouldShowCellSkeleton = (): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(
-		store ?? defaultStore,
-		(s) => s.isLoading && !s.isInfiniteScrollMode,
-	);
-};
-
-// Column visibility hooks
-export const useColumnVisibility = (): VisibilityState => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(store ?? defaultStore, (s) => s.columnVisibility);
-};
-
-export const useIsColumnVisible = (columnId: string): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(
-		store ?? defaultStore,
-		(s) => s.columnVisibility[columnId] !== false,
-	);
-};
-
-export const useSetColumnVisibility = (): ((
-	visibility: VisibilityState,
-) => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(
-		(visibility: VisibilityState) => {
-			if (store) {
-				store.getState().setColumnVisibility(visibility);
-			}
-		},
-		[store],
-	);
-};
-
-// Sync component to update column visibility from props
-export function ColumnVisibilitySync({
-	visibility,
-}: {
-	visibility: VisibilityState;
-}): null {
-	const setVisibility = useSetColumnVisibility();
-
-	// Sync on mount and when visibility changes
-	useEffect(() => {
-		setVisibility(visibility);
-	}, [visibility, setVisibility]);
-
-	return null;
-}
-
-export default TanStackTableStateContext;

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -1,20 +0,0 @@
-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

@@ -1,152 +0,0 @@
-.tanstackTableViewWrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	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: auto;
-}
-
-.tanstackTableFootLoaderCell {
-	text-align: center;
-	padding: 8px 0;
-}
-
-.tanstackTableVirtuosoScroll {
-	flex: 1;
-	width: 100%;
-	overflow-x: auto;
-	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;
-		}
-	}
-}
-
-.paginationContainer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 12px;
-	margin-top: 12px;
-}
-
-.paginationPageSize {
-	width: 80px;
-	--combobox-trigger-height: 2rem;
-}
-
-.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;
-	background: var(--l1-background);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-: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

@@ -1,67 +0,0 @@
-import type { Table } from '@tanstack/react-table';
-
-import type { TableColumnDef } from './types';
-
-export function VirtuosoTableColGroup<TData>({
-	columns,
-	table,
-}: {
-	columns: TableColumnDef<TData>[];
-	table: Table<TData>;
-}): JSX.Element {
-	const visibleTanstackColumns = table.getVisibleFlatColumns();
-	const columnDefsById = new Map(columns.map((c) => [c.id, c]));
-	const columnSizing = table.getState().columnSizing;
-
-	return (
-		<colgroup>
-			{visibleTanstackColumns.map((tanstackCol) => {
-				const colDef = columnDefsById.get(tanstackCol.id);
-				const isFixedColumn = colDef?.width?.fixed != null;
-				const hasDefaultWidth = colDef?.width?.default != null;
-				const hasMinMax = colDef?.width?.min != null && colDef?.width?.max != null;
-				const hasPersistedWidth = columnSizing[tanstackCol.id] != null;
-
-				const computedSize = tanstackCol.getSize();
-				const minSize = tanstackCol.columnDef.minSize;
-				const maxSize = tanstackCol.columnDef.maxSize;
-
-				if (isFixedColumn) {
-					return (
-						<col
-							key={tanstackCol.id}
-							style={{
-								width: computedSize,
-								minWidth: computedSize,
-								maxWidth: computedSize,
-							}}
-						/>
-					);
-				}
-
-				if (hasMinMax && !hasDefaultWidth && !hasPersistedWidth) {
-					return (
-						<col
-							key={tanstackCol.id}
-							style={{
-								minWidth: minSize,
-								maxWidth: maxSize,
-							}}
-						/>
-					);
-				}
-
-				return (
-					<col
-						key={tanstackCol.id}
-						style={{
-							width: computedSize,
-							minWidth: minSize,
-							maxWidth: maxSize,
-						}}
-					/>
-				);
-			})}
-		</colgroup>
-	);
-}

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

@@ -1,253 +0,0 @@
-jest.mock('../TanStackTable.module.scss', () => ({
-	__esModule: true,
-	default: {
-		tableRow: 'tableRow',
-		tableRowActive: 'tableRowActive',
-		tableRowExpansion: 'tableRowExpansion',
-	},
-}));
-
-jest.mock('../TanStackRow', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<td data-testid="mocked-row-cells">mocked cells</td>
-	),
-}));
-
-const mockSetRowHovered = jest.fn();
-const mockClearRowHovered = jest.fn();
-
-jest.mock('../TanStackTableStateContext', () => ({
-	useSetRowHovered: (_rowId: string): (() => void) => mockSetRowHovered,
-	useClearRowHovered: (_rowId: string): (() => void) => mockClearRowHovered,
-}));
-
-import { fireEvent, 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 }, id } as never,
-});
-
-const virtuosoAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-const baseContext: TableRowContext<{ id: string }> = {
-	colCount: 1,
-	hasSingleColumn: false,
-	columnOrderKey: 'col1',
-	columnVisibilityKey: 'col1',
-};
-
-describe('TanStackCustomTableRow', () => {
-	beforeEach(() => {
-		mockSetRowHovered.mockClear();
-		mockClearRowHovered.mockClear();
-	});
-
-	it('renders cells via TanStackRowCells', async () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={baseContext}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(await screen.findByTestId('mocked-row-cells')).toBeInTheDocument();
-	});
-
-	it('applies active class when isRowActive returns true', () => {
-		const ctx: TableRowContext<{ id: string }> = {
-			...baseContext,
-			isRowActive: (row) => row.id === '1',
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={ctx}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
-	});
-
-	it('does not apply active class when isRowActive returns false', () => {
-		const ctx: TableRowContext<{ id: string }> = {
-			...baseContext,
-			isRowActive: (row) => row.id === 'other',
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={ctx}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
-	});
-
-	it('renders expansion row with expansion class', () => {
-		const item: FlatItem<{ id: string }> = {
-			kind: 'expansion',
-			row: { original: { id: '1' }, id: '1' } as never,
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={item}
-						context={baseContext}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
-	});
-
-	describe('hover state management', () => {
-		it('calls setRowHovered on mouse enter', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			fireEvent.mouseEnter(row);
-			expect(mockSetRowHovered).toHaveBeenCalled();
-		});
-
-		it('calls clearRowHovered on mouse leave', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			fireEvent.mouseLeave(row);
-			expect(mockClearRowHovered).toHaveBeenCalled();
-		});
-	});
-
-	describe('virtuoso integration', () => {
-		it('forwards data-index attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-index', '0');
-		});
-
-		it('forwards data-item-index attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-item-index', '0');
-		});
-
-		it('forwards data-known-size attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-known-size', '40');
-		});
-	});
-
-	describe('row interaction', () => {
-		it('applies custom style from getRowStyle in context', () => {
-			const ctx: TableRowContext<{ id: string }> = {
-				...baseContext,
-				getRowStyle: () => ({ backgroundColor: 'red' }),
-			};
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={ctx}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveStyle({ backgroundColor: 'red' });
-		});
-
-		it('applies custom className from getRowClassName in context', () => {
-			const ctx: TableRowContext<{ id: string }> = {
-				...baseContext,
-				getRowClassName: () => 'custom-row-class',
-			};
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={ctx}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveClass('custom-row-class');
-		});
-	});
-});

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

@@ -1,368 +0,0 @@
-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();
-	});
-
-	describe('sorting', () => {
-		const sortableCol = col('sortable', { enableSort: true, header: 'Sortable' });
-		const sortableHeader = {
-			id: 'sortable',
-			column: {
-				id: 'sortable',
-				getCanResize: (): boolean => true,
-				getIsResizing: (): boolean => false,
-				columnDef: { header: 'Sortable', enableSort: true },
-			},
-			getResizeHandler: (): jest.Mock => jest.fn(),
-			getContext: (): Record<string, unknown> => ({}),
-		} as never;
-
-		it('calls onSort with asc when clicking unsorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// Sort button uses the column header as title
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith({
-				columnName: 'sortable',
-				order: 'asc',
-			});
-		});
-
-		it('calls onSort with desc when clicking asc-sorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-								orderBy={{ columnName: 'sortable', order: 'asc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith({
-				columnName: 'sortable',
-				order: 'desc',
-			});
-		});
-
-		it('calls onSort with null when clicking desc-sorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-								orderBy={{ columnName: 'sortable', order: 'desc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith(null);
-		});
-
-		it('shows ascending indicator when orderBy matches column with asc', () => {
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={jest.fn()}
-								orderBy={{ columnName: 'sortable', order: 'asc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			expect(sortButton).toHaveAttribute('aria-sort', 'ascending');
-		});
-
-		it('shows descending indicator when orderBy matches column with desc', () => {
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={jest.fn()}
-								orderBy={{ columnName: 'sortable', order: 'desc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			expect(sortButton).toHaveAttribute('aria-sort', 'descending');
-		});
-
-		it('does not show sort button when enableSort is false', () => {
-			const nonSortableCol = col('nonsort', {
-				enableSort: false,
-				header: 'Nonsort',
-			});
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={nonSortableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// When enableSort is false, the header text is rendered as a span, not a button
-			// The title 'Nonsort' exists on the span, not on a button
-			const titleElement = screen.getByTitle('Nonsort');
-			expect(titleElement.tagName.toLowerCase()).not.toBe('button');
-		});
-	});
-
-	describe('resizing', () => {
-		it('shows resize handle when enableResize is not false', () => {
-			const resizableCol = col('resizable', { enableResize: true });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={resizableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// Resize handle has title "Drag to resize column"
-			expect(screen.getByTitle('Drag to resize column')).toBeInTheDocument();
-		});
-
-		it('hides resize handle when enableResize is false', () => {
-			const nonResizableCol = col('noresize', { enableResize: false });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={nonResizableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			expect(screen.queryByTitle('Drag to resize column')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('column movement', () => {
-		it('does not show grip when enableMove is false', () => {
-			const noMoveCol = col('nomove', { enableMove: false });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={noMoveCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			expect(
-				screen.queryByRole('button', { name: /drag/i }),
-			).not.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,288 +0,0 @@
-import { fireEvent, 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}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</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,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		await user.click(screen.getAllByRole('cell')[0]);
-		// onRowClick receives (rowData, itemKey) - itemKey is empty when getRowKeyData not provided
-		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,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</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>,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</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>,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="expansion"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
-	});
-
-	describe('new tab click', () => {
-		it('calls onRowClickNewTab on ctrl+click', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('calls onRowClickNewTab on meta+click (cmd)', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { metaKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('does not call onRowClick when modifier key is pressed', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-	});
-});

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

@@ -1,440 +0,0 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { UrlUpdateEvent } from 'nuqs/adapters/testing';
-
-import { renderTanStackTable } from './testUtils';
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('../TanStackTable.module.scss', () => ({
-	__esModule: true,
-	default: {
-		tanStackTable: 'tanStackTable',
-		tableRow: 'tableRow',
-		tableRowActive: 'tableRowActive',
-		tableRowExpansion: 'tableRowExpansion',
-		tableCell: 'tableCell',
-		tableCellExpansion: 'tableCellExpansion',
-		tableHeaderCell: 'tableHeaderCell',
-		tableCellText: 'tableCellText',
-		tableViewRowActions: 'tableViewRowActions',
-	},
-}));
-
-describe('TanStackTableView Integration', () => {
-	describe('rendering', () => {
-		it('renders all data rows', async () => {
-			renderTanStackTable({});
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-				expect(screen.getByText('Item 2')).toBeInTheDocument();
-				expect(screen.getByText('Item 3')).toBeInTheDocument();
-			});
-		});
-
-		it('renders column headers', async () => {
-			renderTanStackTable({});
-			await waitFor(() => {
-				expect(screen.getByText('ID')).toBeInTheDocument();
-				expect(screen.getByText('Name')).toBeInTheDocument();
-				expect(screen.getByText('Value')).toBeInTheDocument();
-			});
-		});
-
-		it('renders empty state when data is empty and not loading', async () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: false },
-			});
-			// Table should still render but with no data rows
-			await waitFor(() => {
-				expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
-			});
-		});
-
-		it('renders table structure when loading with no previous data', async () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: true },
-			});
-			// Table should render with skeleton rows
-			await waitFor(() => {
-				expect(screen.getByRole('table')).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('loading states', () => {
-		it('keeps table mounted when loading with no data', () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: true },
-			});
-			// Table should still be in the DOM for skeleton rows
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-
-		it('shows loading spinner for infinite scroll when loading', () => {
-			renderTanStackTable({
-				props: { isLoading: true, onEndReached: jest.fn() },
-			});
-			expect(screen.getByTestId('tanstack-infinite-loader')).toBeInTheDocument();
-		});
-
-		it('does not show loading spinner for infinite scroll when not loading', () => {
-			renderTanStackTable({
-				props: { isLoading: false, onEndReached: jest.fn() },
-			});
-			expect(
-				screen.queryByTestId('tanstack-infinite-loader'),
-			).not.toBeInTheDocument();
-		});
-
-		it('does not show loading spinner when not in infinite scroll mode', () => {
-			renderTanStackTable({
-				props: { isLoading: true },
-			});
-			expect(
-				screen.queryByTestId('tanstack-infinite-loader'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('pagination', () => {
-		it('renders pagination when pagination prop is provided', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-				},
-			});
-			await waitFor(() => {
-				// Look for pagination navigation or page number text
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-		});
-
-		it('updates page when clicking page number', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-					enableQueryParams: true,
-				},
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-
-			// Find page 2 button/link within pagination navigation
-			const nav = screen.getByRole('navigation');
-			const page2 = Array.from(nav.querySelectorAll('button')).find(
-				(btn) => btn.textContent?.trim() === '2',
-			);
-			if (!page2) {
-				throw new Error('Page 2 button not found in pagination');
-			}
-			await user.click(page2);
-
-			await waitFor(() => {
-				const lastPage = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('page'))
-					.filter(Boolean)
-					.pop();
-				expect(lastPage).toBe('2');
-			});
-		});
-
-		it('does not render pagination in infinite scroll mode', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					onEndReached: jest.fn(), // This enables infinite scroll mode
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Pagination should not be visible in infinite scroll mode
-			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-		});
-
-		it('renders prefixPaginationContent before pagination', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					prefixPaginationContent: <span data-testid="prefix-content">Prefix</span>,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByTestId('prefix-content')).toBeInTheDocument();
-			});
-		});
-
-		it('renders suffixPaginationContent after pagination', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					suffixPaginationContent: <span data-testid="suffix-content">Suffix</span>,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByTestId('suffix-content')).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('sorting', () => {
-		it('updates orderBy URL param when clicking sortable header', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: { enableQueryParams: true },
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find the sortable column header's sort button (ID column has enableSort: true)
-			const sortButton = screen.getByTitle('ID');
-			await user.click(sortButton);
-
-			await waitFor(() => {
-				const lastOrderBy = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('order_by'))
-					.filter(Boolean)
-					.pop();
-				expect(lastOrderBy).toBeDefined();
-				const parsed = JSON.parse(lastOrderBy!);
-				expect(parsed.columnName).toBe('id');
-				expect(parsed.order).toBe('asc');
-			});
-		});
-
-		it('toggles sort order on subsequent clicks', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: { enableQueryParams: true },
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			const sortButton = screen.getByTitle('ID');
-
-			// First click - asc
-			await user.click(sortButton);
-			// Second click - desc
-			await user.click(sortButton);
-
-			await waitFor(() => {
-				const lastOrderBy = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('order_by'))
-					.filter(Boolean)
-					.pop();
-				if (lastOrderBy) {
-					const parsed = JSON.parse(lastOrderBy);
-					expect(parsed.order).toBe('desc');
-				}
-			});
-		});
-	});
-
-	describe('row selection', () => {
-		it('calls onRowClick with row data and itemKey', async () => {
-			const user = userEvent.setup();
-			const onRowClick = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			await user.click(screen.getByText('Item 1'));
-
-			expect(onRowClick).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1', name: 'Item 1' }),
-				'1',
-			);
-		});
-
-		it('applies active class when isRowActive returns true', async () => {
-			renderTanStackTable({
-				props: {
-					isRowActive: (row) => row.id === '1',
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find the row containing Item 1 and check for active class
-			const cell = screen.getByText('Item 1');
-			const row = cell.closest('tr');
-			expect(row).toHaveClass('tableRowActive');
-		});
-
-		it('calls onRowDeactivate when clicking active row', async () => {
-			const user = userEvent.setup();
-			const onRowClick = jest.fn();
-			const onRowDeactivate = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowDeactivate,
-					isRowActive: (row) => row.id === '1',
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			await user.click(screen.getByText('Item 1'));
-
-			expect(onRowDeactivate).toHaveBeenCalled();
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('opens in new tab on ctrl+click', async () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowClickNewTab,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			fireEvent.click(screen.getByText('Item 1'), { ctrlKey: true });
-
-			expect(onRowClickNewTab).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				'1',
-			);
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('opens in new tab on meta+click', async () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowClickNewTab,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			fireEvent.click(screen.getByText('Item 1'), { metaKey: true });
-
-			expect(onRowClickNewTab).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				'1',
-			);
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('row expansion', () => {
-		it('renders expanded content below the row when expanded', async () => {
-			renderTanStackTable({
-				props: {
-					renderExpandedRow: (row) => (
-						<div data-testid="expanded-content">Expanded: {row.name}</div>
-					),
-					getRowCanExpand: () => true,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find and click expand button (if available in the row)
-			// The expansion is controlled by TanStack Table's expanded state
-			// For now, just verify the renderExpandedRow prop is wired correctly
-			// by checking the table renders without errors
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-	});
-
-	describe('infinite scroll', () => {
-		it('calls onEndReached when provided', async () => {
-			const onEndReached = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onEndReached,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Virtuoso will call onEndReached based on scroll position
-			// In mock context, we verify the prop is wired correctly
-			expect(onEndReached).toBeDefined();
-		});
-
-		it('shows loading spinner at bottom when loading in infinite scroll mode', () => {
-			renderTanStackTable({
-				props: {
-					isLoading: true,
-					onEndReached: jest.fn(),
-				},
-			});
-
-			expect(screen.getByTestId('tanstack-infinite-loader')).toBeInTheDocument();
-		});
-
-		it('hides pagination in infinite scroll mode', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					onEndReached: jest.fn(),
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// When onEndReached is provided, pagination should not render
-			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui';
-import { render, RenderResult } from '@testing-library/react';
-import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
-
-import TanStackTable from '../index';
-import type { TableColumnDef, TanStackTableProps } from '../types';
-
-// NOTE: Test files importing this utility must add this mock at the top of their file:
-// jest.mock('hooks/useDarkMode', () => ({ useIsDarkMode: (): boolean => false }));
-
-// Default test data types
-export type TestRow = { id: string; name: string; value: number };
-
-export const defaultColumns: TableColumnDef<TestRow>[] = [
-	{
-		id: 'id',
-		header: 'ID',
-		accessorKey: 'id',
-		enableSort: true,
-		cell: ({ value }): string => String(value),
-	},
-	{
-		id: 'name',
-		header: 'Name',
-		accessorKey: 'name',
-		cell: ({ value }): string => String(value),
-	},
-	{
-		id: 'value',
-		header: 'Value',
-		accessorKey: 'value',
-		enableSort: true,
-		cell: ({ value }): string => String(value),
-	},
-];
-
-export const defaultData: TestRow[] = [
-	{ id: '1', name: 'Item 1', value: 100 },
-	{ id: '2', name: 'Item 2', value: 200 },
-	{ id: '3', name: 'Item 3', value: 300 },
-];
-
-export type RenderTanStackTableOptions<T> = {
-	props?: Partial<TanStackTableProps<T>>;
-	queryParams?: Record<string, string>;
-	onUrlUpdate?: OnUrlUpdateFunction;
-};
-
-export function renderTanStackTable<T = TestRow>(
-	options: RenderTanStackTableOptions<T> = {},
-): RenderResult {
-	const { props = {}, queryParams, onUrlUpdate } = options;
-
-	const mergedProps = {
-		data: (defaultData as unknown) as T[],
-		columns: (defaultColumns as unknown) as TableColumnDef<T>[],
-		...props,
-	} as TanStackTableProps<T>;
-
-	return render(
-		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
-			<VirtuosoMockContext.Provider
-				value={{ viewportHeight: 500, itemHeight: 50 }}
-			>
-				<TooltipProvider>
-					<TanStackTable<T> {...mergedProps} />
-				</TooltipProvider>
-			</VirtuosoMockContext.Provider>
-		</NuqsTestingAdapter>,
-	);
-}
-
-// Helper to wrap any component with test providers (for unit tests)
-export function renderWithProviders(
-	ui: ReactNode,
-	options: {
-		queryParams?: Record<string, string>;
-		onUrlUpdate?: OnUrlUpdateFunction;
-	} = {},
-): RenderResult {
-	const { queryParams, onUrlUpdate } = options;
-
-	return render(
-		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
-			<VirtuosoMockContext.Provider
-				value={{ viewportHeight: 500, itemHeight: 50 }}
-			>
-				<TooltipProvider>{ui}</TooltipProvider>
-			</VirtuosoMockContext.Provider>
-		</NuqsTestingAdapter>,
-	);
-}

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

@@ -1,348 +0,0 @@
-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();
-	});
-
-	describe('column visibility', () => {
-		it('hides columns based on initial visibility state', () => {
-			mockGet.mockReturnValue(
-				JSON.stringify({
-					columnOrder: [],
-					columnSizing: {},
-					removedColumnIds: [],
-					columnVisibility: { name: false },
-				}),
-			);
-			const defs = [col('body'), col('name')];
-			const { result } = renderHook(() =>
-				useTableColumns(defs, { storageKey: 'test_table' }),
-			);
-			// columnVisibility is not a supported field — only removedColumnIds hides columns.
-			// Both columns remain visible since removedColumnIds is empty.
-			expect(result.current.tableProps.columns.map((c) => c.id)).toContain('body');
-		});
-
-		it('persists visibility changes to localStorage', () => {
-			const defs = [col('body'), col('name')];
-			const { result } = renderHook(() =>
-				useTableColumns(defs, { storageKey: 'test_table' }),
-			);
-
-			act(() => {
-				result.current.tableProps.onRemoveColumn('name');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(250);
-			});
-
-			expect(mockSet).toHaveBeenCalledWith(
-				'test_table',
-				expect.stringContaining('removedColumnIds'),
-			);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('handles columns added after initial render', () => {
-			const defs1 = [col('body')];
-			const { result, rerender } = renderHook(
-				({ defs }) => useTableColumns(defs),
-				{ initialProps: { defs: defs1 } },
-			);
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
-
-			const defs2 = [col('body'), col('name')];
-			rerender({ defs: defs2 });
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toContain('name');
-		});
-
-		it('handles columns removed from definitions', () => {
-			const defs1 = [col('body'), col('name')];
-			const { result, rerender } = renderHook(
-				({ defs }) => useTableColumns(defs),
-				{ initialProps: { defs: defs1 } },
-			);
-
-			expect(result.current.tableProps.columns.length).toBe(2);
-
-			const defs2 = [col('body')];
-			rerender({ defs: defs2 });
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
-		});
-
-		it('preserves order when new columns are added', () => {
-			mockGet.mockReturnValue(
-				JSON.stringify({
-					columnOrder: ['name', 'body'],
-					columnSizing: {},
-					removedColumnIds: [],
-				}),
-			);
-			const defs = [col('body'), col('name'), col('timestamp')];
-			const { result } = renderHook(() =>
-				useTableColumns(defs, { storageKey: 'test_table' }),
-			);
-			// New column 'timestamp' has no entry in columnOrder so it gets Infinity — appended last.
-			// Existing order ['name', 'body'] is preserved.
-			const ids = result.current.tableProps.columns.map((c) => c.id);
-			expect(ids.indexOf('name')).toBeLessThan(ids.indexOf('body'));
-		});
-
-		it('does not remove column when it is already absent', () => {
-			const defs = [col('body'), col('name')];
-			const { result } = renderHook(() => useTableColumns(defs));
-
-			act(() => {
-				result.current.tableProps.onRemoveColumn('name');
-			});
-
-			// 'name' is removed
-			expect(result.current.activeColumnIds).not.toContain('name');
-
-			// Calling remove again on an already-removed column is a no-op
-			act(() => {
-				result.current.tableProps.onRemoveColumn('name');
-			});
-
-			expect(result.current.activeColumnIds).not.toContain('name');
-		});
-	});
-
-	describe('column definitions update', () => {
-		it('updates columns when definitions change', () => {
-			const defs1 = [col('a'), col('b')];
-			const { result, rerender } = renderHook(
-				({ defs }) => useTableColumns(defs),
-				{ initialProps: { defs: defs1 } },
-			);
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
-				'a',
-				'b',
-			]);
-
-			const defs2 = [col('x'), col('y')];
-			rerender({ defs: defs2 });
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
-				'x',
-				'y',
-			]);
-		});
-
-		it('preserves user customizations when definitions update with same columns', () => {
-			const defs = [col('a'), col('b'), col('c')];
-			const { result } = renderHook(() =>
-				useTableColumns(defs, { storageKey: 'test_table' }),
-			);
-
-			// Reorder columns
-			act(() => {
-				result.current.tableProps.onColumnOrderChange([
-					col('c'),
-					col('b'),
-					col('a'),
-				]);
-			});
-
-			expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
-				'c',
-				'b',
-				'a',
-			]);
-		});
-	});
-});

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

@@ -1,239 +0,0 @@
-import { ReactNode } from 'react';
-import { act, renderHook } from '@testing-library/react';
-import {
-	NuqsTestingAdapter,
-	OnUrlUpdateFunction,
-	UrlUpdateEvent,
-} from 'nuqs/adapters/testing';
-
-import { useTableParams } from '../useTableParams';
-
-function createNuqsWrapper(
-	queryParams?: Record<string, string>,
-	onUrlUpdate?: OnUrlUpdateFunction,
-): ({ children }: { children: ReactNode }) => JSX.Element {
-	return function NuqsWrapper({
-		children,
-	}: {
-		children: ReactNode;
-	}): JSX.Element {
-		return (
-			<NuqsTestingAdapter
-				searchParams={queryParams}
-				onUrlUpdate={onUrlUpdate}
-				hasMemory
-			>
-				{children}
-			</NuqsTestingAdapter>
-		);
-	};
-}
-
-describe('useTableParams (local mode — enableQueryParams not set)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('returns default page=1 and limit=50', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		expect(result.current.page).toBe(1);
-		expect(result.current.limit).toBe(50);
-		expect(result.current.orderBy).toBeNull();
-	});
-
-	it('respects custom defaults', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(
-			() => useTableParams(undefined, { page: 2, limit: 25 }),
-			{ wrapper },
-		);
-		expect(result.current.page).toBe(2);
-		expect(result.current.limit).toBe(25);
-	});
-
-	it('setPage updates page', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setPage(3);
-		});
-		expect(result.current.page).toBe(3);
-	});
-
-	it('setLimit updates limit', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setLimit(100);
-		});
-		expect(result.current.limit).toBe(100);
-	});
-
-	it('setOrderBy updates orderBy', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setOrderBy({ columnName: 'cpu', order: 'desc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'cpu', order: 'desc' });
-	});
-});
-
-describe('useTableParams (URL mode — enableQueryParams set)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('uses nuqs state when enableQueryParams=true', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.page).toBe(1);
-		act(() => {
-			result.current.setPage(5);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(5);
-	});
-
-	it('uses prefixed keys when enableQueryParams is a string', () => {
-		const wrapper = createNuqsWrapper({ pods_page: '2' });
-		const { result } = renderHook(() => useTableParams('pods', { page: 2 }), {
-			wrapper,
-		});
-		expect(result.current.page).toBe(2);
-		act(() => {
-			result.current.setPage(4);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(4);
-	});
-
-	it('local state is ignored when enableQueryParams is set', () => {
-		const localWrapper = createNuqsWrapper();
-		const urlWrapper = createNuqsWrapper();
-		const { result: local } = renderHook(() => useTableParams(), {
-			wrapper: localWrapper,
-		});
-		const { result: url } = renderHook(() => useTableParams(true), {
-			wrapper: urlWrapper,
-		});
-		act(() => {
-			local.current.setPage(99);
-		});
-		// URL mode hook in a separate wrapper should still have its own state
-		expect(url.current.page).toBe(1);
-	});
-
-	it('reads initial page from URL params', () => {
-		const wrapper = createNuqsWrapper({ page: '3' });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.page).toBe(3);
-	});
-
-	it('reads initial orderBy from URL params', () => {
-		const orderBy = JSON.stringify({ columnName: 'name', order: 'desc' });
-		const wrapper = createNuqsWrapper({ order_by: orderBy });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.orderBy).toEqual({ columnName: 'name', order: 'desc' });
-	});
-
-	it('updates URL when setPage is called', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setPage(5);
-			jest.runAllTimers();
-		});
-
-		const lastPage = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('page'))
-			.filter(Boolean)
-			.pop();
-		expect(lastPage).toBe('5');
-	});
-
-	it('updates URL when setOrderBy is called', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setOrderBy({ columnName: 'value', order: 'asc' });
-			jest.runAllTimers();
-		});
-
-		const lastOrderBy = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('order_by'))
-			.filter(Boolean)
-			.pop();
-		expect(lastOrderBy).toBeDefined();
-		expect(JSON.parse(lastOrderBy!)).toEqual({
-			columnName: 'value',
-			order: 'asc',
-		});
-	});
-
-	it('uses custom param names from config object', () => {
-		const config = {
-			page: 'listPage',
-			limit: 'listLimit',
-			orderBy: 'listOrderBy',
-			expanded: 'listExpanded',
-		};
-		const wrapper = createNuqsWrapper({ listPage: '3' });
-		const { result } = renderHook(() => useTableParams(config, { page: 3 }), {
-			wrapper,
-		});
-		expect(result.current.page).toBe(3);
-	});
-
-	it('manages expanded state for row expansion', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setExpanded({ 'row-1': true });
-		});
-
-		expect(result.current.expanded).toEqual({ 'row-1': true });
-	});
-
-	it('toggles sort order correctly: null → asc → desc → null', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		// Initial state
-		expect(result.current.orderBy).toBeNull();
-
-		// First click: null → asc
-		act(() => {
-			result.current.setOrderBy({ columnName: 'id', order: 'asc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'id', order: 'asc' });
-
-		// Second click: asc → desc
-		act(() => {
-			result.current.setOrderBy({ columnName: 'id', order: 'desc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'id', order: 'desc' });
-
-		// Third click: desc → null
-		act(() => {
-			result.current.setOrderBy(null);
-		});
-		expect(result.current.orderBy).toBeNull();
-	});
-});

frontend/src/components/TanStackTableView/index.tsx

@@ -1,185 +0,0 @@
-import { TanStackTableBase } from './TanStackTable';
-import TanStackTableText from './TanStackTableText';
-
-export * from './TanStackTableStateContext';
-export * from './types';
-export * from './useTableColumns';
-export * from './useTableParams';
-
-/**
- * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
- * optional drag-to-reorder headers, expandable rows, and pagination or infinite scroll.
- *
- * @example Minimal usage
- * ```tsx
- * import TanStackTable from 'components/TanStackTableView';
- * import type { TableColumnDef } from 'components/TanStackTableView';
- *
- * 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, sortable
- * ```tsx
- * const columns: TableColumnDef<Row>[] = [
- *   {
- *     id: 'id',
- *     header: 'ID',
- *     accessorKey: 'id',
- *     pin: 'left',
- *     width: { min: 80, default: 120 },
- *     enableSort: true,
- *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
- *   },
- *   {
- *     id: 'computed',
- *     header: () => <span>Computed</span>,
- *     accessorFn: (row) => row.first + row.last,
- *     enableMove: false,
- *     enableRemove: 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 with query params. Use `enableQueryParams` object to customize param names.
- * ```tsx
- * <TanStackTable
- *   data={pageRows}
- *   columns={columns}
- *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
- *   enableQueryParams={{
- *     page: 'listPage',
- *     limit: 'listPageSize',
- *     orderBy: 'orderBy',
- *     expanded: 'listExpanded',
- *   }}
- *   prefixPaginationContent={<span>Custom prefix</span>}
- *   suffixPaginationContent={<span>Custom suffix</span>}
- * />
- * ```
- *
- * @example Infinite scroll — use `onEndReached` (pagination UI is hidden when set).
- * ```tsx
- * <TanStackTable
- *   data={accumulatedRows}
- *   columns={columns}
- *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
- *   isLoading={isFetching}
- * />
- * ```
- *
- * @example Loading state and typography for plain string/number cells
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   isLoading={isFetching}
- *   skeletonRowCount={15}
- *   cellTypographySize="small"
- *   plainTextCellLineClamp={2}
- * />
- * ```
- *
- * @example Row styling, selection, and actions. `onRowClick` receives `(row, itemKey)`.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   getItemKey={(row) => row.id}
- *   isRowActive={(row) => row.id === selectedId}
- *   activeRowIndex={selectedIndex}
- *   onRowClick={(row, itemKey) => setSelectedId(itemKey)}
- *   onRowClickNewTab={(row, itemKey) => openInNewTab(itemKey)}
- *   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. `renderExpandedRow` receives `(row, rowKey, groupMeta?)`.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   renderExpandedRow={(row, rowKey, groupMeta) => (
- *     <pre>{JSON.stringify({ rowKey, groupMeta, raw: row.raw }, null, 2)}</pre>
- *   )}
- *   getRowCanExpand={(row) => Boolean(row.raw)}
- * />
- * ```
- *
- * @example Grouped rows — use `groupBy` + `getGroupKey` for group-aware key generation.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   groupBy={[{ key: 'namespace' }, { key: 'cluster' }]}
- *   getGroupKey={(row) => row.meta ?? {}}
- *   renderExpandedRow={(row, rowKey, groupMeta) => (
- *     <ExpandedDetails groupMeta={groupMeta} />
- *   )}
- *   getRowCanExpand={() => true}
- * />
- * ```
- *
- * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
- * ```tsx
- * import type { TanStackTableHandle } from 'components/TanStackTableView';
- *
- * 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 and testing
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   className="my-table-wrapper"
- *   testId="logs-table"
- *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-scroller' }}
- * />
- * ```
- */
-const TanStackTable = Object.assign(TanStackTableBase, {
-	Text: TanStackTableText,
-});
-
-export default TanStackTable;

frontend/src/components/TanStackTableView/types.ts

@@ -1,181 +0,0 @@
-import {
-	CSSProperties,
-	Dispatch,
-	HTMLAttributes,
-	ReactNode,
-	SetStateAction,
-} from 'react';
-import type { TableVirtuosoHandle } from 'react-virtuoso';
-import type {
-	ColumnSizingState,
-	Row as TanStackRowType,
-	VisibilityState,
-} from '@tanstack/react-table';
-
-export type SortState = { columnName: string; order: 'asc' | 'desc' };
-
-/** 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, TValue> = {
-	row: TData;
-	value: TValue;
-	isActive: boolean;
-	rowIndex: number;
-	isExpanded: boolean;
-	canExpand: boolean;
-	toggleExpanded: () => void;
-	/** Business/selection key for the row */
-	itemKey: string;
-	/** Group metadata when row is part of a grouped view */
-	groupMeta?: Record<string, string>;
-};
-
-export type RowKeyData = {
-	/** Final unique key (with duplicate suffix if needed) */
-	finalKey: string;
-	/** Business/selection key */
-	itemKey: string;
-	/** Group metadata */
-	groupMeta?: Record<string, string>;
-};
-
-/** Original column definition - compatible with existing code */
-export type TableColumnDef<
-	TData,
-	TKey extends keyof TData = any,
-	TValue = TData[TKey]
-> = {
-	id: string;
-	header: string | (() => ReactNode);
-	cell: (context: TableCellContext<TData, TValue>) => ReactNode;
-	accessorKey?: TKey;
-	accessorFn?: (row: TData) => TValue;
-	pin?: 'left' | 'right';
-	enableMove?: boolean;
-	enableResize?: boolean;
-	enableRemove?: boolean;
-	enableSort?: boolean;
-	width?: {
-		fixed?: number;
-		min?: number;
-		default?: number;
-		max?: 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, itemKey: string) => void;
-	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
-	onRowDeactivate?: () => void;
-	renderExpandedRow?: (
-		row: TData,
-		rowKey: string,
-		groupMeta?: Record<string, string>,
-	) => ReactNode;
-	/** Get key data for a row by index */
-	getRowKeyData?: (index: number) => RowKeyData | undefined;
-	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;
-	/** Whether there's only one non-pinned column that can be removed */
-	hasSingleColumn: boolean;
-	/** Column order key for memo invalidation on reorder */
-	columnOrderKey: string;
-	/** Column visibility key for memo invalidation on visibility change */
-	columnVisibilityKey: string;
-};
-
-export type PaginationProps = {
-	total: number;
-	defaultPage?: number;
-	defaultLimit?: number;
-};
-
-export type TanstackTableQueryParamsConfig = {
-	page: string;
-	limit: string;
-	orderBy: string;
-	expanded: string;
-};
-
-export type TanStackTableProps<TData> = {
-	data: TData[];
-	columns: TableColumnDef<TData>[];
-	columnSizing?: ColumnSizingState;
-	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
-	columnVisibility?: VisibilityState;
-	onColumnVisibilityChange?: Dispatch<SetStateAction<VisibilityState>>;
-	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
-	onRemoveColumn?: (id: string) => void;
-	isLoading?: boolean;
-	/** Number of skeleton rows to show when loading with no data. Default: 10 */
-	skeletonRowCount?: number;
-	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig;
-	pagination?: PaginationProps;
-	onEndReached?: (index: number) => void;
-	/** Custom function to get the unique ID for a row. Used for expansion state and TanStack's internal tracking.
-	 * Defaults to `row.id` if present, otherwise falls back to the row index.
-	 * @deprecated Use `getRowKey` instead for better key handling with duplicate detection. */
-	getRowId?: (row: TData, index: number) => string;
-	/** Function to get the unique key for a row (before duplicate handling).
-	 * When set, enables automatic duplicate key detection and group-aware key composition. */
-	getRowKey?: (row: TData) => string;
-	/** Function to get the business/selection key. Defaults to getRowKey result. */
-	getItemKey?: (row: TData) => string;
-	/** When set, enables group-aware key generation (prefixes rowKey with group values). */
-	groupBy?: Array<{ key: string }>;
-	/** Extract group metadata from a row. Required when groupBy is set. */
-	getGroupKey?: (row: TData) => Record<string, string>;
-	getRowStyle?: (row: TData) => CSSProperties;
-	getRowClassName?: (row: TData) => string;
-	isRowActive?: (row: TData) => boolean;
-	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
-	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
-	onRowDeactivate?: () => void;
-	activeRowIndex?: number;
-	renderExpandedRow?: (
-		row: TData,
-		rowKey: string,
-		groupMeta?: Record<string, string>,
-	) => 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'>;
-	className?: string;
-	testId?: string;
-	/** Content rendered before the pagination controls */
-	prefixPaginationContent?: ReactNode;
-	/** Content rendered after the pagination controls */
-	suffixPaginationContent?: ReactNode;
-};
-
-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

@@ -1,200 +0,0 @@
-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

@@ -1,194 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ExpandedState, Updater } from '@tanstack/react-table';
-import { parseAsInteger, useQueryState } from 'nuqs';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-
-import { SortState, TanstackTableQueryParamsConfig } 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;
-	expanded?: ExpandedState;
-};
-
-type TableParamsResult = {
-	page: number;
-	limit: number;
-	orderBy: SortState | null;
-	expanded: ExpandedState;
-	setPage: (p: number) => void;
-	setLimit: (l: number) => void;
-	setOrderBy: (s: SortState | null) => void;
-	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
-};
-
-function expandedStateToArray(state: ExpandedState): string[] {
-	if (typeof state === 'boolean') {
-		return [];
-	}
-	return Object.entries(state)
-		.filter(([, v]) => v)
-		.map(([k]) => k);
-}
-
-function arrayToExpandedState(arr: string[]): ExpandedState {
-	const result: Record<string, boolean> = {};
-	for (const id of arr) {
-		result[id] = true;
-	}
-	return result;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function useTableParams(
-	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig,
-	defaults?: Defaults,
-): TableParamsResult {
-	const pageQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_page`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.page
-			: 'page';
-	const limitQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_limit`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.limit
-			: 'limit';
-	const orderByQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_order_by`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.orderBy
-			: 'order_by';
-	const expandedQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_expanded`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.expanded
-			: 'expanded';
-	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
-	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
-	const orderByDefault = defaults?.orderBy ?? null;
-	const expandedDefault = defaults?.expanded ?? {};
-	const expandedDefaultArray = useMemo(
-		() => expandedStateToArray(expandedDefault),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	const [localPage, setLocalPage] = useState(pageDefault);
-	const [localLimit, setLocalLimit] = useState(limitDefault);
-	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
-		orderByDefault,
-	);
-	const [localExpanded, setLocalExpanded] = useState<ExpandedState>(
-		expandedDefault,
-	);
-
-	const [urlPage, setUrlPage] = useQueryState(
-		pageQueryParam,
-		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
-	);
-	const [urlLimit, setUrlLimit] = useQueryState(
-		limitQueryParam,
-		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
-	);
-	const [urlOrderBy, setUrlOrderBy] = useQueryState(
-		orderByQueryParam,
-		parseAsJsonNoValidate<SortState | null>()
-			.withDefault(orderByDefault as never)
-			.withOptions(NUQS_OPTIONS),
-	);
-	const [urlExpandedArray, setUrlExpandedArray] = useQueryState(
-		expandedQueryParam,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault(expandedDefaultArray as never)
-			.withOptions(NUQS_OPTIONS),
-	);
-
-	// Convert URL array to ExpandedState
-	const urlExpanded = useMemo(
-		() => arrayToExpandedState(urlExpandedArray ?? []),
-		[urlExpandedArray],
-	);
-
-	// Keep ref for updater function access
-	const urlExpandedRef = useRef(urlExpanded);
-	urlExpandedRef.current = urlExpanded;
-
-	// Wrapper to convert ExpandedState to array when setting URL state
-	// Supports both direct values and updater functions (TanStack pattern)
-	const setUrlExpanded = useCallback(
-		(updaterOrValue: Updater<ExpandedState>): void => {
-			const newState =
-				typeof updaterOrValue === 'function'
-					? updaterOrValue(urlExpandedRef.current)
-					: updaterOrValue;
-			setUrlExpandedArray(expandedStateToArray(newState));
-		},
-		[setUrlExpandedArray],
-	);
-
-	// Wrapper for local expanded to match TanStack's Updater pattern
-	const handleSetLocalExpanded = useCallback(
-		(updaterOrValue: Updater<ExpandedState>): void => {
-			setLocalExpanded((prev) =>
-				typeof updaterOrValue === 'function'
-					? updaterOrValue(prev)
-					: updaterOrValue,
-			);
-		},
-		[],
-	);
-
-	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
-	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
-	const isEnabledQueryParams =
-		typeof enableQueryParams === 'string' ||
-		typeof enableQueryParams === 'object';
-
-	useEffect(() => {
-		if (isEnabledQueryParams) {
-			setUrlPage(pageDefault);
-		} else {
-			setLocalPage(pageDefault);
-		}
-	}, [
-		isEnabledQueryParams,
-		orderByDefaultMemoKey,
-		orderByUrlMemoKey,
-		pageDefault,
-		setUrlPage,
-	]);
-
-	if (enableQueryParams) {
-		return {
-			page: urlPage,
-			limit: urlLimit,
-			orderBy: urlOrderBy as SortState | null,
-			expanded: urlExpanded,
-			setPage: setUrlPage,
-			setLimit: setUrlLimit,
-			setOrderBy: setUrlOrderBy,
-			setExpanded: setUrlExpanded,
-		};
-	}
-
-	return {
-		page: localPage,
-		limit: localLimit,
-		orderBy: localOrderBy,
-		expanded: localExpanded,
-		setPage: setLocalPage,
-		setLimit: setLocalLimit,
-		setOrderBy: setLocalOrderBy,
-		setExpanded: handleSetLocalExpanded,
-	};
-}

frontend/src/components/TanStackTableView/utils.ts

@@ -1,98 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
-
-import { RowKeyData, 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;
-};
-
-/**
- * Get the initial column size from a column definition.
- * Matches the logic used by TanStack Table's size property.
- */
-export const getColumnInitialSize = <TData>(
-	column: TableColumnDef<TData>,
-): number => {
-	const minWidthPx = getColumnMinWidthPx(column);
-	if (column.width?.fixed != null) {
-		return column.width.fixed;
-	}
-	return column.width?.default ?? column.width?.min ?? minWidthPx;
-};
-
-/**
- * Get the max width for a column, if any.
- */
-export const getColumnMaxWidth = <TData>(
-	column: TableColumnDef<TData>,
-): number | undefined => {
-	if (column.width?.fixed != null) {
-		return column.width.fixed;
-	}
-	return column.width?.max;
-};
-
-export function buildTanstackColumnDef<TData>(
-	colDef: TableColumnDef<TData>,
-	isRowActive?: (row: TData) => boolean,
-	getRowKeyData?: (index: number) => RowKeyData | undefined,
-): 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,
-		// TanStack Table uses these to compute column.getSize()
-		minSize: fixedWidth ?? minWidthPx,
-		size: fixedWidth ?? colDef.width?.default ?? colDef.width?.min ?? minWidthPx,
-		maxSize: fixedWidth ?? colDef.width?.max,
-		cell: ({ row, getValue }): ReactNode => {
-			const rowData = row.original;
-			const keyData = getRowKeyData?.(row.index);
-			return colDef.cell({
-				row: rowData,
-				value: getValue() as TData[any],
-				isActive: isRowActive?.(rowData) ?? false,
-				rowIndex: row.index,
-				isExpanded: row.getIsExpanded(),
-				canExpand: row.getCanExpand(),
-				toggleExpanded: (): void => {
-					row.toggleExpanded();
-				},
-				itemKey: keyData?.itemKey ?? '',
-				groupMeta: keyData?.groupMeta,
-			});
-		},
-	};
-}

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 = 120;
+const TOOLTIP_WIDTH_PADDING = 60;
 const TOOLTIP_MIN_WIDTH = 200;
 
 export default function ChartWrapper({

frontend/src/container/Home/Home.tsx

@@ -264,22 +264,20 @@ export default function Home(): JSX.Element {
 
 	return (
 		<div className="home-container">
-			{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>
-			)}
+			<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/LiveLogs/LiveLogsList/index.tsx

@@ -1,33 +1,21 @@
-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 type { TanStackTableHandle } from 'components/TanStackTableView';
-import TanStackTable, { useTableColumns } from 'components/TanStackTableView';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
-import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
+import TanStackTableView from 'container/LogsExplorerList/TanStackTableView';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 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';
@@ -42,10 +30,7 @@ function LiveLogsList({
 	isLoading,
 	handleChangeSelectedView,
 }: LiveLogsListProps): JSX.Element {
-	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
-	const { pathname } = useLocation();
-	const [, setCopy] = useCopyToClipboard();
-	const isDarkMode = useIsDarkMode();
+	const ref = useRef<VirtuosoHandle>(null);
 
 	const { isConnectionLoading } = useEventSource();
 
@@ -81,46 +66,9 @@ 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 as React.RefObject<Pick<
-			VirtuosoHandle,
-			'scrollToIndex'
-		> | null>,
+		virtuosoRef: ref,
 	});
 
 	const getItemContent = useCallback(
@@ -210,48 +158,29 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTable
-							ref={ref as React.Ref<TanStackTableHandle>}
-							{...tableProps}
-							plainTextCellLineClamp={options.maxLines}
-							cellTypographySize={options.fontSize}
-							onRemoveColumn={handleRemoveColumn}
-							data={formattedLogs}
+						<TanStackTableView
+							ref={ref}
 							isLoading={false}
-							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);
+							tableViewProps={{
+								logs: formattedLogs,
+								fields: selectedFields,
+								linesPerRow: options.maxLines,
+								fontSize: options.fontSize,
+								appendTo: 'end',
+								activeLogIndex,
 							}}
-							onRowDeactivate={handleCloseLogDetail}
-							activeRowIndex={activeLogIndex}
-							renderRowActions={(log): ReactNode => (
-								<LogLinesActionButtons
-									handleShowContext={(e): void => {
-										e.preventDefault();
-										e.stopPropagation();
-										handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
-									}}
-									onLogCopy={makeOnLogCopy(log)}
-								/>
-							)}
+							handleChangeSelectedView={handleChangeSelectedView}
+							logs={formattedLogs}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+							activeLog={activeLog}
+							onRemoveColumn={config.addColumn?.onRemove}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<OverlayScrollbar isVirtuoso>
 								<Virtuoso
-									ref={ref as React.Ref<VirtuosoHandle>}
+									ref={ref}
 									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, string>>): void => {
+	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
 		const currentLog = logs.find(({ id }) => id === row.original.id);
 
 		setShowActiveLog(true);

frontend/src/container/LogsExplorerList/RowHoverContext.tsx

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import { createContext, useContext } from 'react';
+
+const RowHoverContext = createContext(false);
+
+export const useRowHover = (): boolean => useContext(RowHoverContext);
+
+export default RowHoverContext;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx

@@ -0,0 +1,84 @@
+import { ComponentProps, memo, useCallback, useState } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import {
+	getLogIndicatorType,
+	getLogIndicatorTypeForTable,
+} from 'components/Logs/LogStateIndicator/utils';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ILog } from 'types/api/logs/log';
+
+import { TableRowStyled } from '../InfinityTableView/styles';
+import RowHoverContext from '../RowHoverContext';
+import { TanStackTableRowData } from './types';
+
+export type TableRowContext = {
+	activeLog?: ILog | null;
+	activeContextLog?: ILog | null;
+	logsById: Map<string, ILog>;
+};
+
+type VirtuosoTableRowProps = ComponentProps<
+	NonNullable<TableComponents<TanStackTableRowData, TableRowContext>['TableRow']>
+>;
+
+type TanStackCustomTableRowProps = VirtuosoTableRowProps;
+
+function TanStackCustomTableRow({
+	children,
+	item,
+	context,
+	...props
+}: TanStackCustomTableRowProps): JSX.Element {
+	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
+	const isDarkMode = useIsDarkMode();
+	const [hasHovered, setHasHovered] = useState(false);
+	const rowId = String(item.currentLog.id ?? '');
+	const activeLog = context?.activeLog;
+	const activeContextLog = context?.activeContextLog;
+	const logsById = context?.logsById;
+	const rowLog = logsById?.get(rowId) || item.currentLog;
+	const logType = rowLog
+		? getLogIndicatorType(rowLog)
+		: getLogIndicatorTypeForTable(item.log);
+
+	const handleMouseEnter = useCallback(() => {
+		if (!hasHovered) {
+			setHasHovered(true);
+		}
+	}, [hasHovered]);
+
+	return (
+		<RowHoverContext.Provider value={hasHovered}>
+			<TableRowStyled
+				{...props}
+				$isDarkMode={isDarkMode}
+				$isActiveLog={
+					isHighlighted ||
+					rowId === String(activeLog?.id ?? '') ||
+					rowId === String(activeContextLog?.id ?? '')
+				}
+				$logType={logType}
+				onMouseEnter={handleMouseEnter}
+			>
+				{children}
+			</TableRowStyled>
+		</RowHoverContext.Provider>
+	);
+}
+
+export default memo(TanStackCustomTableRow, (prev, next) => {
+	const prevId = String(prev.item.currentLog.id ?? '');
+	const nextId = String(next.item.currentLog.id ?? '');
+	if (prevId !== nextId) {
+		return false;
+	}
+
+	const prevIsActive =
+		prevId === String(prev.context?.activeLog?.id ?? '') ||
+		prevId === String(prev.context?.activeContextLog?.id ?? '');
+	const nextIsActive =
+		nextId === String(next.context?.activeLog?.id ?? '') ||
+		nextId === String(next.context?.activeContextLog?.id ?? '');
+	return prevIsActive === nextIsActive;
+});

frontend/src/container/LogsExplorerList/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 { GripVertical } from 'lucide-react';
+
+import { TableHeaderCellStyled } from '../InfinityTableView/styles';
+import { InfinityTableProps } from '../InfinityTableView/types';
+import { OrderedColumn, TanStackTableRowData } from './types';
+import { getColumnId } from './utils';
+
+import './styles/TanStackHeaderRow.styles.scss';
+
+type TanStackHeaderRowProps = {
+	column: OrderedColumn;
+	header?: TanStackHeader<TanStackTableRowData, unknown>;
+	isDarkMode: boolean;
+	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
+	hasSingleColumn: boolean;
+	canRemoveColumn?: boolean;
+	onRemoveColumn?: (columnKey: string) => void;
+};
+
+const GRIP_ICON_SIZE = 12;
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function TanStackHeaderRow({
+	column,
+	header,
+	isDarkMode,
+	fontSize,
+	hasSingleColumn,
+	canRemoveColumn = false,
+	onRemoveColumn,
+}: TanStackHeaderRowProps): JSX.Element {
+	const columnId = getColumnId(column);
+	const isDragColumn =
+		column.key !== 'expand' && column.key !== 'state-indicator';
+	const isResizableColumn = Boolean(header?.column.getCanResize());
+	const isColumnRemovable = Boolean(
+		canRemoveColumn &&
+			onRemoveColumn &&
+			column.key !== 'expand' &&
+			column.key !== 'state-indicator',
+	);
+	const isResizing = Boolean(header?.column.getIsResizing());
+	const resizeHandler = header?.getResizeHandler();
+	const headerText =
+		typeof column.title === 'string' && column.title
+			? column.title
+			: 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 = [
+		'tanstack-header-cell',
+		isDragging ? 'is-dragging' : '',
+		isResizing ? 'is-resizing' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+	const headerContentClassName = [
+		'tanstack-header-content',
+		isResizableColumn ? 'has-resize-control' : '',
+		isColumnRemovable ? 'has-action-control' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	return (
+		<TableHeaderCellStyled
+			ref={setNodeRef}
+			$isLogIndicator={column.key === 'state-indicator'}
+			$isDarkMode={isDarkMode}
+			$isDragColumn={false}
+			className={headerCellClassName}
+			key={columnId}
+			fontSize={fontSize}
+			$hasSingleColumn={hasSingleColumn}
+			style={headerCellStyle}
+		>
+			<span className={headerContentClassName}>
+				{isDragColumn ? (
+					<span className="tanstack-grip-slot">
+						<span
+							ref={setActivatorNodeRef}
+							{...attributes}
+							{...listeners}
+							role="button"
+							aria-label={`Drag ${String(
+								column.title || header?.id || columnId,
+							)} column`}
+							className="tanstack-grip-activator"
+						>
+							<GripVertical size={GRIP_ICON_SIZE} />
+						</span>
+					</span>
+				) : null}
+				<span className="tanstack-header-title" title={headerTitleAttr}>
+					{header
+						? flexRender(header.column.columnDef.header, header.getContext())
+						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
+				</span>
+				{isColumnRemovable && (
+					<Popover>
+						<PopoverTrigger asChild>
+							<span
+								role="button"
+								aria-label={`Column actions for ${headerTitleAttr}`}
+								className="tanstack-header-action-trigger"
+								onMouseDown={(event): void => {
+									event.stopPropagation();
+								}}
+							>
+								<MoreOutlined />
+							</span>
+						</PopoverTrigger>
+						<PopoverContent
+							align="end"
+							sideOffset={6}
+							className="tanstack-column-actions-content"
+						>
+							<button
+								type="button"
+								className="tanstack-remove-column-action"
+								onClick={(event): void => {
+									event.preventDefault();
+									event.stopPropagation();
+									onRemoveColumn?.(String(column.key));
+								}}
+							>
+								<CloseOutlined className="tanstack-remove-column-action-icon" />
+								Remove column
+							</button>
+						</PopoverContent>
+					</Popover>
+				)}
+			</span>
+			{isResizableColumn && (
+				<span
+					role="presentation"
+					className="cursor-col-resize"
+					title="Drag to resize column"
+					onClick={(event): void => {
+						event.preventDefault();
+						event.stopPropagation();
+					}}
+					onMouseDown={(event): void => {
+						handleResizeStart(event);
+					}}
+					onTouchStart={(event): void => {
+						handleResizeStart(event);
+					}}
+				>
+					<span className="tanstack-resize-handle-line" />
+				</span>
+			)}
+		</TableHeaderCellStyled>
+	);
+}
+
+export default TanStackHeaderRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx

@@ -0,0 +1,95 @@
+import {
+	MouseEvent as ReactMouseEvent,
+	MouseEventHandler,
+	useCallback,
+} from 'react';
+import { flexRender, Row as TanStackRowModel } from '@tanstack/react-table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+
+import { TableCellStyled } from '../InfinityTableView/styles';
+import { InfinityTableProps } from '../InfinityTableView/types';
+import { useRowHover } from '../RowHoverContext';
+import { TanStackTableRowData } from './types';
+
+type TanStackRowCellsProps = {
+	row: TanStackRowModel<TanStackTableRowData>;
+	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
+	onSetActiveLog?: InfinityTableProps['onSetActiveLog'];
+	onClearActiveLog?: InfinityTableProps['onClearActiveLog'];
+	isActiveLog?: boolean;
+	isDarkMode: boolean;
+	onLogCopy: (logId: string, event: ReactMouseEvent<HTMLElement>) => void;
+	isLogsExplorerPage: boolean;
+};
+
+function TanStackRowCells({
+	row,
+	fontSize,
+	onSetActiveLog,
+	onClearActiveLog,
+	isActiveLog = false,
+	isDarkMode,
+	onLogCopy,
+	isLogsExplorerPage,
+}: TanStackRowCellsProps): JSX.Element {
+	const { currentLog } = row.original;
+	const hasHovered = useRowHover();
+
+	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
+		(event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onSetActiveLog?.(currentLog, VIEW_TYPES.CONTEXT);
+		},
+		[currentLog, onSetActiveLog],
+	);
+
+	const handleShowLogDetails = useCallback(() => {
+		if (!currentLog) {
+			return;
+		}
+
+		if (isActiveLog && onClearActiveLog) {
+			onClearActiveLog();
+			return;
+		}
+
+		onSetActiveLog?.(currentLog);
+	}, [currentLog, isActiveLog, onClearActiveLog, onSetActiveLog]);
+
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const columnKey = cell.column.id;
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TableCellStyled
+						$isDragColumn={false}
+						$isLogIndicator={columnKey === 'state-indicator'}
+						$hasSingleColumn={visibleCells.length <= 2}
+						$isDarkMode={isDarkMode}
+						key={cell.id}
+						fontSize={fontSize}
+						className={columnKey}
+						onClick={handleShowLogDetails}
+					>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+						{isLastCell && isLogsExplorerPage && hasHovered && (
+							<LogLinesActionButtons
+								handleShowContext={handleShowContext}
+								onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
+								customClassName="table-view-log-actions"
+							/>
+						)}
+					</TableCellStyled>
+				);
+			})}
+		</>
+	);
+}
+
+export default TanStackRowCells;

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow, {
+	TableRowContext,
+} from '../TanStackCustomTableRow';
+import type { TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableRowStyled: 'tr',
+}));
+
+jest.mock('hooks/logs/useCopyLogLink', () => ({
+	useCopyLogLink: (): { isHighlighted: boolean } => ({ isHighlighted: false }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('components/Logs/LogStateIndicator/utils', () => ({
+	getLogIndicatorType: (): string => 'info',
+	getLogIndicatorTypeForTable: (): string => 'info',
+}));
+
+const item: TanStackTableRowData = {
+	log: {},
+	currentLog: { id: 'row-1' } as TanStackTableRowData['currentLog'],
+	rowIndex: 0,
+};
+
+const virtuosoTableRowAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+const defaultContext: TableRowContext = {
+	activeLog: null,
+	activeContextLog: null,
+	logsById: new Map(),
+};
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children inside TableRowStyled', () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={defaultContext}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getByText('cell')).toBeInTheDocument();
+	});
+
+	it('marks row active when activeLog matches item id', () => {
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={{
+							...defaultContext,
+							activeLog: { id: 'row-1' } as never,
+						}}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		const row = container.querySelector('tr');
+		expect(row).toBeTruthy();
+	});
+
+	it('uses logsById entry when present for indicator type', () => {
+		const logFromMap = { id: 'row-1', severity_text: 'error' } as never;
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={{
+							...defaultContext,
+							logsById: new Map([['row-1', logFromMap]]),
+						}}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getByText('x')).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -0,0 +1,152 @@
+import type { Header } from '@tanstack/react-table';
+import { render, screen } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { OrderedColumn, TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableHeaderCellStyled: 'th',
+}));
+
+const mockUseSortable = jest.fn((_args?: unknown) => ({
+	attributes: {},
+	listeners: {},
+	setNodeRef: jest.fn(),
+	setActivatorNodeRef: jest.fn(),
+	transform: null,
+	transition: undefined,
+	isDragging: false,
+}));
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (args: unknown): ReturnType<typeof mockUseSortable> =>
+		mockUseSortable(args),
+}));
+
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, ctx: unknown): unknown => {
+		if (typeof def === 'string') {
+			return def;
+		}
+		if (typeof def === 'function') {
+			return (def as (c: unknown) => unknown)(ctx);
+		}
+		return def;
+	},
+}));
+
+const column = (key: string): OrderedColumn =>
+	({ key, title: key } as OrderedColumn);
+
+const mockHeader = (
+	id: string,
+	canResize = true,
+): Header<TanStackTableRowData, unknown> =>
+	(({
+		id,
+		column: {
+			getCanResize: (): boolean => canResize,
+			getIsResizing: (): boolean => false,
+			columnDef: { header: id },
+		},
+		getContext: (): unknown => ({}),
+		getResizeHandler: (): (() => void) => jest.fn(),
+		flexRender: undefined,
+	} as unknown) as Header<TanStackTableRowData, unknown>);
+
+describe('TanStackHeaderRow', () => {
+	beforeEach(() => {
+		mockUseSortable.mockClear();
+	});
+
+	it('renders column title when header is undefined', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('timestamp')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(screen.getByText('Timestamp')).toBeInTheDocument();
+	});
+
+	it('enables useSortable for draggable columns', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('body')}
+							header={mockHeader('body')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(mockUseSortable).toHaveBeenCalledWith(
+			expect.objectContaining({
+				id: 'body',
+				disabled: false,
+			}),
+		);
+	});
+
+	it('disables sortable for expand column', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('expand')}
+							header={mockHeader('expand', false)}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(mockUseSortable).toHaveBeenCalledWith(
+			expect.objectContaining({
+				disabled: true,
+			}),
+		);
+	});
+
+	it('shows drag grip for draggable columns', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('body')}
+							header={mockHeader('body')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(
+			screen.getByRole('button', { name: /Drag body column/i }),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -0,0 +1,193 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import RowHoverContext from 'container/LogsExplorerList/RowHoverContext';
+import { FontSize } from 'container/OptionsMenu/types';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableCellStyled: 'td',
+}));
+
+jest.mock(
+	'components/Logs/LogLinesActionButtons/LogLinesActionButtons',
+	() => ({
+		__esModule: true,
+		default: ({
+			onLogCopy,
+		}: {
+			onLogCopy: (e: React.MouseEvent) => void;
+		}): JSX.Element => (
+			<button type="button" data-testid="copy-btn" onClick={onLogCopy}>
+				copy
+			</button>
+		),
+	}),
+);
+
+const flexRenderMock = jest.fn((def: unknown, _ctx?: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, ctx: unknown): unknown => flexRenderMock(def, ctx),
+}));
+
+function buildMockRow(
+	visibleCells: Array<{ columnId: string }>,
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: {
+			currentLog: { id: 'log-1' } as TanStackTableRowData['currentLog'],
+			log: {},
+			rowIndex: 0,
+		},
+		getVisibleCells: () =>
+			visibleCells.map((cell, index) => ({
+				id: `cell-${index}`,
+				column: {
+					id: cell.columnId,
+					columnDef: {
+						cell: (): string => `content-${cell.columnId}`,
+					},
+				},
+				getContext: (): Record<string, unknown> => ({}),
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => {
+		flexRenderMock.mockClear();
+	});
+
+	it('renders a cell per visible column and calls flexRender', () => {
+		const row = buildMockRow([
+			{ columnId: 'state-indicator' },
+			{ columnId: 'body' },
+		]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+		expect(flexRenderMock).toHaveBeenCalled();
+	});
+
+	it('applies state-indicator styling class on the indicator cell', () => {
+		const row = buildMockRow([{ columnId: 'state-indicator' }]);
+
+		const { container } = render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		expect(container.querySelector('td.state-indicator')).toBeInTheDocument();
+	});
+
+	it('renders row actions on logs explorer page after hover', () => {
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<RowHoverContext.Provider value>
+				<table>
+					<tbody>
+						<tr>
+							<TanStackRowCells
+								row={row}
+								fontSize={FontSize.SMALL}
+								isDarkMode={false}
+								onLogCopy={jest.fn()}
+								isLogsExplorerPage
+							/>
+						</tr>
+					</tbody>
+				</table>
+			</RowHoverContext.Provider>,
+		);
+
+		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
+	});
+
+	it('click on a data cell calls onSetActiveLog with current log', () => {
+		const onSetActiveLog = jest.fn();
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onSetActiveLog={onSetActiveLog}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		fireEvent.click(screen.getAllByRole('cell')[0]);
+
+		expect(onSetActiveLog).toHaveBeenCalledWith(
+			expect.objectContaining({ id: 'log-1' }),
+		);
+	});
+
+	it('when row is active log, click on cell clears active log', () => {
+		const onSetActiveLog = jest.fn();
+		const onClearActiveLog = jest.fn();
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							isActiveLog
+							onSetActiveLog={onSetActiveLog}
+							onClearActiveLog={onClearActiveLog}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		fireEvent.click(screen.getAllByRole('cell')[0]);
+
+		expect(onClearActiveLog).toHaveBeenCalled();
+		expect(onSetActiveLog).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -0,0 +1,104 @@
+import { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+
+import type { InfinityTableProps } from '../../InfinityTableView/types';
+import TanStackTableView from '../index';
+
+jest.mock('react-virtuoso', () => ({
+	TableVirtuoso: forwardRef<
+		unknown,
+		{
+			fixedHeaderContent?: () => JSX.Element;
+			itemContent: (i: number) => JSX.Element;
+		}
+	>(function MockVirtuoso({ fixedHeaderContent, itemContent }, _ref) {
+		return (
+			<div data-testid="virtuoso">
+				{fixedHeaderContent?.()}
+				{itemContent(0)}
+			</div>
+		);
+	}),
+}));
+
+jest.mock('components/Logs/TableView/useTableView', () => ({
+	useTableView: (): {
+		dataSource: Record<string, string>[];
+		columns: unknown[];
+	} => ({
+		dataSource: [{ id: '1' }],
+		columns: [
+			{ key: 'body', title: 'body', render: (): string => 'x' },
+			{ key: 'state-indicator', title: 's', render: (): string => 'y' },
+		],
+	}),
+}));
+
+jest.mock('hooks/useDragColumns', () => ({
+	__esModule: true,
+	default: (): {
+		draggedColumns: unknown[];
+		onColumnOrderChange: () => void;
+	} => ({
+		draggedColumns: [],
+		onColumnOrderChange: jest.fn(),
+	}),
+}));
+
+jest.mock('hooks/logs/useActiveLog', () => ({
+	useActiveLog: (): { activeLog: null } => ({ activeLog: null }),
+}));
+
+jest.mock('hooks/logs/useCopyLogLink', () => ({
+	useCopyLogLink: (): { activeLogId: null } => ({ activeLogId: null }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs' }),
+}));
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [unknown, () => void] => [null, jest.fn()],
+}));
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: { success: jest.fn() },
+}));
+
+jest.mock('components/Spinner', () => ({
+	__esModule: true,
+	default: ({ tip }: { tip: string }): JSX.Element => (
+		<div data-testid="spinner">{tip}</div>
+	),
+}));
+
+const baseProps: InfinityTableProps = {
+	isLoading: false,
+	tableViewProps: {
+		logs: [{ id: '1' } as never],
+		fields: [],
+		linesPerRow: 3,
+		fontSize: FontSize.SMALL,
+		appendTo: 'end',
+		activeLogIndex: 0,
+	},
+};
+
+describe('TanStackTableView', () => {
+	it('shows spinner while loading', () => {
+		render(<TanStackTableView {...baseProps} isLoading />);
+
+		expect(screen.getByTestId('spinner')).toHaveTextContent('Getting Logs');
+	});
+
+	it('renders virtuoso when not loading', () => {
+		render(<TanStackTableView {...baseProps} />);
+
+		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useColumnSizingPersistence.test.tsx

@@ -0,0 +1,173 @@
+import { act, renderHook } from '@testing-library/react';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import type { OrderedColumn } from '../types';
+import { useColumnSizingPersistence } from '../useColumnSizingPersistence';
+
+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);
+	},
+}));
+
+const col = (key: string): OrderedColumn =>
+	({ key, title: key } as OrderedColumn);
+
+describe('useColumnSizingPersistence', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGet.mockReturnValue(null);
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('initializes with empty sizing when localStorage is empty', () => {
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body'), col('timestamp')]),
+		);
+
+		expect(result.current.columnSizing).toEqual({});
+	});
+
+	it('parses flat ColumnSizingState from localStorage', () => {
+		mockGet.mockReturnValue(JSON.stringify({ body: 400, timestamp: 180 }));
+
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body'), col('timestamp')]),
+		);
+
+		expect(result.current.columnSizing).toEqual({ body: 400, timestamp: 180 });
+	});
+
+	it('parses PersistedColumnSizing wrapper with sizing + columnIdsSignature', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				version: 1,
+				columnIdsSignature: 'body|timestamp',
+				sizing: { body: 300 },
+			}),
+		);
+
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body'), col('timestamp')]),
+		);
+
+		expect(result.current.columnSizing).toEqual({ body: 300 });
+	});
+
+	it('drops invalid numeric entries when reading from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				body: 200,
+				bad: NaN,
+				zero: 0,
+				neg: -1,
+				str: 'wide',
+			}),
+		);
+
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body'), col('bad'), col('zero')]),
+		);
+
+		expect(result.current.columnSizing).toEqual({ body: 200 });
+	});
+
+	it('returns empty sizing when JSON is invalid', () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockGet.mockReturnValue('not-json');
+
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body')]),
+		);
+
+		expect(result.current.columnSizing).toEqual({});
+		spy.mockRestore();
+	});
+
+	it('prunes sizing for columns not in orderedColumns and strips fixed columns', () => {
+		mockGet.mockReturnValue(JSON.stringify({ body: 400, expand: 32, gone: 100 }));
+
+		const { result, rerender } = renderHook(
+			({ columns }: { columns: OrderedColumn[] }) =>
+				useColumnSizingPersistence(columns),
+			{
+				initialProps: {
+					columns: [
+						col('body'),
+						col('expand'),
+						col('state-indicator'),
+					] as OrderedColumn[],
+				},
+			},
+		);
+
+		expect(result.current.columnSizing).toEqual({ body: 400 });
+
+		act(() => {
+			rerender({
+				columns: [col('body'), col('expand'), col('state-indicator')],
+			});
+		});
+
+		expect(result.current.columnSizing).toEqual({ body: 400 });
+	});
+
+	it('updates setColumnSizing manually', () => {
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body')]),
+		);
+
+		act(() => {
+			result.current.setColumnSizing({ body: 500 });
+		});
+
+		expect(result.current.columnSizing).toEqual({ body: 500 });
+	});
+
+	it('debounces writes to localStorage', () => {
+		const { result } = renderHook(() =>
+			useColumnSizingPersistence([col('body')]),
+		);
+
+		act(() => {
+			result.current.setColumnSizing({ body: 600 });
+		});
+
+		expect(mockSet).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalledWith(
+			LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
+			expect.stringContaining('"body":600'),
+		);
+	});
+
+	it('does not persist when ordered columns signature effect runs with empty ids early — still debounces empty sizing', () => {
+		const { result } = renderHook(() => useColumnSizingPersistence([]));
+
+		expect(result.current.columnSizing).toEqual({});
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalled();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useOrderedColumns.test.tsx

@@ -0,0 +1,222 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { OrderedColumn } from '../types';
+import { useOrderedColumns } from '../useOrderedColumns';
+
+const mockGetDraggedColumns = jest.fn();
+
+jest.mock('hooks/useDragColumns/utils', () => ({
+	getDraggedColumns: <T,>(current: unknown[], dragged: unknown[]): T[] =>
+		mockGetDraggedColumns(current, dragged) as T[],
+}));
+
+const col = (key: string, title?: string): OrderedColumn =>
+	({ key, title: title ?? key } as OrderedColumn);
+
+describe('useOrderedColumns', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns columns from getDraggedColumns filtered to keys with string or number', () => {
+		mockGetDraggedColumns.mockReturnValue([
+			col('body'),
+			col('timestamp'),
+			{ title: 'no-key' },
+		]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange: jest.fn(),
+			}),
+		);
+
+		expect(result.current.orderedColumns).toEqual([
+			col('body'),
+			col('timestamp'),
+		]);
+		expect(result.current.orderedColumnIds).toEqual(['body', 'timestamp']);
+	});
+
+	it('hasSingleColumn is true when exactly one column is not state-indicator', () => {
+		mockGetDraggedColumns.mockReturnValue([col('state-indicator'), col('body')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange: jest.fn(),
+			}),
+		);
+
+		expect(result.current.hasSingleColumn).toBe(true);
+	});
+
+	it('hasSingleColumn is false when more than one non-state-indicator column exists', () => {
+		mockGetDraggedColumns.mockReturnValue([
+			col('state-indicator'),
+			col('body'),
+			col('timestamp'),
+		]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange: jest.fn(),
+			}),
+		);
+
+		expect(result.current.hasSingleColumn).toBe(false);
+	});
+
+	it('handleDragEnd reorders columns and calls onColumnOrderChange', () => {
+		const onColumnOrderChange = jest.fn();
+		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange,
+			}),
+		);
+
+		act(() => {
+			result.current.handleDragEnd({
+				active: { id: 'a' },
+				over: { id: 'c' },
+			} as never);
+		});
+
+		expect(onColumnOrderChange).toHaveBeenCalledWith([
+			expect.objectContaining({ key: 'b' }),
+			expect.objectContaining({ key: 'c' }),
+			expect.objectContaining({ key: 'a' }),
+		]);
+
+		// Derived-only: orderedColumns should remain until draggedColumns (URL/localStorage) updates.
+		expect(result.current.orderedColumns.map((c) => c.key)).toEqual([
+			'a',
+			'b',
+			'c',
+		]);
+	});
+
+	it('handleDragEnd no-ops when over is null', () => {
+		const onColumnOrderChange = jest.fn();
+		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange,
+			}),
+		);
+
+		const before = result.current.orderedColumns;
+
+		act(() => {
+			result.current.handleDragEnd({
+				active: { id: 'a' },
+				over: null,
+			} as never);
+		});
+
+		expect(result.current.orderedColumns).toBe(before);
+		expect(onColumnOrderChange).not.toHaveBeenCalled();
+	});
+
+	it('handleDragEnd no-ops when active.id equals over.id', () => {
+		const onColumnOrderChange = jest.fn();
+		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange,
+			}),
+		);
+
+		act(() => {
+			result.current.handleDragEnd({
+				active: { id: 'a' },
+				over: { id: 'a' },
+			} as never);
+		});
+
+		expect(onColumnOrderChange).not.toHaveBeenCalled();
+	});
+
+	it('handleDragEnd no-ops when indices cannot be resolved', () => {
+		const onColumnOrderChange = jest.fn();
+		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange,
+			}),
+		);
+
+		act(() => {
+			result.current.handleDragEnd({
+				active: { id: 'missing' },
+				over: { id: 'a' },
+			} as never);
+		});
+
+		expect(onColumnOrderChange).not.toHaveBeenCalled();
+	});
+
+	it('exposes sensors from useSensors', () => {
+		mockGetDraggedColumns.mockReturnValue([col('a')]);
+
+		const { result } = renderHook(() =>
+			useOrderedColumns({
+				columns: [],
+				draggedColumns: [],
+				onColumnOrderChange: jest.fn(),
+			}),
+		);
+
+		expect(result.current.sensors).toBeDefined();
+	});
+
+	it('syncs ordered columns when base order changes externally (e.g. URL / localStorage)', () => {
+		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
+
+		const { result, rerender } = renderHook(
+			({ draggedColumns }: { draggedColumns: unknown[] }) =>
+				useOrderedColumns({
+					columns: [],
+					draggedColumns,
+					onColumnOrderChange: jest.fn(),
+				}),
+			{ initialProps: { draggedColumns: [] as unknown[] } },
+		);
+
+		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
+			'a',
+			'b',
+			'c',
+		]);
+
+		mockGetDraggedColumns.mockReturnValue([col('c'), col('b'), col('a')]);
+
+		act(() => {
+			rerender({ draggedColumns: [{ title: 'from-url' }] as unknown[] });
+		});
+
+		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx

@@ -0,0 +1,433 @@
+import {
+	forwardRef,
+	memo,
+	MouseEvent as ReactMouseEvent,
+	ReactElement,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
+import { DndContext, pointerWithin } from '@dnd-kit/core';
+import {
+	horizontalListSortingStrategy,
+	SortableContext,
+} from '@dnd-kit/sortable';
+import { toast } from '@signozhq/sonner';
+import {
+	ColumnDef,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { ColumnTypeRender } from 'components/Logs/TableView/types';
+import { useTableView } from 'components/Logs/TableView/useTableView';
+import Spinner from 'components/Spinner';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useDragColumns from 'hooks/useDragColumns';
+
+import { infinityDefaultStyles } from '../InfinityTableView/config';
+import { TanStackTableStyled } from '../InfinityTableView/styles';
+import { InfinityTableProps } from '../InfinityTableView/types';
+import TanStackCustomTableRow from './TanStackCustomTableRow';
+import TanStackHeaderRow from './TanStackHeaderRow';
+import TanStackRowCells from './TanStackRow';
+import { TableRecord, TanStackTableRowData } from './types';
+import { useColumnSizingPersistence } from './useColumnSizingPersistence';
+import { useOrderedColumns } from './useOrderedColumns';
+import {
+	getColumnId,
+	getColumnMinWidthPx,
+	resolveColumnTypeRender,
+} from './utils';
+
+import '../logsTableVirtuosoScrollbar.scss';
+import './styles/TanStackTableView.styles.scss';
+
+const COLUMN_DND_AUTO_SCROLL = {
+	layoutShiftCompensation: false as const,
+	threshold: { x: 0.2, y: 0 },
+};
+
+const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
+	function TanStackTableView(
+		{
+			isLoading,
+			isFetching,
+			onRemoveColumn,
+			tableViewProps,
+			infitiyTableProps,
+			onSetActiveLog,
+			onClearActiveLog,
+			activeLog,
+		}: InfinityTableProps,
+		forwardedRef,
+	): JSX.Element {
+		const { pathname } = useLocation();
+		const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
+		// could avoid this if directly use forwardedRef in TableVirtuoso, but need to verify if it causes any issue with react-virtuoso internal ref handling
+		useImperativeHandle(
+			forwardedRef,
+			() => virtuosoRef.current as TableVirtuosoHandle,
+			[],
+		);
+		const [, setCopy] = useCopyToClipboard();
+		const isDarkMode = useIsDarkMode();
+		const isLogsExplorerPage = pathname === ROUTES.LOGS_EXPLORER;
+		const { activeLog: activeContextLog } = useActiveLog();
+
+		// Column definitions (shared with existing logs table)
+		const { dataSource, columns } = useTableView({
+			...tableViewProps,
+			onClickExpand: onSetActiveLog,
+			onOpenLogsContext: (log): void => onSetActiveLog?.(log, VIEW_TYPES.CONTEXT),
+		});
+
+		// Column order (drag + persisted order)
+		const { draggedColumns, onColumnOrderChange } = useDragColumns<TableRecord>(
+			LOCALSTORAGE.LOGS_LIST_COLUMNS,
+		);
+		const {
+			orderedColumns,
+			orderedColumnIds,
+			hasSingleColumn,
+			handleDragEnd,
+			sensors,
+		} = useOrderedColumns({
+			columns,
+			draggedColumns,
+			onColumnOrderChange: onColumnOrderChange as (columns: unknown[]) => void,
+		});
+
+		// Column sizing (persisted). stored to localStorage.
+		const { columnSizing, setColumnSizing } = useColumnSizingPersistence(
+			orderedColumns,
+		);
+
+		// don't allow "remove column" when only state-indicator + one data col remain
+		const isAtMinimumRemovableColumns = useMemo(
+			() =>
+				orderedColumns.filter(
+					(column) => column.key !== 'state-indicator' && column.key !== 'expand',
+				).length <= 1,
+			[orderedColumns],
+		);
+
+		// Table data (TanStack row data shape)
+		// useTableView sends flattened log data. this would not be needed once we move to new log details view
+		const tableData = useMemo<TanStackTableRowData[]>(
+			() =>
+				dataSource
+					.map((log, rowIndex) => {
+						const currentLog = tableViewProps.logs[rowIndex];
+						if (!currentLog) {
+							return null;
+						}
+						return { log, currentLog, rowIndex };
+					})
+					.filter(Boolean) as TanStackTableRowData[],
+			[dataSource, tableViewProps.logs],
+		);
+
+		// TanStack columns + table instance
+		const tanstackColumns = useMemo<ColumnDef<TanStackTableRowData>[]>(
+			() =>
+				orderedColumns.map((column, index) => {
+					const isStateIndicator = column.key === 'state-indicator';
+					const isExpand = column.key === 'expand';
+					const isFixedColumn = isStateIndicator || isExpand;
+					const fixedWidth = isFixedColumn ? 32 : undefined;
+					const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
+					const headerTitle = String(column.title || '');
+
+					return {
+						id: getColumnId(column),
+						header: headerTitle.replace(/^\w/, (character) =>
+							character.toUpperCase(),
+						),
+						accessorFn: (row): unknown => row.log[column.key as keyof TableRecord],
+						enableResizing: !isFixedColumn && index !== orderedColumns.length - 1,
+						minSize: fixedWidth ?? minWidthPx,
+						size: fixedWidth, // last column gets remaining space, so don't set initial size to avoid conflict with resizing
+						maxSize: fixedWidth,
+						cell: ({ row, getValue }): ReactElement | string | number | null => {
+							if (!column.render) {
+								return null;
+							}
+
+							return resolveColumnTypeRender(
+								column.render(
+									getValue(),
+									row.original.log,
+									row.original.rowIndex,
+								) as ColumnTypeRender<Record<string, unknown>>,
+							);
+						},
+					};
+				}),
+			[orderedColumns],
+		);
+		const table = useReactTable({
+			data: tableData,
+			columns: tanstackColumns,
+			enableColumnResizing: true,
+			getCoreRowModel: getCoreRowModel(),
+			columnResizeMode: 'onChange',
+			onColumnSizingChange: setColumnSizing,
+			state: {
+				columnSizing,
+			},
+		});
+		const tableRows = table.getRowModel().rows;
+
+		// Infinite-scroll footer UI state
+		const [loadMoreState, setLoadMoreState] = useState<{
+			active: boolean;
+			startCount: number;
+		}>({
+			active: false,
+			startCount: 0,
+		});
+
+		// Map to resolve full log object by id (row highlighting + indicator)
+		const logsById = useMemo(
+			() => new Map(tableViewProps.logs.map((log) => [String(log.id), log])),
+			[tableViewProps.logs],
+		);
+
+		// this is already written in parent. Check if this is needed.
+		useEffect(() => {
+			const activeLogIndex = tableViewProps.activeLogIndex ?? -1;
+			if (activeLogIndex < 0 || activeLogIndex >= tableRows.length) {
+				return;
+			}
+
+			virtuosoRef.current?.scrollToIndex({
+				index: activeLogIndex,
+				align: 'center',
+				behavior: 'auto',
+			});
+		}, [tableRows.length, tableViewProps.activeLogIndex]);
+
+		useEffect(() => {
+			if (!loadMoreState.active) {
+				return;
+			}
+
+			if (!isFetching || tableRows.length > loadMoreState.startCount) {
+				setLoadMoreState((prev) =>
+					prev.active ? { active: false, startCount: prev.startCount } : prev,
+				);
+			}
+		}, [isFetching, loadMoreState, tableRows.length]);
+
+		const handleLogCopy = useCallback(
+			(logId: string, event: ReactMouseEvent<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, `"${logId}"`);
+				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+
+				setCopy(link);
+				toast.success('Copied to clipboard', { position: 'top-right' });
+			},
+			[pathname, setCopy],
+		);
+
+		const itemContent = useCallback(
+			(index: number): JSX.Element | null => {
+				const row = tableRows[index];
+				if (!row) {
+					return null;
+				}
+
+				return (
+					<TanStackRowCells
+						row={row}
+						fontSize={tableViewProps.fontSize}
+						onSetActiveLog={onSetActiveLog}
+						onClearActiveLog={onClearActiveLog}
+						isActiveLog={
+							String(activeLog?.id ?? '') === String(row.original.currentLog.id ?? '')
+						}
+						isDarkMode={isDarkMode}
+						onLogCopy={handleLogCopy}
+						isLogsExplorerPage={isLogsExplorerPage}
+					/>
+				);
+			},
+			[
+				activeLog?.id,
+				handleLogCopy,
+				isDarkMode,
+				isLogsExplorerPage,
+				onClearActiveLog,
+				onSetActiveLog,
+				tableRows,
+				tableViewProps.fontSize,
+			],
+		);
+
+		const flatHeaders = useMemo(
+			() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+			[tanstackColumns],
+		);
+
+		const tableHeader = useCallback(() => {
+			const orderedColumnsById = new Map(
+				orderedColumns.map((column) => [getColumnId(column), column] as const),
+			);
+
+			return (
+				<DndContext
+					sensors={sensors}
+					collisionDetection={pointerWithin}
+					onDragEnd={handleDragEnd}
+					autoScroll={COLUMN_DND_AUTO_SCROLL}
+				>
+					<SortableContext
+						items={orderedColumnIds}
+						strategy={horizontalListSortingStrategy}
+					>
+						<tr>
+							{flatHeaders.map((header) => {
+								const column = orderedColumnsById.get(header.id);
+								if (!column) {
+									return null;
+								}
+
+								return (
+									<TanStackHeaderRow
+										key={header.id}
+										column={column}
+										header={header}
+										isDarkMode={isDarkMode}
+										fontSize={tableViewProps.fontSize}
+										hasSingleColumn={hasSingleColumn}
+										onRemoveColumn={onRemoveColumn}
+										canRemoveColumn={!isAtMinimumRemovableColumns}
+									/>
+								);
+							})}
+						</tr>
+					</SortableContext>
+				</DndContext>
+			);
+		}, [
+			flatHeaders,
+			handleDragEnd,
+			hasSingleColumn,
+			isDarkMode,
+			orderedColumnIds,
+			orderedColumns,
+			onRemoveColumn,
+			isAtMinimumRemovableColumns,
+			sensors,
+			tableViewProps.fontSize,
+		]);
+
+		const handleEndReached = useCallback(
+			(index: number): void => {
+				if (!infitiyTableProps?.onEndReached) {
+					return;
+				}
+
+				setLoadMoreState({
+					active: true,
+					startCount: tableRows.length,
+				});
+				infitiyTableProps.onEndReached(index);
+			},
+			[infitiyTableProps, tableRows.length],
+		);
+
+		if (isLoading) {
+			return <Spinner height="35px" tip="Getting Logs" />;
+		}
+
+		return (
+			<div className="tanstack-table-view-wrapper">
+				<TableVirtuoso
+					className="logs-table-virtuoso-scroll"
+					ref={virtuosoRef}
+					style={infinityDefaultStyles}
+					data={tableData}
+					totalCount={tableRows.length}
+					increaseViewportBy={{ top: 500, bottom: 500 }}
+					initialTopMostItemIndex={
+						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
+					}
+					context={{ activeLog, activeContextLog, logsById }}
+					fixedHeaderContent={tableHeader}
+					itemContent={itemContent}
+					components={{
+						Table: ({ style, children }): JSX.Element => (
+							<TanStackTableStyled style={style}>
+								<colgroup>
+									{orderedColumns.map((column, colIndex) => {
+										const columnId = getColumnId(column);
+										const isFixedColumn =
+											column.key === 'expand' || column.key === 'state-indicator';
+										const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
+										const persistedWidth = columnSizing[columnId];
+										const computedWidth = table.getColumn(columnId)?.getSize();
+										const effectiveWidth = persistedWidth ?? computedWidth;
+										if (isFixedColumn) {
+											return <col key={columnId} className="tanstack-fixed-col" />;
+										}
+										// Last data column should stretch to fill remaining space
+										const isLastColumn = colIndex === orderedColumns.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>
+								{children}
+							</TanStackTableStyled>
+						),
+						TableRow: TanStackCustomTableRow,
+					}}
+					{...(infitiyTableProps?.onEndReached
+						? { endReached: handleEndReached }
+						: {})}
+				/>
+				{loadMoreState.active && (
+					<div className="tanstack-load-more-container">
+						<Spinner height="20px" tip="Getting Logs" />
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+
+export default memo(TanStackTableView);

frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss

@@ -1,8 +1,8 @@
-.tanstackHeaderCell {
+.tanstack-header-cell {
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	padding: 0.3rem;
+	padding: 0;
 	transform: translate3d(
 		var(--tanstack-header-translate-x, 0px),
 		var(--tanstack-header-translate-y, 0px),
@@ -10,16 +10,16 @@
 	);
 	transition: var(--tanstack-header-transition, none);
 
-	&.isDragging {
+	&.is-dragging {
 		opacity: 0.85;
 	}
 
-	&.isResizing {
+	&.is-resizing {
 		background: var(--l2-background-hover);
 	}
 }
 
-.tanstackHeaderContent {
+.tanstack-header-content {
 	display: flex;
 	align-items: center;
 	height: 100%;
@@ -28,20 +28,20 @@
 	cursor: default;
 	max-width: 100%;
 
-	&.hasResizeControl {
+	&.has-resize-control {
 		max-width: calc(100% - 5px);
 	}
 
-	&.hasActionControl {
+	&.has-action-control {
 		max-width: calc(100% - 5px);
 	}
 
-	&.hasResizeControl.hasActionControl {
+	&.has-resize-control.has-action-control {
 		max-width: calc(100% - 10px);
 	}
 }
 
-.tanstackGripSlot {
+.tanstack-grip-slot {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -51,7 +51,7 @@
 	flex-shrink: 0;
 }
 
-.tanstackGripActivator {
+.tanstack-grip-activator {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -63,7 +63,7 @@
 	touch-action: none;
 }
 
-.tanstackHeaderActionTrigger {
+.tanstack-header-action-trigger {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -72,11 +72,9 @@
 	cursor: pointer;
 	flex-shrink: 0;
 	color: var(--l2-foreground);
-
-	margin-left: auto;
 }
 
-.tanstackColumnActionsContent {
+.tanstack-column-actions-content {
 	width: 140px;
 	padding: 0;
 	background: var(--l2-background);
@@ -85,7 +83,7 @@
 	box-shadow: none;
 }
 
-.tanstackRemoveColumnAction {
+.tanstack-remove-column-action {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -107,19 +105,19 @@
 		background: var(--l2-background-hover);
 		color: var(--l2-foreground);
 
-		.tanstackRemoveColumnActionIcon {
+		.tanstack-remove-column-action-icon {
 			color: var(--l2-foreground);
 		}
 	}
 }
 
-.tanstackRemoveColumnActionIcon {
+.tanstack-remove-column-action-icon {
 	font-size: 11px;
 	color: var(--l2-foreground);
 	opacity: 0.95;
 }
 
-.tanstackHeaderCell .cursorColResize {
+.tanstack-header-cell .cursor-col-resize {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -131,84 +129,25 @@
 	background: transparent;
 }
 
-.tanstackHeaderCell.isResizing .cursorColResize {
+.tanstack-header-cell.is-resizing .cursor-col-resize {
 	background: var(--bg-robin-300);
 }
 
-.tanstackResizeHandleLine {
+.tanstack-resize-handle-line {
 	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;
-	background: transparent;
 }
 
-.cursorColResize:hover .tanstackResizeHandleLine {
-	background: var(--l2-border);
-}
-
-.tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
+.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
 	width: 2px;
 	background: var(--bg-robin-500);
 	transition: none;
 }
-
-.tanstackSortButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	background: none;
-	border: none;
-	padding: 0;
-	margin: 0;
-	font: inherit;
-	color: inherit;
-	cursor: pointer;
-	text-align: left;
-	min-width: 0;
-	max-width: 100%;
-	flex: 1;
-	overflow: hidden;
-
-	&:hover {
-		color: var(--l2-foreground);
-	}
-
-	&.isSorted {
-		color: var(--l2-foreground);
-	}
-}
-
-.tanstackHeaderTitle {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	min-width: 0;
-	flex: 1;
-}
-
-.tanstackSortLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	min-width: 0;
-}
-
-.tanstackSortIndicator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	width: 14px;
-	height: 14px;
-	color: var(--l2-foreground);
-}
-
-.isSortable {
-	cursor: pointer;
-}

frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackTableView.styles.scss

@@ -0,0 +1,55 @@
+.tanstack-table-view-wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-height: 0;
+}
+
+.tanstack-fixed-col {
+	width: 32px;
+	min-width: 32px;
+	max-width: 32px;
+}
+
+.tanstack-filler-col {
+	width: 100%;
+	min-width: 0;
+}
+
+.tanstack-actions-col {
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+}
+
+.tanstack-load-more-container {
+	width: 100%;
+	min-height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 0 12px;
+	flex-shrink: 0;
+}
+
+.tanstack-table-virtuoso {
+	width: 100%;
+	overflow-x: scroll;
+}
+
+.tanstack-fontSize-small {
+	font-size: 11px;
+}
+
+.tanstack-fontSize-medium {
+	font-size: 13px;
+}
+
+.tanstack-fontSize-large {
+	font-size: 14px;
+}
+
+.tanstack-table-foot-loader-cell {
+	text-align: center;
+	padding: 8px 0;
+}

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

@@ -0,0 +1,29 @@
+import { ColumnSizingState } from '@tanstack/react-table';
+import { ColumnTypeRender } from 'components/Logs/TableView/types';
+import { ILog } from 'types/api/logs/log';
+
+export type TableRecord = Record<string, unknown>;
+
+export type LogsTableColumnDef = {
+	key?: string | number;
+	title?: string;
+	render?: (
+		value: unknown,
+		record: TableRecord,
+		index: number,
+	) => ColumnTypeRender<Record<string, unknown>>;
+};
+
+export type OrderedColumn = LogsTableColumnDef & {
+	key: string | number;
+};
+
+export type TanStackTableRowData = {
+	log: TableRecord;
+	currentLog: ILog;
+	rowIndex: number;
+};
+
+export type PersistedColumnSizing = {
+	sizing: ColumnSizingState;
+};

frontend/src/container/LogsExplorerList/TanStackTableView/useColumnSizingPersistence.ts

@@ -0,0 +1,111 @@
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import { OrderedColumn, PersistedColumnSizing } from './types';
+import { getColumnId } from './utils';
+
+const COLUMN_SIZING_PERSIST_DEBOUNCE_MS = 250;
+
+const sanitizeSizing = (input: unknown): ColumnSizingState => {
+	if (!input || typeof input !== 'object') {
+		return {};
+	}
+	return Object.entries(
+		input as Record<string, unknown>,
+	).reduce<ColumnSizingState>((acc, [key, value]) => {
+		if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+			return acc;
+		}
+		acc[key] = value;
+		return acc;
+	}, {});
+};
+
+const readPersistedColumnSizing = (): ColumnSizingState => {
+	const rawSizing = getFromLocalstorage(LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING);
+	if (!rawSizing) {
+		return {};
+	}
+
+	try {
+		const parsed = JSON.parse(rawSizing) as
+			| PersistedColumnSizing
+			| ColumnSizingState;
+		const sizing = ('sizing' in parsed
+			? parsed.sizing
+			: parsed) as ColumnSizingState;
+		return sanitizeSizing(sizing);
+	} catch (error) {
+		console.error('Failed to parse persisted log column sizing', error);
+		return {};
+	}
+};
+
+type UseColumnSizingPersistenceResult = {
+	columnSizing: ColumnSizingState;
+	setColumnSizing: Dispatch<SetStateAction<ColumnSizingState>>;
+};
+
+export const useColumnSizingPersistence = (
+	orderedColumns: OrderedColumn[],
+): UseColumnSizingPersistenceResult => {
+	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() =>
+		readPersistedColumnSizing(),
+	);
+	const orderedColumnIds = useMemo(
+		() => orderedColumns.map((column) => getColumnId(column)),
+		[orderedColumns],
+	);
+
+	useEffect(() => {
+		if (orderedColumnIds.length === 0) {
+			return;
+		}
+
+		const validColumnIds = new Set(orderedColumnIds);
+		const nonResizableColumnIds = new Set(
+			orderedColumns
+				.filter(
+					(column) => column.key === 'expand' || column.key === 'state-indicator',
+				)
+				.map((column) => getColumnId(column)),
+		);
+
+		setColumnSizing((previousSizing) => {
+			const nextSizing = Object.entries(previousSizing).reduce<ColumnSizingState>(
+				(acc, [columnId, size]) => {
+					if (!validColumnIds.has(columnId) || nonResizableColumnIds.has(columnId)) {
+						return acc;
+					}
+					acc[columnId] = size;
+					return acc;
+				},
+				{},
+			);
+			const hasChanged =
+				Object.keys(nextSizing).length !== Object.keys(previousSizing).length ||
+				Object.entries(nextSizing).some(
+					([columnId, size]) => previousSizing[columnId] !== size,
+				);
+
+			return hasChanged ? nextSizing : previousSizing;
+		});
+	}, [orderedColumnIds, orderedColumns]);
+
+	useEffect(() => {
+		const timeoutId = window.setTimeout(() => {
+			const persistedSizing = { sizing: columnSizing };
+			setToLocalstorage(
+				LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
+				JSON.stringify(persistedSizing),
+			);
+		}, COLUMN_SIZING_PERSIST_DEBOUNCE_MS);
+
+		return (): void => window.clearTimeout(timeoutId);
+	}, [columnSizing]);
+
+	return { columnSizing, setColumnSizing };
+};

frontend/src/container/LogsExplorerList/TanStackTableView/useOrderedColumns.ts

@@ -0,0 +1,108 @@
+import { useCallback, useMemo } from 'react';
+import {
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { getDraggedColumns } from 'hooks/useDragColumns/utils';
+
+import { OrderedColumn, TableRecord } from './types';
+import { getColumnId } from './utils';
+
+type UseOrderedColumnsProps = {
+	columns: unknown[];
+	draggedColumns: unknown[];
+	onColumnOrderChange: (columns: unknown[]) => void;
+};
+
+type UseOrderedColumnsResult = {
+	orderedColumns: OrderedColumn[];
+	orderedColumnIds: string[];
+	hasSingleColumn: boolean;
+	handleDragEnd: (event: DragEndEvent) => void;
+	sensors: ReturnType<typeof useSensors>;
+};
+
+export const useOrderedColumns = ({
+	columns,
+	draggedColumns,
+	onColumnOrderChange,
+}: UseOrderedColumnsProps): UseOrderedColumnsResult => {
+	const baseColumns = useMemo<OrderedColumn[]>(
+		() =>
+			getDraggedColumns<TableRecord>(
+				columns as never[],
+				draggedColumns as never[],
+			).filter(
+				(column): column is OrderedColumn =>
+					typeof column.key === 'string' || typeof column.key === 'number',
+			),
+		[columns, draggedColumns],
+	);
+
+	const orderedColumns = useMemo(() => {
+		const stateIndicatorIndex = baseColumns.findIndex(
+			(column) => column.key === 'state-indicator',
+		);
+		if (stateIndicatorIndex <= 0) {
+			return baseColumns;
+		}
+		const pinned = baseColumns[stateIndicatorIndex];
+		const rest = baseColumns.filter((_, i) => i !== stateIndicatorIndex);
+		return [pinned, ...rest];
+	}, [baseColumns]);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent): void => {
+			const { active, over } = event;
+			if (!over || active.id === over.id) {
+				return;
+			}
+
+			// Don't allow moving the state-indicator column
+			if (String(active.id) === 'state-indicator') {
+				return;
+			}
+
+			const oldIndex = orderedColumns.findIndex(
+				(column) => getColumnId(column) === String(active.id),
+			);
+			const newIndex = orderedColumns.findIndex(
+				(column) => getColumnId(column) === String(over.id),
+			);
+			if (oldIndex === -1 || newIndex === -1) {
+				return;
+			}
+
+			const nextColumns = arrayMove(orderedColumns, oldIndex, newIndex);
+			onColumnOrderChange(nextColumns as unknown[]);
+		},
+		[onColumnOrderChange, orderedColumns],
+	);
+
+	const orderedColumnIds = useMemo(
+		() => orderedColumns.map((column) => getColumnId(column)),
+		[orderedColumns],
+	);
+	const hasSingleColumn = useMemo(
+		() =>
+			orderedColumns.filter((column) => column.key !== 'state-indicator')
+				.length === 1,
+		[orderedColumns],
+	);
+	const sensors = useSensors(
+		useSensor(PointerSensor, {
+			activationConstraint: { distance: 4 },
+		}),
+	);
+
+	return {
+		orderedColumns,
+		orderedColumnIds,
+		hasSingleColumn,
+		handleDragEnd,
+		sensors,
+	};
+};

frontend/src/container/LogsExplorerList/TanStackTableView/utils.ts

@@ -0,0 +1,61 @@
+import { cloneElement, isValidElement, ReactElement } from 'react';
+import { ColumnTypeRender } from 'components/Logs/TableView/types';
+
+import { OrderedColumn } from './types';
+
+export const getColumnId = (column: OrderedColumn): string =>
+	String(column.key);
+
+/** Browser default root font size; TanStack column sizing uses px. */
+const REM_PX = 16;
+const MIN_WIDTH_OTHER_REM = 12;
+const MIN_WIDTH_BODY_REM = 40;
+
+/** When total column count is below this, body column min width is doubled (more horizontal space for few columns). */
+export const FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD = 4;
+
+/**
+ * Minimum width (px) for TanStack column defs + colgroup.
+ * Design: state/expand 32px; body min 40rem (doubled when fewer than
+ * {@link FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD} total columns); other columns use rem→px (16px root).
+ */
+export const getColumnMinWidthPx = (
+	column: OrderedColumn,
+	orderedColumns?: OrderedColumn[],
+): number => {
+	const key = String(column.key);
+	if (key === 'state-indicator' || key === 'expand') {
+		return 32;
+	}
+	if (key === 'body') {
+		const base = MIN_WIDTH_BODY_REM * REM_PX;
+		const fewColumns =
+			orderedColumns != null &&
+			orderedColumns.length < FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD;
+		return fewColumns ? base * 1.5 : base;
+	}
+	return MIN_WIDTH_OTHER_REM * REM_PX;
+};
+
+export const resolveColumnTypeRender = (
+	rendered: ColumnTypeRender<Record<string, unknown>>,
+): ReactElement | string | number | null => {
+	if (
+		rendered &&
+		typeof rendered === 'object' &&
+		'children' in rendered &&
+		isValidElement(rendered.children)
+	) {
+		const { children, props } = rendered as {
+			children: ReactElement;
+			props?: Record<string, unknown>;
+		};
+		return cloneElement(children, props || {});
+	}
+	if (rendered && typeof rendered === 'object' && isValidElement(rendered)) {
+		return rendered;
+	}
+	return typeof rendered === 'string' || typeof rendered === 'number'
+		? rendered
+		: null;
+};

frontend/src/container/LogsExplorerList/index.tsx

@@ -1,27 +1,16 @@
-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';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
+// components
 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 type { TanStackTableHandle } from 'components/TanStackTableView';
-import TanStackTable, { useTableColumns } from 'components/TanStackTableView';
 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';
@@ -30,7 +19,6 @@ 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';
@@ -39,6 +27,7 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import NoLogs from '../NoLogs/NoLogs';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
+import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -61,10 +50,7 @@ function LogsExplorerList({
 	isFilterApplied,
 	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
-	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
-	const { pathname } = useLocation();
-	const [, setCopy] = useCopyToClipboard();
-	const isDarkMode = useIsDarkMode();
+	const ref = useRef<VirtuosoHandle>(null);
 	const { activeLogId } = useCopyLogLink();
 
 	const {
@@ -98,46 +84,9 @@ 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 as React.RefObject<Pick<
-			VirtuosoHandle,
-			'scrollToIndex'
-		> | null>,
+		virtuosoRef: ref,
 	});
 
 	useEffect(() => {
@@ -206,45 +155,25 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<TanStackTable
-					ref={ref as React.Ref<TanStackTableHandle>}
-					{...tableProps}
-					plainTextCellLineClamp={options.maxLines}
-					cellTypographySize={options.fontSize}
-					onRemoveColumn={handleRemoveColumn}
-					data={logs}
-					isLoading={isLoading || isFetching}
-					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);
+				<TanStackTableView
+					ref={ref}
+					isLoading={isLoading}
+					isFetching={isFetching}
+					tableViewProps={{
+						logs,
+						fields: selectedFields,
+						linesPerRow: options.maxLines,
+						fontSize: options.fontSize,
+						appendTo: 'end',
+						activeLogIndex,
 					}}
-					onRowDeactivate={handleCloseLogDetail}
-					activeRowIndex={activeLogIndex}
-					renderRowActions={(log): ReactNode => (
-						<LogLinesActionButtons
-							handleShowContext={(e): void => {
-								e.preventDefault();
-								e.stopPropagation();
-								handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
-							}}
-							onLogCopy={makeOnLogCopy(log)}
-						/>
-					)}
+					infitiyTableProps={{ onEndReached }}
+					handleChangeSelectedView={handleChangeSelectedView}
+					logs={logs}
+					onSetActiveLog={handleSetActiveLog}
+					onClearActiveLog={handleCloseLogDetail}
+					activeLog={activeLog}
+					onRemoveColumn={config.addColumn?.onRemove}
 				/>
 			);
 		}
@@ -269,7 +198,7 @@ function LogsExplorerList({
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
 						key={activeLogIndex || 'logs-virtuoso'}
-						ref={ref as React.Ref<VirtuosoHandle>}
+						ref={ref}
 						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 						data={logs}
 						endReached={onEndReached}
@@ -290,13 +219,12 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		isFetching,
+		selectedFields,
+		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
-		tableProps,
-		handleRemoveColumn,
-		isDarkMode,
-		makeOnLogCopy,
+		config.addColumn?.onRemove,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {

frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss

@@ -0,0 +1,38 @@
+.logs-table-virtuoso-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);
+	}
+}
+
+.lightMode .logs-table-virtuoso-scroll {
+	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/container/MembersSettings/MembersSettings.tsx

@@ -51,8 +51,6 @@ 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()) {
@@ -91,9 +89,6 @@ 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'] = [
@@ -123,27 +118,12 @@ 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}`
-			: filterMode === FilterMode.Invited
-			? `Pending invites ⎯ ${pendingCount}`
-			: `Deleted ⎯ ${deletedCount}`;
+			: `Pending invites ⎯ ${pendingCount}`;
 
 	const handleInviteComplete = useCallback((): void => {
 		refetchUsers();

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

@@ -117,14 +117,14 @@ describe('MembersSettings (integration)', () => {
 		await screen.findByText('Member Details');
 	});
 
-	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
+	it('does not open 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')).toBeInTheDocument();
+		expect(screen.queryByText('Member Details')).not.toBeInTheDocument();
 	});
 
 	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {

frontend/src/container/MembersSettings/utils.ts

@@ -1,7 +1,6 @@
 export enum FilterMode {
 	All = 'all',
 	Invited = 'invited',
-	Deleted = 'deleted',
 }
 
 export enum MemberStatus {

frontend/src/container/OrganizationSettings/DisplayName/DisplayName.styles.scss

@@ -1,16 +0,0 @@
-.display-name-form {
-	.form-field {
-		margin-bottom: var(--spacing-8);
-
-		label {
-			display: block;
-			margin-bottom: var(--spacing-4);
-		}
-	}
-
-	.field-error {
-		color: var(--destructive);
-		margin-top: var(--spacing-2);
-		font-size: var(--font-size-xs);
-	}
-}

frontend/src/container/OrganizationSettings/DisplayName/__tests__/DisplayName.test.tsx

@@ -1,78 +0,0 @@
-import { toast } from '@signozhq/sonner';
-import { rest, server } from 'mocks-server/server';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import DisplayName from '../index';
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const ORG_ME_ENDPOINT = '*/api/v2/orgs/me';
-
-const defaultProps = { index: 0, id: 'does-not-matter-id' };
-
-describe('DisplayName', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders form pre-filled with org displayName from context', async () => {
-		render(<DisplayName {...defaultProps} />);
-
-		const input = await screen.findByRole('textbox');
-		expect(input).toHaveValue('Pentagon');
-
-		expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
-	});
-
-	it('enables submit and calls PUT when display name is changed', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		server.use(rest.put(ORG_ME_ENDPOINT, (_, res, ctx) => res(ctx.status(200))));
-
-		render(<DisplayName {...defaultProps} />);
-
-		const input = await screen.findByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'New Org Name');
-
-		const submitBtn = screen.getByRole('button', { name: /submit/i });
-		expect(submitBtn).toBeEnabled();
-
-		await user.click(submitBtn);
-
-		await waitFor(() => {
-			expect(toast.success).toHaveBeenCalled();
-		});
-	});
-
-	it('shows validation error when display name is cleared and submitted', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<DisplayName {...defaultProps} />);
-
-		const input = await screen.findByRole('textbox');
-		await user.clear(input);
-
-		const form = input.closest('form') as HTMLFormElement;
-		fireEvent.submit(form);
-
-		await waitFor(() => {
-			expect(screen.getByText(/missing display name/i)).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/OrganizationSettings/DisplayName/index.tsx

@@ -1,57 +1,21 @@
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from '@signozhq/sonner';
-import { Button, Input } from 'antd';
+import { Button, Form, Input } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	useGetMyOrganization,
-	useUpdateMyOrganization,
-} from 'api/generated/services/orgs';
+import { useUpdateMyOrganization } from 'api/generated/services/orgs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 
-import './DisplayName.styles.scss';
-
 function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const orgName = Form.useWatch('displayName', form);
+
 	const { t } = useTranslation(['organizationsettings', 'common']);
-	const { showErrorModal } = useErrorModal();
-	const { org, updateOrg, user } = useAppContext();
-	const currentOrg = (org || [])[index];
-	const isAdmin = user.role === USER_ROLES.ADMIN;
-
-	const { data: orgData } = useGetMyOrganization({
-		query: {
-			enabled: isAdmin && !currentOrg?.displayName,
-		},
-	});
-
-	const displayName =
-		currentOrg?.displayName ?? orgData?.data?.displayName ?? '';
-
-	const {
-		control,
-		handleSubmit,
-		watch,
-		getValues,
-		setValue,
-	} = useForm<FormValues>({
-		defaultValues: { displayName },
-	});
-
-	const orgName = watch('displayName');
-
-	useEffect(() => {
-		if (displayName && !getValues('displayName')) {
-			setValue('displayName', displayName);
-		}
-	}, [displayName, getValues, setValue]);
+	const { org, updateOrg } = useAppContext();
+	const { displayName } = (org || [])[index];
 
 	const {
 		mutateAsync: updateMyOrganization,
@@ -66,16 +30,20 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 				updateOrg(orgId, data.displayName ?? '');
 			},
 			onError: (error) => {
-				showErrorModal(
-					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
+				const apiError = convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO>,
+				);
+				toast.error(
+					apiError?.getErrorMessage() ?? t('something_went_wrong', { ns: 'common' }),
+					{ richColors: true, position: 'top-right' },
 				);
 			},
 		},
 	});
 
 	const onSubmit = async (values: FormValues): Promise<void> => {
-		const { displayName: name } = values;
-		await updateMyOrganization({ data: { id: orgId, displayName: name } });
+		const { displayName } = values;
+		await updateMyOrganization({ data: { id: orgId, displayName } });
 	};
 
 	if (!org) {
@@ -85,34 +53,21 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 	const isDisabled = isLoading || orgName === displayName || !orgName;
 
 	return (
-		<form
-			className="display-name-form"
-			onSubmit={handleSubmit(onSubmit)}
+		<Form
+			initialValues={{ displayName }}
+			form={form}
+			layout="vertical"
+			onFinish={onSubmit}
 			autoComplete="off"
 		>
-			<div className="form-field">
-				<label htmlFor="displayName">Display name</label>
-				<Controller
-					name="displayName"
-					control={control}
-					rules={{ required: requireErrorMessage('Display name') }}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<Input
-								{...field}
-								id="displayName"
-								size="large"
-								placeholder={t('signoz')}
-								status={fieldState.error ? 'error' : ''}
-							/>
-							{fieldState.error && (
-								<div className="field-error">{fieldState.error.message}</div>
-							)}
-						</>
-					)}
-				/>
-			</div>
-			<div>
+			<Form.Item
+				name="displayName"
+				label="Display name"
+				rules={[{ required: true, message: requireErrorMessage('Display name') }]}
+			>
+				<Input size="large" placeholder={t('signoz')} />
+			</Form.Item>
+			<Form.Item>
 				<Button
 					loading={isLoading}
 					disabled={isDisabled}
@@ -121,8 +76,8 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 				>
 					Submit
 				</Button>
-			</div>
-		</form>
+			</Form.Item>
+		</Form>
 	);
 }
 

frontend/src/hooks/logs/useScrollToLog.ts

@@ -1,11 +1,9 @@
 import { useCallback } from 'react';
 import type { VirtuosoHandle } from 'react-virtuoso';
 
-type ScrollToIndexHandle = Pick<VirtuosoHandle, 'scrollToIndex'>;
-
 type UseScrollToLogParams = {
 	logs: Array<{ id: string }>;
-	virtuosoRef: React.RefObject<ScrollToIndexHandle | null>;
+	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
 };
 
 function useScrollToLog({

frontend/src/hooks/member/useMemberRoleManager.ts

@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import { useGetUser, useSetRoleByUserID } from 'api/generated/services/users';
-import { retryOn429 } from 'utils/errorUtils';
 
 export interface MemberRoleUpdateFailure {
 	roleName: string;
@@ -39,9 +38,7 @@ export function useMemberRoleManager(
 		[currentUserRoles],
 	);
 
-	const { mutateAsync: setRole } = useSetRoleByUserID({
-		mutation: { retry: retryOn429 },
-	});
+	const { mutateAsync: setRole } = useSetRoleByUserID();
 
 	const applyDiff = useCallback(
 		async (

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -6,12 +6,6 @@ import {
 	useGetServiceAccountRoles,
 } from 'api/generated/services/serviceaccount';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import { retryOn429 } from 'utils/errorUtils';
-
-const enum PromiseStatus {
-	Fulfilled = 'fulfilled',
-	Rejected = 'rejected',
-}
 
 export interface RoleUpdateFailure {
 	roleName: string;
@@ -40,9 +34,7 @@ export function useServiceAccountRoleManager(
 	]);
 
 	// the retry for these mutations is safe due to being idempotent on backend
-	const { mutateAsync: createRole } = useCreateServiceAccountRole({
-		mutation: { retry: retryOn429 },
-	});
+	const { mutateAsync: createRole } = useCreateServiceAccountRole();
 
 	const invalidateRoles = useCallback(
 		() =>
@@ -81,16 +73,11 @@ export function useServiceAccountRoleManager(
 				allOperations.map((op) => op.run()),
 			);
 
-			const successCount = results.filter(
-				(r) => r.status === PromiseStatus.Fulfilled,
-			).length;
-			if (successCount > 0) {
-				await invalidateRoles();
-			}
+			await invalidateRoles();
 
 			const failures: RoleUpdateFailure[] = [];
 			results.forEach((result, index) => {
-				if (result.status === PromiseStatus.Rejected) {
+				if (result.status === 'rejected') {
 					const { role, run } = allOperations[index];
 					failures.push({
 						roleName: role.name ?? 'unknown',

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss

@@ -1,72 +0,0 @@
-.uplot-tooltip-container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--bg-ink-300);
-	-webkit-font-smoothing: antialiased;
-	color: var(--bg-vanilla-100);
-	border-radius: 6px;
-	border: 1px solid var(--bg-ink-100);
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&.lightMode {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-ink-500);
-		border: 1px solid var(--bg-vanilla-300);
-
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-400);
-			}
-		}
-
-		.uplot-tooltip-divider {
-			background-color: var(--bg-vanilla-300);
-		}
-	}
-
-	.uplot-tooltip-header-container {
-		padding: 1rem 1rem 0 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		&:last-child {
-			padding-bottom: 1rem;
-		}
-
-		.uplot-tooltip-header {
-			font-size: 13px;
-			font-weight: 500;
-		}
-	}
-
-	.uplot-tooltip-divider {
-		width: 100%;
-		height: 1px;
-		background-color: var(--bg-ink-100);
-	}
-
-	.uplot-tooltip-list {
-		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
-		// horizontal offset when the scroller has padding or transform applied.
-		div[data-viewport-type='element'] {
-			left: 0;
-			padding: 4px 8px 4px 16px;
-		}
-
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-100);
-			border-radius: 0.5rem;
-		}
-	}
-}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss

@@ -0,0 +1,70 @@
+.uplot-tooltip-container {
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--bg-ink-300);
+	-webkit-font-smoothing: antialiased;
+	color: var(--bg-vanilla-100);
+	border-radius: 6px;
+	padding: 1rem 0.5rem 0.5rem 1rem;
+	border: 1px solid var(--bg-ink-100);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&.lightMode {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-ink-500);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
+	}
+
+	.uplot-tooltip-header {
+		font-size: 13px;
+		font-weight: 500;
+	}
+
+	.uplot-tooltip-list-container {
+		overflow-y: auto;
+		max-height: 330px;
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-slate-100);
+				border-radius: 0.5rem;
+			}
+		}
+	}
+
+	.uplot-tooltip-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 4px;
+
+		.uplot-tooltip-item-marker {
+			border-radius: 50%;
+			border-width: 2px;
+			width: 12px;
+			height: 12px;
+			flex-shrink: 0;
+		}
+
+		.uplot-tooltip-item-content {
+			white-space: wrap;
+			word-break: break-all;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -7,14 +7,12 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
-import TooltipItem from './components/TooltipItem/TooltipItem';
 
-import Styles from './Tooltip.module.scss';
+import './Tooltip.styles.scss';
 
-// Fallback per-item height used for the initial size estimate before
-// Virtuoso reports the real total height via totalListHeightChanged.
+const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
-const LIST_MAX_HEIGHT = 300;
+const TOOLTIP_LIST_PADDING = 10;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -23,26 +21,27 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
+	const [listHeight, setListHeight] = useState(0);
+	const tooltipContent = content ?? [];
 	const { timezone: userTimezone } = useTimezone();
-	const [totalListHeight, setTotalListHeight] = useState(0);
 
-	const tooltipContent = useMemo(() => content ?? [], [content]);
-
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+	const resolvedTimezone = useMemo(() => {
+		if (!timezone) {
+			return userTimezone.value;
+		}
+		return timezone.value;
+	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
+		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
 			return null;
 		}
-		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
-		if (timestamp == null) {
-			return null;
-		}
-		return dayjs(timestamp * 1000)
+		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
@@ -52,68 +51,60 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	const activeItem = useMemo(
-		() => tooltipContent.find((item) => item.isActive) ?? null,
-		[tooltipContent],
-	);
-
-	// Use the measured height from Virtuoso when available; fall back to a
-	// per-item estimate on the first render.  Math.ceil prevents a 1 px
-	// subpixel rounding gap from triggering a spurious scrollbar.
-	const virtuosoHeight = useMemo(() => {
-		return totalListHeight > 0
-			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-			: Math.min(tooltipContent.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT);
-	}, [totalListHeight, tooltipContent.length]);
-
-	const showHeader = showTooltipHeader || activeItem != null;
-	// With a single series the active item is fully represented in the header —
-	// hide the divider and list to avoid showing a duplicate row.
-	const showList = tooltipContent.length > 1;
-	const showDivider = showList && showHeader;
+	const virtuosoStyle = useMemo(() => {
+		return {
+			height:
+				listHeight > 0
+					? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
+					: Math.min(
+							tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
+							TOOLTIP_LIST_MAX_HEIGHT,
+					  ),
+			width: '100%',
+		};
+	}, [listHeight, tooltipContent.length]);
 
 	return (
 		<div
-			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
+			className={cx(
+				'uplot-tooltip-container',
+				isDarkMode ? 'darkMode' : 'lightMode',
+			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showHeader && (
-				<div className={Styles.uplotTooltipHeaderContainer}>
-					{showTooltipHeader && headerTitle && (
-						<div
-							className={Styles.uplotTooltipHeader}
-							data-testid="uplot-tooltip-header"
-						>
-							<span>{headerTitle}</span>
-						</div>
-					)}
-
-					{activeItem && (
-						<TooltipItem
-							item={activeItem}
-							isItemActive={true}
-							containerTestId="uplot-tooltip-pinned"
-							markerTestId="uplot-tooltip-pinned-marker"
-							contentTestId="uplot-tooltip-pinned-content"
-						/>
-					)}
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+					<span>{headerTitle}</span>
 				</div>
 			)}
-
-			{showDivider && <span className={Styles.uplotTooltipDivider} />}
-
-			{showList && (
-				<Virtuoso
-					className={Styles.uplotTooltipList}
-					data-testid="uplot-tooltip-list"
-					data={tooltipContent}
-					style={{ height: virtuosoHeight, width: '100%' }}
-					totalListHeightChanged={setTotalListHeight}
-					itemContent={(_, item): JSX.Element => (
-						<TooltipItem item={item} isItemActive={false} />
-					)}
-				/>
-			)}
+			<div className="uplot-tooltip-list-container">
+				{tooltipContent.length > 0 ? (
+					<Virtuoso
+						className="uplot-tooltip-list"
+						data-testid="uplot-tooltip-list"
+						data={tooltipContent}
+						style={virtuosoStyle}
+						totalListHeightChanged={setListHeight}
+						itemContent={(_, item): JSX.Element => (
+							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+								<div
+									className="uplot-tooltip-item-marker"
+									style={{ borderColor: item.color }}
+									data-is-legend-marker={true}
+									data-testid="uplot-tooltip-item-marker"
+								/>
+								<div
+									className="uplot-tooltip-item-content"
+									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
+									data-testid="uplot-tooltip-item-content"
+								>
+									{item.label}: {item.tooltipValue}
+								</div>
+							</div>
+						)}
+					/>
+				) : null}
+			</div>
 		</div>
 	);
 }