refactor: migrate all errors to AUTO_REFRESH_QUERY pattern

docs/api/openapi.yml

@@ -3871,146 +3871,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesWaterfallRequest:
-      properties:
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallResponse:
-      properties:
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind:
-          format: int32
-          type: integer
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        timestamp:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -4032,6 +3892,8 @@ components:
           type: string
         oldPassword:
           type: string
+        userId:
+          type: string
       type: object
     TypesDeprecatedUser:
       properties:
@@ -4410,6 +4272,63 @@ paths:
       summary: Get resources
       tags:
       - authz
+  /api/v1/changePassword/{id}:
+    post:
+      deprecated: false
+      description: This endpoint changes the password by id
+      operationId: ChangePassword
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TypesChangePasswordRequest'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Change password
+      tags:
+      - users
   /api/v1/channels:
     get:
       deprecated: false
@@ -6149,9 +6068,9 @@ paths:
       - fields
   /api/v1/getResetPasswordToken/{id}:
     get:
-      deprecated: true
+      deprecated: false
       description: This endpoint returns the reset password token by id
-      operationId: GetResetPasswordTokenDeprecated
+      operationId: GetResetPasswordToken
       parameters:
       - in: path
         name: id
@@ -10975,129 +10894,6 @@ paths:
       summary: Update user v2
       tags:
       - users
-  /api/v2/users/{id}/reset_password_tokens:
-    get:
-      deprecated: false
-      description: This endpoint returns the existing reset password token for a user.
-      operationId: GetResetPasswordToken
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesResetPasswordToken'
-                  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
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get reset password token for a user
-      tags:
-      - users
-    put:
-      deprecated: false
-      description: This endpoint creates or regenerates a reset password token for
-        a user. If a valid token exists, it is returned. If expired, a new one is
-        created.
-      operationId: CreateResetPasswordToken
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesResetPasswordToken'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create or regenerate reset password token for a user
-      tags:
-      - users
   /api/v2/users/{id}/roles:
     get:
       deprecated: false
@@ -11338,57 +11134,6 @@ paths:
       summary: Update my user v2
       tags:
       - users
-  /api/v2/users/me/factor_password:
-    put:
-      deprecated: false
-      description: This endpoint updates the password of the user I belong to
-      operationId: UpdateMyPassword
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TypesChangePasswordRequest'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Updates my password
-      tags:
-      - users
   /api/v2/zeus/hosts:
     get:
       deprecated: false
@@ -11560,76 +11305,6 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
-  /api/v3/traces/{traceID}/waterfall:
-    post:
-      deprecated: false
-      description: Returns the waterfall view of spans for a given trace ID with tree
-        structure, metadata, and windowed pagination
-      operationId: GetWaterfall
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TracedetailtypesWaterfallRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TracedetailtypesWaterfallResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get waterfall view for a trace
-      tags:
-      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

frontend/package.json

@@ -68,7 +68,7 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.6",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -140,12 +140,10 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
-    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
-    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",

frontend/src/AppRoutes/pageComponents.ts

@@ -65,13 +65,6 @@ export const TraceDetail = Loadable(
 		),
 );
 
