feat: adding types changes and openapi spec

* fix: fixed tooltip spacing and minor ui fixes

* chore: minor fix

* chore: changed opacity

* chore: broke down tooltip component

* chore: sorted the tooltip content

* chore: moved scss to modules

* chore: pr review comments

* chore: removed sorting values

* chore: pr review comments

* rename classname

Co-authored-by: Ashwin Bhatkal <ashwin96@gmail.com>

* chore: removed tests

---------

Co-authored-by: Ashwin Bhatkal <ashwin96@gmail.com>

.github/workflows/integrationci.yaml

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

conf/example.yaml

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

docs/api/openapi.yml

@@ -327,27 +327,6 @@ components:
           nullable: true
           type: array
       type: object
-    AuthtypesStorableRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      type: object
     AuthtypesTransaction:
       properties:
         object:
@@ -371,7 +350,7 @@ components:
         id:
           type: string
         role:
-          $ref: '#/components/schemas/AuthtypesStorableRole'
+          $ref: '#/components/schemas/AuthtypesRole'
         roleId:
           type: string
         updatedAt:
@@ -381,6 +360,11 @@ components:
           type: string
       required:
       - id
+      - userId
+      - roleId
+      - createdAt
+      - updatedAt
+      - role
       type: object
     AuthtypesUserWithRoles:
       properties:
@@ -421,11 +405,11 @@ components:
       type: object
     CloudintegrationtypesAWSCollectionStrategy:
       properties:
-        aws_logs:
+        logs:
           $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
-        aws_metrics:
+        metrics:
           $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
-        s3_buckets:
+        s3Buckets:
           additionalProperties:
             items:
               type: string
@@ -465,12 +449,12 @@ components:
       type: object
     CloudintegrationtypesAWSLogsStrategy:
       properties:
-        cloudwatch_logs_subscriptions:
+        cloudwatchLogsSubscriptions:
           items:
             properties:
-              filter_pattern:
+              filterPattern:
                 type: string
-              log_group_name_prefix:
+              logGroupNamePrefix:
                 type: string
             type: object
           nullable: true
@@ -478,7 +462,7 @@ components:
       type: object
     CloudintegrationtypesAWSMetricsStrategy:
       properties:
-        cloudwatch_metric_stream_filters:
+        cloudwatchMetricStreamFilters:
           items:
             properties:
               MetricNames:
@@ -502,7 +486,7 @@ components:
       properties:
         enabled:
           type: boolean
-        s3_buckets:
+        s3Buckets:
           additionalProperties:
             items:
               type: string
@@ -577,6 +561,26 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesCloudIntegrationService:
+      nullable: true
+      properties:
+        cloudIntegrationId:
+          type: string
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        createdAt:
+          format: date-time
+          type: string
+        id:
+          type: string
+        type:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     CloudintegrationtypesCollectedLogAttribute:
       properties:
         name:
@@ -612,6 +616,16 @@ components:
       - aws
       type: object
     CloudintegrationtypesConnectionArtifactRequest:
+      properties:
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifactRequestConfig'
+        credentials:
+          $ref: '#/components/schemas/CloudintegrationtypesSignozCredentials'
+      required:
+      - config
+      - credentials
+      type: object
+    CloudintegrationtypesConnectionArtifactRequestConfig:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifactRequest'
@@ -710,11 +724,54 @@ components:
             type: string
           type: array
         telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
       required:
       - enabled_regions
       - telemetry
       type: object
+    CloudintegrationtypesOldAWSCollectionStrategy:
+      properties:
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
+        provider:
+          type: string
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
+    CloudintegrationtypesOldAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesOldAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
     CloudintegrationtypesPostableAgentCheckInRequest:
       properties:
         account_id:
@@ -743,6 +800,8 @@ components:
       properties:
         assets:
           $ref: '#/components/schemas/CloudintegrationtypesAssets'
+        cloudIntegrationService:
+          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
           $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
         icon:
@@ -751,9 +810,7 @@ components:
           type: string
         overview:
           type: string
-        serviceConfig:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        supported_signals:
+        supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
         telemetryCollectionStrategy:
           $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
@@ -765,9 +822,10 @@ components:
       - icon
       - overview
       - assets
-      - supported_signals
+      - supportedSignals
       - dataCollected
       - telemetryCollectionStrategy
+      - cloudIntegrationService
       type: object
     CloudintegrationtypesServiceConfig:
       properties:
@@ -776,6 +834,22 @@ components:
       required:
       - aws
       type: object
+    CloudintegrationtypesServiceID:
+      enum:
+      - alb
+      - api-gateway
+      - dynamodb
+      - ec2
+      - ecs
+      - eks
+      - elasticache
+      - lambda
+      - msk
+      - rds
+      - s3sync
+      - sns
+      - sqs
+      type: string
     CloudintegrationtypesServiceMetadata:
       properties:
         enabled:
@@ -792,6 +866,22 @@ components:
       - icon
       - enabled
       type: object
+    CloudintegrationtypesSignozCredentials:
+      properties:
+        ingestionKey:
+          type: string
+        ingestionUrl:
+          type: string
+        sigNozApiKey:
+          type: string
+        sigNozApiURL:
+          type: string
+      required:
+      - sigNozApiURL
+      - sigNozApiKey
+      - ingestionUrl
+      - ingestionKey
+      type: object
     CloudintegrationtypesSupportedSignals:
       properties:
         logs:
@@ -3410,6 +3500,61 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update service
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
     post:
       deprecated: false
@@ -3467,6 +3612,59 @@ paths:
       summary: Agent check-in
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/credentials:
+    get:
+      deprecated: false
+      description: This endpoint retrieves the connection credentials required for
+        integration
+      operationId: GetConnectionCredentials
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesSignozCredentials'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get connection credentials
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/services:
     get:
       deprecated: false
@@ -3577,55 +3775,6 @@ paths:
       summary: Get service
       tags:
       - cloudintegration
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update service
-      tags:
-      - cloudintegration
   /api/v1/complete/google:
     get:
       deprecated: false

docs/contributing/go/integration.md

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

ee/query-service/rules/anomaly.go

@@ -5,7 +5,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
-	"strings"
 	"sync"
 	"time"
 
@@ -64,12 +63,12 @@ func NewAnomalyRule(
 		BaseRule: baseRule,
 	}
 
-	switch strings.ToLower(p.RuleCondition.Seasonality) {
-	case "hourly":
+	switch p.RuleCondition.Seasonality {
+	case ruletypes.SeasonalityHourly:
 		t.seasonality = anomaly.SeasonalityHourly
-	case "daily":
+	case ruletypes.SeasonalityDaily:
 		t.seasonality = anomaly.SeasonalityDaily
-	case "weekly":
+	case ruletypes.SeasonalityWeekly:
 		t.seasonality = anomaly.SeasonalityWeekly
 	default:
 		t.seasonality = anomaly.SeasonalityDaily

ee/query-service/rules/anomaly_test.go

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

frontend/package.json

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

frontend/public/Logos/hasura.svg

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

frontend/public/Logos/n8n.svg

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

frontend/src/AppRoutes/Private.tsx

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

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

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

frontend/src/AppRoutes/index.tsx

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

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -33,6 +33,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetConnectionCredentials200,
+	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServicePathParameters,
 	ListAccounts200,
@@ -628,6 +630,103 @@ export const useUpdateAccount = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates a service for the specified cloud provider
+ * @summary Update service
+ */
+export const updateService = (
+	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
+	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesUpdatableServiceDTO,
+	});
+};
+
+export const getUpdateServiceMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateService'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateService>>,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateService(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateServiceMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateService>>
+>;
+export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update service
+ */
+export const useUpdateService = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateServiceMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint is called by the deployed agent to check in
  * @summary Agent check-in
@@ -727,6 +826,114 @@ export const useAgentCheckIn = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint retrieves the connection credentials required for integration
+ * @summary Get connection credentials
+ */
+export const getConnectionCredentials = (
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetConnectionCredentials200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/credentials`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetConnectionCredentialsQueryKey = ({
+	cloudProvider,
+}: GetConnectionCredentialsPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/credentials`] as const;
+};
+
+export const getGetConnectionCredentialsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetConnectionCredentialsQueryKey({ cloudProvider });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getConnectionCredentials>>
+	> = ({ signal }) => getConnectionCredentials({ cloudProvider }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!cloudProvider,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getConnectionCredentials>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetConnectionCredentialsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getConnectionCredentials>>
+>;
+export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get connection credentials
+ */
+
+export function useGetConnectionCredentials<
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetConnectionCredentialsQueryOptions(
+		{ cloudProvider },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get connection credentials
+ */
+export const invalidateGetConnectionCredentials = async (
+	queryClient: QueryClient,
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetConnectionCredentialsQueryKey({ cloudProvider }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint lists the services metadata for the specified cloud provider
  * @summary List services metadata
@@ -941,101 +1148,3 @@ export const invalidateGetService = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint updates a service for the specified cloud provider
- * @summary Update service
- */
-export const updateService = (
-	{ cloudProvider, serviceId }: UpdateServicePathParameters,
-	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesUpdatableServiceDTO,
-	});
-};
-
-export const getUpdateServiceMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateService'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateService>>,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateService(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateService>>
->;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update service
- */
-export const useUpdateService = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -425,39 +425,6 @@ export interface AuthtypesSessionContextDTO {
 	orgs?: AuthtypesOrgSessionContextDTO[] | null;
 }
 
-export interface AuthtypesStorableRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
 export interface AuthtypesTransactionDTO {
 	object: AuthtypesObjectDTO;
 	/**
@@ -475,25 +442,25 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: Date;
+	createdAt: Date;
 	/**
 	 * @type string
 	 */
 	id: string;
-	role?: AuthtypesStorableRoleDTO;
+	role: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
-	roleId?: string;
+	roleId: string;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: Date;
+	updatedAt: Date;
 	/**
 	 * @type string
 	 */
-	userId?: string;
+	userId: string;
 }
 
 export interface AuthtypesUserWithRolesDTO {
@@ -550,12 +517,12 @@ export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
 };
 
 export interface CloudintegrationtypesAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
+	logs?: CloudintegrationtypesAWSLogsStrategyDTO;
+	metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
 	/**
 	 * @type object
 	 */
-	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
+	s3Buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
 }
 
 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
@@ -588,11 +555,11 @@ export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsIt
 	/**
 	 * @type string
 	 */
-	filter_pattern?: string;
+	filterPattern?: string;
 	/**
 	 * @type string
 	 */
-	log_group_name_prefix?: string;
+	logGroupNamePrefix?: string;
 };
 
 export interface CloudintegrationtypesAWSLogsStrategyDTO {
@@ -600,7 +567,7 @@ export interface CloudintegrationtypesAWSLogsStrategyDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	cloudwatch_logs_subscriptions?:
+	cloudwatchLogsSubscriptions?:
 		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
 		| null;
 }
@@ -621,7 +588,7 @@ export interface CloudintegrationtypesAWSMetricsStrategyDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	cloudwatch_metric_stream_filters?:
+	cloudwatchMetricStreamFilters?:
 		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
 		| null;
 }
@@ -643,7 +610,7 @@ export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
 	/**
 	 * @type object
 	 */
-	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
+	s3Buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
 }
 
 export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
@@ -726,6 +693,32 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesCloudIntegrationServiceDTO = {
+	/**
+	 * @type string
+	 */
+	cloudIntegrationId?: string;
+	config?: CloudintegrationtypesServiceConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	id: string;
+	type?: CloudintegrationtypesServiceIDDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+} | null;
+
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -769,6 +762,11 @@ export interface CloudintegrationtypesConnectionArtifactDTO {
 }
 
 export interface CloudintegrationtypesConnectionArtifactRequestDTO {
+	config: CloudintegrationtypesConnectionArtifactRequestConfigDTO;
+	credentials: CloudintegrationtypesSignozCredentialsDTO;
+}
+
+export interface CloudintegrationtypesConnectionArtifactRequestConfigDTO {
 	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
 }
 
@@ -864,9 +862,68 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
 } | null;
 
+export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type object
+	 */
+	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
+}
+
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
 /**
  * @nullable
  */
@@ -904,6 +961,7 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 
 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