-export const TraceDetailV3 = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
-		),
-);
-
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -47,7 +47,6 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
-	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -141,16 +140,9 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
-		component: TraceDetailV3,
-		isPrivate: true,
-		key: 'TRACE_DETAIL',
-	},
-	{
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
 		component: TraceDetail,
 		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
+		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,

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

@@ -4811,248 +4811,6 @@ export interface TelemetrytypesTelemetryFieldValuesDTO {
 
 export type TimeDurationDTO = number;
 
-export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
-
-export interface TracedetailtypesEventDTO {
-	/**
-	 * @type object
-	 */
-	attributeMap?: TracedetailtypesEventDTOAttributeMap;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timeUnixNano?: number;
-}
-
-export interface TracedetailtypesWaterfallRequestDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap = {
-	[key: string]: number;
-} | null;
-
-export interface TracedetailtypesWaterfallResponseDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	serviceNameToTotalDurationMap?: TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOAttributes = {
-	[key: string]: unknown;
-} | null;
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOResource = {
-	[key: string]: string;
-} | null;
-
-export interface TracedetailtypesWaterfallSpanDTO {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	events?: TracedetailtypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type integer
-	 * @format int32
-	 */
-	kind?: number;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	resource?: TracedetailtypesWaterfallSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timestamp?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
 export interface TypesAlertStatusDTO {
 	/**
 	 * @type array
@@ -5079,6 +4837,10 @@ export interface TypesChangePasswordRequestDTO {
 	 * @type string
 	 */
 	oldPassword?: string;
+	/**
+	 * @type string
+	 */
+	userId?: string;
 }
 
 export interface TypesDeprecatedUserDTO {
@@ -5442,6 +5204,9 @@ export type AuthzResources200 = {
 	status: string;
 };
 
+export type ChangePasswordPathParameters = {
+	id: string;
+};
 export type ListChannels200 = {
 	/**
 	 * @type array
@@ -5839,10 +5604,10 @@ export type GetFieldsValues200 = {
 	status: string;
 };
 
-export type GetResetPasswordTokenDeprecatedPathParameters = {
+export type GetResetPasswordTokenPathParameters = {
 	id: string;
 };
-export type GetResetPasswordTokenDeprecated200 = {
+export type GetResetPasswordToken200 = {
 	data: TypesResetPasswordTokenDTO;
 	/**
 	 * @type string
@@ -6814,28 +6579,6 @@ export type GetUser200 = {
 export type UpdateUserPathParameters = {
 	id: string;
 };
-export type GetResetPasswordTokenPathParameters = {
-	id: string;
-};
-export type GetResetPasswordToken200 = {
-	data: TypesResetPasswordTokenDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateResetPasswordTokenPathParameters = {
-	id: string;
-};
-export type CreateResetPasswordToken201 = {
-	data: TypesResetPasswordTokenDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetRolesByUserIDPathParameters = {
 	id: string;
 };
@@ -6873,17 +6616,6 @@ export type GetHosts200 = {
 	status: string;
 };
 
-export type GetWaterfallPathParameters = {
-	traceID: string;
-};
-export type GetWaterfall200 = {
-	data: TracedetailtypesWaterfallResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type QueryRangeV5200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

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

@@ -1,121 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	GetWaterfall200,
-	GetWaterfallPathParameters,
-	RenderErrorResponseDTO,
-	TracedetailtypesWaterfallRequestDTO,
-} from '../sigNoz.schemas';
-
-/**
- * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
- * @summary Get waterfall view for a trace
- */
-export const getWaterfall = (
-	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesWaterfallRequestDTO: BodyType<TracedetailtypesWaterfallRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetWaterfall200>({
-		url: `/api/v3/traces/${traceID}/waterfall`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesWaterfallRequestDTO,
-		signal,
-	});
-};
-
-export const getGetWaterfallMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getWaterfall'];
-	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 getWaterfall>>,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getWaterfall(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetWaterfallMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getWaterfall>>
->;
-export type GetWaterfallMutationBody = BodyType<TracedetailtypesWaterfallRequestDTO>;
-export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get waterfall view for a trace
- */
-export const useGetWaterfall = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getGetWaterfallMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -20,15 +20,12 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
+	ChangePasswordPathParameters,
 	CreateInvite201,
-	CreateResetPasswordToken201,
-	CreateResetPasswordTokenPathParameters,
 	DeleteUserPathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
-	GetResetPasswordTokenDeprecated200,
-	GetResetPasswordTokenDeprecatedPathParameters,
 	GetResetPasswordTokenPathParameters,
 	GetRolesByUserID200,
 	GetRolesByUserIDPathParameters,
@@ -57,35 +54,133 @@ import type {
 } from '../sigNoz.schemas';
 
 /**
- * This endpoint returns the reset password token by id
- * @deprecated
- * @summary Get reset password token
+ * This endpoint changes the password by id
+ * @summary Change password
  */
-export const getResetPasswordTokenDeprecated = (
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+export const changePassword = (
+	{ id }: ChangePasswordPathParameters,
+	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<GetResetPasswordTokenDeprecated200>({
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/changePassword/${id}`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesChangePasswordRequestDTO,
+		signal,
+	});
+};
+
+export const getChangePasswordMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof changePassword>>,
+		TError,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof changePassword>>,
+	TError,
+	{
+		pathParams: ChangePasswordPathParameters;
+		data: BodyType<TypesChangePasswordRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['changePassword'];
+	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 changePassword>>,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return changePassword(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ChangePasswordMutationResult = NonNullable<
+	Awaited<ReturnType<typeof changePassword>>
+>;
+export type ChangePasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type ChangePasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Change password
+ */
+export const useChangePassword = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof changePassword>>,
+		TError,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof changePassword>>,
+	TError,
+	{
+		pathParams: ChangePasswordPathParameters;
+		data: BodyType<TypesChangePasswordRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getChangePasswordMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns the reset password token by id
+ * @summary Get reset password token
+ */
+export const getResetPasswordToken = (
+	{ id }: GetResetPasswordTokenPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetResetPasswordToken200>({
 		url: `/api/v1/getResetPasswordToken/${id}`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getGetResetPasswordTokenDeprecatedQueryKey = ({
+export const getGetResetPasswordTokenQueryKey = ({
 	id,
-}: GetResetPasswordTokenDeprecatedPathParameters) => {
+}: GetResetPasswordTokenPathParameters) => {
 	return [`/api/v1/getResetPasswordToken/${id}`] as const;
 };
 
-export const getGetResetPasswordTokenDeprecatedQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+export const getGetResetPasswordTokenQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
 			TError,
 			TData
 		>;
@@ -94,11 +189,11 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenDeprecatedQueryKey({ id });
+		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
 
 	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
-	> = ({ signal }) => getResetPasswordTokenDeprecated({ id }, signal);
+		Awaited<ReturnType<typeof getResetPasswordToken>>
+	> = ({ signal }) => getResetPasswordToken({ id }, signal);
 
 	return {
 		queryKey,
@@ -106,39 +201,35 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+		Awaited<ReturnType<typeof getResetPasswordToken>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+export type GetResetPasswordTokenQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordToken>>
 >;
-export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Get reset password token
  */
 
-export function useGetResetPasswordTokenDeprecated<
-	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+export function useGetResetPasswordToken<
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
 			TError,
 			TData
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenDeprecatedQueryOptions(
-		{ id },
-		options,
-	);
+	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -150,16 +241,15 @@ export function useGetResetPasswordTokenDeprecated<
 }
 
 /**
- * @deprecated
  * @summary Get reset password token
  */
-export const invalidateGetResetPasswordTokenDeprecated = async (
+export const invalidateGetResetPasswordToken = async (
 	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenDeprecatedQueryKey({ id }) },
+		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
 		options,
 	);
 
@@ -1317,189 +1407,6 @@ export const useUpdateUser = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint returns the existing reset password token for a user.
- * @summary Get reset password token for a user
- */
-export const getResetPasswordToken = (
-	{ id }: GetResetPasswordTokenPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetResetPasswordToken200>({
-		url: `/api/v2/users/${id}/reset_password_tokens`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetResetPasswordTokenQueryKey = ({
-	id,
-}: GetResetPasswordTokenPathParameters) => {
-	return [`/api/v2/users/${id}/reset_password_tokens`] as const;
-};
-
-export const getGetResetPasswordTokenQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordToken>>
-	> = ({ signal }) => getResetPasswordToken({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordToken>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetResetPasswordTokenQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordToken>>
->;
-export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get reset password token for a user
- */
-
-export function useGetResetPasswordToken<
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get reset password token for a user
- */
-export const invalidateGetResetPasswordToken = async (
-	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.
- * @summary Create or regenerate reset password token for a user
- */
-export const createResetPasswordToken = ({
-	id,
-}: CreateResetPasswordTokenPathParameters) => {
-	return GeneratedAPIInstance<CreateResetPasswordToken201>({
-		url: `/api/v2/users/${id}/reset_password_tokens`,
-		method: 'PUT',
-	});
-};
-
-export const getCreateResetPasswordTokenMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createResetPasswordToken>>,
-		TError,
-		{ pathParams: CreateResetPasswordTokenPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createResetPasswordToken>>,
-	TError,
-	{ pathParams: CreateResetPasswordTokenPathParameters },
-	TContext
-> => {
-	const mutationKey = ['createResetPasswordToken'];
-	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 createResetPasswordToken>>,
-		{ pathParams: CreateResetPasswordTokenPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return createResetPasswordToken(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateResetPasswordTokenMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createResetPasswordToken>>
->;
-
-export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create or regenerate reset password token for a user
- */
-export const useCreateResetPasswordToken = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createResetPasswordToken>>,
-		TError,
-		{ pathParams: CreateResetPasswordTokenPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createResetPasswordToken>>,
-	TError,
-	{ pathParams: CreateResetPasswordTokenPathParameters },
-	TContext
-> => {
-	const mutationOptions = getCreateResetPasswordTokenMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoint returns the user roles by user id
  * @summary Get user roles
@@ -1943,84 +1850,3 @@ export const useUpdateMyUserV2 = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint updates the password of the user I belong to
- * @summary Updates my password
- */
-export const updateMyPassword = (
-	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/users/me/factor_password`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesChangePasswordRequestDTO,
-	});
-};
-
-export const getUpdateMyPasswordMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMyPassword>>,
-		TError,
-		{ data: BodyType<TypesChangePasswordRequestDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateMyPassword>>,
-	TError,
-	{ data: BodyType<TypesChangePasswordRequestDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateMyPassword'];
-	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 updateMyPassword>>,
-		{ data: BodyType<TypesChangePasswordRequestDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateMyPassword(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateMyPasswordMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateMyPassword>>
->;
-export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
-export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Updates my password
- */
-export const useUpdateMyPassword = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMyPassword>>,
-		TError,
-		{ data: BodyType<TypesChangePasswordRequestDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateMyPassword>>,
-	TError,
-	{ data: BodyType<TypesChangePasswordRequestDTO> },
-	TContext
-> => {
-	const mutationOptions = getUpdateMyPasswordMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/trace/getTraceV3.tsx

@@ -1,66 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-	SpanV3,
-} from 'types/api/trace/getTraceV3';
-
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	} else if (
-		props.selectedSpanId &&
-		!uncollapsedSpans.includes(props.selectedSpanId)
-	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
-		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
-		uncollapsedSpans.push(props.selectedSpanId);
-	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
-	);
-
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
-
-	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
-		...span,
-		'service.name': span.resource?.['service.name'] || '',
-	}));
-
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
-	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
-	// Convert by using the first span's timestamp as the base if there's a mismatch.
-	let { startTimestampMillis, endTimestampMillis } = rawPayload;
-	if (
-		spans.length > 0 &&
-		spans[0].timestamp > 0 &&
-		startTimestampMillis < spans[0].timestamp / 10
-	) {
-		const durationMillis = endTimestampMillis - startTimestampMillis;
-		startTimestampMillis = spans[0].timestamp;
-		endTimestampMillis = startTimestampMillis + durationMillis;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: { ...rawPayload, spans, startTimestampMillis, endTimestampMillis },
-	};
-};
-
-export default getTraceV3;

frontend/src/api/v1/factor_password/changeMyPassword.ts

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

frontend/src/api/v1/factor_password/getResetPasswordToken.ts

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

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -1,40 +0,0 @@
-.details-header {
-	// ghost + secondary missing hover bg token in @signozhq/button
-	--button-ghost-hover-background: var(--l3-background);
-
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	border-bottom: 1px solid var(--l1-border);
-	height: 36px;
-	background: var(--l2-background);
-
-	&__icon-btn {
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&__actions {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -1,59 +0,0 @@
-import { ReactNode } from 'react';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-
-import './DetailsHeader.styles.scss';
-
-export interface HeaderAction {
-	key: string;
-	component: ReactNode; // check later if we can use direct btn itself or not.
-}
-
-export interface DetailsHeaderProps {
-	title: string;
-	onClose: () => void;
-	actions?: HeaderAction[];
-	closePosition?: 'left' | 'right';
-	className?: string;
-}
-
-function DetailsHeader({
-	title,
-	onClose,
-	actions,
-	closePosition = 'right',
-	className,
-}: DetailsHeaderProps): JSX.Element {
-	const closeButton = (
-		<Button
-			variant="ghost"
-			size="icon"
-			color="secondary"
-			onClick={onClose}
-			aria-label="Close"
-			className="details-header__icon-btn"
-		>
-			<X size={14} />
-		</Button>
-	);
-
-	return (
-		<div className={`details-header ${className || ''}`}>
-			{closePosition === 'left' && closeButton}
-
-			<span className="details-header__title">{title}</span>
-
-			{actions && (
-				<div className="details-header__actions">
-					{actions.map((action) => (
-						<div key={action.key}>{action.component}</div>
-					))}
-				</div>
-			)}
-
-			{closePosition === 'right' && closeButton}
-		</div>
-	);
-}
-
-export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -1,7 +0,0 @@
-.details-panel-drawer {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,36 +0,0 @@
-import { DrawerWrapper } from '@signozhq/drawer';
-
-import './DetailsPanelDrawer.styles.scss';
-
-interface DetailsPanelDrawerProps {
-	isOpen: boolean;
-	onClose: () => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function DetailsPanelDrawer({
-	isOpen,
-	onClose,
-	children,
-	className,
-}: DetailsPanelDrawerProps): JSX.Element {
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			direction="right"
-			type="panel"
-			showOverlay={false}
-			allowOutsideClick
-			className={`details-panel-drawer ${className || ''}`}
-			content={<div className="details-panel-drawer__body">{children}</div>}
-		/>
-	);
-}
-
-export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -1,8 +0,0 @@
-export type {
-	DetailsHeaderProps,
-	HeaderAction,
-} from './DetailsHeader/DetailsHeader';
-export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
-export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
-export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
-export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -1,10 +0,0 @@
-export interface DetailsPanelState {
-	isOpen: boolean;
-	open: () => void;
-	close: () => void;
-}
-
-export interface UseDetailsPanelOptions {
-	entityId: string | undefined;
-	onClose?: () => void;
-}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DetailsPanelState, UseDetailsPanelOptions } from './types';
-
-function useDetailsPanel({
-	entityId,
-	onClose,
-}: UseDetailsPanelOptions): DetailsPanelState {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const prevEntityIdRef = useRef<string>('');
-
-	useEffect(() => {
-		const currentId = entityId || '';
-		if (currentId && currentId !== prevEntityIdRef.current) {
-			setIsOpen(true);
-		}
-		prevEntityIdRef.current = currentId;
-	}, [entityId]);
-
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		onClose?.();
-	}, [onClose]);
-
-	return { isOpen, open, close };
-}
-
-export default useDetailsPanel;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -10,9 +10,8 @@ import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	useCreateResetPasswordToken,
+	getResetPasswordToken,
 	useDeleteUser,
-	useGetResetPasswordToken,
 	useGetUser,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -56,27 +55,6 @@ function getDeleteTooltip(
 	return undefined;
 }
 
-function getInviteButtonLabel(
-	isLoading: boolean,
-	existingToken: { expiresAt?: Date } | undefined,
-	isExpired: boolean,
-	notFound: boolean,
-): string {
-	if (isLoading) {
-		return 'Checking invite...';
-	}
-	if (existingToken && !isExpired) {
-		return 'Copy Invite Link';
-	}
-	if (isExpired) {
-		return 'Regenerate Invite Link';
-	}
-	if (notFound) {
-		return 'Generate Invite Link';
-	}
-	return 'Copy Invite Link';
-}
-
 function toSaveApiError(err: unknown): APIError {
 	return (
 		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
@@ -105,11 +83,9 @@ function EditMemberDrawer({
 	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);
-	const [resetLinkExpiresAt, setResetLinkExpiresAt] = useState<string | null>(
-		null,
-	);
 	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
 	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
@@ -145,27 +121,6 @@ function EditMemberDrawer({
 		applyDiff,
 	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
 
-	// Token status query for invited users
-	const {
-		data: tokenQueryData,
-		isLoading: isLoadingTokenStatus,
-		isError: tokenNotFound,
-	} = useGetResetPasswordToken(
-		{ id: member?.id ?? '' },
-		{ query: { enabled: open && !!member?.id && isInvited } },
-	);
-
-	const existingToken = tokenQueryData?.data;
-	const isTokenExpired =
-		existingToken != null &&
-		new Date(String(existingToken.expiresAt)) < new Date();
-
-	// Create/regenerate token mutation
-	const {
-		mutateAsync: createTokenMutation,
-		isLoading: isGeneratingLink,
-	} = useCreateResetPasswordToken();
-
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
 	const fetchedUserId = fetchedUser?.data?.id;
@@ -383,21 +338,12 @@ function EditMemberDrawer({
 		if (!member) {
 			return;
 		}
+		setIsGeneratingLink(true);
 		try {
-			const response = await createTokenMutation({
-				pathParams: { id: member.id },
-			});
+			const response = await getResetPasswordToken({ id: member.id });
 			if (response?.data?.token) {
 				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
 				setResetLink(link);
-				setResetLinkExpiresAt(
-					response.data.expiresAt
-						? formatTimezoneAdjustedTimestamp(
-								String(response.data.expiresAt),
-								DATE_TIME_FORMATS.DASH_DATETIME,
-						  )
-						: null,
-				);
 				setHasCopiedResetLink(false);
 				setLinkType(isInvited ? 'invite' : 'reset');
 				setShowResetLinkDialog(true);
@@ -413,8 +359,10 @@ function EditMemberDrawer({
 				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
 			);
 			showErrorModal(errMsg as APIError);
+		} finally {
+			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose, showErrorModal, createTokenMutation]);
+	}, [member, isInvited, onClose, showErrorModal]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -620,19 +568,12 @@ function EditMemberDrawer({
 								<Button
 									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
 									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+									disabled={isGeneratingLink || isRootUser}
 								>
 									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
+									{isGeneratingLink && 'Generating...'}
+									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
+									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>
@@ -682,7 +623,6 @@ function EditMemberDrawer({
 				open={showResetLinkDialog}
 				linkType={linkType}
 				resetLink={resetLink}
-				expiresAt={resetLinkExpiresAt}
 				hasCopied={hasCopiedResetLink}
 				onClose={(): void => {
 					setShowResetLinkDialog(false);

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -6,7 +6,6 @@ interface ResetLinkDialogProps {
 	open: boolean;
 	linkType: 'invite' | 'reset' | null;
 	resetLink: string | null;
-	expiresAt: string | null;
 	hasCopied: boolean;
 	onClose: () => void;
 	onCopy: () => void;
@@ -16,7 +15,6 @@ function ResetLinkDialog({
 	open,
 	linkType,
 	resetLink,
-	expiresAt,
 	hasCopied,
 	onClose,
 	onCopy,
@@ -55,11 +53,6 @@ function ResetLinkDialog({
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>
 				</div>
-				{expiresAt && (
-					<p className="reset-link-dialog__description">
-						This link expires on {expiresAt}.
-					</p>
-				)}
 			</div>
 		</DialogWrapper>
 	);

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

@@ -2,9 +2,8 @@ import type { ReactNode } from 'react';
 import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	useCreateResetPasswordToken,
+	getResetPasswordToken,
 	useDeleteUser,
-	useGetResetPasswordToken,
 	useGetUser,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
@@ -56,8 +55,7 @@ jest.mock('api/generated/services/users', () => ({
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
+	getResetPasswordToken: jest.fn(),
 }));
 
 jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
@@ -84,7 +82,7 @@ jest.mock('react-use', () => ({
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
 const mockDeleteMutate = jest.fn();
-const mockCreateTokenMutateAsync = jest.fn();
+const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
 const showErrorModal = jest.fn();
 jest.mock('providers/ErrorModalProvider', () => ({
@@ -186,31 +184,6 @@ describe('EditMemberDrawer', () => {
 			mutate: mockDeleteMutate,
 			isLoading: false,
 		});
-		// Token query: valid token for invited members
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					token: 'invite-tok-valid',
-					id: 'token-1',
-					expiresAt: new Date(Date.now() + 86400000).toISOString(),
-				},
-			},
-			isLoading: false,
-			isError: false,
-		});
-		// Create token mutation
-		mockCreateTokenMutateAsync.mockResolvedValue({
-			status: 'success',
-			data: {
-				token: 'reset-tok-abc',
-				id: 'user-1',
-				expiresAt: new Date(Date.now() + 86400000).toISOString(),
-			},
-		});
-		(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
-			mutateAsync: mockCreateTokenMutateAsync,
-			isLoading: false,
-		});
 	});
 
 	afterEach(() => {
@@ -384,40 +357,6 @@ describe('EditMemberDrawer', () => {
 		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
 	});
 
-	it('shows "Regenerate Invite Link" when token is expired', () => {
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					token: 'old-tok',
-					id: 'token-1',
-					expiresAt: new Date(Date.now() - 86400000).toISOString(), // expired yesterday
-				},
-			},
-			isLoading: false,
-			isError: false,
-		});
-
-		renderDrawer({ member: invitedMember });
-
-		expect(
-			screen.getByRole('button', { name: /regenerate invite link/i }),
-		).toBeInTheDocument();
-	});
-
-	it('shows "Generate Invite Link" when no token exists', () => {
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-		});
-
-		renderDrawer({ member: invitedMember });
-
-		expect(
-			screen.getByRole('button', { name: /generate invite link/i }),
-		).toBeInTheDocument();
-	});
-
 	it('calls deleteUser after confirming revoke invite for invited members', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
@@ -670,7 +609,7 @@ describe('EditMemberDrawer', () => {
 			).not.toBeInTheDocument();
 		});
 
-		it('does not call createResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderDrawer();
 
@@ -678,16 +617,20 @@ describe('EditMemberDrawer', () => {
 				screen.getByRole('button', { name: /generate password reset link/i }),
 			);
 
-			expect(mockCreateTokenMutateAsync).not.toHaveBeenCalled();
+			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
 		});
 	});
 
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();
+			mockGetResetPasswordToken.mockResolvedValue({
+				status: 'success',
+				data: { token: 'reset-tok-abc', id: 'user-1' },
+			});
 		});
 
-		it('calls POST and opens the reset link dialog with the generated link and expiry', async () => {
+		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			renderDrawer();
@@ -699,12 +642,11 @@ describe('EditMemberDrawer', () => {
 			const dialog = await screen.findByRole('dialog', {
 				name: /password reset link/i,
 			});
-			expect(mockCreateTokenMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1' },
+			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
+				id: 'user-1',
 			});
 			expect(dialog).toBeInTheDocument();
 			expect(dialog).toHaveTextContent('reset-tok-abc');
-			expect(dialog).toHaveTextContent(/this link expires on/i);
 		});
 
 		it('copies the link to clipboard and shows "Copied!" on the button', async () => {

frontend/src/components/LogDetail/index.tsx

@@ -15,6 +15,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -44,7 +45,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { JsonView } from 'periscope/components/JsonView';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -527,9 +527,7 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,4 +0,0 @@
-.timeline-v3-container {
-	// flex: 1;
-	overflow: visible;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	getIntervals,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	useEffect(() => {
-		const spread = endTimestamp - startTimestamp;
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={timelineHeight * 2.5}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,88 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	// Only show even-interval ticks — skip the trailing partial tick at the edge.
-	// The last even tick sits before the full width, so it doesn't conflict with
-	// span duration labels that may have sub-millisecond precision.
-	let elapsedIntervals = 0;
-
-	while (
-		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
-		intervals.length < 20
-	) {
-		elapsedIntervals += intervalSpreadNormalized;
-		const labelTime = offsetTimestamp + elapsedIntervals;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (elapsedIntervals / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/constants/localStorage.ts

@@ -37,6 +37,4 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
-	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
-	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -25,14 +25,14 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
+	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
+	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/constants/routes.ts

@@ -8,7 +8,6 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
-	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',

frontend/src/constants/theme.ts

@@ -33,102 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		blue1: '#2F80ED',
-		blue2: '#3366E6',
-		blue3: '#4682B4',
-		blue4: '#1F63E0',
-		blue5: '#3A7AED',
-		blue6: '#5A9DF5',
-		blue7: '#2874A6',
-		blue8: '#2E86C1',
-		blue9: '#3498DB',
-		blue10: '#1E90FF',
-		blue11: '#4169E1',
-
-		// Cyans / Teals
-		cyan1: '#00CEC9',
-		cyan2: '#22A6F2',
-		cyan3: '#00B0AA',
-		cyan4: '#33D6C2',
-		cyan5: '#66E9DA',
-		cyan6: '#48DBFB',
-		cyan7: '#00BFFF',
-		cyan8: '#63B8FF',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#76D7C4',
-		teal5: '#20B2AA',
-
-		// Greens
-		green1: '#27AE60',
-		green2: '#3CB371',
-		green3: '#1E8449',
-		green4: '#2ECC71',
-		green5: '#58D68D',
-		green6: '#229954',
-		green7: '#52BE80',
-		green8: '#82E0AA',
-		green9: '#73C6B6',
-
-		// Limes
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#84CC16',
-		lime4: '#65A30D',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		yellow4: '#F4D03F',
-		yellow5: '#D4AC0D',
-
-		// Golds / Ambers
-		gold1: '#F2C94C',
-		gold2: '#FFD93D',
-		gold3: '#FFCA28',
-		gold4: '#B7950B',
-		gold5: '#D4A017',
-
-		// Oranges (non-red)
-		orange1: '#F39C12',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		orange4: '#D35400',
-		orange5: '#EB984E',
-		orange6: '#FAD7A0',
-
-		// Purples / Violets
-		purple1: '#BB6BD9',
-		purple2: '#9B51E0',
-		purple3: '#DA77F2',
-		purple4: '#C77DFF',
-		purple5: '#6C5CE7',
-		purple6: '#8E44AD',
-		purple7: '#9B59B6',
-		purple8: '#BB8FCE',
-		purple9: '#7D3C98',
-		purple10: '#A569BD',
-
-		// Lavenders
-		lavender1: '#AF7AC5',
-		lavender2: '#C39BD3',
-		lavender3: '#D2B4DE',
-
-		// Pinks / Magentas
-		pink1: '#E91E8C',
-		pink2: '#FF6FD8',
-		pink3: '#F06292',
-		pink4: '#CE93D8',
-
-		// Salmons / Corals (distinct from error red)
-		salmon1: '#FF8A65',
-		salmon2: '#FFAB91',
-		salmon3: '#E0876A',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/AllError/index.tsx

@@ -36,7 +36,10 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
+import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
@@ -70,9 +73,11 @@ type QueryParams = {
 };
 
 function AllErrors(): JSX.Element {
-	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
+	const { loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
 	const { pathname } = useLocation();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
@@ -121,11 +126,22 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();
 
-	const [{ isLoading, data }, errorCountResponse] = useQueries([
+	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
+
+	const [
+		{ isLoading, isFetching: isErrorsFetching, data },
+		errorCountResponse,
+	] = useQueries([
 		{
-			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
-			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
-				getAll({
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
+				'getAllErrors',
+				updatedPath,
+				compositeData,
+			),
+			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+				const { minTime, maxTime } = getMinMaxTime();
+				return getAll({
 					end: maxTime,
 					start: minTime,
 					order: updatedOrder,
@@ -137,20 +153,21 @@ function AllErrors(): JSX.Element {
 					tags: convertCompositeQueryToTraceSelectedTags(
 						compositeData?.builder.queryData?.[0]?.filters?.items || [],
 					),
-				}),
+				});
+			},
 			enabled: !loading,
 		},
 		{
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				'getErrorCounts',
-				maxTime,
-				minTime,
 				getUpdatedExceptionType,
 				getUpdatedServiceName,
 				compositeData,
-			],
-			queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> =>
-				getErrorCounts({
+			),
+			queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> => {
+				const { minTime, maxTime } = getMinMaxTime();
+				return getErrorCounts({
 					end: maxTime,
 					start: minTime,
 					exceptionType: getUpdatedExceptionType,
@@ -158,10 +175,17 @@ function AllErrors(): JSX.Element {
 					tags: convertCompositeQueryToTraceSelectedTags(
 						compositeData?.builder.queryData?.[0]?.filters?.items || [],
 					),
-				}),
+				});
+			},
 			enabled: !loading,
 		},
 	]);
+
+	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
+	useEffect(() => {
+		setIsFetching(isFetching);
+	}, [isFetching, setIsFetching]);
+
 	const { notifications } = useNotifications();
 
 	useEffect(() => {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
+import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -23,8 +26,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -40,6 +41,7 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
+	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -53,6 +55,10 @@ function DomainList(): JSX.Element {
 
 	const compositeData = useGetCompositeQueryParam();
 
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+	}, [queryClient]);
+
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -119,7 +125,13 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+				rightActions={
+					<RightToolbarActions
+						onStageRunQuery={handleRunQuery}
+						isLoadingQueries={isFetching}
+						handleCancelQuery={handleCancelQuery}
+					/>
+				}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -18,9 +18,16 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
-function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
+function ChartPreview({
+	alertDef,
+	source,
+	isCancelled = false,
+	onFetchingStateChange,
+}: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -88,6 +95,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 
@@ -102,6 +111,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 

frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx

@@ -1,9 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -62,7 +64,17 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);
 
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const runQueryHandler = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -76,6 +88,7 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
+		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -106,7 +119,12 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview alertDef={alertDef} source={source} />
+			<ChartPreview
+				alertDef={alertDef}
+				source={source}
+				isCancelled={isCancelled}
+				onFetchingStateChange={setIsLoadingQueries}
+			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -130,6 +148,8 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
+				isLoadingQueries={isLoadingQueries}
+				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -123,7 +123,6 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
-					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 // eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import Spinner from 'components/Spinner';
@@ -10,6 +10,7 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -36,14 +37,14 @@ import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';
 import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
@@ -69,6 +70,8 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -86,6 +89,8 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
+	isCancelled = false,
+	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -117,10 +122,7 @@ function ChartPreview({
 	});
 	const { currentQuery } = useQueryBuilder();
 
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const globalSelectedInterval = useGlobalTimeStore((s) => s.selectedTime);
 
 	const { featureFlags } = useAppContext();
 
@@ -184,18 +186,22 @@ function ChartPreview({
 		// alertDef?.version || DEFAULT_ENTITY_VERSION,
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [
-				'chartPreview',
+			queryKey: getAutoRefreshQueryKey(
+				globalSelectedInterval,
+				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
-				minTime,
-				maxTime,
 				alertDef?.ruleType,
-			],
+			),
 			enabled: canQuery,
+			keepPreviousData: true,
 		},
 	);
 
+	useEffect(() => {
+		onFetchingStateChange?.(queryResponse.isFetching);
+	}, [queryResponse.isFetching, onFetchingStateChange]);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	useEffect((): void => {
@@ -205,7 +211,7 @@ function ChartPreview({
 		}
 		setMinTimeScale(startTime);
 		setMaxTimeScale(endTime);
-	}, [maxTime, minTime, globalSelectedInterval, queryResponse, setQueryStatus]);
+	}, [globalSelectedInterval, queryResponse, setQueryStatus]);
 
 	// Initialize graph visibility from localStorage
 	useEffect(() => {
@@ -338,7 +344,9 @@ function ChartPreview({
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
 
 	const chartDataAvailable =
-		chartData && !queryResponse.isError && !queryResponse.isLoading;
+		chartData &&
+		!queryResponse.isLoading &&
+		(!queryResponse.isError || isCancelled);
 
 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -359,7 +367,7 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && (
+					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}
 
@@ -403,6 +411,8 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
+	isCancelled: false,
+	onFetchingStateChange: undefined,
 };
 
 export default ChartPreview;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -29,6 +29,8 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
+	isLoadingQueries,
+	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -176,6 +178,8 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -195,7 +199,11 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn onStageRunQuery={runQuery} />
+									<RunQueryBtn
+										onStageRunQuery={runQuery}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
+									/>
 								</span>
 							}
 							items={items}
@@ -237,6 +245,8 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;

frontend/src/container/FormAlertRules/index.tsx

@@ -127,6 +127,13 @@ function FormAlertRules({
 
 	// use query client
 	const ruleCache = useQueryClient();
+	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
+	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
+
+	const handleCancelAlertQuery = useCallback(() => {
+		ruleCache.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+		setIsChartQueryCancelled(true);
+	}, [ruleCache]);
 
 	const isNewRule = !ruleId || isEmpty(ruleId);
 
@@ -713,6 +720,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -731,6 +740,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -913,7 +924,13 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => {
+								setIsChartQueryCancelled(false);
+								ruleCache.invalidateQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+								handleRunQuery();
+							}}
+							isLoadingQueries={isLoadingAlertQuery}
+							handleCancelQuery={handleCancelAlertQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -38,7 +38,6 @@ import {
 } from 'types/api/settings/getRetention';
 import { USER_ROLES } from 'types/roles';
 
-import LicenseRowDismissibleCallout from './LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout';
 import Retention from './Retention';
 import StatusMessage from './StatusMessage';
 import { ActionItemsContainer, ErrorText, ErrorTextContainer } from './styles';
@@ -684,12 +683,7 @@ function GeneralSettings({
 					{showCustomDomainSettings && activeLicense?.key && (
 						<div className="custom-domain-card-divider" />
 					)}
-					{activeLicense?.key && (
-						<>
-							<LicenseKeyRow />
-							<LicenseRowDismissibleCallout />
-						</>
-					)}
+					{activeLicense?.key && <LicenseKeyRow />}
 				</div>
 			)}
 

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -1,31 +0,0 @@
-.license-key-callout {
-	margin: var(--spacing-4) var(--spacing-6);
-	width: auto;
-
-	.license-key-callout__description {
-		display: flex;
-		align-items: baseline;
-		gap: var(--spacing-2);
-		min-width: 0;
-		flex-wrap: wrap;
-		font-size: 13px;
-	}
-
-	.license-key-callout__link {
-		display: inline-flex;
-		align-items: center;
-		padding: var(--spacing-1) var(--spacing-3);
-		border-radius: 2px;
-		background: var(--callout-primary-background);
-		color: var(--callout-primary-description);
-		font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
-		font-size: var(--paragraph-base-400-font-size);
-		text-decoration: none;
-
-		&:hover {
-			background: var(--callout-primary-border);
-			color: var(--callout-primary-icon);
-			text-decoration: none;
-		}
-	}
-}

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout.tsx

@@ -1,83 +0,0 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Callout } from '@signozhq/callout';
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import setLocalStorageApi from 'api/browser/localstorage/set';
-import { FeatureKeys } from 'constants/features';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useAppContext } from 'providers/App/App';
-import { USER_ROLES } from 'types/roles';
-
-import './LicenseRowDismissible.styles.scss';
-
-function LicenseRowDismissibleCallout(): JSX.Element | null {
-	const [isCalloutDismissed, setIsCalloutDismissed] = useState<boolean>(
-		() =>
-			getLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED) === 'true',
-	);
-
-	const { user, featureFlags } = useAppContext();
-	const { isCloudUser } = useGetTenantLicense();
-
-	const isAdmin = user.role === USER_ROLES.ADMIN;
-	const isEditor = user.role === USER_ROLES.EDITOR;
-
-	const isGatewayEnabled =
-		featureFlags?.find((feature) => feature.name === FeatureKeys.GATEWAY)
-			?.active || false;
-
-	const hasServiceAccountsAccess = isAdmin;
-
-	const hasIngestionAccess =
-		(isCloudUser && !isGatewayEnabled) ||
-		(isGatewayEnabled && (isAdmin || isEditor));
-
-	const handleDismissCallout = (): void => {
-		setLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
-		setIsCalloutDismissed(true);
-	};
-
-	return !isCalloutDismissed ? (
-		<Callout
-			type="info"
-			size="small"
-			showIcon
-			dismissable
-			onClose={handleDismissCallout}
-			className="license-key-callout"
-			description={
-				<div className="license-key-callout__description">
-					This is <strong>NOT</strong> your ingestion or Service account key.
-					{(hasServiceAccountsAccess || hasIngestionAccess) && (
-						<>
-							{' '}
-							Find your{' '}
-							{hasServiceAccountsAccess && (
-								<Link
-									to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
-									className="license-key-callout__link"
-								>
-									Service account here
-								</Link>
-							)}
-							{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
-							{hasIngestionAccess && (
-								<Link
-									to={ROUTES.INGESTION_SETTINGS}
-									className="license-key-callout__link"
-								>
-									Ingestion key here
-								</Link>
-							)}
-							.
-						</>
-					)}
-				</div>
-			}
-		/>
-	) : null;
-}
-
-export default LicenseRowDismissibleCallout;

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/__tests__/LicenseRowDismissibleCallout.test.tsx

@@ -1,229 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { USER_ROLES } from 'types/roles';
-
-import LicenseRowDismissibleCallout from '../LicenseRowDismissibleCallout';
-
-const getDescription = (): HTMLElement =>
-	screen.getByText(
-		(_, el) =>
-			el?.classList?.contains('license-key-callout__description') ?? false,
-	);
-
-const queryDescription = (): HTMLElement | null =>
-	screen.queryByText(
-		(_, el) =>
-			el?.classList?.contains('license-key-callout__description') ?? false,
-	);
-
-jest.mock('hooks/useGetTenantLicense', () => ({
-	useGetTenantLicense: jest.fn(),
-}));
-
-const mockLicense = (isCloudUser: boolean): void => {
-	(useGetTenantLicense as jest.Mock).mockReturnValue({
-		isCloudUser,
-		isEnterpriseSelfHostedUser: !isCloudUser,
-		isCommunityUser: false,
-		isCommunityEnterpriseUser: false,
-	});
-};
-
-const renderCallout = (
-	role: string,
-	isCloudUser: boolean,
-	gatewayActive: boolean,
-): void => {
-	mockLicense(isCloudUser);
-	render(
-		<LicenseRowDismissibleCallout />,
-		{},
-		{
-			role,
-			appContextOverrides: {
-				featureFlags: [
-					{
-						name: FeatureKeys.GATEWAY,
-						active: gatewayActive,
-						usage: 0,
-						usage_limit: -1,
-						route: '',
-					},
-				],
-			},
-		},
-	);
-};
-
-describe('LicenseRowDismissibleCallout', () => {
-	beforeEach(() => {
-		localStorage.clear();
-		jest.clearAllMocks();
-	});
-
-	describe('callout content per access level', () => {
-		it.each([
-			{
-				scenario: 'viewer, non-cloud, gateway off — base text only, no links',
-				role: USER_ROLES.VIEWER,
-				isCloudUser: false,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: false,
-				expectedText: 'This is NOT your ingestion or Service account key.',
-			},
-			{
-				scenario: 'admin, non-cloud, gateway off — service accounts link only',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: false,
-				gatewayActive: false,
-				serviceAccountLink: true,
-				ingestionLink: false,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here.',
-			},
-			{
-				scenario: 'viewer, cloud, gateway off — ingestion link only',
-				role: USER_ROLES.VIEWER,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-			{
-				scenario: 'admin, cloud, gateway off — both links',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: true,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
-			},
-			{
-				scenario: 'admin, non-cloud, gateway on — both links',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: false,
-				gatewayActive: true,
-				serviceAccountLink: true,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
-			},
-			{
-				scenario: 'editor, non-cloud, gateway on — ingestion link only',
-				role: USER_ROLES.EDITOR,
-				isCloudUser: false,
-				gatewayActive: true,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-			{
-				scenario: 'editor, cloud, gateway off — ingestion link only',
-				role: USER_ROLES.EDITOR,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-		])(
-			'$scenario',
-			({
-				role,
-				isCloudUser,
-				gatewayActive,
-				serviceAccountLink,
-				ingestionLink,
-				expectedText,
-			}) => {
-				renderCallout(role, isCloudUser, gatewayActive);
-
-				const description = getDescription();
-				expect(description).toBeInTheDocument();
-				expect(description).toHaveTextContent(expectedText);
-
-				if (serviceAccountLink) {
-					expect(
-						screen.getByRole('link', { name: /Service account here/ }),
-					).toBeInTheDocument();
-				} else {
-					expect(
-						screen.queryByRole('link', { name: /Service account here/ }),
-					).not.toBeInTheDocument();
-				}
-
-				if (ingestionLink) {
-					expect(
-						screen.getByRole('link', { name: /Ingestion key here/ }),
-					).toBeInTheDocument();
-				} else {
-					expect(
-						screen.queryByRole('link', { name: /Ingestion key here/ }),
-					).not.toBeInTheDocument();
-				}
-			},
-		);
-	});
-
-	describe('Link routing', () => {
-		it('should link to service accounts settings', () => {
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			const link = screen.getByRole('link', {
-				name: /Service account here/,
-			}) as HTMLAnchorElement;
-
-			expect(link.getAttribute('href')).toBe(ROUTES.SERVICE_ACCOUNTS_SETTINGS);
-		});
-
-		it('should link to ingestion settings', () => {
-			renderCallout(USER_ROLES.VIEWER, true, false);
-
-			const link = screen.getByRole('link', {
-				name: /Ingestion key here/,
-			}) as HTMLAnchorElement;
-
-			expect(link.getAttribute('href')).toBe(ROUTES.INGESTION_SETTINGS);
-		});
-	});
-
-	describe('Dismissal functionality', () => {
-		it('should hide callout when dismiss button is clicked', async () => {
-			const user = userEvent.setup();
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			expect(getDescription()).toBeInTheDocument();
-
-			await user.click(screen.getByRole('button'));
-
-			expect(queryDescription()).not.toBeInTheDocument();
-		});
-
-		it('should persist dismissal in localStorage', async () => {
-			const user = userEvent.setup();
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			await user.click(screen.getByRole('button'));
-
-			expect(
-				localStorage.getItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED),
-			).toBe('true');
-		});
-
-		it('should not render when localStorage dismissal is set', () => {
-			localStorage.setItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			expect(queryDescription()).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -6,6 +6,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -24,6 +25,7 @@ import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import useDrilldown from 'container/GridCardLayout/GridCard/FullView/useDrilldown';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
@@ -49,6 +51,8 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -86,6 +90,8 @@ function FullView({
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+	const selectedTimeFromStore = useGlobalTimeStore((s) => s.selectedTime);
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -203,19 +209,34 @@ function FullView({
 		});
 	}, [selectedPanelType]);
 
-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTimeFromStore,
+				widget?.query,
+				selectedPanelType,
+				requestData,
+				version,
+			),
+		[
+			selectedTimeFromStore,
 			widget?.query,
 			selectedPanelType,
 			requestData,
 			version,
-			minTime,
-			maxTime,
 		],
+	);
+
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});
 
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -354,6 +375,8 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
+									isLoadingQueries={response.isFetching}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss

@@ -11,12 +11,6 @@
 	}
 }
 
-.infra-metrics-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 24px;
-}
-
 .infra-metrics-card {
 	margin: 1rem 0;
 	height: 300px;

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -163,16 +163,16 @@ function NodeMetrics({
 		);
 	};
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={widgetInfo[idx].title}>
+				<Col span={12} key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -146,16 +146,16 @@ function PodMetrics({
 	};
 
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={podWidgetInfo[idx].title}>
+				<Col span={12} key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +8,7 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -37,6 +39,12 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
 
 	const [showQuickFilters, setShowQuickFilters] = useState(true);
 
@@ -155,7 +163,11 @@ function Explorer(): JSX.Element {
 
 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+								<RightToolbarActions
+									onStageRunQuery={(): void => handleRunQuery()}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -171,7 +183,7 @@ function Explorer(): JSX.Element {
 						/>
 
 						<div className="explore-content">
-							<TimeSeries />
+							<TimeSeries onFetchingStateChange={setIsLoadingQueries} />
 						</div>
 					</div>
 					<ExplorerOptionWrapper

frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx

@@ -1,43 +0,0 @@
-import { Button } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryBuilder } from 'container/QueryBuilder';
-import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
-
-function QuerySection(): JSX.Element {
-	const { handleRunQuery } = useQueryBuilder();
-
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
-
-	return (
-		<div className="query-section">
-			<QueryBuilder
-				panelType={panelTypes}
-				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-				version="v4"
-				actions={
-					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
-								handleRunQuery();
-								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
-									[MeterExplorerEventKeys.Tab]: 'explorer',
-								});
-							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
-					</ButtonWrapper>
-				}
-			/>
-		</div>
-	);
-}
-
-export default QuerySection;

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -10,25 +8,27 @@ import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsS
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { SuccessResponse } from 'types/api';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
 
-function TimeSeries(): JSX.Element {
+interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
+}
+
+function TimeSeries({ onFetchingStateChange }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -58,30 +58,38 @@ function TimeSeries(): JSX.Element {
 
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				REACT_QUERY_KEY.GET_QUERY_RANGE,
 				payload,
 				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
 				index,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			),
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
 						graphType: PANEL_TYPES.BAR,
 						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
+						globalSelectedInterval: selectedTime as Time,
 						params: {
 							dataSource: DataSource.METRICS,
 						},
 					},
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -102,6 +110,11 @@ function TimeSeries(): JSX.Element {
 		})),
 	);
 
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -6,6 +7,7 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -54,6 +56,12 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
 
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -307,7 +315,11 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -319,6 +331,7 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}

frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx

@@ -1,7 +1,10 @@
-import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useIsFetching, useQueryClient } from 'react-query';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -11,9 +14,16 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 
 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
 
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
 
+	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+	}, [queryClient]);
+
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -22,17 +32,16 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
+						<RunQueryBtn
+							onStageRunQuery={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</ButtonWrapper>
 				}
 			/>

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
 import { toast } from '@signozhq/sonner';
 import { Button, Tooltip, Typography } from 'antd';
@@ -18,15 +16,16 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { AlertTriangle } from 'lucide-react';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { SuccessResponse } from 'types/api';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
 
 import EmptyMetricsSearch from './EmptyMetricsSearch';
 import { TimeSeriesProps } from './types';
@@ -36,6 +35,7 @@ import {
 } from './utils';
 
 function TimeSeries({
+	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -49,10 +49,7 @@ function TimeSeries({
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
@@ -89,31 +86,38 @@ function TimeSeries({
 
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				REACT_QUERY_KEY.GET_QUERY_RANGE,
 				payload,
 				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
 				index,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			),
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
 						graphType: PANEL_TYPES.TIME_SERIES,
 						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
+						globalSelectedInterval: selectedTime as Time,
 						params: {
 							dataSource: DataSource.METRICS,
 						},
 					},
-					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -131,6 +135,11 @@ function TimeSeries({
 		})),
 	);
 
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -3,6 +3,7 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';
 
 export interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;

frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -109,6 +111,21 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);
 
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	// Auto-reset isCancelled when a new query starts fetching
+	useEffect(() => {
+		if (isInspectMetricsRefetching) {
+			setIsCancelled(false);
+		}
+	}, [isInspectMetricsRefetching]);
+
+	const queryClient = useQueryClient();
+	const handleCancelInspectQuery = useCallback(() => {
+		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -179,7 +196,7 @@ function Inspect({
 			);
 		}
 
-		if (isInspectMetricsError) {
+		if (isInspectMetricsError && !isCancelled) {
 			const errorMessage = 'Error loading inspect metrics.';
 
 			return (
@@ -198,7 +215,13 @@ function Inspect({
 					data-testid="inspect-metrics-empty"
 					className="inspect-metrics-fallback"
 				>
-					<Empty description="No time series found for this metric to inspect." />
+					<Empty
+						description={
+							isCancelled
+								? 'Query was cancelled. Run the query to see results.'
+								: 'No time series found for this metric to inspect.'
+						}
+					/>
 				</div>
 			);
 		}
@@ -234,6 +257,14 @@ function Inspect({
 						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
 						currentQuery={currentQueryData}
 						setCurrentQuery={setCurrentQueryData}
+						isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
+						handleCancelQuery={handleCancelInspectQuery}
+						onRunQuery={(): void => {
+							setIsCancelled(false);
+							queryClient.invalidateQueries([
+								REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+							]);
+						}}
 					/>
 				</div>
 				<div className="inspect-metrics-content-second-col">
@@ -257,6 +288,7 @@ function Inspect({
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
+		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,

frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx

@@ -20,13 +20,22 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
+	isLoadingQueries,
+	handleCancelQuery,
+	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
+		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
+	}, [
+		currentMetricName,
+		setAppliedMetricName,
+		dispatchMetricInspectionOptions,
+		onRunQuery,
+	]);
 
 	return (
 		<div className="inspect-metrics-query-builder">
@@ -39,7 +48,11 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
+				<RunQueryBtn
+					onStageRunQuery={applyInspectionOptions}
+					handleCancelQuery={handleCancelQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -103,6 +103,8 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
+		isLoadingQueries: false,
+		handleCancelQuery: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/MetricsExplorer/Inspect/types.ts

@@ -65,6 +65,9 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery?: () => void;
 }
 
 export interface MetricNameSearchProps {

frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
+import { isAxiosError } from 'axios';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -107,7 +109,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			'inspectMetrics',
+			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
 			metricName,
 			start,
 			end,
@@ -127,6 +129,12 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
+		retry: (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < 3;
+		},
 	});
 
 	const inspectMetricsData = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -12,6 +12,8 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
+	handleCancelQuery,
+	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -22,7 +24,8 @@ function MetricsSearch({
 
 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
+		onRunQuery?.();
+	}, [currentQueryFilterExpression, onChange, onRunQuery]);
 
 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -53,6 +56,7 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
+				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -17,6 +18,7 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -104,6 +106,8 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);
 
+	const [isCancelled, setIsCancelled] = useState<boolean>(false);
+
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -164,6 +168,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
+		reset: resetMetricsStats,
 	} = useGetMetricsStats();
 
 	const {
@@ -172,6 +177,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
+		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();
 
 	const metricsStatsApiError = useMemo(
@@ -196,6 +202,40 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);
 
+	const handleCancelQuery = useCallback(() => {
+		resetMetricsStats();
+		resetMetricsTreemap();
+		setCurrentQueryFilterExpression(appliedFilterExpression);
+		setIsCancelled(true);
+	}, [
+		resetMetricsStats,
+		resetMetricsTreemap,
+		setCurrentQueryFilterExpression,
+		appliedFilterExpression,
+	]);
+
+	const handleRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		getMetricsStats({
+			data: {
+				...metricsListQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+		getMetricsTreemap({
+			data: {
+				...metricsTreemapQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+	}, [
+		getMetricsStats,
+		getMetricsTreemap,
+		metricsListQuery,
+		metricsTreemapQuery,
+		currentQueryFilterExpression,
+	]);
+
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -330,11 +370,19 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;
 
+	const isLoadingQueries =
+		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
+
 	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+		isLoadingQueries &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;
 
+	const showNoMetrics =
+		isMetricsListDataEmpty &&
+		isMetricsTreeMapDataEmpty &&
+		!appliedFilterExpression;
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -343,13 +391,26 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
+					isLoading={isLoadingQueries}
+					handleCancelQuery={handleCancelQuery}
+					onRunQuery={handleRunQuery}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isMetricsListDataEmpty &&
-				  isMetricsTreeMapDataEmpty &&
-				  !appliedFilterExpression ? (
+				) : isCancelled ? (
+					<div className="no-logs-container">
+						<div className="no-logs-container-content">
+							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+							<Typography className="no-logs-text">
+								Query cancelled.
+								<span className="sub-text">
+									{' '}
+									Click &quot;Run Query&quot; to load metrics.
+								</span>
+							</Typography>
+						</div>
+					</div>
+				) : showNoMetrics ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -33,6 +33,8 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery: () => void;
 }
 
 export interface MetricsTreemapProps {

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

@@ -2,10 +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 {
-	updateMyPassword,
-	useUpdateMyUserV2,
-} from 'api/generated/services/users';
+import { useUpdateMyUserV2 } from 'api/generated/services/users';
+import changeMyPassword from 'api/v1/factor_password/changeMyPassword';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check, FileTerminal, MailIcon, UserIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
@@ -55,9 +53,10 @@ function UserInfo(): JSX.Element {
 		try {
 			setIsLoading(true);
 
-			await updateMyPassword({
+			await changeMyPassword({
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
+				userId: user.id,
 			});
 			notifications.success({
 				message: t('success', {

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -19,14 +18,14 @@ import { Atom, Terminal } from 'lucide-react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { EQueryType } from 'types/common/dashboard';
 
-import ClickHouseQueryContainer from './QueryBuilder/ClickHouse';
+import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
 import PromQLQueryContainer from './QueryBuilder/promQL';
 
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
-	queryRangeKey,
 	isLoadingQueries,
+	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -179,7 +178,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							queryRangeKey={queryRangeKey}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</span>
 				}
@@ -191,8 +190,8 @@ function QuerySection({
 
 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	queryRangeKey?: QueryKey;
-	isLoadingQueries?: boolean;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -1,14 +1,12 @@
-import { memo, useEffect } from 'react';
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 
 import { WidgetGraphProps } from '../types';
 import ExplorerColumnsRenderer from './ExplorerColumnsRenderer';
@@ -34,21 +32,22 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 
-	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
 	const queryRangeKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedInterval,
-			requestData,
-			minTime,
-			maxTime,
-		],
-		[globalSelectedInterval, requestData, minTime, maxTime],
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTime,
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				requestData,
+			),
+		[selectedTime, requestData],
 	);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
@@ -75,8 +74,8 @@ function LeftContainer({
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
-					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
+					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={selectedDashboard?.id}

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import cx from 'classnames';
 import {
@@ -12,14 +10,23 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 import './RunQueryBtn.scss';
-interface RunQueryBtnProps {
+
+type RunQueryBtnProps = {
 	className?: string;
 	label?: string;
-	isLoadingQueries?: boolean;
-	handleCancelQuery?: () => void;
-	onStageRunQuery?: () => void;
-	queryRangeKey?: QueryKey;
-}
+	disabled?: boolean;
+} & (
+	| {
+			onStageRunQuery: () => void;
+			handleCancelQuery: () => void;
+			isLoadingQueries: boolean;
+	  }
+	| {
+			onStageRunQuery?: never;
+			handleCancelQuery?: never;
+			isLoadingQueries?: never;
+	  }
+);
 
 function RunQueryBtn({
 	className,
@@ -27,33 +34,17 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	queryRangeKey,
+	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const queryClient = useQueryClient();
-	const isKeyFetchingCount = useIsFetching(
-		queryRangeKey as QueryKey | undefined,
-	);
-	const isLoading =
-		typeof isLoadingQueries === 'boolean'
-			? isLoadingQueries
-			: isKeyFetchingCount > 0;
-
-	const onCancel = useCallback(() => {
-		if (handleCancelQuery) {
-			return handleCancelQuery();
-		}
-		if (queryRangeKey) {
-			queryClient.cancelQueries(queryRangeKey);
-		}
-	}, [handleCancelQuery, queryClient, queryRangeKey]);
+	const isLoading = isLoadingQueries ?? false;
 
 	return isLoading ? (
 		<Button
 			type="default"
 			icon={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn periscope-btn danger', className)}
-			onClick={onCancel}
+			onClick={handleCancelQuery}
 		>
 			Cancel
 		</Button>
@@ -61,7 +52,7 @@ function RunQueryBtn({
 		<Button
 			type="primary"
 			className={cx('run-query-btn periscope-btn primary', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

frontend/src/container/QueryBuilder/components/RunQueryBtn/__test__/RunQueryBtn.test.tsx

@@ -1,18 +1,8 @@
-// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import RunQueryBtn from '../RunQueryBtn';
 
-jest.mock('react-query', () => {
-	const actual = jest.requireActual('react-query');
-	return {
-		...actual,
-		useIsFetching: jest.fn(),
-		useQueryClient: jest.fn(),
-	};
-});
-import { useIsFetching, useQueryClient } from 'react-query';
-
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -26,79 +16,60 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		(useQueryClient as jest.Mock).mockReturnValue({
-			cancelQueries: jest.fn(),
-		});
 	});
 
-	test('uses isLoadingQueries prop over useIsFetching', () => {
-		// Simulate fetching but prop forces not loading
-		(useIsFetching as jest.Mock).mockReturnValue(1);
+	test('renders run state and triggers on click', async () => {
+		const user = userEvent.setup();
 		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
-		// Should show "Run Query" (not cancel)
-		const runBtn = screen.getByRole('button', { name: /run query/i });
-		expect(runBtn).toBeInTheDocument();
-		expect(runBtn).toBeEnabled();
-	});
-
-	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
-
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
-
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancelBtn);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-		expect(cancelQueries).not.toHaveBeenCalled();
-	});
-
-	test('renders run state and triggers on click', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries={false}
+			/>,
+		);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		fireEvent.click(btn);
+		await user.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});
 
-	test('disabled when onStageRunQuery is undefined', () => {
-		render(<RunQueryBtn />);
-		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
-	});
-
-	test('shows cancel state and calls handleCancelQuery', () => {
+	test('shows cancel state and calls handleCancelQuery', async () => {
+		const user = userEvent.setup();
+		const onRun = jest.fn();
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries
+			/>,
+		);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancel);
+		await user.click(cancel);
 		expect(onCancel).toHaveBeenCalledTimes(1);
 	});
 
-	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(1);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+	test('disabled when disabled prop is true', () => {
+		render(<RunQueryBtn disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});
 
-		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
-		render(<RunQueryBtn queryRangeKey={queryKey} />);
-
-		// Button switches to cancel state
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		expect(cancelBtn).toBeInTheDocument();
-
-		// Clicking cancel calls cancelQueries with the key
-		fireEvent.click(cancelBtn);
-		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
+	test('disabled when no props provided', () => {
+		render(<RunQueryBtn />);
+		expect(
+			screen.getByRole('button', { name: /run query/i }),
+		).toBeInTheDocument();
 	});
 
 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -111,7 +82,11 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -121,8 +96,14 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+				label="Stage & Run Query"
+			/>,
+		);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();

frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx

@@ -1,5 +1,4 @@
-import { MutableRefObject, useEffect } from 'react';
-import { useQueryClient } from 'react-query';
+import { useEffect } from 'react';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 
@@ -9,23 +8,19 @@ import './ToolbarActions.styles.scss';
 
 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries?: boolean;
-	listQueryKeyRef?: MutableRefObject<any>;
-	chartQueryKeyRef?: MutableRefObject<any>;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	showLiveLogs?: boolean;
 }
 
 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	listQueryKeyRef,
-	chartQueryKeyRef,
+	handleCancelQuery,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
-	const queryClient = useQueryClient();
-
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -42,20 +37,11 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn />
+				<RunQueryBtn disabled />
 			</div>
 		);
 	}
 
-	const handleCancelQuery = (): void => {
-		if (listQueryKeyRef?.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		if (chartQueryKeyRef?.current) {
-			queryClient.cancelQueries(chartQueryKeyRef.current);
-		}
-	};
-
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -68,8 +54,5 @@ export default function RightToolbarActions({
 }
 
 RightToolbarActions.defaultProps = {
-	isLoadingQueries: false,
-	listQueryKeyRef: null,
-	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -92,7 +92,12 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
+				<RightToolbarActions
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={false}
+					handleCancelQuery={jest.fn()}
+				/>
+				,
 			</MockQueryClientProvider>,
 		);
 

frontend/src/container/SideNav/config.ts

@@ -46,7 +46,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACES_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE_DETAIL]: [QueryParams.resourceAttributes],
-	[ROUTES.TRACE_DETAIL_OLD]: [QueryParams.resourceAttributes],
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -23,6 +23,7 @@
 
 	&-empty-content {
 		height: 100%;
+		border: 1px solid var(--bg-slate-500);
 		border-top: none;
 		display: flex;
 		flex-direction: column;

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -143,7 +143,6 @@ export const routesToSkip = [
 	ROUTES.SETTINGS,
 	ROUTES.LIST_ALL_ALERT,
 	ROUTES.TRACE_DETAIL,
-	ROUTES.TRACE_DETAIL_OLD,
 	ROUTES.ALL_CHANNELS,
 	ROUTES.USAGE_EXPLORER,
 	ROUTES.GET_STARTED,

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -132,6 +132,10 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+
 			let status: number | undefined;
 
 			if (error instanceof APIError) {

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -1,22 +1,17 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import { toast } from '@signozhq/sonner';
+import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
-
-// Accepts both V2 (spanId) and V3 (span_id) span shapes
-// TODO: Remove V2 (spanId) support when phasing out V2
-interface SpanLike {
-	spanId?: string;
-	span_id?: string;
-}
+import { Span } from 'types/api/trace/getTraceV2';
 
 export const useCopySpanLink = (
-	span?: SpanLike,
+	span?: Span,
 ): { onSpanCopy: MouseEventHandler<HTMLElement> } => {
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
 
 	const onSpanCopy: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
@@ -29,20 +24,18 @@ export const useCopySpanLink = (
 
 			urlQuery.delete('spanId');
 
-			const id = span.span_id || span.spanId;
-			if (id) {
-				urlQuery.set('spanId', id);
+			if (span.spanId) {
+				urlQuery.set('spanId', span?.spanId);
 			}
 
 			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
 
 			setCopy(link);
-			toast.success('Copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
+			notifications.success({
+				message: 'Copied to clipboard',
 			});
 		},
-		[span, urlQuery, pathname, setCopy],
+		[span, urlQuery, pathname, setCopy, notifications],
 	);
 
 	return {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -16,7 +16,7 @@ const useGetTraceFlamegraph = (
 		queryKey: [
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
-			// props.selectedSpanId,
+			props.selectedSpanId,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/hooks/trace/useGetTraceV3.tsx

@@ -1,29 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-import getTraceV3 from 'api/trace/getTraceV3';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-} from 'types/api/trace/getTraceV3';
-
-const useGetTraceV3 = (props: GetTraceV3PayloadProps): UseTraceV3 =>
-	useQuery({
-		queryFn: () => getTraceV3(props),
-		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V3_WATERFALL,
-			props.traceId,
-			props.selectedSpanId,
-			props.isSelectedSpanIDUnCollapsed,
-		],
-		enabled: !!props.traceId,
-		keepPreviousData: true,
-		refetchOnWindowFocus: false,
-	});
-
-type UseTraceV3 = UseQueryResult<
-	SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse,
-	unknown
->;
-
-export default useGetTraceV3;

frontend/src/lib/uPlotLib/utils/generateColor.ts

@@ -7,23 +7,6 @@ export function hashFn(str: string): number {
 	return hash >>> 0;
 }
 
-export function colorToRgb(color: string): string {
-	// Handle hex colors
-	const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-	if (hexMatch) {
-		return `${parseInt(hexMatch[1], 16)}, ${parseInt(
-			hexMatch[2],
-			16,
-		)}, ${parseInt(hexMatch[3], 16)}`;
-	}
-	// Handle rgb() colors
-	const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(color);
-	if (rgbMatch) {
-		return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
-	}
-	return '136, 136, 136';
-}
-
 export function generateColor(
 	key: string,
 	colorMap: Record<string, string>,

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -569,12 +569,8 @@ describe('TooltipPlugin', () => {
 				}),
 			);
 
-			const resizeCall = addSpy.mock.calls.find(
-				([type]) => type === ('resize' as keyof WindowEventMap),
-			);
-			const scrollCall = addSpy.mock.calls.find(
-				([type]) => type === ('scroll' as keyof WindowEventMap),
-			);
+			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
+			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
 
 			expect(resizeCall).toBeDefined();
 			expect(scrollCall).toBeDefined();

frontend/src/mocks-server/handlers.ts

@@ -191,6 +191,17 @@ export const handlers = [
 			}),
 		),
 	),
+	rest.post('http://localhost/api/v1/changePassword', (_, res, ctx) =>
+		res(
+			ctx.status(403),
+			ctx.json({
+				status: 'error',
+				errorType: 'forbidden',
+				error: 'invalid credentials',
+			}),
+		),
+	),
+
 	rest.get(
 		'http://localhost/api/v3/autocomplete/aggregate_attributes',
 		(req, res, ctx) =>

frontend/src/pages/AlertDetails/hooks.tsx

@@ -431,7 +431,7 @@ export const useAlertRuleDuplicate = ({
 
 	const params = useUrlQuery();
 
-	const { refetch } = useQuery(REACT_QUERY_KEY.GET_ALL_ALLERTS, {
+	const { refetch } = useQuery(REACT_QUERY_KEY.GET_ALL_ALERTS, {
 		queryFn: getAll,
 		cacheTime: 0,
 	});

frontend/src/pages/AllErrors/QueryStateContext.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface AllErrorsQueryState {
+	isFetching: boolean;
+	setIsFetching: (isFetching: boolean) => void;
+}
+
+export const useAllErrorsQueryState = create<AllErrorsQueryState>((set) => ({
+	isFetching: false,
+	setIsFetching: (isFetching): void => {
+		set({ isFetching });
+	},
+}));

frontend/src/pages/AllErrors/index.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { FilterOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -11,6 +12,7 @@ import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
 import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
 import Toolbar from 'container/Toolbar/Toolbar';
@@ -19,12 +21,19 @@ import history from 'lib/history';
 import { isNull } from 'lodash-es';
 
 import { routes } from './config';
+import { useAllErrorsQueryState } from './QueryStateContext';
 
 import './AllErrors.styles.scss';
 
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+
+	const isLoadingQueries = useAllErrorsQueryState((s) => s.isFetching);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -77,7 +86,11 @@ function AllErrors(): JSX.Element {
 							}
 							rightActions={
 								<div className="right-toolbar-actions-container">
-									<RightToolbarActions onStageRunQuery={handleRunQuery} />
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
 									<HeaderRightSection
 										enableAnnouncements={false}
 										enableShare

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -75,6 +76,16 @@ function LogsExplorer(): JSX.Element {
 
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 
+	const queryClient = useQueryClient();
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+	}, [queryClient]);
+
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
 	const handleChangeSelectedView = useCallback(
@@ -297,9 +308,8 @@ function LogsExplorer(): JSX.Element {
 							rightActions={
 								<RightToolbarActions
 									onStageRunQuery={(): void => handleRunQuery()}
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
 									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
 									showLiveLogs={showLiveLogs}
 								/>
 							}

frontend/src/pages/TraceDetailV3Page/index.tsx

@@ -1,5 +0,0 @@
-import TraceDetailsV3 from '../TraceDetailsV3';
-
-export default function TraceDetailV3Page(): JSX.Element {
-	return <TraceDetailsV3 />;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss

@@ -1,96 +0,0 @@
-.analytics-panel {
-	&__body {
-		padding: 12px 6px;
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-		overflow: hidden;
-		background: var(--l1-background);
-
-		// TabsRoot — last direct child div
-		> div:last-child {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-			overflow: hidden;
-		}
-
-		[role='tablist'] {
-			flex-shrink: 0;
-		}
-	}
-
-	&__tabs-scroll {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	&__list {
-		display: grid;
-		grid-template-columns: auto auto 1fr;
-		gap: 4px 8px;
-		padding: 8px 0;
-		align-items: center;
-	}
-
-	&__dot {
-		width: 8px;
-		height: 8px;
-		border-radius: 2px;
-	}
-
-	&__service-name {
-		font-size: 13px;
-		color: var(--l1-foreground);
-		word-break: break-word;
-	}
-
-	&__bar-cell {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	&__bar {
-		flex: 1;
-		height: 6px;
-		background: var(--l3-background);
-		border-radius: 3px;
-		min-width: 40px;
-
-		&--small {
-			max-width: 80px;
-			flex: 0 0 80px;
-		}
-	}
-
-	&__bar-fill {
-		height: 100%;
-		border-radius: 3px;
-	}
-
-	&__value {
-		flex-shrink: 0;
-		text-align: right;
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-
-		&--wide {
-			min-width: 55px;
-		}
-
-		&--narrow {
-			min-width: 25px;
-		}
-	}
-
-	// Tabs root
-	[class*='tabs__list-wrapper'] {
-		padding-left: 0 !important;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -1,185 +0,0 @@
-import { useMemo } from 'react';
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@signozhq/ui';
-import { DetailsHeader } from 'components/DetailsPanel';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-
-import './AnalyticsPanel.styles.scss';
-
-interface AnalyticsPanelProps {
-	isOpen: boolean;
-	onClose: () => void;
-	serviceExecTime?: Record<string, number>;
-	traceStartTime?: number;
-	traceEndTime?: number;
-	// TODO: Re-enable when backend provides per-service span counts
-	// spans?: Span[];
-}
-
-const PANEL_WIDTH = 350;
-const PANEL_MARGIN_RIGHT = 100;
-const PANEL_MARGIN_TOP = 50;
-const PANEL_MARGIN_BOTTOM = 50;
-
-function AnalyticsPanel({
-	isOpen,
-	onClose,
-	serviceExecTime = {},
-	traceStartTime = 0,
-	traceEndTime = 0,
-}: AnalyticsPanelProps): JSX.Element | null {
-	const spread = traceEndTime - traceStartTime;
-
-	const execTimeRows = useMemo(() => {
-		if (spread <= 0) {
-			return [];
-		}
-		return Object.entries(serviceExecTime)
-			.map(([service, duration]) => ({
-				service,
-				percentage: (duration * 100) / spread,
-				color: generateColor(service, themeColors.traceDetailColorsV3),
-			}))
-			.sort((a, b) => b.percentage - a.percentage);
-	}, [serviceExecTime, spread]);
-
-	// const spanCountRows = useMemo(() => {
-	// 	const counts: Record<string, number> = {};
-	// 	for (const span of spans) {
-	// 		const name = span.serviceName || 'unknown';
-	// 		counts[name] = (counts[name] || 0) + 1;
-	// 	}
-	// 	return Object.entries(counts)
-	// 		.map(([service, count]) => ({
-	// 			service,
-	// 			count,
-	// 			color: generateColor(service, themeColors.traceDetailColorsV3),
-	// 		}))
-	// 		.sort((a, b) => b.count - a.count);
-	// }, [spans]);
-
-	// const maxSpanCount = spanCountRows[0]?.count || 1;
-
-	if (!isOpen) {
-		return null;
-	}
-
-	return (
-		<FloatingPanel
-			isOpen
-			className="analytics-panel"
-			width={PANEL_WIDTH}
-			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
-			defaultPosition={{
-				x: window.innerWidth - PANEL_WIDTH - PANEL_MARGIN_RIGHT,
-				y: PANEL_MARGIN_TOP,
-			}}
-			enableResizing={{
-				top: true,
-				bottom: true,
-				left: false,
-				right: false,
-				topLeft: false,
-				topRight: false,
-				bottomLeft: false,
-				bottomRight: false,
-			}}
-		>
-			<DetailsHeader
-				title="Analytics"
-				onClose={onClose}
-				className="floating-panel__drag-handle"
-			/>
-
-			<div className="analytics-panel__body">
-				<TabsRoot defaultValue="exec-time">
-					<TabsList variant="secondary">
-						<TabsTrigger value="exec-time" variant="secondary">
-							% exec time
-						</TabsTrigger>
-						{/* TODO: Enable when backend provides per-service span counts
-						<TabsTrigger value="spans" variant="secondary">
-							Spans
-						</TabsTrigger>
-						*/}
-					</TabsList>
-
-					<div className="analytics-panel__tabs-scroll">
-						<TabsContent value="exec-time">
-							<div className="analytics-panel__list">
-								{execTimeRows.map((row) => (
-									<>
-										<div
-											key={`${row.service}-dot`}
-											className="analytics-panel__dot"
-											style={{ backgroundColor: row.color }}
-										/>
-										<span
-											key={`${row.service}-name`}
-											className="analytics-panel__service-name"
-										>
-											{row.service}
-										</span>
-										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
-											<div className="analytics-panel__bar">
-												<div
-													className="analytics-panel__bar-fill"
-													style={{
-														width: `${Math.min(row.percentage, 100)}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className="analytics-panel__value analytics-panel__value--wide">
-												{row.percentage.toFixed(2)}%
-											</span>
-										</div>
-									</>
-								))}
-							</div>
-						</TabsContent>
-
-						{/* TODO: Enable when backend provides per-service span counts
-						<TabsContent value="spans">
-							<div className="analytics-panel__list">
-								{spanCountRows.map((row) => (
-									<>
-										<div
-											key={`${row.service}-dot`}
-											className="analytics-panel__dot"
-											style={{ backgroundColor: row.color }}
-										/>
-										<span
-											key={`${row.service}-name`}
-											className="analytics-panel__service-name"
-										>
-											{row.service}
-										</span>
-										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
-											<div className="analytics-panel__bar">
-												<div
-													className="analytics-panel__bar-fill"
-													style={{
-														width: `${(row.count / maxSpanCount) * 100}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className="analytics-panel__value analytics-panel__value--narrow">
-												{row.count}
-											</span>
-										</div>
-									</>
-								))}
-							</div>
-						</TabsContent>
-						*/}
-					</div>
-				</TabsRoot>
-			</div>
-		</FloatingPanel>
-	);
-}
-
-export default AnalyticsPanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss

@@ -1,34 +0,0 @@
-.linked-spans {
-	position: relative;
-
-	&__toggle {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-		color: inherit;
-		font: inherit;
-	}
-
-	&__label {
-		white-space: nowrap;
-	}
-
-	&__chevron {
-		transition: transform 0.15s ease;
-
-		&--open {
-			transform: rotate(90deg);
-		}
-	}
-
-	&__list {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 12px 0;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.tsx

@@ -1,118 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Badge } from '@signozhq/badge';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import ROUTES from 'constants/routes';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-
-import './LinkedSpans.styles.scss';
-
-interface SpanReference {
-	traceId: string;
-	spanId: string;
-	refType: string;
-}
-
-interface LinkedSpansProps {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	references: any;
-}
-
-interface LinkedSpansState {
-	linkedSpans: SpanReference[];
-	count: number;
-	isOpen: boolean;
-	toggleOpen: () => void;
-}
-
-export function useLinkedSpans(references: any): LinkedSpansState {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const linkedSpans: SpanReference[] = useMemo(
-		() =>
-			(references || []).filter(
-				(ref: SpanReference) => ref.refType !== 'CHILD_OF',
-			),
-		[references],
-	);
-
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	return {
-		linkedSpans,
-		count: linkedSpans.length,
-		isOpen,
-		toggleOpen,
-	};
-}
-
-export function LinkedSpansToggle({
-	count,
-	isOpen,
-	toggleOpen,
-}: {
-	count: number;
-	isOpen: boolean;
-	toggleOpen: () => void;
-}): JSX.Element {
-	if (count === 0) {
-		return <span className="linked-spans__label">0 linked spans</span>;
-	}
-
-	return (
-		<button type="button" className="linked-spans__toggle" onClick={toggleOpen}>
-			<span className="linked-spans__label">
-				{count} linked span{count !== 1 ? 's' : ''}
-			</span>
-			{isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-		</button>
-	);
-}
-
-export function LinkedSpansPanel({
-	linkedSpans,
-	isOpen,
-}: {
-	linkedSpans: SpanReference[];
-	isOpen: boolean;
-}): JSX.Element | null {
-	const getLink = useCallback(
-		(item: SpanReference): string =>
-			`${ROUTES.TRACE}/${item.traceId}?spanId=${item.spanId}`,
-		[],
-	);
-
-	if (!isOpen || linkedSpans.length === 0) {
-		return null;
-	}
-
-	return (
-		<div className="linked-spans__list">
-			{linkedSpans.map((item) => (
-				<KeyValueLabel
-					key={item.spanId}
-					badgeKey="Linked Span ID"
-					badgeValue={
-						<Link to={getLink(item)}>
-							<Badge color="vanilla">{item.spanId}</Badge>
-						</Link>
-					}
-					direction="column"
-				/>
-			))}
-		</div>
-	);
-}
-
-function LinkedSpans({ references }: LinkedSpansProps): JSX.Element {
-	const { linkedSpans, count, isOpen, toggleOpen } = useLinkedSpans(references);
-
-	return (
-		<div className="linked-spans">
-			<LinkedSpansToggle count={count} isOpen={isOpen} toggleOpen={toggleOpen} />
-			<LinkedSpansPanel linkedSpans={linkedSpans} isOpen={isOpen} />
-		</div>
-	);
-}
-
-export default LinkedSpans;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.styles.scss

@@ -1,150 +0,0 @@
-.span-details-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	&__header-nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-
-	&__body {
-		padding: 12px;
-		display: flex;
-		flex-wrap: wrap;
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-		background: var(--l1-background);
-		font-size: 14px;
-		gap: 16px;
-
-		.data-viewer {
-			min-height: 500px;
-		}
-	}
-
-	&__details-section {
-		flex: 1 1 375px;
-		min-width: 0;
-		max-height: 100%;
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	&__tabs-section {
-		flex: 1 1 375px;
-		min-width: 0;
-		max-height: 100%;
-		min-height: 400px;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-
-		// TabsRoot — direct child of tabs-section
-		> div {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-			overflow: hidden;
-		}
-
-		[role='tablist'] {
-			flex-shrink: 0;
-		}
-
-		[class*='tabs__list-wrapper'] {
-			padding-left: 0 !important;
-		}
-	}
-
-	&__tabs-scroll {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-
-		[role='tabpanel'] {
-			padding: 0;
-		}
-	}
-
-	&__span-row {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 8px;
-		justify-content: space-between;
-	}
-
-	&__span-info {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 4px 16px;
-		padding: 8px 0;
-	}
-
-	&__span-info-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		white-space: nowrap;
-	}
-
-	&__highlighted-options {
-		padding: 8px 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0;
-
-		.key-value-label {
-			flex: 1 1 50%;
-			min-width: 120px;
-			overflow: hidden;
-		}
-	}
-
-	&__service-dot {
-		display: inline-block;
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--bg-forest-500);
-	}
-
-	&__trace-id {
-		color: var(--accent-primary);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		display: block;
-	}
-
-	&__key-attributes {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px 0;
-
-		&-label {
-			font-size: var(--font-size-xs);
-			font-weight: var(--font-weight-medium);
-			color: var(--l2-foreground);
-			text-transform: uppercase;
-			letter-spacing: 0.48px;
-			line-height: var(--line-height-20);
-		}
-
-		&-chips {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 6px;
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,611 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/button';
-import {
-	Bookmark,
-	CalendarClock,
-	ChartBar,
-	ChartColumnBig,
-	Copy,
-	Dock,
-	Link2,
-	Logs,
-	PanelBottom,
-	ScrollText,
-	Timer,
-} from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@signozhq/ui';
-import { Skeleton, Tooltip } from 'antd';
-import { DetailsHeader, DetailsPanelDrawer } from 'components/DetailsPanel';
-import { HeaderAction } from 'components/DetailsPanel/DetailsHeader/DetailsHeader';
-import { DetailsPanelState } from 'components/DetailsPanel/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
-import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
-import Events from 'container/SpanDetailsDrawer/Events/Events';
-import SpanLogs from 'container/SpanDetailsDrawer/SpanLogs/SpanLogs';
-import { useSpanContextLogs } from 'container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs';
-import dayjs from 'dayjs';
-import { getSpanAttribute, hasInfraMetadata } from 'pages/TraceDetailsV3/utils';
-import { ActionMenu, ActionMenuItem } from 'periscope/components/ActionMenu';
-import { DataViewer } from 'periscope/components/DataViewer';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { getLeafKeyFromPath } from 'periscope/components/PrettyView/utils';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-
-import AnalyticsPanel from './AnalyticsPanel/AnalyticsPanel';
-import { HIGHLIGHTED_OPTIONS } from './config';
-import {
-	KEY_ATTRIBUTE_KEYS,
-	SpanDetailVariant,
-	VISIBLE_ACTIONS,
-} from './constants';
-import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
-import {
-	LinkedSpansPanel,
-	LinkedSpansToggle,
-	useLinkedSpans,
-} from './LinkedSpans/LinkedSpans';
-import SpanPercentileBadge from './SpanPercentile/SpanPercentileBadge';
-import SpanPercentilePanel from './SpanPercentile/SpanPercentilePanel';
-import useSpanPercentile from './SpanPercentile/useSpanPercentile';
-
-import './SpanDetailsPanel.styles.scss';
-
-interface SpanDetailsPanelProps {
-	panelState: DetailsPanelState;
-	selectedSpan: SpanV3 | undefined;
-	variant?: SpanDetailVariant;
-	onVariantChange?: (variant: SpanDetailVariant) => void;
-	traceStartTime?: number;
-	traceEndTime?: number;
-	serviceExecTime?: Record<string, number>;
-}
-
-function SpanDetailsContent({
-	selectedSpan,
-	traceStartTime,
-	traceEndTime,
-}: {
-	selectedSpan: SpanV3;
-	traceStartTime?: number;
-	traceEndTime?: number;
-}): JSX.Element {
-	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-	const spanAttributeActions = useSpanAttributeActions();
-	const percentile = useSpanPercentile(selectedSpan);
-	const linkedSpans = useLinkedSpans((selectedSpan as any).references);
-
-	// Map span attribute actions to PrettyView actions format.
-	// Use the last key in fieldKeyPath (the actual attribute key), not the full display path.
-	const prettyViewCustomActions = useMemo(
-		() =>
-			spanAttributeActions.map((action) => ({
-				key: action.value,
-				label: action.label,
-				icon: action.icon,
-				shouldHide: action.shouldHide,
-				onClick: (context: {
-					fieldKey: string;
-					fieldKeyPath: (string | number)[];
-					fieldValue: unknown;
-				}): void => {
-					const leafKey = getLeafKeyFromPath(context.fieldKeyPath, context.fieldKey);
-					action.callback({
-						key: leafKey,
-						value: String(context.fieldValue),
-					});
-				},
-			})),
-		[spanAttributeActions],
-	);
-
-	const [, setCopy] = useCopyToClipboard();
-
-	// Build dropdown menu for key attributes (copy + span actions, no pin)
-	const buildKeyAttrMenu = useCallback(
-		(key: string, value: string): ActionMenuItem[] => {
-			const items: ActionMenuItem[] = [
-				{
-					key: 'copy',
-					label: 'Copy',
-					icon: <Copy size={12} />,
-					onClick: (): void => {
-						setCopy(value);
-						toast.success('Copied to clipboard', {
-							richColors: true,
-							position: 'top-right',
-						});
-					},
-				},
-			];
-			spanAttributeActions.forEach((action) => {
-				if (action.shouldHide && action.shouldHide(key)) {
-					return;
-				}
-				items.push({
-					key: action.value,
-					label: action.label,
-					icon: action.icon,
-					onClick: (): void => {
-						action.callback({ key, value });
-					},
-				});
-			});
-			return items;
-		},
-		[spanAttributeActions, setCopy],
-	);
-
-	const {
-		logs,
-		isLoading: isLogsLoading,
-		isError: isLogsError,
-		isFetching: isLogsFetching,
-		isLogSpanRelated,
-		hasTraceIdLogs,
-	} = useSpanContextLogs({
-		traceId: selectedSpan.trace_id,
-		spanId: selectedSpan.span_id,
-		timeRange: {
-			startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-			endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-		},
-		isDrawerOpen: true,
-	});
-
-	const infraMetadata = useMemo(() => {
-		if (!hasInfraMetadata(selectedSpan)) {
-			return null;
-		}
-		return {
-			clusterName: getSpanAttribute(selectedSpan, 'k8s.cluster.name') || '',
-			podName: getSpanAttribute(selectedSpan, 'k8s.pod.name') || '',
-			nodeName: getSpanAttribute(selectedSpan, 'k8s.node.name') || '',
-			hostName: getSpanAttribute(selectedSpan, 'host.name') || '',
-			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
-		};
-	}, [selectedSpan]);
-
-	const handleExplorerPageRedirect = useCallback((): void => {
-		const startTimeMs = (traceStartTime || 0) - FIVE_MINUTES_IN_MS;
-		const endTimeMs = (traceEndTime || 0) + FIVE_MINUTES_IN_MS;
-
-		const traceIdFilter = {
-			op: 'AND',
-			items: [
-				{
-					id: 'trace-id-filter',
-					key: {
-						key: 'trace_id',
-						id: 'trace-id-key',
-						dataType: 'string' as const,
-						isColumn: true,
-						type: '',
-						isJSON: false,
-					} as BaseAutocompleteData,
-					op: '=',
-					value: selectedSpan.trace_id,
-				},
-			],
-		};
-
-		const compositeQuery = {
-			...initialQueryState,
-			queryType: 'builder',
-			builder: {
-				...initialQueryState.builder,
-				queryData: [
-					{
-						...initialQueryBuilderFormValuesMap.logs,
-						aggregateOperator: LogsAggregatorOperator.NOOP,
-						filters: traceIdFilter,
-					},
-				],
-			},
-		};
-
-		const searchParams = new URLSearchParams();
-		searchParams.set(QueryParams.compositeQuery, JSON.stringify(compositeQuery));
-		searchParams.set(QueryParams.startTime, startTimeMs.toString());
-		searchParams.set(QueryParams.endTime, endTimeMs.toString());
-
-		window.open(
-			`${window.location.origin}${
-				ROUTES.LOGS_EXPLORER
-			}?${searchParams.toString()}`,
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, [selectedSpan.trace_id, traceStartTime, traceEndTime]);
-
-	const emptyLogsStateConfig = useMemo(
-		() => ({
-			...getEmptyLogsListConfig(() => {}),
-			showClearFiltersButton: false,
-		}),
-		[],
-	);
-
-	const keyAttributes = useMemo(() => {
-		const keys = KEY_ATTRIBUTE_KEYS.traces || [];
-
-		const allAttrs: Record<string, string> = {};
-		Object.entries(selectedSpan.resource || {}).forEach(([k, v]) => {
-			allAttrs[k] = String(v);
-		});
-		Object.entries(selectedSpan.attributes || {}).forEach(([k, v]) => {
-			allAttrs[k] = String(v);
-		});
-		const span = (selectedSpan as unknown) as Record<string, unknown>;
-		keys.forEach((key) => {
-			if (!(key in allAttrs) && span[key] != null && span[key] !== '') {
-				allAttrs[key] = String(span[key]);
-			}
-		});
-
-		return keys
-			.filter((key) => allAttrs[key])
-			.map((key) => ({ key, value: allAttrs[key] }));
-	}, [selectedSpan]);
-
-	return (
-		<div className="span-details-panel__body">
-			<div className="span-details-panel__details-section">
-				<div className="span-details-panel__span-row">
-					<KeyValueLabel
-						badgeKey="Span name"
-						badgeValue={selectedSpan.name}
-						maxCharacters={50}
-					/>
-					<SpanPercentileBadge
-						loading={percentile.loading}
-						percentileValue={percentile.percentileValue}
-						duration={percentile.duration}
-						spanPercentileData={percentile.spanPercentileData}
-						isOpen={percentile.isOpen}
-						toggleOpen={percentile.toggleOpen}
-					/>
-				</div>
-
-				<SpanPercentilePanel selectedSpan={selectedSpan} percentile={percentile} />
-
-				{/* Span info: exec time + start time */}
-				<div className="span-details-panel__span-info">
-					<div className="span-details-panel__span-info-item">
-						<Timer size={14} />
-						<span>
-							{getYAxisFormattedValue(`${selectedSpan.duration_nano / 1000000}`, 'ms')}
-							{traceStartTime && traceEndTime && traceEndTime > traceStartTime && (
-								<>
-									{' — '}
-									<strong>
-										{(
-											(selectedSpan.duration_nano * 100) /
-											((traceEndTime - traceStartTime) * 1e6)
-										).toFixed(2)}
-										%
-									</strong>
-									{' of total exec time'}
-								</>
-							)}
-						</span>
-					</div>
-					<div className="span-details-panel__span-info-item">
-						<CalendarClock size={14} />
-						<span>
-							{dayjs(selectedSpan.timestamp).format('HH:mm:ss — MMM D, YYYY')}
-						</span>
-					</div>
-					<div className="span-details-panel__span-info-item">
-						<Link2 size={14} />
-						<LinkedSpansToggle
-							count={linkedSpans.count}
-							isOpen={linkedSpans.isOpen}
-							toggleOpen={linkedSpans.toggleOpen}
-						/>
-					</div>
-				</div>
-
-				<LinkedSpansPanel
-					linkedSpans={linkedSpans.linkedSpans}
-					isOpen={linkedSpans.isOpen}
-				/>
-
-				{/* Step 6: HighlightedOptions */}
-				<div className="span-details-panel__highlighted-options">
-					{HIGHLIGHTED_OPTIONS.map((option) => {
-						const rendered = option.render(selectedSpan);
-						if (!rendered) {
-							return null;
-						}
-						return (
-							<KeyValueLabel
-								key={option.key}
-								badgeKey={option.label}
-								badgeValue={rendered}
-								direction="column"
-							/>
-						);
-					})}
-				</div>
-
-				{/* Step 7: KeyAttributes */}
-				{keyAttributes.length > 0 && (
-					<div className="span-details-panel__key-attributes">
-						<div className="span-details-panel__key-attributes-label">
-							KEY ATTRIBUTES
-						</div>
-						<div className="span-details-panel__key-attributes-chips">
-							{keyAttributes.map(({ key, value }) => (
-								<ActionMenu
-									key={key}
-									items={buildKeyAttrMenu(key, value)}
-									trigger={['click']}
-									placement="bottomRight"
-								>
-									<div>
-										<KeyValueLabel badgeKey={key} badgeValue={value} />
-									</div>
-								</ActionMenu>
-							))}
-						</div>
-					</div>
-				)}
-
-				{/* Step 8: MiniTraceContext */}
-			</div>
-
-			<div className="span-details-panel__tabs-section">
-				{/* Step 9: ContentTabs */}
-				<TabsRoot defaultValue="overview">
-					<TabsList variant="secondary">
-						<TabsTrigger value="overview" variant="secondary">
-							<Bookmark size={14} /> Overview
-						</TabsTrigger>
-						<TabsTrigger value="events" variant="secondary">
-							<ScrollText size={14} /> Events ({selectedSpan.events?.length || 0})
-						</TabsTrigger>
-						<TabsTrigger value="logs" variant="secondary">
-							<Logs size={14} /> Logs
-						</TabsTrigger>
-						{infraMetadata && (
-							<TabsTrigger value="metrics" variant="secondary">
-								<ChartColumnBig size={14} /> Metrics
-							</TabsTrigger>
-						)}
-					</TabsList>
-
-					<div className="span-details-panel__tabs-scroll">
-						<TabsContent value="overview">
-							<DataViewer
-								data={selectedSpan}
-								drawerKey="trace-details"
-								prettyViewProps={{
-									showPinned: true,
-									actions: prettyViewCustomActions,
-									visibleActions: VISIBLE_ACTIONS,
-								}}
-							/>
-						</TabsContent>
-						<TabsContent value="events">
-							{/* V2 Events component expects span.event (singular), V3 has span.events (plural) */}
-							<Events
-								span={{ ...selectedSpan, event: selectedSpan.events } as any}
-								startTime={traceStartTime || 0}
-								isSearchVisible
-							/>
-						</TabsContent>
-						<TabsContent value="logs">
-							<SpanLogs
-								traceId={selectedSpan.trace_id}
-								spanId={selectedSpan.span_id}
-								timeRange={{
-									startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-									endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-								}}
-								logs={logs}
-								isLoading={isLogsLoading}
-								isError={isLogsError}
-								isFetching={isLogsFetching}
-								isLogSpanRelated={isLogSpanRelated}
-								handleExplorerPageRedirect={handleExplorerPageRedirect}
-								emptyStateConfig={!hasTraceIdLogs ? emptyLogsStateConfig : undefined}
-							/>
-						</TabsContent>
-						{infraMetadata && (
-							<TabsContent value="metrics">
-								<InfraMetrics
-									clusterName={infraMetadata.clusterName}
-									podName={infraMetadata.podName}
-									nodeName={infraMetadata.nodeName}
-									hostName={infraMetadata.hostName}
-									timestamp={infraMetadata.spanTimestamp}
-									dataSource={DataSource.TRACES}
-								/>
-							</TabsContent>
-						)}
-					</div>
-				</TabsRoot>
-			</div>
-		</div>
-	);
-}
-
-function SpanDetailsPanel({
-	panelState,
-	selectedSpan,
-	variant = SpanDetailVariant.DIALOG,
-	onVariantChange,
-	traceStartTime,
-	traceEndTime,
-	serviceExecTime,
-}: SpanDetailsPanelProps): JSX.Element {
-	const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
-
-	const headerActions = useMemo((): HeaderAction[] => {
-		const actions: HeaderAction[] = [
-			{
-				key: 'analytics',
-				component: (
-					<Button
-						variant="ghost"
-						size="sm"
-						color="secondary"
-						prefixIcon={<ChartBar size={14} />}
-						onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
-					>
-						Analytics
-					</Button>
-				),
-			},
-			// TODO: Add back when driven through separate config for different pages
-			// {
-			// 	key: 'view-full-trace',
-			// 	component: (
-			// 		<Button variant="ghost" size="sm" color="secondary" prefixIcon={<ExternalLink size={14} />} onClick={noop}>
-			// 			View full trace
-			// 		</Button>
-			// 	),
-			// },
-			// TODO: Add back when used in trace explorer page
-			// {
-			// 	key: 'nav',
-			// 	component: (
-			// 		<div className="span-details-panel__header-nav">
-			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronUp size={14} /></Button>
-			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronDown size={14} /></Button>
-			// 		</div>
-			// 	),
-			// },
-		];
-
-		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
-			actions.push({
-				key: 'dock-toggle',
-				component: (
-					<Tooltip title={isDocked ? 'Open as floating panel' : 'Dock on the side'}>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							onClick={(): void =>
-								onVariantChange(
-									isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-								)
-							}
-						>
-							{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-						</Button>
-					</Tooltip>
-				),
-			});
-		}
-
-		return actions;
-	}, [variant, onVariantChange]);
-
-	const PANEL_WIDTH = 500;
-	const PANEL_MARGIN_RIGHT = 20;
-	const PANEL_MARGIN_TOP = 25;
-	const PANEL_MARGIN_BOTTOM = 25;
-
-	const content = (
-		<>
-			<DetailsHeader
-				title="Span details"
-				onClose={panelState.close}
-				actions={headerActions}
-				className={
-					variant === SpanDetailVariant.DIALOG ? 'floating-panel__drag-handle' : ''
-				}
-			/>
-			{selectedSpan ? (
-				<SpanDetailsContent
-					selectedSpan={selectedSpan}
-					traceStartTime={traceStartTime}
-					traceEndTime={traceEndTime}
-				/>
-			) : (
-				<div className="span-details-panel__body">
-					<Skeleton active paragraph={{ rows: 6 }} title={{ width: '60%' }} />
-				</div>
-			)}
-		</>
-	);
-
-	const analyticsPanel = (
-		<AnalyticsPanel
-			isOpen={isAnalyticsOpen}
-			onClose={(): void => setIsAnalyticsOpen(false)}
-			serviceExecTime={serviceExecTime}
-			traceStartTime={traceStartTime}
-			traceEndTime={traceEndTime}
-		/>
-	);
-
-	if (variant === SpanDetailVariant.DOCKED) {
-		return (
-			<>
-				<div className="span-details-panel">{content}</div>
-				{analyticsPanel}
-			</>
-		);
-	}
-
-	if (variant === SpanDetailVariant.DRAWER) {
-		return (
-			<>
-				<DetailsPanelDrawer
-					isOpen={panelState.isOpen}
-					onClose={panelState.close}
-					className="span-details-panel"
-				>
-					{content}
-				</DetailsPanelDrawer>
-				{analyticsPanel}
-			</>
-		);
-	}
-
-	return (
-		<>
-			<FloatingPanel
-				isOpen={panelState.isOpen}
-				className="span-details-panel"
-				width={PANEL_WIDTH}
-				height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
-				defaultPosition={{
-					x: window.innerWidth - PANEL_WIDTH - PANEL_MARGIN_RIGHT,
-					y: PANEL_MARGIN_TOP,
-				}}
-				enableResizing={{
-					top: true,
-					right: true,
-					bottom: true,
-					left: true,
-					topRight: false,
-					bottomRight: false,
-					bottomLeft: false,
-					topLeft: false,
-				}}
-			>
-				{content}
-			</FloatingPanel>
-			{analyticsPanel}
-		</>
-	);
-}
-
-export default SpanDetailsPanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.styles.scss

@@ -1,257 +0,0 @@
-// Badge — wraps a KeyValueLabel, clickable to toggle panel
-.span-percentile-badge {
-	cursor: pointer;
-
-	// Override key color for the percentile value (p99)
-	.key-value-label__key {
-		color: var(--text-sakura-400, #f56c87);
-	}
-
-	&__loader {
-		display: inline-flex;
-		align-items: center;
-		padding: 2px 4px;
-	}
-
-	&__value {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	&__icon {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-}
-
-// Panel — collapsible, renders below the row
-.span-percentile-panel {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-	backdrop-filter: blur(20px);
-	margin: 8px 16px;
-
-	&__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 8px 12px;
-		border-bottom: 1px solid var(--l1-border);
-
-		&-text {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			cursor: pointer;
-		}
-
-		&-icon {
-			color: var(--l2-foreground);
-		}
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px;
-
-		&-title {
-			font-size: var(--font-size-sm);
-			line-height: var(--line-height-20);
-		}
-
-		&-highlight {
-			color: var(--text-sakura-400, #f56c87);
-		}
-
-		&-loader {
-			display: inline-flex;
-			align-items: flex-end;
-			margin: 0 4px;
-			line-height: 18px;
-		}
-	}
-
-	&__timerange {
-		width: 100%;
-
-		&-select {
-			width: 100%;
-			margin-top: 8px;
-			margin-bottom: 16px;
-
-			.ant-select-selector {
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				color: var(--l1-foreground);
-				font-size: 12px;
-				height: 32px;
-			}
-		}
-	}
-
-	&__table {
-		&-header {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: 8px;
-
-			&-text {
-				color: var(--l1-foreground);
-				font-size: 11px;
-				font-weight: 500;
-				line-height: 20px;
-				text-transform: uppercase;
-			}
-		}
-
-		&-rows {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-		}
-
-		&-skeleton {
-			.ant-skeleton-title {
-				width: 100% !important;
-				margin-top: 0 !important;
-			}
-
-			.ant-skeleton-paragraph {
-				margin-top: 8px;
-
-				& > li + li {
-					margin-top: 10px;
-					width: 100% !important;
-				}
-			}
-		}
-
-		&-row {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: 12px;
-			padding: 0 4px;
-
-			&-key {
-				flex: 0 0 auto;
-				color: var(--l1-foreground);
-				font-size: 12px;
-				font-weight: 500;
-				line-height: 20px;
-			}
-
-			&-value {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 20px;
-			}
-
-			&-dash {
-				flex: 1;
-				height: 0;
-				margin: 0 8px;
-				border-top: 1px solid transparent;
-				border-image: repeating-linear-gradient(
-						to right,
-						var(--l1-border) 0,
-						var(--l1-border) 10px,
-						transparent 10px,
-						transparent 20px
-					)
-					1 stretch;
-			}
-
-			&--current {
-				border-radius: 2px;
-				background: rgba(78, 116, 248, 0.2);
-
-				.span-percentile-panel__table-row-key {
-					color: var(--text-robin-300);
-				}
-
-				.span-percentile-panel__table-row-dash {
-					border-image: repeating-linear-gradient(
-							to right,
-							#abbdff 0,
-							#abbdff 10px,
-							transparent 10px,
-							transparent 20px
-						)
-						1 stretch;
-				}
-
-				.span-percentile-panel__table-row-value {
-					color: var(--text-robin-400);
-				}
-			}
-		}
-	}
-
-	&__resource-selector {
-		overflow: hidden;
-		width: calc(100% + 16px);
-		position: absolute;
-		top: 32px;
-		left: -8px;
-		z-index: 1000;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-
-		&-header {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		&-input {
-			border-radius: 0;
-			border: none !important;
-			box-shadow: none !important;
-			height: 36px;
-		}
-
-		&-items {
-			height: 200px;
-			overflow-y: auto;
-
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-				height: 0.3rem;
-			}
-
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background: var(--l3-background);
-			}
-		}
-
-		&-item {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			padding: 8px 12px;
-
-			&-value {
-				color: var(--l1-foreground);
-				font-size: 13px;
-				line-height: 20px;
-			}
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.tsx

@@ -1,519 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import { Checkbox, Input, Select, Skeleton, Tooltip, Typography } from 'antd';
-import getSpanPercentiles from 'api/trace/getSpanPercentiles';
-import getUserPreference from 'api/v1/user/preferences/name/get';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import dayjs from 'dayjs';
-import useClickOutside from 'hooks/useClickOutside';
-import { Check, ChevronDown, ChevronUp, Loader2, PlusIcon } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import './SpanPercentile.styles.scss';
-
-interface IResourceAttribute {
-	key: string;
-	value: string;
-	isSelected: boolean;
-}
-
-const DEFAULT_RESOURCE_ATTRIBUTES = {
-	serviceName: 'service.name',
-	name: 'name',
-};
-
-const timerangeOptions = [1, 2, 4, 6, 12, 24].map((hours) => ({
-	label: `${hours}h`,
-	value: hours,
-}));
-
-interface SpanPercentileProps {
-	selectedSpan: SpanV3;
-}
-
-function SpanPercentile({ selectedSpan }: SpanPercentileProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedTimeRange, setSelectedTimeRange] = useState(1);
-	const [
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-	] = useState('');
-	const [spanPercentileData, setSpanPercentileData] = useState<{
-		percentile: number;
-		description: string;
-		percentiles: Record<string, number>;
-	} | null>(null);
-	const [
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-	] = useState(false);
-	const [selectedResourceAttributes, setSelectedResourceAttributes] = useState<
-		Record<string, string>
-	>({});
-	const [spanResourceAttributes, updateSpanResourceAttributes] = useState<
-		IResourceAttribute[]
-	>([]);
-	const [initialWaitCompleted, setInitialWaitCompleted] = useState(false);
-	const [shouldFetchData, setShouldFetchData] = useState(false);
-	const [shouldUpdateUserPreference, setShouldUpdateUserPreference] = useState(
-		false,
-	);
-
-	const resourceAttributesSelectorRef = useRef<HTMLDivElement | null>(null);
-
-	useClickOutside({
-		ref: resourceAttributesSelectorRef,
-		onClickOutside: () => {
-			if (resourceAttributesSelectorRef.current) {
-				setShowResourceAttributesSelector(false);
-			}
-		},
-		eventType: 'mousedown',
-	});
-
-	const endTime = useMemo(
-		() => Math.floor(Number(selectedSpan.timestamp) / 1000) * 1000,
-		[selectedSpan.timestamp],
-	);
-
-	const startTime = useMemo(
-		() =>
-			dayjs(selectedSpan.timestamp)
-				.subtract(Number(selectedTimeRange), 'hour')
-				.unix() * 1000,
-		[selectedSpan.timestamp, selectedTimeRange],
-	);
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
-
-	const {
-		data: userSelectedResourceAttributes,
-		isError: isErrorUserSelectedResourceAttributes,
-	} = useQuery({
-		queryFn: () =>
-			getUserPreference({
-				name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			}),
-		queryKey: [
-			'getUserPreferenceByPreferenceName',
-			USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			selectedSpan.span_id,
-		],
-		enabled: selectedSpan.attributes !== undefined,
-	});
-
-	const {
-		isLoading: isLoadingData,
-		isFetching: isFetchingData,
-		data,
-		refetch: refetchData,
-		isError: isErrorData,
-	} = useQuery({
-		queryFn: () =>
-			getSpanPercentiles({
-				start: startTime || 0,
-				end: endTime || 0,
-				spanDuration: selectedSpan.duration_nano || 0,
-				serviceName: selectedSpan['service.name'] || '',
-				name: selectedSpan.name || '',
-				resourceAttributes: selectedResourceAttributes,
-			}),
-		queryKey: [
-			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
-			selectedSpan.span_id,
-			startTime,
-			endTime,
-		],
-		enabled:
-			shouldFetchData && !showResourceAttributesSelector && initialWaitCompleted,
-		onSuccess: (response) => {
-			if (response.httpStatusCode !== 200) {
-				return;
-			}
-			if (shouldUpdateUserPreference) {
-				updateUserPreferenceMutation({
-					name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-					value: [...Object.keys(selectedResourceAttributes)],
-				});
-				setShouldUpdateUserPreference(false);
-			}
-		},
-		keepPreviousData: false,
-		cacheTime: 0,
-	});
-
-	// 2-second delay before initial fetch
-	useEffect(() => {
-		setSpanPercentileData(null);
-		setIsOpen(false);
-		setInitialWaitCompleted(false);
-
-		const timer = setTimeout(() => {
-			setInitialWaitCompleted(true);
-		}, 2000);
-
-		return (): void => {
-			clearTimeout(timer);
-		};
-	}, [selectedSpan.span_id]);
-
-	useEffect(() => {
-		if (data?.httpStatusCode !== 200) {
-			setSpanPercentileData(null);
-			return;
-		}
-		if (data) {
-			setSpanPercentileData({
-				percentile: data.data?.position?.percentile || 0,
-				description: data.data?.position?.description || '',
-				percentiles: data.data?.percentiles || {},
-			});
-		}
-	}, [data]);
-
-	// Merge resource + attributes to get all span attributes (equivalent to V2 tagMap).
-	// Stringify all values since the backend expects map[string]string.
-	const allSpanAttributes = useMemo(() => {
-		const merged: Record<string, string> = {};
-		for (const [k, v] of Object.entries(selectedSpan.resource || {})) {
-			merged[k] = String(v);
-		}
-		for (const [k, v] of Object.entries(selectedSpan.attributes || {})) {
-			merged[k] = String(v);
-		}
-		return merged;
-	}, [selectedSpan.resource, selectedSpan.attributes]);
-
-	useEffect(() => {
-		if (userSelectedResourceAttributes) {
-			const userList = (userSelectedResourceAttributes?.data
-				?.value as string[]).map((attr: string) => attr);
-			let selectedMap: Record<string, string> = {};
-			userList.forEach((attr: string) => {
-				selectedMap[attr] = allSpanAttributes[attr] || '';
-			});
-			selectedMap = Object.fromEntries(
-				Object.entries(selectedMap).filter(
-					([key]) => allSpanAttributes[key] !== undefined,
-				),
-			);
-
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name ||
-						(key in selectedMap &&
-							selectedMap[key] !== '' &&
-							selectedMap[key] !== undefined),
-				}),
-			);
-
-			const selected = resourceAttrs.filter((a) => a.isSelected);
-			const unselected = resourceAttrs.filter((a) => !a.isSelected);
-			updateSpanResourceAttributes([...selected, ...unselected]);
-			setSelectedResourceAttributes(selectedMap);
-			setShouldFetchData(true);
-		}
-
-		if (isErrorUserSelectedResourceAttributes) {
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name,
-				}),
-			);
-			updateSpanResourceAttributes(resourceAttrs);
-			setShouldFetchData(true);
-		}
-	}, [
-		userSelectedResourceAttributes,
-		isErrorUserSelectedResourceAttributes,
-		allSpanAttributes,
-	]);
-
-	const handleResourceAttributeChange = useCallback(
-		(key: string, value: string, isSelected: boolean): void => {
-			updateSpanResourceAttributes((prev) =>
-				prev.map((attr) => (attr.key === key ? { ...attr, isSelected } : attr)),
-			);
-
-			const newSelected = { ...selectedResourceAttributes };
-			if (isSelected) {
-				newSelected[key] = value;
-			} else {
-				delete newSelected[key];
-			}
-			setSelectedResourceAttributes(newSelected);
-			setShouldFetchData(true);
-			setShouldUpdateUserPreference(true);
-		},
-		[selectedResourceAttributes],
-	);
-
-	useEffect(() => {
-		if (
-			shouldFetchData &&
-			!showResourceAttributesSelector &&
-			initialWaitCompleted
-		) {
-			refetchData();
-			setShouldFetchData(false);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [shouldFetchData, showResourceAttributesSelector, initialWaitCompleted]);
-
-	const loading = isLoadingData || isFetchingData;
-	const percentileValue = Math.floor(spanPercentileData?.percentile || 0);
-
-	const tooltipText = useMemo(
-		() => (
-			<div className="span-percentile__tooltip-text">
-				<Typography.Text>
-					This span duration is{' '}
-					<span className="span-percentile__tooltip-highlight">
-						p{percentileValue}
-					</span>{' '}
-					out of the distribution for this resource evaluated for {selectedTimeRange}{' '}
-					hour(s) since the span start time.
-				</Typography.Text>
-				<br />
-				<br />
-				<Typography.Text className="span-percentile__tooltip-link">
-					Click to learn more
-				</Typography.Text>
-			</div>
-		),
-		[percentileValue, selectedTimeRange],
-	);
-
-	return (
-		<div className="span-percentile">
-			{/* Badge */}
-			{loading && (
-				<div className="span-percentile__loader">
-					<Loader2 size={16} className="animate-spin" />
-				</div>
-			)}
-
-			{!loading && spanPercentileData && (
-				<Tooltip
-					title={isOpen ? '' : tooltipText}
-					placement="bottomRight"
-					overlayClassName="span-percentile__tooltip"
-					arrow={false}
-				>
-					<div
-						className={`span-percentile__badge ${
-							isOpen ? 'span-percentile__badge--open' : ''
-						}`}
-					>
-						<Typography.Text
-							className="span-percentile__badge-text"
-							onClick={(): void => setIsOpen((prev) => !prev)}
-						>
-							<span>p{percentileValue}</span>
-							{isOpen ? (
-								<ChevronUp size={16} className="span-percentile__badge-icon" />
-							) : (
-								<ChevronDown size={16} className="span-percentile__badge-icon" />
-							)}
-						</Typography.Text>
-					</div>
-				</Tooltip>
-			)}
-
-			{/* Collapsible panel */}
-			<AnimatePresence initial={false}>
-				{isOpen && !isErrorData && (
-					<motion.div
-						initial={{ height: 0, opacity: 0 }}
-						animate={{ height: 'auto', opacity: 1 }}
-						exit={{ height: 0, opacity: 0 }}
-						key="span-percentile-panel"
-					>
-						<div className="span-percentile__panel">
-							<div className="span-percentile__panel-header">
-								<Typography.Text
-									className="span-percentile__panel-header-text"
-									onClick={(): void => setIsOpen((prev) => !prev)}
-								>
-									<ChevronDown size={16} /> Span Percentile
-								</Typography.Text>
-
-								{showResourceAttributesSelector ? (
-									<Check
-										size={16}
-										className="cursor-pointer span-percentile__panel-header-icon"
-										onClick={(): void => setShowResourceAttributesSelector(false)}
-									/>
-								) : (
-									<PlusIcon
-										size={16}
-										className="cursor-pointer span-percentile__panel-header-icon"
-										onClick={(): void => setShowResourceAttributesSelector(true)}
-									/>
-								)}
-							</div>
-
-							{showResourceAttributesSelector && (
-								<div
-									className="span-percentile__resource-selector"
-									ref={resourceAttributesSelectorRef}
-								>
-									<div className="span-percentile__resource-selector-header">
-										<Input
-											placeholder="Search resource attributes"
-											className="span-percentile__resource-selector-input"
-											value={resourceAttributesSearchQuery}
-											onChange={(e): void =>
-												setResourceAttributesSearchQuery(e.target.value as string)
-											}
-										/>
-									</div>
-									<div className="span-percentile__resource-selector-items">
-										{spanResourceAttributes
-											.filter((attr) =>
-												attr.key
-													.toLowerCase()
-													.includes(resourceAttributesSearchQuery.toLowerCase()),
-											)
-											.map((attr) => (
-												<div
-													className="span-percentile__resource-selector-item"
-													key={attr.key}
-												>
-													<Checkbox
-														checked={attr.isSelected}
-														onChange={(e): void => {
-															handleResourceAttributeChange(
-																attr.key,
-																attr.value,
-																e.target.checked,
-															);
-														}}
-														disabled={
-															attr.key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-															attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
-														}
-													>
-														<div className="span-percentile__resource-selector-item-value">
-															{attr.key}
-														</div>
-													</Checkbox>
-												</div>
-											))}
-									</div>
-								</div>
-							)}
-
-							<div className="span-percentile__content">
-								<Typography.Text className="span-percentile__content-title">
-									This span duration is{' '}
-									{!loading && spanPercentileData ? (
-										<span className="span-percentile__content-highlight">
-											p{Math.floor(spanPercentileData.percentile || 0)}
-										</span>
-									) : (
-										<span className="span-percentile__content-loader">
-											<Loader2 size={12} className="animate-spin" />
-										</span>
-									)}{' '}
-									out of the distribution for this resource evaluated for{' '}
-									{selectedTimeRange} hour(s) since the span start time.
-								</Typography.Text>
-
-								<div className="span-percentile__timerange">
-									<Select
-										labelInValue
-										placeholder="Select timerange"
-										className="span-percentile__timerange-select"
-										value={{
-											label: `${selectedTimeRange}h : ${dayjs(selectedSpan.timestamp)
-												.subtract(selectedTimeRange, 'hour')
-												.format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)} - ${dayjs(
-												selectedSpan.timestamp,
-											).format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)}`,
-											value: selectedTimeRange,
-										}}
-										onChange={(value): void => {
-											setShouldFetchData(true);
-											setSelectedTimeRange(Number(value.value));
-										}}
-										options={timerangeOptions}
-									/>
-								</div>
-
-								<div className="span-percentile__table">
-									<div className="span-percentile__table-header">
-										<Typography.Text className="span-percentile__table-header-text">
-											Percentile
-										</Typography.Text>
-										<Typography.Text className="span-percentile__table-header-text">
-											Duration
-										</Typography.Text>
-									</div>
-
-									<div className="span-percentile__table-rows">
-										{isLoadingData || isFetchingData ? (
-											<Skeleton
-												active
-												paragraph={{ rows: 3 }}
-												className="span-percentile__table-skeleton"
-											/>
-										) : (
-											<>
-												{Object.entries(spanPercentileData?.percentiles || {}).map(
-													([percentile, duration]) => (
-														<div className="span-percentile__table-row" key={percentile}>
-															<Typography.Text className="span-percentile__table-row-key">
-																{percentile}
-															</Typography.Text>
-															<div className="span-percentile__table-row-dash" />
-															<Typography.Text className="span-percentile__table-row-value">
-																{getYAxisFormattedValue(`${duration / 1000000}`, 'ms')}
-															</Typography.Text>
-														</div>
-													),
-												)}
-
-												<div className="span-percentile__table-row span-percentile__table-row--current">
-													<Typography.Text className="span-percentile__table-row-key">
-														p{Math.floor(spanPercentileData?.percentile || 0)}
-													</Typography.Text>
-													<div className="span-percentile__table-row-dash" />
-													<Typography.Text className="span-percentile__table-row-value">
-														(this span){' '}
-														{getYAxisFormattedValue(
-															`${selectedSpan.duration_nano / 1000000}`,
-															'ms',
-														)}
-													</Typography.Text>
-												</div>
-											</>
-										)}
-									</div>
-								</div>
-							</div>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	);
-}
-
-export default SpanPercentile;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.tsx

@@ -1,67 +0,0 @@
-import { ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-
-import { UseSpanPercentileReturn } from './useSpanPercentile';
-
-import './SpanPercentile.styles.scss';
-
-type SpanPercentileBadgeProps = Pick<
-	UseSpanPercentileReturn,
-	| 'loading'
-	| 'percentileValue'
-	| 'duration'
-	| 'spanPercentileData'
-	| 'isOpen'
-	| 'toggleOpen'
->;
-
-function SpanPercentileBadge({
-	loading,
-	percentileValue,
-	duration,
-	spanPercentileData,
-	isOpen,
-	toggleOpen,
-}: SpanPercentileBadgeProps): JSX.Element | null {
-	if (loading) {
-		return (
-			<div className="span-percentile-badge__loader">
-				<Loader2 size={14} className="animate-spin" />
-			</div>
-		);
-	}
-
-	if (!spanPercentileData) {
-		return null;
-	}
-
-	return (
-		<div
-			className="span-percentile-badge"
-			onClick={toggleOpen}
-			role="button"
-			tabIndex={0}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					toggleOpen();
-				}
-			}}
-		>
-			<KeyValueLabel
-				badgeKey={`p${percentileValue}`}
-				badgeValue={
-					<span className="span-percentile-badge__value">
-						{duration}
-						{isOpen ? (
-							<ChevronUp size={14} className="span-percentile-badge__icon" />
-						) : (
-							<ChevronDown size={14} className="span-percentile-badge__icon" />
-						)}
-					</span>
-				}
-			/>
-		</div>
-	);
-}
-
-export default SpanPercentileBadge;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,224 +0,0 @@
-import { Checkbox, Input, Select, Skeleton, Typography } from 'antd';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { Check, ChevronDown, Loader2, PlusIcon } from 'lucide-react';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import { UseSpanPercentileReturn } from './useSpanPercentile';
-
-import './SpanPercentile.styles.scss';
-
-const DEFAULT_RESOURCE_ATTRIBUTES = {
-	serviceName: 'service.name',
-	name: 'name',
-};
-
-const timerangeOptions = [1, 2, 4, 6, 12, 24].map((hours) => ({
-	label: `${hours}h`,
-	value: hours,
-}));
-
-interface SpanPercentilePanelProps {
-	selectedSpan: SpanV3;
-	percentile: UseSpanPercentileReturn;
-}
-
-function SpanPercentilePanel({
-	selectedSpan,
-	percentile,
-}: SpanPercentilePanelProps): JSX.Element | null {
-	const {
-		isOpen,
-		toggleOpen,
-		isError,
-		loading,
-		spanPercentileData,
-		selectedTimeRange,
-		setSelectedTimeRange,
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-		spanResourceAttributes,
-		handleResourceAttributeChange,
-		resourceAttributesSelectorRef,
-		isLoadingData,
-		isFetchingData,
-	} = percentile;
-
-	if (!isOpen || isError) {
-		return null;
-	}
-
-	return (
-		<div className="span-percentile-panel">
-			<div className="span-percentile-panel__header">
-				<Typography.Text
-					className="span-percentile-panel__header-text"
-					onClick={toggleOpen}
-				>
-					<ChevronDown size={16} /> Span Percentile
-				</Typography.Text>
-
-				{showResourceAttributesSelector ? (
-					<Check
-						size={16}
-						className="cursor-pointer span-percentile-panel__header-icon"
-						onClick={(): void => setShowResourceAttributesSelector(false)}
-					/>
-				) : (
-					<PlusIcon
-						size={16}
-						className="cursor-pointer span-percentile-panel__header-icon"
-						onClick={(): void => setShowResourceAttributesSelector(true)}
-					/>
-				)}
-			</div>
-
-			{showResourceAttributesSelector && (
-				<div
-					className="span-percentile-panel__resource-selector"
-					ref={resourceAttributesSelectorRef}
-				>
-					<div className="span-percentile-panel__resource-selector-header">
-						<Input
-							placeholder="Search resource attributes"
-							className="span-percentile-panel__resource-selector-input"
-							value={resourceAttributesSearchQuery}
-							onChange={(e): void =>
-								setResourceAttributesSearchQuery(e.target.value as string)
-							}
-						/>
-					</div>
-					<div className="span-percentile-panel__resource-selector-items">
-						{spanResourceAttributes
-							.filter((attr) =>
-								attr.key
-									.toLowerCase()
-									.includes(resourceAttributesSearchQuery.toLowerCase()),
-							)
-							.map((attr) => (
-								<div
-									className="span-percentile-panel__resource-selector-item"
-									key={attr.key}
-								>
-									<Checkbox
-										checked={attr.isSelected}
-										onChange={(e): void => {
-											handleResourceAttributeChange(
-												attr.key,
-												attr.value,
-												e.target.checked,
-											);
-										}}
-										disabled={
-											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
-										}
-									>
-										<div className="span-percentile-panel__resource-selector-item-value">
-											{attr.key}
-										</div>
-									</Checkbox>
-								</div>
-							))}
-					</div>
-				</div>
-			)}
-
-			<div className="span-percentile-panel__content">
-				<Typography.Text className="span-percentile-panel__content-title">
-					This span duration is{' '}
-					{!loading && spanPercentileData ? (
-						<span className="span-percentile-panel__content-highlight">
-							p{Math.floor(spanPercentileData.percentile || 0)}
-						</span>
-					) : (
-						<span className="span-percentile-panel__content-loader">
-							<Loader2 size={12} className="animate-spin" />
-						</span>
-					)}{' '}
-					out of the distribution for this resource evaluated for {selectedTimeRange}{' '}
-					hour(s) since the span start time.
-				</Typography.Text>
-
-				<div className="span-percentile-panel__timerange">
-					<Select
-						labelInValue
-						placeholder="Select timerange"
-						className="span-percentile-panel__timerange-select"
-						getPopupContainer={(trigger): HTMLElement =>
-							trigger.parentElement || document.body
-						}
-						value={{
-							label: `${selectedTimeRange}h : ${dayjs(selectedSpan.timestamp)
-								.subtract(selectedTimeRange, 'hour')
-								.format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)} - ${dayjs(
-								selectedSpan.timestamp,
-							).format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)}`,
-							value: selectedTimeRange,
-						}}
-						onChange={(value): void => {
-							setSelectedTimeRange(Number(value.value));
-						}}
-						options={timerangeOptions}
-					/>
-				</div>
-
-				<div className="span-percentile-panel__table">
-					<div className="span-percentile-panel__table-header">
-						<Typography.Text className="span-percentile-panel__table-header-text">
-							Percentile
-						</Typography.Text>
-						<Typography.Text className="span-percentile-panel__table-header-text">
-							Duration
-						</Typography.Text>
-					</div>
-
-					<div className="span-percentile-panel__table-rows">
-						{isLoadingData || isFetchingData ? (
-							<Skeleton
-								active
-								paragraph={{ rows: 3 }}
-								className="span-percentile-panel__table-skeleton"
-							/>
-						) : (
-							<>
-								{Object.entries(spanPercentileData?.percentiles || {}).map(
-									([pKey, pDuration]) => (
-										<div className="span-percentile-panel__table-row" key={pKey}>
-											<Typography.Text className="span-percentile-panel__table-row-key">
-												{pKey}
-											</Typography.Text>
-											<div className="span-percentile-panel__table-row-dash" />
-											<Typography.Text className="span-percentile-panel__table-row-value">
-												{getYAxisFormattedValue(`${pDuration / 1000000}`, 'ms')}
-											</Typography.Text>
-										</div>
-									),
-								)}
-
-								<div className="span-percentile-panel__table-row span-percentile-panel__table-row--current">
-									<Typography.Text className="span-percentile-panel__table-row-key">
-										p{Math.floor(spanPercentileData?.percentile || 0)}
-									</Typography.Text>
-									<div className="span-percentile-panel__table-row-dash" />
-									<Typography.Text className="span-percentile-panel__table-row-value">
-										(this span){' '}
-										{getYAxisFormattedValue(
-											`${selectedSpan.duration_nano / 1000000}`,
-											'ms',
-										)}
-									</Typography.Text>
-								</div>
-							</>
-						)}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default SpanPercentilePanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/useSpanPercentile.ts

@@ -1,331 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import getSpanPercentiles from 'api/trace/getSpanPercentiles';
-import getUserPreference from 'api/v1/user/preferences/name/get';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import dayjs from 'dayjs';
-import useClickOutside from 'hooks/useClickOutside';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-export interface IResourceAttribute {
-	key: string;
-	value: string;
-	isSelected: boolean;
-}
-
-const DEFAULT_RESOURCE_ATTRIBUTES = {
-	serviceName: 'service.name',
-	name: 'name',
-};
-
-export interface UseSpanPercentileReturn {
-	isOpen: boolean;
-	setIsOpen: (open: boolean) => void;
-	toggleOpen: () => void;
-	loading: boolean;
-	percentileValue: number;
-	duration: string;
-	spanPercentileData: {
-		percentile: number;
-		description: string;
-		percentiles: Record<string, number>;
-	} | null;
-	isError: boolean;
-	selectedTimeRange: number;
-	setSelectedTimeRange: (range: number) => void;
-	showResourceAttributesSelector: boolean;
-	setShowResourceAttributesSelector: (show: boolean) => void;
-	resourceAttributesSearchQuery: string;
-	setResourceAttributesSearchQuery: (query: string) => void;
-	spanResourceAttributes: IResourceAttribute[];
-	handleResourceAttributeChange: (
-		key: string,
-		value: string,
-		isSelected: boolean,
-	) => void;
-	resourceAttributesSelectorRef: React.MutableRefObject<HTMLDivElement | null>;
-	isLoadingData: boolean;
-	isFetchingData: boolean;
-}
-
-function useSpanPercentile(selectedSpan: SpanV3): UseSpanPercentileReturn {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedTimeRange, setSelectedTimeRange] = useState(1);
-	const [
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-	] = useState('');
-	const [spanPercentileData, setSpanPercentileData] = useState<{
-		percentile: number;
-		description: string;
-		percentiles: Record<string, number>;
-	} | null>(null);
-	const [
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-	] = useState(false);
-	const [selectedResourceAttributes, setSelectedResourceAttributes] = useState<
-		Record<string, string>
-	>({});
-	const [spanResourceAttributes, updateSpanResourceAttributes] = useState<
-		IResourceAttribute[]
-	>([]);
-	const [initialWaitCompleted, setInitialWaitCompleted] = useState(false);
-	const [shouldFetchData, setShouldFetchData] = useState(false);
-	const [shouldUpdateUserPreference, setShouldUpdateUserPreference] = useState(
-		false,
-	);
-
-	const resourceAttributesSelectorRef = useRef<HTMLDivElement | null>(null);
-
-	useClickOutside({
-		ref: resourceAttributesSelectorRef,
-		onClickOutside: () => {
-			if (resourceAttributesSelectorRef.current) {
-				setShowResourceAttributesSelector(false);
-			}
-		},
-		eventType: 'mousedown',
-	});
-
-	const endTime = useMemo(
-		() => Math.floor(Number(selectedSpan.timestamp) / 1000) * 1000,
-		[selectedSpan.timestamp],
-	);
-
-	const startTime = useMemo(
-		() =>
-			dayjs(selectedSpan.timestamp)
-				.subtract(Number(selectedTimeRange), 'hour')
-				.unix() * 1000,
-		[selectedSpan.timestamp, selectedTimeRange],
-	);
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
-
-	const {
-		data: userSelectedResourceAttributes,
-		isError: isErrorUserSelectedResourceAttributes,
-	} = useQuery({
-		queryFn: () =>
-			getUserPreference({
-				name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			}),
-		queryKey: [
-			'getUserPreferenceByPreferenceName',
-			USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			selectedSpan.span_id,
-		],
-		enabled: selectedSpan.attributes !== undefined,
-	});
-
-	const {
-		isLoading: isLoadingData,
-		isFetching: isFetchingData,
-		data,
-		refetch: refetchData,
-		isError: isErrorData,
-	} = useQuery({
-		queryFn: () =>
-			getSpanPercentiles({
-				start: startTime || 0,
-				end: endTime || 0,
-				spanDuration: selectedSpan.duration_nano || 0,
-				serviceName: selectedSpan['service.name'] || '',
-				name: selectedSpan.name || '',
-				resourceAttributes: selectedResourceAttributes,
-			}),
-		queryKey: [
-			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
-			selectedSpan.span_id,
-			startTime,
-			endTime,
-		],
-		enabled:
-			shouldFetchData && !showResourceAttributesSelector && initialWaitCompleted,
-		onSuccess: (response) => {
-			if (response.httpStatusCode !== 200) {
-				return;
-			}
-			if (shouldUpdateUserPreference) {
-				updateUserPreferenceMutation({
-					name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-					value: [...Object.keys(selectedResourceAttributes)],
-				});
-				setShouldUpdateUserPreference(false);
-			}
-		},
-		keepPreviousData: false,
-		cacheTime: 0,
-	});
-
-	// 2-second delay before initial fetch
-	useEffect(() => {
-		setSpanPercentileData(null);
-		setIsOpen(false);
-		setInitialWaitCompleted(false);
-
-		const timer = setTimeout(() => {
-			setInitialWaitCompleted(true);
-		}, 2000);
-
-		return (): void => {
-			clearTimeout(timer);
-		};
-	}, [selectedSpan.span_id]);
-
-	useEffect(() => {
-		if (data?.httpStatusCode !== 200) {
-			setSpanPercentileData(null);
-			return;
-		}
-		if (data) {
-			setSpanPercentileData({
-				percentile: data.data?.position?.percentile || 0,
-				description: data.data?.position?.description || '',
-				percentiles: data.data?.percentiles || {},
-			});
-		}
-	}, [data]);
-
-	// Merge resource + attributes to get all span attributes (equivalent to V2 tagMap).
-	// Stringify all values since the backend expects map[string]string.
-	const allSpanAttributes = useMemo(() => {
-		const merged: Record<string, string> = {};
-		for (const [k, v] of Object.entries(selectedSpan.resource || {})) {
-			merged[k] = String(v);
-		}
-		for (const [k, v] of Object.entries(selectedSpan.attributes || {})) {
-			merged[k] = String(v);
-		}
-		return merged;
-	}, [selectedSpan.resource, selectedSpan.attributes]);
-
-	useEffect(() => {
-		if (userSelectedResourceAttributes) {
-			const userList = (userSelectedResourceAttributes?.data
-				?.value as string[]).map((attr: string) => attr);
-			let selectedMap: Record<string, string> = {};
-			userList.forEach((attr: string) => {
-				selectedMap[attr] = allSpanAttributes[attr] || '';
-			});
-			selectedMap = Object.fromEntries(
-				Object.entries(selectedMap).filter(
-					([key]) => allSpanAttributes[key] !== undefined,
-				),
-			);
-
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name ||
-						(key in selectedMap &&
-							selectedMap[key] !== '' &&
-							selectedMap[key] !== undefined),
-				}),
-			);
-
-			const selected = resourceAttrs.filter((a) => a.isSelected);
-			const unselected = resourceAttrs.filter((a) => !a.isSelected);
-			updateSpanResourceAttributes([...selected, ...unselected]);
-			setSelectedResourceAttributes(selectedMap);
-			setShouldFetchData(true);
-		}
-
-		if (isErrorUserSelectedResourceAttributes) {
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name,
-				}),
-			);
-			updateSpanResourceAttributes(resourceAttrs);
-			setShouldFetchData(true);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		userSelectedResourceAttributes,
-		isErrorUserSelectedResourceAttributes,
-		allSpanAttributes,
-	]);
-
-	const handleResourceAttributeChange = useCallback(
-		(key: string, value: string, isSelected: boolean): void => {
-			updateSpanResourceAttributes((prev) =>
-				prev.map((attr) => (attr.key === key ? { ...attr, isSelected } : attr)),
-			);
-
-			const newSelected = { ...selectedResourceAttributes };
-			if (isSelected) {
-				newSelected[key] = value;
-			} else {
-				delete newSelected[key];
-			}
-			setSelectedResourceAttributes(newSelected);
-			setShouldFetchData(true);
-			setShouldUpdateUserPreference(true);
-		},
-		[selectedResourceAttributes],
-	);
-
-	useEffect(() => {
-		if (
-			shouldFetchData &&
-			!showResourceAttributesSelector &&
-			initialWaitCompleted
-		) {
-			refetchData();
-			setShouldFetchData(false);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [shouldFetchData, showResourceAttributesSelector, initialWaitCompleted]);
-
-	const loading = isLoadingData || isFetchingData;
-	const percentileValue = Math.floor(spanPercentileData?.percentile || 0);
-	const duration = getYAxisFormattedValue(
-		`${selectedSpan.duration_nano / 1000000}`,
-		'ms',
-	);
-
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	const handleTimeRangeChange = useCallback((range: number): void => {
-		setShouldFetchData(true);
-		setSelectedTimeRange(range);
-	}, []);
-
-	return {
-		isOpen,
-		setIsOpen,
-		toggleOpen,
-		loading,
-		percentileValue,
-		duration,
-		spanPercentileData,
-		isError: isErrorData,
-		selectedTimeRange,
-		setSelectedTimeRange: handleTimeRangeChange,
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-		spanResourceAttributes,
-		handleResourceAttributeChange,
-		resourceAttributesSelectorRef,
-		isLoadingData,
-		isFetchingData,
-	};
-}
-
-export default useSpanPercentile;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/config.tsx

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-import { Badge } from '@signozhq/badge';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-interface HighlightedOption {
-	key: string;
-	label: string;
-	render: (span: SpanV3) => ReactNode | null;
-}
-
-export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
-	{
-		key: 'service',
-		label: 'SERVICE',
-		render: (span): ReactNode | null =>
-			span['service.name'] ? (
-				<Badge color="vanilla">
-					<span className="span-details-panel__service-dot" />
-					{span['service.name']}
-				</Badge>
-			) : null,
-	},
-	{
-		key: 'statusCodeString',
-		label: 'STATUS CODE STRING',
-		render: (span): ReactNode | null =>
-			span.status_code_string ? (
-				<Badge color="vanilla">{span.status_code_string}</Badge>
-			) : null,
-	},
-	{
-		key: 'traceId',
-		label: 'TRACE ID',
-		render: (span): ReactNode | null =>
-			span.trace_id ? (
-				<Link
-					to={{
-						pathname: `/trace/${span.trace_id}`,
-						search: window.location.search,
-					}}
-					className="span-details-panel__trace-id"
-				>
-					{span.trace_id}
-				</Link>
-			) : null,
-	},
-	{
-		key: 'spanKind',
-		label: 'SPAN KIND',
-		render: (span): ReactNode | null =>
-			span.kind_string ? <Badge color="vanilla">{span.kind_string}</Badge> : null,
-	},
-];

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/constants.ts

@@ -1,45 +0,0 @@
-import { SPAN_ACTION } from './hooks/useSpanAttributeActions';
-
-// Action identifiers for built-in PrettyView actions (copy, pin)
-export const PRETTY_VIEW_ACTION = {
-	COPY: 'copy',
-	PIN: 'pin',
-} as const;
-
-// Which actions are visible per node type — drives the entire menu
-export const VISIBLE_ACTIONS = {
-	leaf: [
-		PRETTY_VIEW_ACTION.COPY,
-		PRETTY_VIEW_ACTION.PIN,
-		SPAN_ACTION.FILTER_IN,
-		SPAN_ACTION.FILTER_OUT,
-		SPAN_ACTION.GROUP_BY,
-	],
-	nested: [PRETTY_VIEW_ACTION.COPY],
-} as const;
-
-export enum SpanDetailVariant {
-	DRAWER = 'drawer',
-	DIALOG = 'dialog',
-	DOCKED = 'docked',
-}
-
-export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {
-	traces: [
-		'service.name',
-		'service.namespace',
-		'deployment.environment',
-		'timestamp',
-		'duration_nano',
-		'kind_string',
-		'status_code_string',
-		'http_method',
-		'http_url',
-		'http_host',
-		'db_name',
-		'db_operation',
-		'external_http_method',
-		'external_http_url',
-		'response_status_code',
-	],
-};

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/hooks/useSpanAttributeActions.ts

@@ -1,223 +0,0 @@
-import React, { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
-import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
-import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { PANEL_TYPES, QueryBuilderKeys } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useNotifications } from 'hooks/useNotifications';
-import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
-import { ArrowDownToDot, ArrowUpFromDot } from 'lucide-react';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
-
-export interface SpanAttributeAction {
-	label: string;
-	value: string;
-	icon?: React.ReactNode;
-	disabled?: boolean;
-	hidden?: boolean;
-	callback: (args: { key: string; value: string; dataType?: string }) => void;
-	/** Returns true if this action should be hidden for the given field key */
-	shouldHide: (key: string) => boolean;
-}
-
-// Keys that should NOT support filter/group-by actions.
-// These are system/internal/computed fields, not actual queryable attributes.
-export const NON_FILTERABLE_KEYS = new Set([
-	'datetime',
-	'duration',
-	'parent_span_id',
-	'has_children',
-	'has_sibling',
-	'sub_tree_node_count',
-	'flags',
-	'trace_state',
-	'timestamp',
-]);
-
-const shouldHideForKey = (key: string): boolean => NON_FILTERABLE_KEYS.has(key);
-
-// Action identifiers
-export const SPAN_ACTION = {
-	FILTER_IN: 'filter-in',
-	FILTER_OUT: 'filter-out',
-	GROUP_BY: 'group-by',
-} as const;
-
-export function useSpanAttributeActions(): SpanAttributeAction[] {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-	const queryClient = useQueryClient();
-	const { notifications } = useNotifications();
-
-	const getAutocompleteKey = useCallback(
-		async (fieldKey: string): Promise<BaseAutocompleteData> => {
-			const response = await queryClient.fetchQuery(
-				[QueryBuilderKeys.GET_AGGREGATE_KEYS, fieldKey],
-				async () =>
-					getAggregateKeys({
-						searchText: fieldKey,
-						aggregateOperator:
-							currentQuery.builder.queryData[0].aggregateOperator || '',
-						dataSource: DataSource.TRACES,
-						aggregateAttribute:
-							currentQuery.builder.queryData[0].aggregateAttribute?.key || '',
-					}),
-			);
-
-			return chooseAutocompleteFromCustomValue(
-				response.payload?.attributeKeys || [],
-				fieldKey,
-				DataTypes.String,
-			);
-		},
-		[queryClient, currentQuery.builder.queryData],
-	);
-
-	const handleFilter = useCallback(
-		async (
-			{ key, value }: { key: string; value: string },
-			operator: string,
-		): Promise<void> => {
-			try {
-				const autocompleteKey = await getAutocompleteKey(key);
-				const resolvedOperator = getOperatorValue(operator);
-
-				const nextQuery: Query = {
-					...currentQuery,
-					builder: {
-						...currentQuery.builder,
-						queryData: currentQuery.builder.queryData.map((item) => {
-							const cleanedFilters = (item.filters?.items || []).filter(
-								(f) => f.key?.key !== autocompleteKey.key,
-							);
-							const newFilters = [
-								...cleanedFilters,
-								{
-									id: uuid(),
-									key: autocompleteKey,
-									op: resolvedOperator,
-									value,
-								},
-							];
-							const converted = convertFiltersToExpressionWithExistingQuery(
-								{ items: newFilters, op: item.filters?.op || 'AND' },
-								item.filter?.expression || '',
-							);
-							return {
-								...item,
-								dataSource: DataSource.TRACES,
-								filters: converted.filters,
-								filter: converted.filter,
-							};
-						}),
-					},
-				};
-
-				redirectWithQueryBuilderData(
-					nextQuery,
-					{ panelTypes: PANEL_TYPES.LIST },
-					ROUTES.TRACES_EXPLORER,
-					undefined,
-					true,
-				);
-			} catch {
-				notifications.error({ message: SOMETHING_WENT_WRONG });
-			}
-		},
-		[
-			currentQuery,
-			getAutocompleteKey,
-			redirectWithQueryBuilderData,
-			notifications,
-		],
-	);
-
-	const handleFilterIn = useCallback(
-		(args: { key: string; value: string }): void => {
-			handleFilter(args, '=');
-		},
-		[handleFilter],
-	);
-
-	const handleFilterOut = useCallback(
-		(args: { key: string; value: string }): void => {
-			handleFilter(args, '!=');
-		},
-		[handleFilter],
-	);
-
-	const handleGroupBy = useCallback(
-		async ({ key }: { key: string }): Promise<void> => {
-			try {
-				const autocompleteKey = await getAutocompleteKey(key);
-
-				const nextQuery: Query = {
-					...currentQuery,
-					builder: {
-						...currentQuery.builder,
-						queryData: currentQuery.builder.queryData.map((item) => ({
-							...item,
-							dataSource: DataSource.TRACES,
-							groupBy: [...item.groupBy, autocompleteKey],
-						})),
-					},
-				};
-
-				redirectWithQueryBuilderData(
-					nextQuery,
-					{ panelTypes: PANEL_TYPES.TIME_SERIES },
-					ROUTES.TRACES_EXPLORER,
-					undefined,
-					true,
-				);
-			} catch {
-				notifications.error({ message: SOMETHING_WENT_WRONG });
-			}
-		},
-		[
-			currentQuery,
-			getAutocompleteKey,
-			redirectWithQueryBuilderData,
-			notifications,
-		],
-	);
-
-	return [
-		{
-			label: 'Filter for value',
-			value: SPAN_ACTION.FILTER_IN,
-			icon: React.createElement(ArrowDownToDot, {
-				size: 14,
-				style: { transform: 'rotate(90deg)' },
-			}),
-			callback: handleFilterIn,
-			shouldHide: shouldHideForKey,
-		},
-		{
-			label: 'Filter out value',
-			value: SPAN_ACTION.FILTER_OUT,
-			icon: React.createElement(ArrowUpFromDot, {
-				size: 14,
-				style: { transform: 'rotate(90deg)' },
-			}),
-			callback: handleFilterOut,
-			shouldHide: shouldHideForKey,
-		},
-		{
-			label: 'Group by attribute',
-			value: SPAN_ACTION.GROUP_BY,
-			icon: React.createElement(GroupByIcon),
-			callback: handleGroupBy,
-			shouldHide: shouldHideForKey,
-		},
-	];
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -1,60 +0,0 @@
-.event-tooltip-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-	max-width: 300px;
-
-	&__header {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 3px;
-		padding: 2px 6px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.7);
-		margin-bottom: 6px;
-	}
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 2px;
-		color: rgb(14, 165, 233);
-
-		&.error {
-			color: rgb(239, 68, 68);
-		}
-	}
-
-	&__time {
-		font-size: 11px;
-		opacity: 0.8;
-		margin-bottom: 4px;
-	}
-
-	&__divider {
-		border-top: 1px solid rgba(255, 255, 255, 0.1);
-		margin: 6px 0;
-	}
-
-	&__attributes {
-		font-size: 11px;
-	}
-
-	&__kv {
-		margin-bottom: 2px;
-		line-height: 1.4;
-		word-break: break-all;
-	}
-
-	&__key {
-		opacity: 0.6;
-	}
-
-	&__value {
-		opacity: 0.9;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx

@@ -1,49 +0,0 @@
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { Diamond } from 'lucide-react';
-import { toFixed } from 'utils/toFixed';
-
-import './EventTooltipContent.styles.scss';
-
-export interface EventTooltipContentProps {
-	eventName: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export function EventTooltipContent({
-	eventName,
-	timeOffsetMs,
-	isError,
-	attributeMap,
-}: EventTooltipContentProps): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
-
-	return (
-		<div className="event-tooltip-content">
-			<div className="event-tooltip-content__header">
-				<Diamond size={10} />
-				<span>EVENT DETAILS</span>
-			</div>
-			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
-				{eventName}
-			</div>
-			<div className="event-tooltip-content__time">
-				{toFixed(time, 2)} {timeUnitName} from start
-			</div>
-			{Object.keys(attributeMap).length > 0 && (
-				<>
-					<div className="event-tooltip-content__divider" />
-					<div className="event-tooltip-content__attributes">
-						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className="event-tooltip-content__kv">
-								<span className="event-tooltip-content__key">{key}:</span>{' '}
-								<span className="event-tooltip-content__value">{value}</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-		</div>
-	);
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss

@@ -1,28 +0,0 @@
-.span-hover-card-popover {
-	.ant-popover-inner {
-		background-color: rgba(30, 30, 30, 0.95);
-		padding: 8px 12px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-		border: none;
-	}
-
-	.ant-popover-inner-content {
-		padding: 0;
-	}
-}
-
-.span-hover-card-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 4px;
-	}
-
-	&__row {
-		line-height: 1.5;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -1,97 +0,0 @@
-import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface SpanTooltipContentProps {
-	spanName: string;
-	color: string;
-	hasError: boolean;
-	relativeStartMs: number;
-	durationMs: number;
-}
-
-export function SpanTooltipContent({
-	spanName,
-	color,
-	hasError,
-	relativeStartMs,
-	durationMs,
-}: SpanTooltipContentProps): JSX.Element {
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		durationMs,
-	);
-
-	return (
-		<div className="span-hover-card-content">
-			<div className="span-hover-card-content__name" style={{ color }}>
-				{spanName}
-			</div>
-			<div className="span-hover-card-content__row">
-				Status: {hasError ? 'error' : 'ok'}
-			</div>
-			<div className="span-hover-card-content__row">
-				Start: {toFixed(relativeStartMs, 2)} ms
-			</div>
-			<div className="span-hover-card-content__row">
-				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
-			</div>
-		</div>
-	);
-}
-
-interface SpanHoverCardProps {
-	span: SpanV3;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const durationMs = span.duration_nano / 1e6;
-	const relativeStartMs = span.timestamp - traceMetadata.startTime;
-
-	let color = generateColor(
-		span['service.name'],
-		themeColors.traceDetailColorsV3,
-	);
-	if (span.has_error) {
-		color = 'var(--bg-cherry-500)';
-	}
-
-	return (
-		<Popover
-			mouseEnterDelay={0.2}
-			content={
-				<SpanTooltipContent
-					spanName={span.name}
-					color={color}
-					hasError={span.has_error}
-					relativeStartMs={relativeStartMs}
-					durationMs={durationMs}
-				/>
-			}
-			trigger="hover"
-			rootClassName="span-hover-card-popover"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsFilter.styles.scss

@@ -1,39 +0,0 @@
-.trace-details-filter {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-
-	&__search {
-		flex: 1;
-		min-width: 0;
-	}
-
-	&__scope {
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		flex-shrink: 0;
-		white-space: nowrap;
-
-		.ant-typography {
-			font-size: 12px;
-			color: var(--l2-foreground);
-		}
-
-		.ant-btn {
-			padding: 2px 4px;
-			height: auto;
-		}
-	}
-
-	&__no-results {
-		font-size: 12px;
-		color: var(--l2-foreground);
-		white-space: nowrap;
-	}
-}