+	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -917,8 +975,7 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
-	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
+	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
 	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
 	/**
 	 * @type string
@@ -930,6 +987,21 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }
 
+export enum CloudintegrationtypesServiceIDDTO {
+	alb = 'alb',
+	'api-gateway' = 'api-gateway',
+	dynamodb = 'dynamodb',
+	ec2 = 'ec2',
+	ecs = 'ecs',
+	eks = 'eks',
+	elasticache = 'elasticache',
+	lambda = 'lambda',
+	msk = 'msk',
+	rds = 'rds',
+	s3sync = 's3sync',
+	sns = 'sns',
+	sqs = 'sqs',
+}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -949,6 +1021,25 @@ export interface CloudintegrationtypesServiceMetadataDTO {
 	title: string;
 }
 
+export interface CloudintegrationtypesSignozCredentialsDTO {
+	/**
+	 * @type string
+	 */
+	ingestionKey: string;
+	/**
+	 * @type string
+	 */
+	ingestionUrl: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiKey: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiURL: string;
+}
+
 export interface CloudintegrationtypesSupportedSignalsDTO {
 	/**
 	 * @type boolean
@@ -3532,6 +3623,11 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
@@ -3543,6 +3639,17 @@ export type AgentCheckIn200 = {
 	status: string;
 };
 
+export type GetConnectionCredentialsPathParameters = {
+	cloudProvider: string;
+};
+export type GetConnectionCredentials200 = {
+	data: CloudintegrationtypesSignozCredentialsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListServicesMetadataPathParameters = {
 	cloudProvider: string;
 };
@@ -3566,10 +3673,6 @@ export type GetService200 = {
 	status: string;
 };
 
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**

frontend/src/api/infraMonitoring/getHostLists.ts

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

frontend/src/api/organization/editOrg.ts

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

frontend/src/api/organization/getOrganization.ts

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

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

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

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

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

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

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

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

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

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

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

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

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

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

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

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

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

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

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

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

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

frontend/src/components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
+import { useGlobalTimeStore } from 'store/globalTime/globalTimeStore';
+import { createCustomTimeRange } from 'store/globalTime/utils';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+/**
+ * Adapter component that syncs Redux global time state to Zustand store.
+ * This component should be rendered once at the app level.
+ *
+ * It reads from the Redux globalTime reducer and updates the Zustand store
+ * to provide a migration path from Redux to Zustand.
+ */
+export function GlobalTimeStoreAdapter(): null {
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const setSelectedTime = useGlobalTimeStore((s) => s.setSelectedTime);
+
+	useEffect(() => {
+		// Convert the selectedTime to the new format
+		// If it's 'custom', store the min/max times in the custom format
+		const selectedTime =
+			globalTime.selectedTime === 'custom'
+				? createCustomTimeRange(globalTime.minTime, globalTime.maxTime)
+				: (globalTime.selectedTime as Time);
+
+		// Find refresh interval from Redux state
+		const refreshOption = refreshIntervalOptions.find(
+			(option) => option.key === globalTime.selectedAutoRefreshInterval,
+		);
+
+		const refreshInterval =
+			!globalTime.isAutoRefreshDisabled && refreshOption ? refreshOption.value : 0;
+
+		setSelectedTime(selectedTime, refreshInterval);
+	}, [
+		globalTime.selectedTime,
+		globalTime.isAutoRefreshDisabled,
+		globalTime.selectedAutoRefreshInterval,
+		globalTime.minTime,
+		globalTime.maxTime,
+		setSelectedTime,
+	]);
+
+	return null;
+}

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

@@ -0,0 +1,227 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { act, render, renderHook } from '@testing-library/react';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
+import { useGlobalTimeStore } from 'store/globalTime/globalTimeStore';
+import { createCustomTimeRange } from 'store/globalTime/utils';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { GlobalTimeStoreAdapter } from '../GlobalTimeStoreAdapter';
+
+const mockStore = configureStore<Partial<AppState>>([]);
+
+const randomTime = 1700000000000000000;
+
+describe('GlobalTimeStoreAdapter', () => {
+	let store: MockStoreEnhanced<Partial<AppState>>;
+
+	const createGlobalTimeState = (
+		overrides: Partial<GlobalReducer> = {},
+	): GlobalReducer => ({
+		minTime: randomTime,
+		maxTime: randomTime,
+		loading: false,
+		selectedTime: '15m',
+		isAutoRefreshDisabled: true,
+		selectedAutoRefreshInterval: 'off',
+		...overrides,
+	});
+
+	beforeEach(() => {
+		// Reset Zustand store before each test
+		const { result } = renderHook(() => useGlobalTimeStore());
+		act(() => {
+			result.current.setSelectedTime(DEFAULT_TIME_RANGE, 0);
+		});
+	});
+
+	it('should render null because it just an adapter', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState(),
+		});
+
+		const { container } = render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('should sync relative time from Redux to Zustand store', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '15m',
+				isAutoRefreshDisabled: true,
+				selectedAutoRefreshInterval: 'off',
+			}),
+		});
+
+		render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		const { result } = renderHook(() => useGlobalTimeStore());
+		expect(result.current.selectedTime).toBe('15m');
+		expect(result.current.refreshInterval).toBe(0);
+		expect(result.current.isRefreshEnabled).toBe(false);
+	});
+
+	it('should sync custom time from Redux to Zustand store', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: 'custom',
+				minTime: randomTime,
+				maxTime: randomTime,
+				isAutoRefreshDisabled: true,
+			}),
+		});
+
+		render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		const { result } = renderHook(() => useGlobalTimeStore());
+		expect(result.current.selectedTime).toBe(
+			createCustomTimeRange(randomTime, randomTime),
+		);
+		expect(result.current.isRefreshEnabled).toBe(false);
+	});
+
+	it('should sync refresh interval when auto refresh is enabled', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '15m',
+				isAutoRefreshDisabled: false,
+				selectedAutoRefreshInterval: '5s',
+			}),
+		});
+
+		render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		const { result } = renderHook(() => useGlobalTimeStore());
+		expect(result.current.selectedTime).toBe('15m');
+		expect(result.current.refreshInterval).toBe(5000); // 5s = 5000ms
+		expect(result.current.isRefreshEnabled).toBe(true);
+	});
+
+	it('should set refreshInterval to 0 when auto refresh is disabled', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '15m',
+				isAutoRefreshDisabled: true,
+				selectedAutoRefreshInterval: '5s', // Even with interval set, should be 0 when disabled
+			}),
+		});
+
+		render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		const { result } = renderHook(() => useGlobalTimeStore());
+		expect(result.current.refreshInterval).toBe(0);
+		expect(result.current.isRefreshEnabled).toBe(false);
+	});
+
+	it('should update Zustand store when Redux state changes', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '15m',
+				isAutoRefreshDisabled: true,
+			}),
+		});
+
+		const { rerender } = render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		// Verify initial state
+		let zustandState = renderHook(() => useGlobalTimeStore());
+		expect(zustandState.result.current.selectedTime).toBe('15m');
+
+		// Update Redux store
+		const newStore = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '1h',
+				isAutoRefreshDisabled: false,
+				selectedAutoRefreshInterval: '30s',
+			}),
+		});
+
+		rerender(
+			<Provider store={newStore}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		// Verify updated state
+		zustandState = renderHook(() => useGlobalTimeStore());
+		expect(zustandState.result.current.selectedTime).toBe('1h');
+		expect(zustandState.result.current.refreshInterval).toBe(30000); // 30s = 30000ms
+		expect(zustandState.result.current.isRefreshEnabled).toBe(true);
+	});
+
+	it('should handle various refresh interval options', () => {
+		const testCases = [
+			{ key: '5s', expectedValue: 5000 },
+			{ key: '10s', expectedValue: 10000 },
+			{ key: '30s', expectedValue: 30000 },
+			{ key: '1m', expectedValue: 60000 },
+			{ key: '5m', expectedValue: 300000 },
+		];
+
+		testCases.forEach(({ key, expectedValue }) => {
+			store = mockStore({
+				globalTime: createGlobalTimeState({
+					selectedTime: '15m',
+					isAutoRefreshDisabled: false,
+					selectedAutoRefreshInterval: key,
+				}),
+			});
+
+			render(
+				<Provider store={store}>
+					<GlobalTimeStoreAdapter />
+				</Provider>,
+			);
+
+			const { result } = renderHook(() => useGlobalTimeStore());
+			expect(result.current.refreshInterval).toBe(expectedValue);
+		});
+	});
+
+	it('should handle unknown refresh interval by setting 0', () => {
+		store = mockStore({
+			globalTime: createGlobalTimeState({
+				selectedTime: '15m',
+				isAutoRefreshDisabled: false,
+				selectedAutoRefreshInterval: 'unknown-interval',
+			}),
+		});
+
+		render(
+			<Provider store={store}>
+				<GlobalTimeStoreAdapter />
+			</Provider>,
+		);
+
+		const { result } = renderHook(() => useGlobalTimeStore());
+		expect(result.current.refreshInterval).toBe(0);
+		expect(result.current.isRefreshEnabled).toBe(false);
+	});
+});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -197,13 +197,16 @@ function InviteMembersModal({
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', { richColors: true });
+			toast.success('Invites sent successfully', {
+				richColors: true,
+				position: 'top-right',
+			});
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
 			const apiErr = err as APIError;
 			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-			toast.error(errorMessage, { richColors: true });
+			toast.error(errorMessage, { richColors: true, position: 'top-right' });
 		} finally {
 			setIsSubmitting(false);
 		}

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

@@ -28,14 +28,22 @@
 	}
 }
 
+// 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);
 		background: var(--bg-vanilla-400);
 
-		.ant-btn-default {
-		}
-
 		.copy-log-btn {
 			border-left: 1px solid var(--bg-vanilla-400);
 			border-color: var(--bg-vanilla-400) !important;

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

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

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

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

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

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

frontend/src/components/MembersTable/MembersTable.tsx

@@ -4,9 +4,7 @@ import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
 
 import './MembersTable.styles.scss';
 
@@ -14,7 +12,6 @@ export interface MemberRow {
 	id: string;
 	name?: string;
 	email: string;
-	role: ROLES;
 	status: MemberStatus;
 	joinedOn: string | null;
 	updatedAt?: string | null;
@@ -141,17 +138,6 @@ function MembersTable({
 				<NameEmailCell name={record.name} email={record.email} />
 			),
 		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			sorter: (a, b): number => a.role.localeCompare(b.role),
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{capitalize(role)}</Badge>
-			),
-		},
-
 		{
 			title: 'Status',
 			dataIndex: 'status',

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

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

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

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

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

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

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

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

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -158,10 +158,10 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	return (
 		<Select
 			id={id}
-			value={value}
+			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
-			className={cx('roles-select', className)}
+			className={cx('roles-single-select', className)}
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

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

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -80,7 +80,7 @@ function ServiceAccountDrawer({
 		parseAsBoolean.withDefault(false),
 	);
 	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
@@ -116,7 +116,7 @@ function ServiceAccountDrawer({
 	}, [account?.id, account?.name, setKeysPage]);
 
 	useEffect(() => {
-		setLocalRoles(currentRoles.map((r) => r.id).filter(Boolean) as string[]);
+		setLocalRole(currentRoles[0]?.id ?? '');
 	}, [currentRoles]);
 
 	const isDeleted =
@@ -125,8 +125,7 @@ function ServiceAccountDrawer({
 	const isDirty =
 		account !== null &&
 		(localName !== (account.name ?? '') ||
-			JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify([...currentRoles.map((r) => r.id).filter(Boolean)].sort()));
+			localRole !== (currentRoles[0]?.id ?? ''));
 
 	const {
 		roles: availableRoles,
@@ -216,7 +215,10 @@ function ServiceAccountDrawer({
 
 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await applyDiff(localRoles, availableRoles);
+			const failures = await applyDiff(
+				[localRole].filter(Boolean),
+				availableRoles,
+			);
 			if (failures.length === 0) {
 				setSaveErrors((prev) => prev.filter((e) => e.context !== 'Roles update'));
 			} else {
@@ -240,7 +242,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [localRoles, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
+	}, [localRole, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
 
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -259,7 +261,7 @@ function ServiceAccountDrawer({
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				applyDiff(localRoles, availableRoles),
+				applyDiff([localRole].filter(Boolean), availableRoles),
 			]);
 
 			const errors: SaveError[] = [];
@@ -294,6 +296,7 @@ function ServiceAccountDrawer({
 			} else {
 				toast.success('Service account updated successfully', {
 					richColors: true,
+					position: 'top-right',
 				});
 				onSuccess({ closeDrawer: false });
 			}
@@ -307,7 +310,7 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
-		localRoles,
+		localRole,
 		availableRoles,
 		updateMutateAsync,
 		applyDiff,
@@ -409,8 +412,8 @@ function ServiceAccountDrawer({
 								account={account}
 								localName={localName}
 								onNameChange={handleNameChange}
-								localRoles={localRoles}
-								onRolesChange={setLocalRoles}
+								localRole={localRole}
+								onRoleChange={setLocalRole}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}

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

@@ -139,20 +139,20 @@ describe('ServiceAccountDrawer', () => {
 		});
 	});
 
-	it('changing roles enables Save; clicking Save sends updated roles in payload', async () => {
-		const updateSpy = jest.fn();
+	it('changing roles enables Save; clicking Save sends role add request without delete', async () => {
 		const roleSpy = jest.fn();
+		const deleteSpy = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		server.use(
-			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
-				updateSpy(await req.json());
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
-			}),
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
 				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
 		);
 
 		renderDrawer();
@@ -167,12 +167,12 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(updateSpy).not.toHaveBeenCalled();
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
 					id: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
+			expect(deleteSpy).not.toHaveBeenCalled();
 		});
 	});
 
@@ -350,7 +350,7 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});
 
-	it('role update failure shows SaveErrorItem with the role name context', async () => {
+	it('role add failure shows SaveErrorItem with the role name context', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		server.use(

frontend/src/constants/localStorage.ts

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

frontend/src/constants/reactQueryKeys.ts

@@ -1,4 +1,11 @@
 export const REACT_QUERY_KEY = {
+	/**
+	 * For any query that should support AutoRefresh and min/max time is from DateTimeSelectionV2
+	 * You can prefix the query with this KEY, it will allow the queries to be automatically refreshed
+	 * when the user clicks in the refresh button, or alert the user when the data is being refreshed.
+	 */
+	AUTO_REFRESH_QUERY: 'AUTO_REFRESH_QUERY',
+
 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',

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

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

frontend/src/container/FormAlertRules/index.tsx

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

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

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

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

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

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

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

frontend/src/container/InfraMonitoringHosts/utils.tsx

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

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

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

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

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

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

@@ -8,8 +8,8 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
-import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
 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';
@@ -50,7 +50,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -158,7 +158,7 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<InfinityTableView
+						<TanStackTableView
 							ref={ref}
 							isLoading={false}
 							tableViewProps={{
@@ -174,6 +174,7 @@ function LiveLogsList({
 							onSetActiveLog={handleSetActiveLog}
 							onClearActiveLog={handleCloseLogDetail}
 							activeLog={activeLog}
+							onRemoveColumn={config.addColumn?.onRemove}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>

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

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

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

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

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

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

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

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

frontend/src/container/LogsExplorerList/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

@@ -0,0 +1,153 @@
+.tanstack-header-cell {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	padding: 0;
+	transform: translate3d(
+		var(--tanstack-header-translate-x, 0px),
+		var(--tanstack-header-translate-y, 0px),
+		0
+	);
+	transition: var(--tanstack-header-transition, none);
+
+	&.is-dragging {
+		opacity: 0.85;
+	}
+
+	&.is-resizing {
+		background: var(--l2-background-hover);
+	}
+}
+
+.tanstack-header-content {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	min-width: 0;
+	width: 100%;
+	cursor: default;
+	max-width: 100%;
+
+	&.has-resize-control {
+		max-width: calc(100% - 5px);
+	}
+
+	&.has-action-control {
+		max-width: calc(100% - 5px);
+	}
+
+	&.has-resize-control.has-action-control {
+		max-width: calc(100% - 10px);
+	}
+}
+
+.tanstack-grip-slot {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	margin-right: 4px;
+	flex-shrink: 0;
+}
+
+.tanstack-grip-activator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 12px;
+	height: 12px;
+	cursor: grab;
+	color: var(--l2-foreground);
+	opacity: 1;
+	touch-action: none;
+}
+
+.tanstack-header-action-trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+}
+
+.tanstack-column-actions-content {
+	width: 140px;
+	padding: 0;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	box-shadow: none;
+}
+
+.tanstack-remove-column-action {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	min-height: 32px;
+	padding: 0 8px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	justify-content: flex-start;
+	cursor: pointer;
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	transition: background-color 120ms ease, color 120ms ease;
+
+	&:hover {
+		background: var(--l2-background-hover);
+		color: var(--l2-foreground);
+
+		.tanstack-remove-column-action-icon {
+			color: var(--l2-foreground);
+		}
+	}
+}
+
+.tanstack-remove-column-action-icon {
+	font-size: 11px;
+	color: var(--l2-foreground);
+	opacity: 0.95;
+}
+
+.tanstack-header-cell .cursor-col-resize {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 5px;
+	cursor: col-resize;
+	z-index: 10;
+	touch-action: none;
+	background: transparent;
+}
+
+.tanstack-header-cell.is-resizing .cursor-col-resize {
+	background: var(--bg-robin-300);
+}
+
+.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;
+}
+
+.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
+	width: 2px;
+	background: var(--bg-robin-500);
+	transition: none;
+}

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

@@ -25,9 +25,9 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import NoLogs from '../NoLogs/NoLogs';
-import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
+import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -61,7 +61,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -155,9 +155,10 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<InfinityTableView
+				<TanStackTableView
 					ref={ref}
 					isLoading={isLoading}
+					isFetching={isFetching}
 					tableViewProps={{
 						logs,
 						fields: selectedFields,
@@ -172,6 +173,7 @@ function LogsExplorerList({
 					onSetActiveLog={handleSetActiveLog}
 					onClearActiveLog={handleCloseLogDetail}
 					activeLog={activeLog}
+					onRemoveColumn={config.addColumn?.onRemove}
 				/>
 			);
 		}
@@ -216,11 +218,13 @@ function LogsExplorerList({
 		logs,
 		onEndReached,
 		getItemContent,
+		isFetching,
 		selectedFields,
 		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
+		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/LogsExplorerList/styles.ts

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

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

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

frontend/src/container/LogsExplorerViews/index.tsx

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

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,17 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/button';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
-import getAll from 'api/v1/user/get';
+import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useAppContext } from 'providers/App/App';
 import { toISOString } from 'utils/app';
 
 import { FilterMode, MemberStatus, toMemberStatus } from './utils';
@@ -21,7 +19,6 @@ import './MembersSettings.styles.scss';
 const PAGE_SIZE = 20;
 
 function MembersSettings(): JSX.Element {
-	const { org } = useAppContext();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
 
@@ -34,18 +31,14 @@ function MembersSettings(): JSX.Element {
 	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
 	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
 
-	const { data: usersData, isLoading, refetch: refetchUsers } = useQuery({
-		queryFn: getAll,
-		queryKey: ['getOrgUser', org?.[0]?.id],
-	});
+	const { data: usersData, isLoading, refetch: refetchUsers } = useListUsers();
 
 	const allMembers = useMemo(
 		(): MemberRow[] =>
 			(usersData?.data ?? []).map((user) => ({
 				id: user.id,
 				name: user.displayName,
-				email: user.email,
-				role: user.role,
+				email: user.email ?? '',
 				status: toMemberStatus(user.status ?? ''),
 				joinedOn: toISOString(user.createdAt),
 				updatedAt: toISOString(user?.updatedAt),
@@ -64,9 +57,7 @@ function MembersSettings(): JSX.Element {
 			const q = searchQuery.toLowerCase();
 			result = result.filter(
 				(m) =>
-					m?.name?.toLowerCase().includes(q) ||
-					m.email.toLowerCase().includes(q) ||
-					m.role.toLowerCase().includes(q),
+					m?.name?.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
 			);
 		}
 
@@ -148,7 +139,6 @@ function MembersSettings(): JSX.Element {
 
 	const handleMemberEditComplete = useCallback((): void => {
 		refetchUsers();
-		setSelectedMember(null);
 	}, [refetchUsers]);
 
 	return (
@@ -181,7 +171,7 @@ function MembersSettings(): JSX.Element {
 					<div className="members-settings__search">
 						<Input
 							type="search"
-							placeholder="Search by name, email, or role..."
+							placeholder="Search by name or email..."
 							value={searchQuery}
 							onChange={(e): void => {
 								setSearchQuery(e.target.value);

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

@@ -1,6 +1,6 @@
+import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { UserResponse } from 'types/api/user/getUser';
 
 import MembersSettings from '../MembersSettings';
 
@@ -11,47 +11,39 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
-const USERS_ENDPOINT = '*/api/v1/user';
+const USERS_ENDPOINT = '*/api/v2/users';
 
-const mockUsers: UserResponse[] = [
+const mockUsers: TypesUserDTO[] = [
 	{
 		id: 'user-1',
 		displayName: 'Alice Smith',
 		email: 'alice@signoz.io',
-		role: 'ADMIN',
 		status: 'active',
-		createdAt: '2024-01-01T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-01T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'user-2',
 		displayName: 'Bob Jones',
 		email: 'bob@signoz.io',
-		role: 'VIEWER',
 		status: 'active',
-		createdAt: '2024-01-02T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-02T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'inv-1',
 		displayName: '',
 		email: 'charlie@signoz.io',
-		role: 'EDITOR',
 		status: 'pending_invite',
-		createdAt: '2024-01-03T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-03T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
 		id: 'user-3',
 		displayName: 'Dave Deleted',
 		email: 'dave@signoz.io',
-		role: 'VIEWER',
 		status: 'deleted',
-		createdAt: '2024-01-04T00:00:00.000Z',
-		organization: 'TestOrg',
+		createdAt: new Date('2024-01-04T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 ];
@@ -106,7 +98,7 @@ describe('MembersSettings (integration)', () => {
 		await screen.findByText('Alice Smith');
 
 		await user.type(
-			screen.getByPlaceholderText(/Search by name, email, or role/i),
+			screen.getByPlaceholderText(/Search by name or email/i),
 			'bob',
 		);
 

frontend/src/container/MySettings/UserInfo/index.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { useUpdateMyUserV2 } from 'api/generated/services/users';
 import changeMyPassword from 'api/v1/factor_password/changeMyPassword';
-import editUser from 'api/v1/user/id/update';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check, FileTerminal, MailIcon, UserIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
@@ -17,6 +17,7 @@ function UserInfo(): JSX.Element {
 	const { t } = useTranslation(['routes', 'settings', 'common']);
 
 	const { notifications } = useNotifications();
+	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
 
 	const [currentPassword, setCurrentPassword] = useState<string>('');
 	const [updatePassword, setUpdatePassword] = useState<string>('');
@@ -92,10 +93,7 @@ function UserInfo(): JSX.Element {
 		);
 		try {
 			setIsLoading(true);
-			await editUser({
-				displayName: changedName,
-				userId: user.id,
-			});
+			await updateMyUser({ data: { displayName: changedName } });
 
 			notifications.success({
 				message: t('success', {

frontend/src/container/MySettings/__tests__/MySettings.test.tsx

@@ -22,9 +22,12 @@ jest.mock('react-use', () => ({
 	],
 }));
 
-jest.mock('api/v1/user/id/update', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): Promise<unknown> => editUserFn(...args),
+jest.mock('api/generated/services/users', () => ({
+	...jest.requireActual('api/generated/services/users'),
+	useUpdateMyUserV2: jest.fn(() => ({
+		mutateAsync: (...args: unknown[]): Promise<unknown> => editUserFn(...args),
+		isLoading: false,
+	})),
 }));
 
 jest.mock('hooks/useDarkMode', () => ({

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -5,7 +5,7 @@
 		"tags": [
 			"quickstart"
 		],
-		"module": "apm",
+		"module": "home",
 		"relatedSearchKeywords": [
 			"apm",
 			"application performance monitoring",
@@ -22,6 +22,28 @@
 		"imgUrl": "/Logos/quickstart.svg",
 		"link": "/docs/cloud/quickstart/"
 	},
+	{
+		"dataSource": "signoz-mcp-server",
+		"label": "SigNoz MCP Server",
+		"tags": [
+			"quickstart"
+		],
+		"module": "home",
+		"relatedSearchKeywords": [
+			"agent",
+			"ai",
+			"mcp",
+			"mcp server",
+			"model context protocol",
+			"quickstart",
+			"signoz",
+			"signoz mcp",
+			"signoz mcp server",
+			"setup"
+		],
+		"imgUrl": "/Logos/signoz-brand-logo.svg",
+		"link": "/docs/ai/signoz-mcp-server/"
+	},
 	{
 		"dataSource": "migrate-from-datadog",
 		"label": "From Datadog",
@@ -1524,18 +1546,24 @@
 		"link": "/docs/userguide/collect_docker_logs/"
 	},
 	{
-		"dataSource": "vercel-logs",
-		"label": "Vercel logs",
+		"dataSource": "vercel",
+		"label": "Vercel",
 		"imgUrl": "/Logos/vercel.svg",
 		"tags": [
+			"apm/traces",
 			"logs"
 		],
-		"module": "logs",
+		"module": "home",
 		"relatedSearchKeywords": [
 			"collect vercel logs",
 			"logging",
 			"logs",
+			"opentelemetry drains",
+			"trace drain",
+			"traces",
+			"tracing",
 			"vercel",
+			"vercel drains",
 			"vercel functions logs",
 			"vercel log forwarding",
 			"vercel log monitoring",
@@ -1545,10 +1573,12 @@
 			"vercel observability",
 			"vercel opentelemetry integration",
 			"vercel to otel",
+			"vercel trace drain",
+			"vercel traces",
 			"vercel-logs"
 		],
 		"id": "vercel-logs",
-		"link": "/docs/userguide/vercel_logs_to_signoz/"
+		"link": "/docs/userguide/vercel-to-signoz/"
 	},
 	{
 		"dataSource": "heroku-logs",
@@ -4029,6 +4059,57 @@
 		],
 		"link": "/docs/pydantic-ai-observability/"
 	},
+	{
+		"dataSource": "qwen-observability",
+		"label": "Qwen",
+		"imgUrl": "/Logos/qwen.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"alibaba cloud",
+			"dashscope",
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"otel qwen",
+			"qwen",
+			"qwen logs",
+			"qwen metrics",
+			"qwen monitoring",
+			"qwen observability",
+			"qwen response time",
+			"qwen traces"
+		],
+		"id": "qwen-observability",
+		"link": "/docs/qwen-observability/"
+	},
+	{
+		"dataSource": "n8n-cloud",
+		"label": "n8n Cloud",
+		"imgUrl": "/Logos/n8n.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"llm monitoring",
+			"monitoring",
+			"n8n",
+			"n8n cloud",
+			"n8n monitoring",
+			"n8n observability",
+			"n8n traces",
+			"observability",
+			"otel n8n",
+			"workflow monitoring",
+			"workflow traces"
+		],
+		"id": "n8n-cloud",
+		"link": "/docs/n8n-monitoring/"
+	},
 	{
 		"dataSource": "mastra-monitoring",
 		"label": "Mastra",
@@ -5158,6 +5239,31 @@
 		"id": "microsoft-sql-server",
 		"link": "/docs/integrations/sql-server/"
 	},
+	{
+		"dataSource": "hasura",
+		"label": "Hasura",
+		"imgUrl": "/Logos/hasura.svg",
+		"tags": [
+			"database"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"database",
+			"graphql",
+			"graphql engine",
+			"hasura",
+			"hasura graphql",
+			"hasura logs",
+			"hasura metrics",
+			"hasura monitoring",
+			"hasura observability",
+			"hasura traces",
+			"opentelemetry hasura",
+			"telemetry"
+		],
+		"id": "hasura",
+		"link": "/docs/integrations/opentelemetry-hasura/"
+	},
 	{
 		"dataSource": "supabase",
 		"label": "Supabase",

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

@@ -1,8 +1,10 @@
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { toast } from '@signozhq/sonner';
 import { Button, Form, Input } from 'antd';
-import editOrg from 'api/organization/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+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 { requireErrorMessage } from 'utils/form/requireErrorMessage';
@@ -14,42 +16,34 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const { org, updateOrg } = useAppContext();
 	const { displayName } = (org || [])[index];
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const { notifications } = useNotifications();
+
+	const {
+		mutateAsync: updateMyOrganization,
+		isLoading,
+	} = useUpdateMyOrganization({
+		mutation: {
+			onSuccess: (_, { data }) => {
+				toast.success(t('success', { ns: 'common' }), {
+					richColors: true,
+					position: 'top-right',
+				});
+				updateOrg(orgId, data.displayName ?? '');
+			},
+			onError: (error) => {
+				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> => {
-		try {
-			setIsLoading(true);
-			const { displayName } = values;
-			const { statusCode, error } = await editOrg({
-				displayName,
-				orgId,
-			});
-			if (statusCode === 204) {
-				notifications.success({
-					message: t('success', {
-						ns: 'common',
-					}),
-				});
-				updateOrg(orgId, displayName);
-			} else {
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
+		const { displayName } = values;
+		await updateMyOrganization({ data: { id: orgId, displayName } });
 	};
 
 	if (!org) {

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -14,6 +14,10 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import NewExplorerCTA from 'container/NewExplorerCTA';
 import dayjs, { Dayjs } from 'dayjs';
+import {
+	useGlobalTimeQueryInvalidate,
+	useIsGlobalTimeQueryRefreshing,
+} from 'hooks/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -352,8 +356,15 @@ function DateTimeSelection({
 		],
 	);
 
+	const isRefreshingQueries = useIsGlobalTimeQueryRefreshing();
+	const invalidateQueries = useGlobalTimeQueryInvalidate();
 	const onRefreshHandler = (): void => {
-		onSelectHandler(selectedTime);
+		invalidateQueries();
+		onSelectHandler(
+			isModalTimeSelection && modalSelectedInterval
+				? modalSelectedInterval
+				: selectedTime,
+		);
 		onLastRefreshHandler();
 	};
 	const handleReset = useCallback(() => {
@@ -732,7 +743,11 @@ function DateTimeSelection({
 					{showAutoRefresh && selectedTime !== 'custom' && (
 						<div className="refresh-actions">
 							<FormItem hidden={refreshButtonHidden} className="refresh-btn">
-								<Button icon={<SyncOutlined />} onClick={onRefreshHandler} />
+								<Button
+									icon={<SyncOutlined />}
+									loading={!!isRefreshingQueries}
+									onClick={onRefreshHandler}
+								/>
 							</FormItem>
 
 							<FormItem>

frontend/src/hooks/globalTime/index.ts

@@ -0,0 +1,2 @@
+export { useGlobalTimeQueryInvalidate } from './useGlobalTimeQueryInvalidate';
+export { useIsGlobalTimeQueryRefreshing } from './useIsGlobalTimeQueryRefreshing';

frontend/src/hooks/globalTime/useGlobalTimeQueryInvalidate.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to invalida any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY}
+ */
+export function useGlobalTimeQueryInvalidate(): () => Promise<void> {
+	const queryClient = useQueryClient();
+
+	return useCallback(async () => {
+		return await queryClient.invalidateQueries({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		});
+	}, [queryClient]);
+}

frontend/src/hooks/globalTime/useIsGlobalTimeQueryRefreshing.ts

@@ -0,0 +1,13 @@
+import { useIsFetching } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to know if any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY} is refreshing
+ */
+export function useIsGlobalTimeQueryRefreshing(): boolean {
+	return (
+		useIsFetching({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		}) > 0
+	);
+}

frontend/src/hooks/infraMonitoring/useGetHostList.ts

@@ -1,42 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getHostLists,
-	HostListPayload,
-	HostListResponse,
-} from 'api/infraMonitoring/getHostLists';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-type UseGetHostList = (
-	requestData: HostListPayload,
-	options?: UseQueryOptions<
-		SuccessResponse<HostListResponse> | ErrorResponse,
-		Error
-	>,
-	headers?: Record<string, string>,
-) => UseQueryResult<SuccessResponse<HostListResponse> | ErrorResponse, Error>;
-
-export const useGetHostList: UseGetHostList = (
-	requestData,
-	options,
-	headers,
-) => {
-	const queryKey = useMemo(() => {
-		if (options?.queryKey && Array.isArray(options.queryKey)) {
-			return [...options.queryKey];
-		}
-
-		if (options?.queryKey && typeof options.queryKey === 'string') {
-			return options.queryKey;
-		}
-
-		return [REACT_QUERY_KEY.GET_HOST_LIST, requestData];
-	}, [options?.queryKey, requestData]);
-
-	return useQuery<SuccessResponse<HostListResponse> | ErrorResponse, Error>({
-		queryFn: ({ signal }) => getHostLists(requestData, signal, headers),
-		...options,
-		queryKey,
-	});
-};

frontend/src/hooks/member/useMemberRoleManager.ts

@@ -0,0 +1,83 @@
+import { useCallback, useMemo } from 'react';
+import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import { useGetUser, useSetRoleByUserID } from 'api/generated/services/users';
+
+export interface MemberRoleUpdateFailure {
+	roleName: string;
+	error: unknown;
+	onRetry: () => Promise<void>;
+}
+
+interface UseMemberRoleManagerResult {
+	fetchedRoleIds: string[];
+	isLoading: boolean;
+	applyDiff: (
+		localRoleIds: string[],
+		availableRoles: AuthtypesRoleDTO[],
+	) => Promise<MemberRoleUpdateFailure[]>;
+}
+
+export function useMemberRoleManager(
+	userId: string,
+	enabled: boolean,
+): UseMemberRoleManagerResult {
+	const { data: fetchedUser, isLoading } = useGetUser(
+		{ id: userId },
+		{ query: { enabled: !!userId && enabled } },
+	);
+
+	const currentUserRoles = useMemo(() => fetchedUser?.data?.userRoles ?? [], [
+		fetchedUser,
+	]);
+
+	const fetchedRoleIds = useMemo(
+		() =>
+			currentUserRoles
+				.map((ur) => ur.role?.id ?? ur.roleId)
+				.filter((id): id is string => Boolean(id)),
+		[currentUserRoles],
+	);
+
+	const { mutateAsync: setRole } = useSetRoleByUserID();
+
+	const applyDiff = useCallback(
+		async (
+			localRoleIds: string[],
+			availableRoles: AuthtypesRoleDTO[],
+		): Promise<MemberRoleUpdateFailure[]> => {
+			const currentRoleIdSet = new Set(fetchedRoleIds);
+			const desiredRoleIdSet = new Set(localRoleIds.filter(Boolean));
+
+			const toAdd = availableRoles.filter(
+				(r) => r.id && desiredRoleIdSet.has(r.id) && !currentRoleIdSet.has(r.id),
+			);
+
+			/// TODO: re-enable deletes once BE for this is streamlined
+			const allOps = [
+				...toAdd.map((role) => ({
+					roleName: role.name ?? 'unknown',
+					run: (): ReturnType<typeof setRole> =>
+						setRole({
+							pathParams: { id: userId },
+							data: { name: role.name ?? '' },
+						}),
+				})),
+			];
+
+			const results = await Promise.allSettled(allOps.map((op) => op.run()));
+
+			const failures: MemberRoleUpdateFailure[] = [];
+			results.forEach((result, i) => {
+				if (result.status === 'rejected') {
+					const { roleName, run } = allOps[i];
+					failures.push({ roleName, error: result.reason, onRetry: run });
+				}
+			});
+
+			return failures;
+		},
+		[userId, fetchedRoleIds, setRole],
+	);
+
+	return { fetchedRoleIds, isLoading, applyDiff };
+}

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -3,7 +3,6 @@ import { useQueryClient } from 'react-query';
 import {
 	getGetServiceAccountRolesQueryKey,
 	useCreateServiceAccountRole,
-	useDeleteServiceAccountRole,
 	useGetServiceAccountRoles,
 } from 'api/generated/services/serviceaccount';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -36,7 +35,6 @@ export function useServiceAccountRoleManager(
 
 	// the retry for these mutations is safe due to being idempotent on backend
 	const { mutateAsync: createRole } = useCreateServiceAccountRole();
-	const { mutateAsync: deleteRole } = useDeleteServiceAccountRole();
 
 	const invalidateRoles = useCallback(
 		() =>
@@ -62,21 +60,13 @@ export function useServiceAccountRoleManager(
 				(r) => r.id && desiredRoleIds.has(r.id) && !currentRoleIds.has(r.id),
 			);
 
-			const removedRoles = currentRoles.filter(
-				(r) => r.id && !desiredRoleIds.has(r.id),
-			);
-
+			// TODO: re-enable deletes once BE for this is streamlined
 			const allOperations = [
 				...addedRoles.map((role) => ({
 					role,
 					run: (): ReturnType<typeof createRole> =>
 						createRole({ pathParams: { id: accountId }, data: { id: role.id } }),
 				})),
-				...removedRoles.map((role) => ({
-					role,
-					run: (): ReturnType<typeof deleteRole> =>
-						deleteRole({ pathParams: { id: accountId, rid: role.id } }),
-				})),
 			];
 
 			const results = await Promise.allSettled(
@@ -102,7 +92,7 @@ export function useServiceAccountRoleManager(
 
 			return failures;
 		},
-		[accountId, currentRoles, createRole, deleteRole, invalidateRoles],
+		[accountId, currentRoles, createRole, invalidateRoles],
 	);
 
 	return {

frontend/src/hooks/user/useGetUser.ts

@@ -1,15 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-import getUser from 'api/v1/user/id/get';
-import { SuccessResponseV2 } from 'types/api';
-import { UserResponse } from 'types/api/user/getUser';
-
-const useGetUser = (userId: string, isLoggedIn: boolean): UseGetUser =>
-	useQuery({
-		queryFn: () => getUser({ userId }),
-		queryKey: [userId],
-		enabled: !!userId && !!isLoggedIn,
-	});
-
-type UseGetUser = UseQueryResult<SuccessResponseV2<UserResponse>, unknown>;
-
-export default useGetUser;

frontend/src/index.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
+import { GlobalTimeStoreAdapter } from 'components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter';
 import { ThemeProvider } from 'hooks/useDarkMode';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
@@ -51,6 +52,7 @@ if (container) {
 					<TimezoneProvider>
 						<QueryClientProvider client={queryClient}>
 							<Provider store={store}>
+								<GlobalTimeStoreAdapter />
 								<AppProvider>
 									<AppRoutes />
 								</AppProvider>

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

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

@@ -1,70 +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;
-	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,12 +7,14 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
+import TooltipItem from './components/TooltipItem/TooltipItem';
 
-import './Tooltip.styles.scss';
+import Styles from './Tooltip.module.scss';
 
-const TOOLTIP_LIST_MAX_HEIGHT = 330;
+// Fallback per-item height used for the initial size estimate before
+// Virtuoso reports the real total height via totalListHeightChanged.
 const TOOLTIP_ITEM_HEIGHT = 38;
-const TOOLTIP_LIST_PADDING = 10;
+const LIST_MAX_HEIGHT = 300;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -21,27 +23,26 @@ 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 resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
+	const tooltipContent = useMemo(() => content ?? [], [content]);
+
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
-		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
 			return null;
 		}
-		return dayjs(data[0][cursorIdx] * 1000)
+		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
+		if (timestamp == null) {
+			return null;
+		}
+		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
@@ -51,60 +52,68 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	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]);
+	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;
 
 	return (
 		<div
-			className={cx(
-				'uplot-tooltip-container',
-				isDarkMode ? 'darkMode' : 'lightMode',
-			)}
+			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-					<span>{headerTitle}</span>
+			{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"
+						/>
+					)}
 				</div>
 			)}
-			<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>
+
+			{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>
 	);
 }

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

@@ -133,46 +133,30 @@ describe('Tooltip', () => {
 		expect(screen.queryByText(unexpectedTitle)).not.toBeInTheDocument();
 	});
 
-	it('renders lightMode class when dark mode is disabled', () => {
+	it('renders single active item in header only, without a list', () => {
 		const uPlotInstance = createUPlotInstance(null);
-		mockUseIsDarkMode.mockReturnValue(false);
-
-		renderTooltip({ uPlotInstance });
-
-		const container = screen.getByTestId('uplot-tooltip-container');
-
-		expect(container).toHaveClass('lightMode');
-		expect(container).not.toHaveClass('darkMode');
-	});
-
-	it('renders darkMode class when dark mode is enabled', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		mockUseIsDarkMode.mockReturnValue(true);
-
-		renderTooltip({ uPlotInstance });
-
-		const container = screen.getByTestId('uplot-tooltip-container');
-
-		expect(container).toHaveClass('darkMode');
-		expect(container).not.toHaveClass('lightMode');
-	});
-
-	it('renders tooltip items when content is provided', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent()];
+		const content = [createTooltipContent({ isActive: true })];
 
 		renderTooltip({ uPlotInstance, content });
 
-		const list = screen.queryByTestId('uplot-tooltip-list');
+		// Active item is shown in the header, not duplicated in a list
+		expect(screen.queryByTestId('uplot-tooltip-list')).toBeNull();
+		expect(screen.getByTestId('uplot-tooltip-pinned')).toBeInTheDocument();
+		const pinnedContent = screen.getByTestId('uplot-tooltip-pinned-content');
+		expect(pinnedContent).toHaveTextContent('Series A');
+		expect(pinnedContent).toHaveTextContent('10');
+	});
 
-		expect(list).not.toBeNull();
+	it('renders list when multiple series are present', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [
+			createTooltipContent({ isActive: true }),
+			createTooltipContent({ label: 'Series B', isActive: false }),
+		];
 
-		const marker = screen.getByTestId('uplot-tooltip-item-marker');
-		const itemContent = screen.getByTestId('uplot-tooltip-item-content');
+		renderTooltip({ uPlotInstance, content });
 
-		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
-		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
-		expect(itemContent).toHaveTextContent('Series A: 10');
+		expect(screen.getByTestId('uplot-tooltip-list')).toBeInTheDocument();
 	});
 
 	it('does not render tooltip list when content is empty', () => {
@@ -192,7 +176,7 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '210px' });
+		expect(list).toHaveStyle({ height: '200px' });
 	});
 
 	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {