fix(uplotV2): tooltip list clips last row and over-scrolls (#11883)

The Virtuoso scroller height was set to min(totalListHeight, 300), but the
scroll viewport adds 8px top + 8px bottom padding that totalListHeight does
not account for. The box was therefore ~16px shorter than its content,
clipping the last row and showing a scrollbar even when every row would fit.

Add the viewport's vertical padding back into the computed height so it only
scrolls once content genuinely exceeds the max height.

conf/example.yaml

@@ -141,6 +141,10 @@ querier:
   flux_interval: 5m
   # The maximum number of concurrent queries for missing ranges.
   max_concurrent_queries: 4
+  # When filtering logs by trace_id, clamp the query window to the trace time
+  # range with padding to include slightly delayed log exports. Logs only; set
+  # to 0 to disable.
+  log_trace_id_window_padding: 5m
 
 ##################### TelemetryStore #####################
 telemetrystore:

docs/api/openapi.yml

@@ -2553,17 +2553,6 @@ components:
         url:
           type: string
       type: object
-    DashboardTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/VariableDisplay'
-        name:
-          type: string
-        value:
-          type: string
-      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2673,6 +2662,22 @@ components:
         updatedBy:
           type: string
       type: object
+    DashboardtypesDashboardPanelRef:
+      properties:
+        dashboardId:
+          type: string
+        dashboardName:
+          type: string
+        panelId:
+          type: string
+        panelName:
+          type: string
+      required:
+      - dashboardId
+      - dashboardName
+      - panelId
+      - panelName
+      type: object
     DashboardtypesDashboardSpec:
       properties:
         datasources:
@@ -2745,24 +2750,23 @@ components:
     DashboardtypesDatasourcePlugin:
       discriminator:
         mapping:
-          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
         propertyName: kind
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
       type: object
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
       type: string
-    DashboardtypesDatasourcePluginVariantStruct:
+    DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec:
       properties:
         kind:
           enum:
           - signoz/Datasource
           type: string
         spec:
-          nullable: true
-          type: object
+          $ref: '#/components/schemas/DashboardtypesSigNozDatasourceSpec'
       required:
       - kind
       - spec
@@ -2928,9 +2932,15 @@ components:
             type: string
           nullable: true
           type: object
+        mode:
+          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
+    DashboardtypesLegendMode:
+      enum:
+      - list
+      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2977,19 +2987,30 @@ components:
         customAllValue:
           type: string
         defaultValue:
-          $ref: '#/components/schemas/VariableDefaultValue'
+          $ref: '#/components/schemas/DashboardtypesVariableDefaultValue'
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
+          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
         sort:
-          nullable: true
-          type: string
+          $ref: '#/components/schemas/DashboardtypesListVariableSpecSort'
       required:
       - display
+      - name
       type: object
+    DashboardtypesListVariableSpecSort:
+      enum:
+      - none
+      - alphabetical-asc
+      - alphabetical-desc
+      - numerical-asc
+      - numerical-desc
+      - alphabetical-ci-asc
+      - alphabetical-ci-desc
+      type: string
     DashboardtypesListableDashboardForUserV2:
       properties:
         dashboards:
@@ -3287,7 +3308,6 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
           type: array
       required:
       - display
@@ -3490,6 +3510,8 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesSigNozDatasourceSpec:
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -3499,8 +3521,13 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
+          description: The maximum gap size to connect when fillOnlyBelow is true.
+            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
+          description: Controls whether lines connect across null values. When false
+            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
+            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3548,6 +3575,22 @@ components:
       - color
       - columnName
       type: object
+    DashboardtypesTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/DashboardtypesDisplay'
+        name:
+          minLength: 1
+          type: string
+        value:
+          type: string
+      required:
+      - display
+      - value
+      - name
+      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3567,7 +3610,6 @@ components:
       required:
       - value
       - color
-      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3652,24 +3694,18 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
       type: object
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
+    DashboardtypesVariableDefaultValue:
+      oneOf:
+      - type: string
+      - items:
           type: string
-        spec:
-          $ref: '#/components/schemas/DashboardTextVariableSpec'
-      required:
-      - kind
-      - spec
-      type: object
+        type: array
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
         kind:
@@ -3682,6 +3718,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -3755,15 +3803,12 @@ components:
         type:
           type: string
         url:
-          nullable: true
           type: string
       required:
       - type
       - code
       - message
-      - url
       - errors
-      - retry
       - suggestions
       type: object
     ErrorsResponseerroradditional:
@@ -3779,7 +3824,6 @@ components:
       - suggestions
       type: object
     ErrorsResponseretryjson:
-      nullable: true
       properties:
         delay:
           $ref: '#/components/schemas/TimeDuration'
@@ -5590,6 +5634,16 @@ components:
       - widgetId
       - widgetName
       type: object
+    MetricsexplorertypesMetricDashboardPanelsResponse:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/DashboardtypesDashboardPanelRef'
+          nullable: true
+          type: array
+      required:
+      - dashboards
+      type: object
     MetricsexplorertypesMetricDashboardsResponse:
       properties:
         dashboards:
@@ -8118,17 +8172,6 @@ components:
       required:
       - id
       type: object
-    VariableDefaultValue:
-      type: object
-    VariableDisplay:
-      properties:
-        description:
-          type: string
-        hidden:
-          type: boolean
-        name:
-          type: string
-      type: object
     ZeustypesGettableHost:
       properties:
         hosts:
@@ -22763,6 +22806,75 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/metrics/dashboards:
+    get:
+      deprecated: false
+      description: This endpoint returns associated v2 dashboards for a specified
+        metric
+      operationId: GetMetricDashboardsV2
+      parameters:
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
+        required: true
+        schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricsexplorertypesMetricDashboardPanelsResponse'
+                  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 metric dashboards (v2)
+      tags:
+      - metrics
   /api/v3/traces/{traceID}/flamegraph:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -290,6 +290,10 @@ func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, m
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }
 
+func (module *module) GetByMetricNamesV2(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
+	return module.pkgDashboardModule.GetByMetricNamesV2(ctx, orgID, metricNames)
+}
+
 func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.List(ctx, orgID)
 }

ee/sqlstore/postgressqlstore/formatter.go

@@ -152,3 +152,7 @@ func (f *formatter) LowerExpression(expression string) []byte {
 	sql = append(sql, ')')
 	return sql
 }
+
+func (f *formatter) EscapeLikePattern(value string) string {
+	return strings.NewReplacer(`\`, `\\`, `%`, `\%`, `_`, `\_`).Replace(value)
+}

frontend/src/AppRoutes/Private.tsx

@@ -8,6 +8,7 @@ import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
@@ -40,6 +41,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 
 	const mapRoutes = useMemo(
 		() =>
@@ -131,6 +133,14 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 
+	if (
+		(pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) ||
+			pathname === ROUTES.LLM_OBSERVABILITY_BASE) &&
+		!isAIObservabilityEnabled
+	) {
+		return <Redirect to={ROUTES.HOME} />;
+	}
+
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
 

frontend/src/AppRoutes/pageComponents.ts

@@ -57,13 +57,6 @@ export const TraceFilter = Loadable(
 	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
 );
 
-export const TraceDetail = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2/index'
-		),
-);
-
 export const TraceDetailOldRedirect = Loadable(
 	() =>
 		import(
@@ -329,3 +322,17 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
+
+export const LLMObservabilityPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Page" */ 'pages/LLMObservability'
+		),
+);
+
+export const LLMObservabilityModelPricingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -23,6 +23,8 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -512,6 +514,20 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_BASE,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'LLM_OBSERVABILITY_BASE',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+		exact: true,
+		component: LLMObservabilityModelPricingPage,
+		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

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

@@ -26,6 +26,8 @@ import type {
 	GetMetricAttributesParams,
 	GetMetricDashboards200,
 	GetMetricDashboardsParams,
+	GetMetricDashboardsV2200,
+	GetMetricDashboardsV2Params,
 	GetMetricHighlights200,
 	GetMetricHighlightsParams,
 	GetMetricMetadata200,
@@ -1787,3 +1789,100 @@ export const useGetMetricsTreemap = <
 > => {
 	return useMutation(getGetMetricsTreemapMutationOptions(options));
 };
+/**
+ * This endpoint returns associated v2 dashboards for a specified metric
+ * @summary Get metric dashboards (v2)
+ */
+export const getMetricDashboardsV2 = (
+	params: GetMetricDashboardsV2Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricDashboardsV2200>({
+		url: `/api/v3/metrics/dashboards`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricDashboardsV2QueryKey = (
+	params?: GetMetricDashboardsV2Params,
+) => {
+	return [`/api/v3/metrics/dashboards`, ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricDashboardsV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricDashboardsV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsV2Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboardsV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricDashboardsV2QueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricDashboardsV2>>
+	> = ({ signal }) => getMetricDashboardsV2(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricDashboardsV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricDashboardsV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricDashboardsV2>>
+>;
+export type GetMetricDashboardsV2QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get metric dashboards (v2)
+ */
+
+export function useGetMetricDashboardsV2<
+	TData = Awaited<ReturnType<typeof getMetricDashboardsV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsV2Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboardsV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricDashboardsV2QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get metric dashboards (v2)
+ */
+export const invalidateGetMetricDashboardsV2 = async (
+	queryClient: QueryClient,
+	params: GetMetricDashboardsV2Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricDashboardsV2QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -2185,14 +2185,9 @@ export interface ErrorsResponseerroradditionalDTO {
 	suggestions: string[];
 }
 
-export type ErrorsResponseretryjsonDTOAnyOf = {
+export interface ErrorsResponseretryjsonDTO {
 	delay: TimeDurationDTO;
-};
-
-/**
- * @nullable
- */
-export type ErrorsResponseretryjsonDTO = ErrorsResponseretryjsonDTOAnyOf | null;
+}
 
 export interface ErrorsJSONDTO {
 	/**
@@ -2207,7 +2202,7 @@ export interface ErrorsJSONDTO {
 	 * @type string
 	 */
 	message: string;
-	retry: ErrorsResponseretryjsonDTO | null;
+	retry?: ErrorsResponseretryjsonDTO;
 	/**
 	 * @type array
 	 */
@@ -2217,9 +2212,9 @@ export interface ErrorsJSONDTO {
 	 */
 	type: string;
 	/**
-	 * @type string,null
+	 * @type string
 	 */
-	url: string | null;
+	url?: string;
 }
 
 export interface AuthtypesOrgSessionContextDTO {
@@ -3271,37 +3266,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface VariableDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	hidden?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
-export interface DashboardTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display?: VariableDisplayDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3333,6 +3297,9 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3352,6 +3319,7 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3363,7 +3331,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label: string;
+	label?: string;
 	/**
 	 * @type string
 	 */
@@ -3954,33 +3922,43 @@ export interface DashboardtypesDashboardDTO {
 	updatedBy?: string;
 }
 
-export enum DashboardtypesDatasourcePluginVariantStructDTOKind {
+export interface DashboardtypesDashboardPanelRefDTO {
+	/**
+	 * @type string
+	 */
+	dashboardId: string;
+	/**
+	 * @type string
+	 */
+	dashboardName: string;
+	/**
+	 * @type string
+	 */
+	panelId: string;
+	/**
+	 * @type string
+	 */
+	panelName: string;
+}
+
+export enum DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
-export type DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf = {
+export interface DashboardtypesSigNozDatasourceSpecDTO {
 	[key: string]: unknown;
-};
+}
 
-/**
- * @nullable
- */
-export type DashboardtypesDatasourcePluginVariantStructDTOSpec =
-	DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf | null;
-
-export interface DashboardtypesDatasourcePluginVariantStructDTO {
+export interface DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO {
 	/**
 	 * @enum signoz/Datasource
 	 * @type string
 	 */
-	kind: DashboardtypesDatasourcePluginVariantStructDTOKind;
-	/**
-	 * @type object,null
-	 */
-	spec: DashboardtypesDatasourcePluginVariantStructDTOSpec;
+	kind: DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind;
+	spec: DashboardtypesSigNozDatasourceSpecDTO;
 }
 
 export type DashboardtypesDatasourcePluginDTO =
-	DashboardtypesDatasourcePluginVariantStructDTO;
+	DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO;
 
 export interface DashboardtypesDatasourceSpecDTO {
 	/**
@@ -4030,10 +4008,12 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4573,9 +4553,9 @@ export interface DashboardtypesPanelSpecDTO {
 	links?: DashboardLinkDTO[];
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	queries: DashboardtypesQueryDTO[] | null;
+	queries: DashboardtypesQueryDTO[];
 }
 
 export interface DashboardtypesPanelDTO {
@@ -4605,9 +4585,7 @@ export type DashboardtypesLayoutDTO =
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
 }
-export interface VariableDefaultValueDTO {
-	[key: string]: unknown;
-}
+export type DashboardtypesVariableDefaultValueDTO = string | string[];
 
 export enum DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind {
 	'signoz/DynamicVariable' = 'signoz/DynamicVariable',
@@ -4665,6 +4643,15 @@ export type DashboardtypesVariablePluginDTO =
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTO
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTO;
 
+export enum DashboardtypesListVariableSpecSortDTO {
+	none = 'none',
+	'alphabetical-asc' = 'alphabetical-asc',
+	'alphabetical-desc' = 'alphabetical-desc',
+	'numerical-asc' = 'numerical-asc',
+	'numerical-desc' = 'numerical-desc',
+	'alphabetical-ci-asc' = 'alphabetical-ci-asc',
+	'alphabetical-ci-desc' = 'alphabetical-ci-desc',
+}
 export interface DashboardtypesListVariableSpecDTO {
 	/**
 	 * @type boolean
@@ -4682,17 +4669,15 @@ export interface DashboardtypesListVariableSpecDTO {
 	 * @type string
 	 */
 	customAllValue?: string;
-	defaultValue?: VariableDefaultValueDTO;
+	defaultValue?: DashboardtypesVariableDefaultValueDTO;
 	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
+	 * @minLength 1
 	 */
-	name?: string;
+	name: string;
 	plugin?: DashboardtypesVariablePluginDTO;
-	/**
-	 * @type string,null
-	 */
-	sort?: string | null;
+	sort?: DashboardtypesListVariableSpecSortDTO;
 }
 
 export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO {
@@ -4704,21 +4689,38 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display: DashboardtypesDisplayDTO;
+	/**
+	 * @type string
+	 * @minLength 1
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
-	spec: DashboardTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
+	spec: DashboardtypesTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -7174,6 +7176,13 @@ export interface MetricsexplorertypesMetricDashboardDTO {
 	widgetName: string;
 }
 
+export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
+	/**
+	 * @type array,null
+	 */
+	dashboards: DashboardtypesDashboardPanelRefDTO[] | null;
+}
+
 export interface MetricsexplorertypesMetricDashboardsResponseDTO {
 	/**
 	 * @type array,null
@@ -11455,6 +11464,22 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetMetricDashboardsV2Params = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
+	metricName: string;
+};
+
+export type GetMetricDashboardsV2200 = {
+	data: MetricsexplorertypesMetricDashboardPanelsResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/api/trace/getTraceV2.tsx

@@ -1,35 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV2PayloadProps,
-	GetTraceV2SuccessResponse,
-} from 'types/api/trace/getTraceV2';
-
-const getTraceV2 = async (
-	props: GetTraceV2PayloadProps,
-): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	}
-	const postData: GetTraceV2PayloadProps = {
-		...props,
-		uncollapsedSpans,
-	};
-	const response = await axios.post<GetTraceV2SuccessResponse>(
-		`/traces/waterfall/${props.traceId}`,
-		omit(postData, 'traceId'),
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: response.data,
-	};
-};
-
-export default getTraceV2;

frontend/src/api/trace/getTraceV4.tsx

@@ -41,6 +41,7 @@ const getTraceV4 = async (
 	> & { spans: WireSpan[] | null };
 
 	// Derive 'service.name' from resource for convenience — only derived field
+	// todo(tech-debt): to remove use of this and to directly use service.name from resources.
 	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',

frontend/src/assets/Logos/cassandra.svg

@@ -1 +0,0 @@
-<svg fill="#1287B1" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apache Cassandra</title><path d="M10.374 10.53a3.102 3.102 0 0 1-.428-.222l.555.143c0 .02-.01.036-.01.055l-.117.025zm-.283 1.506-.315.253.852-1.079-1.078.391c.002.017.009.033.009.05a.57.57 0 0 1-.184.42c.102.217.228.424.375.616a3.2 3.2 0 0 1 .34-.651zm.717-2.347-.652-.82a.427.427 0 0 1-.506.162c-.054.073-.083.162-.13.24l1.258.463c.011-.015.019-.031.03-.045zm-1.666.444c-.07.314-.087.637-.05.956a.566.566 0 0 1 .451.475l.946-.606c-.067-.022-.126-.06-.191-.088l-1.119-.08.64-.14a3.186 3.186 0 0 1-.668-.554l-.01.037zM20.1 11.648c-.164.202.833 1.022.833 1.022s-1.654-1.022-2.234-.72c-.278.144.574.811 1.175 1.242-.428-.274-.982-.571-1.175-.408-.328.277 1.565 2.549 1.565 2.549s-2.145-2.322-2.36-2.209c-.214.114.593 1.224.593 1.224s-1.06-1.16-1.35-.959c-.29.202 1.514 3.218 1.514 3.218s-1.956-3.091-2.763-2.574c1.268 2.782.795 3.18.795 3.18s-.162-2.839-1.742-2.764c-.795.038.379 2.12.379 2.12s-1.08-1.902-1.8-1.864c1.326 2.51.854 3.53.854 3.53s.219-2.143-1.58-3.336c.682.606-.427 3.336-.427 3.336s.976-4.023-.719-3.256c-.268.121-.019 2.007-.019 2.007s-.34-2.158-.851-2.045c-.298.066-1.893 2.99-1.893 2.99s1.306-3.16.908-3.027c-.29.096-.833 1.4-.833 1.4s.265-1.287 0-1.363c-.264-.075-1.74 1.363-1.74 1.363s1.097-1.287.908-1.552c-.287-.402-.623-.42-1.022-.265-.581.226-1.363 1.287-1.363 1.287s.78-1.074.643-1.476c-.219-.647-2.46 1.249-2.46 1.249s1.325-1.25 1.022-1.514c-.303-.265-1.947-.183-2.46-.185-1.515-.004-2.039-.36-2.498-.724 1.987.997 3.803-.151 6.094.494l.21.06c-1.3-.558-2.144-1.378-2.226-2.354-.036-.416.074-.827.297-1.222.619-.4 1.29-.773 2.06-1.095a4 4 0 0 0-.064.698c0 2.44 2.203 4.417 4.92 4.417s4.92-1.977 4.92-4.417c0-.45-.083-.881-.223-1.29 1.431.404 2.45.968 3.132 1.335.022.092.045.184.053.279.024.274-.018.547-.11.814.095-.147.198-.288.28-.445.367-.997 1.855.227 1.855.227s-1.085-.454-1.06-.24c.026.215 1.628.96 1.628.96s-1.45-.455-1.362-.114c.088.34 1.817 1.703 1.817 1.703s-1.956-1.489-2.12-1.287zm-7.268 2.65.042-.008-.06.01zM9.256 9.753c.12.13.26.234.396.343l.927-.029-1.064-.788c-.093.154-.195.303-.26.474Zm10.62 3.44c.3.215.54.373.54.373s-.24-.181-.54-.374zM7.507 8.617c-.14.229-.214.492-.215.76a3.99 3.99 0 0 0 2.358 3.64c0-.005.002-.01.003-.014a3.19 3.19 0 0 1-.58-.788c-.648.099-.926-.794-.336-1.08a3.174 3.174 0 0 1 .138-1.388 3.162 3.162 0 0 1-.52-1.36c-.296.07-.579.147-.848.23Zm1.488.82c.108-.24.243-.46.402-.661a.435.435 0 0 1 .568-.557c.077-.059.166-.099.248-.15a16.17 16.17 0 0 0-1.727.284c.114.388.272.76.509 1.084Zm2.285 3.928c1.4 0 2.633-.723 3.344-1.816a3.399 3.399 0 0 0-1.265-.539l-.297-.023.916.9-1.197-.467.704 1.078-1.074-.832-.012.006.347 1.278-.596-1.134-.098 1.33-.401-1.326-.472 1.261.114-1.359c-.006-.002-.01-.006-.015-.008l-.814 1.154.286-1.067c-.34.322-.605.713-.781 1.146.095.102.197.198.303.29.322.083.66.128 1.008.128zm10.145-4.434c.971-.567 1.716-1.955 1.716-1.955s-1.893 1.955-3.205 1.665c1.186-.934 1.766-2.549 1.766-2.549s-1.506 2.325-2.448 2.423c1.086-.959 1.54-2.322 1.54-2.322s-1.237 1.817-2.196 1.944c1.287-1.161 1.338-1.893 1.338-1.893s-1.781 2.302-2.499 1.943c.858-.934 1.439-2.12 1.439-2.12s-1.489 2.019-1.893 1.69c-.277-.05.454-.958.454-.958s-.908.807-1.16.606c.454-.278 1.236-1.64 1.236-1.64S16 7.505 15.621 7.304l.731-1.483s-.73 1.483-1.715 1.23c.454-.58.63-1.112.63-1.112s-.756 1.213-1.69.885c-.22-.077.273-.635.273-.635s-.626.61-1.055.534c-.43-.076.025-.858.025-.858s-.757 1.186-.908 1.136c-.152-.05.075-.833.075-.833s-.555.908-.858.858c-.302-.05 0-.934 0-.934s-.328.984-.58.909c-.252-.076-.303-.656-.303-.656s-.068.788-.429.858c-2.725.53-5.728 1.69-9.489 5.45C3.887 10.738 5.3 7.91 11.962 7.659c5.044-.191 7.399 2.137 8.177 2.17C22.51 9.93 24 7.633 24 7.633s-1.489 1.716-2.574 1.3zm-7.74.872-.608.464v.001l.054.003a3.35 3.35 0 0 0 .554-.468zm1.583-.426c0-.536-.237-.929-.594-1.217a3.178 3.178 0 0 1-.165.825.393.393 0 0 1-.328.681c-.154.233-.34.445-.549.63l.661.034-.995.237c-.025.018-.045.041-.07.058a3.194 3.194 0 0 1 1.536.691c.32-.574.504-1.235.504-1.94zM10.99 7.996a3.5 3.5 0 0 0-.785.46.427.427 0 0 1-.013.357l.885.643.023-.016-.36-1.262.627 1.12c.018-.006.04-.006.058-.011l-.02-1.251.398 1.163.477-1.15.016 1.268c.004.001.007.005.012.007l.713-1.005-.363 1.218.009.01 1.04-.69-.759 1.05.002.005.95-.34c.012-.016.028-.029.041-.045a.395.395 0 0 1 .394-.632 3.43 3.43 0 0 0 .27-.784 13.99 13.99 0 0 0-2.798-.168c-.286.011-.55.033-.817.053Z"/></svg>

frontend/src/assets/Logos/planetscale.svg

@@ -1 +0,0 @@
-<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z"/></svg>

frontend/src/assets/TraceDetail/Flamegraph.tsx

@@ -1,25 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-function FlamegraphImg(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M8 3c1 3 2.5 3.5 3.5 4.5A5 5 0 0113 11a5 5 0 11-10 0c0-.3 0-.6.1-.9a2 2 0 103.3-2C4 5.5 7 3 8 3zM21 4h-8M20 14.5h-3M20 9.5h-3M21 20H4"
-				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	);
-}
-
-export default FlamegraphImg;

frontend/src/components/SpanHoverCard/SpanHoverCard.styles.scss

@@ -1,106 +0,0 @@
-.span-hover-card {
-	.ant-popover-inner {
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 32%, transparent) 0%,
-			color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-		);
-		padding: 12px 16px;
-		border: 1px solid var(--l1-border);
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background: linear-gradient(
-				139deg,
-				color-mix(in srgb, var(--card) 32%, transparent) 0%,
-				color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-			);
-			backdrop-filter: blur(20px);
-			border-radius: 4px;
-			z-index: -1;
-			will-change: background-color, backdrop-filter;
-		}
-	}
-
-	&__title {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		margin-bottom: 0.5rem;
-	}
-
-	&__operation {
-		color: var(--l1-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-	}
-
-	&__service {
-		font-size: 0.875rem;
-		color: var(--muted-foreground);
-		font-weight: 400;
-	}
-
-	&__error {
-		font-size: 0.75rem;
-		color: var(--danger-background);
-		font-weight: 500;
-	}
-
-	&__row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 8px;
-		gap: 16px;
-	}
-
-	&__label {
-		color: var(--muted-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-	}
-
-	&__value {
-		color: var(--l1-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		text-align: right;
-	}
-
-	&__relative-time {
-		display: flex;
-		align-items: center;
-		margin-top: 4px;
-		gap: 8px;
-		border-radius: 1px 0 0 1px;
-		background: linear-gradient(
-			90deg,
-			hsla(358, 75%, 59%, 0.2) 0%,
-			transparent 100%
-		);
-
-		&-icon {
-			width: 2px;
-			height: 20px;
-			flex-shrink: 0;
-			border-radius: 2px;
-			background: var(--danger-background);
-		}
-	}
-
-	&__relative-text {
-		color: var(--bg-cherry-300);
-		font-size: 12px;
-		line-height: 20px;
-	}
-}

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,103 +0,0 @@
-import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface SpanHoverCardProps {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const duration = span.durationNano / 1e6; // Convert nanoseconds to milliseconds
-	const { time: formattedDuration, timeUnitName } =
-		convertTimeToRelevantUnit(duration);
-
-	const { timezone } = useTimezone();
-
-	// Calculate relative start time from trace start
-	const relativeStartTime = span.timestamp - traceMetadata.startTime;
-	const { time: relativeTime, timeUnitName: relativeTimeUnit } =
-		convertTimeToRelevantUnit(relativeStartTime);
-
-	// Format absolute start time
-	const startTimeFormatted = dayjs(span.timestamp)
-		.tz(timezone.value)
-		.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS);
-
-	const getContent = (): JSX.Element => (
-		<div className="span-hover-card">
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Duration:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{toFixed(formattedDuration, 2)}
-					{timeUnitName}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Events:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{span.event?.length || 0}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Start time:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{startTimeFormatted}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__relative-time">
-				<div className="span-hover-card__relative-time-icon" />
-				<Typography.Text className="span-hover-card__relative-text">
-					{toFixed(relativeTime, 2)}
-					{relativeTimeUnit} after trace start
-				</Typography.Text>
-			</div>
-		</div>
-	);
-
-	return (
-		<Popover
-			title={
-				<div className="span-hover-card__title">
-					<Typography.Text className="span-hover-card__operation">
-						{span.name}
-					</Typography.Text>
-				</div>
-			}
-			mouseEnterDelay={0.2}
-			content={getContent()}
-			trigger="hover"
-			rootClassName="span-hover-card"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;

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

@@ -1,292 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { TimezoneContextType } from 'providers/Timezone';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanHoverCard from '../SpanHoverCard';
-
-// Mock timezone provider so SpanHoverCard can use useTimezone without a real context
-jest.mock('providers/Timezone', () => ({
-	__esModule: true,
-	useTimezone: (): TimezoneContextType => ({
-		timezone: {
-			name: 'Coordinated Universal Time — UTC, GMT',
-			value: 'UTC',
-			offset: 'UTC',
-			searchIndex: 'UTC',
-		},
-		browserTimezone: {
-			name: 'Coordinated Universal Time — UTC, GMT',
-			value: 'UTC',
-			offset: 'UTC',
-			searchIndex: 'UTC',
-		},
-		updateTimezone: jest.fn(),
-		formatTimezoneAdjustedTimestamp: jest.fn(() => 'mock-date'),
-		formatTimezoneAdjustedTimestampOptional: jest.fn(() => 'mock-date'),
-		isAdaptationEnabled: true,
-		setIsAdaptationEnabled: jest.fn(),
-	}),
-}));
-
-// Mock dayjs for testing, including timezone helpers used in timezoneUtils
-jest.mock('dayjs', () => {
-	const mockDayjsInstance: any = {};
-
-	mockDayjsInstance.format = jest.fn((formatString: string) =>
-		// Match the DD_MMM_YYYY_HH_MM_SS format: 'DD MMM YYYY, HH:mm:ss'
-		formatString === 'DD MMM YYYY, HH:mm:ss'
-			? '15 Mar 2024, 14:23:45'
-			: 'mock-date',
-	);
-
-	// Support chaining: dayjs().tz(timezone).format(...) and dayjs().tz(timezone).utcOffset()
-	mockDayjsInstance.tz = jest.fn(() => mockDayjsInstance);
-	mockDayjsInstance.utcOffset = jest.fn(() => 0);
-
-	const mockDayjs = jest.fn(() => mockDayjsInstance);
-
-	Object.assign(mockDayjs, {
-		extend: jest.fn(),
-		// Support dayjs.tz.guess()
-		tz: { guess: jest.fn(() => 'UTC') },
-	});
-
-	return mockDayjs;
-});
-
-const HOVER_ELEMENT_ID = 'hover-element';
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	traceId: 'test-trace-id',
-	rootSpanId: 'root-span-id',
-	parentSpanId: 'parent-span-id',
-	name: 'GET /api/users',
-	timestamp: 1679748225000000,
-	durationNano: 150000000,
-	serviceName: 'user-service',
-	kind: 1,
-	hasError: false,
-	level: 1,
-	references: [],
-	tagMap: {},
-	event: [
-		{
-			name: 'event1',
-			timeUnixNano: 1679748225100000,
-			attributeMap: {},
-			isError: false,
-		},
-		{
-			name: 'event2',
-			timeUnixNano: 1679748225200000,
-			attributeMap: {},
-			isError: false,
-		},
-	],
-	rootName: 'root-span',
-	statusMessage: '',
-	statusCodeString: 'OK',
-	spanKind: 'server',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 1,
-};
-
-const mockTraceMetadata = {
-	startTime: 1679748225000000,
-	endTime: 1679748226000000,
-};
-
-describe('SpanHoverCard', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('renders child element correctly', () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid="child-element">Hover me</div>
-			</SpanHoverCard>,
-		);
-
-		expect(screen.getByTestId('child-element')).toBeInTheDocument();
-		expect(screen.getByText('Hover me')).toBeInTheDocument();
-	});
-
-	it('shows popover after 0.2 second delay on hover', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Hover for details</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover over the element
-		fireEvent.mouseEnter(hoverElement);
-
-		// Popover should NOT appear immediately
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-
-		// Advance time by 0.5 seconds
-		act(() => {
-			jest.advanceTimersByTime(200);
-		});
-
-		// Now popover should appear
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-	});
-
-	it('does not show popover if hover is too brief', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Quick hover test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Quick hover and unhover (less than the 0.2s delay)
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(100); // Only 0.1 seconds
-		});
-		fireEvent.mouseLeave(hoverElement);
-
-		// Advance past the full delay
-		act(() => {
-			jest.advanceTimersByTime(400);
-		});
-
-		// Popover should not appear
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-	});
-
-	it('displays span information in popover content after delay', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Test span</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Check that popover shows span operation name in title
-		expect(screen.getByText('GET /api/users')).toBeInTheDocument();
-
-		// Check duration information
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-		expect(screen.getByText('150ms')).toBeInTheDocument();
-
-		// Check events count
-		expect(screen.getByText('Events:')).toBeInTheDocument();
-		expect(screen.getByText('2')).toBeInTheDocument();
-
-		// Check start time label
-		expect(screen.getByText('Start time:')).toBeInTheDocument();
-	});
-
-	it('displays date in DD MMM YYYY, HH:mm:ss format with seconds', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Date format test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Verify the DD MMM YYYY, HH:mm:ss format is displayed
-		expect(screen.getByText('15 Mar 2024, 14:23:45')).toBeInTheDocument();
-	});
-
-	it('displays relative time information', async () => {
-		const spanWithRelativeTime: Span = {
-			...mockSpan,
-			timestamp: mockTraceMetadata.startTime + 1000000, // 1 second later
-		};
-
-		render(
-			<SpanHoverCard span={spanWithRelativeTime} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Relative time test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Check relative time display
-		expect(screen.getByText(/after trace start/)).toBeInTheDocument();
-	});
-
-	it('handles spans with no events correctly', async () => {
-		const spanWithoutEvents: Span = {
-			...mockSpan,
-			event: [],
-		};
-
-		render(
-			<SpanHoverCard span={spanWithoutEvents} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>No events test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		expect(screen.getByText('Events:')).toBeInTheDocument();
-		expect(screen.getByText('0')).toBeInTheDocument();
-	});
-
-	it('verifies mouseEnterDelay prop is set to 0.5', () => {
-		const { container } = render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Delay test</div>
-			</SpanHoverCard>,
-		);
-
-		// The mouseEnterDelay prop should be set on the Popover component
-		// This test verifies the implementation includes the delay
-		const popover = container.querySelector('.ant-popover');
-		expect(popover).not.toBeInTheDocument(); // Initially not visible
-
-		// Hover to trigger delay mechanism
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-		fireEvent.mouseEnter(hoverElement);
-
-		// Should not appear before delay
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-
-		// Should appear after delay
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-	});
-});

frontend/src/constants/features.ts

@@ -11,6 +11,6 @@ export enum FeatureKeys {
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 	USE_DASHBOARD_V2 = 'use_dashboard_v2',
-	EMABLE_AI_OBSERVABILITY = 'enable_ai_observability',
+	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/constants/routes.ts

@@ -89,6 +89,8 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
+	LLM_OBSERVABILITY_BASE: '/llm-observability',
+	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
 } as const;
 
 export default ROUTES;

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -48,6 +48,48 @@ describe('getAutoContexts', () => {
 		]);
 	});
 
+	it('includes the query in alert edit context', () => {
+		const ruleId = 'rule-edit';
+		const query = { queryType: 'builder', builder: { queryData: [] } };
+		const compositeQuery = encodeURIComponent(JSON.stringify(query));
+		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.compositeQuery}=${compositeQuery}`;
+
+		const contexts = getAutoContexts(ROUTES.EDIT_ALERTS, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: ruleId,
+				metadata: {
+					page: 'alert_edit',
+					ruleId,
+					query,
+				},
+			},
+		]);
+	});
+
+	it('includes the query in alert new context (no ruleId)', () => {
+		const query = { queryType: 'builder', builder: { queryData: [] } };
+		const compositeQuery = encodeURIComponent(JSON.stringify(query));
+		const search = `?${QueryParams.compositeQuery}=${compositeQuery}`;
+
+		const contexts = getAutoContexts(ROUTES.ALERTS_NEW, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: {
+					page: 'alert_new',
+					query,
+				},
+			},
+		]);
+	});
+
 	it('returns triggered alerts context on alert history without ruleId', () => {
 		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, '');
 

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.module.scss

@@ -377,9 +377,63 @@
 }
 
 .contextPopoverEmpty {
+	// Fill the entity panel so the state sits centred in the dead space rather
+	// than clinging to the top-left corner.
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 24px 20px;
+	text-align: center;
 	font-size: 12px;
 	color: var(--l3-foreground);
-	padding: 10px 8px;
+}
+
+.contextPopoverEmptyIcon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	// `--empty-accent` is set per category on the root (robin/cherry/forest).
+	color: var(--empty-accent);
+	background: color-mix(in srgb, var(--empty-accent), transparent 88%);
+	border-radius: var(--radius-2);
+}
+
+.contextPopoverEmptyTitle {
+	margin: 0;
+	max-width: 280px;
+	color: var(--l2-foreground);
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 1.4;
+	// Clamp to 2 lines with an ellipsis so a long query can't blow out the
+	// popover height. The CTA below is a stock DS link button, so the query is
+	// kept readable here rather than forcing the button to wrap.
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	overflow-wrap: anywhere;
+}
+
+.contextPopoverEmptyCta {
+	max-width: 100%;
+}
+
+.contextPopoverEmptyCtaLabel {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	overflow-wrap: anywhere;
+	text-align: center;
 }
 
 .micBtn {

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -42,19 +42,22 @@ import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { MessageAttachment } from '../../types';
 import { MessageContext } from '../../../../api/ai-assistant/chat';
 import {
-	Bell,
-	LayoutDashboard,
 	Mic,
 	Plus,
 	Search,
 	Send,
-	ShieldCheck,
 	Square,
 	TriangleAlert,
 	X,
 } from '@signozhq/icons';
 
 import styles from './ChatInput.module.scss';
+import ContextPickerEmptyState from './ContextPickerEmptyState';
+import {
+	CONTEXT_CATEGORIES,
+	CONTEXT_CATEGORY_ICONS,
+	ContextCategory,
+} from './contextPicker';
 
 interface ChatInputProps {
 	onSend: (
@@ -162,10 +165,6 @@ const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
 /** sessionStorage key for the "voice input failed this tab" flag. */
 const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
 
-const CONTEXT_CATEGORIES = ['Dashboards', 'Alerts', 'Services'] as const;
-
-type ContextCategory = (typeof CONTEXT_CATEGORIES)[number];
-
 interface SelectedContextItem {
 	category: ContextCategory;
 	entityId: string;
@@ -205,12 +204,6 @@ interface ContextEntityItem {
 	value: string;
 }
 
-const CONTEXT_CATEGORY_ICONS = {
-	Dashboards: LayoutDashboard,
-	Alerts: Bell,
-	Services: ShieldCheck,
-} satisfies Record<ContextCategory, unknown>;
-
 function fileToDataUrl(file: File): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
@@ -331,6 +324,30 @@ export default function ChatInput({
 		[mentionRange, selectedContexts, text],
 	);
 
+	// Empty-state CTA: drop a starter prompt into the composer (never auto-sent)
+	// and hand the user the caret at the end so they can finish the sentence.
+	const handleContextPrefill = useCallback(
+		(prompt: string) => {
+			const next = capText(prompt);
+			setText(next);
+			committedTextRef.current = next;
+			setMentionRange(null);
+			setPickerSearchQuery('');
+			setIsContextPickerOpen(false);
+			// Defer so React commits the new value before we place the caret.
+			requestAnimationFrame(() => {
+				const el = textareaRef.current;
+				if (!el) {
+					return;
+				}
+				el.focus();
+				const end = el.value.length;
+				el.setSelectionRange(end, end);
+			});
+		},
+		[capText],
+	);
+
 	const focusCategory = useCallback((category: ContextCategory) => {
 		setActiveContextCategory(category);
 		setPickerSearchQuery('');
@@ -824,10 +841,14 @@ export default function ChatInput({
 	// Type-ahead filter against the `@<query>` typed in the textarea. When
 	// the picker was opened from the "Add Context" button there's no
 	// mention query, so fall back to the in-popover search input.
-	const mentionQuery = mentionRange
-		? text.slice(mentionRange.start + 1, mentionRange.end).toLowerCase()
+	const rawMentionQuery = mentionRange
+		? text.slice(mentionRange.start + 1, mentionRange.end)
 		: '';
+	const mentionQuery = rawMentionQuery.toLowerCase();
 	const activeQuery = mentionQuery || pickerSearchQuery.trim().toLowerCase();
+	// Original-case query for empty-state copy + prefill ("checkout", not the
+	// lowercased filter key). Mirrors `activeQuery`'s mention-then-search order.
+	const displayQuery = rawMentionQuery || pickerSearchQuery.trim();
 	const filteredContextOptions = activeQuery
 		? contextEntitiesByCategory[activeContextCategory].filter((entity) =>
 				entity.value.toLowerCase().includes(activeQuery),
@@ -1071,9 +1092,11 @@ export default function ChatInput({
 												Failed to load {activeContextCategory.toLowerCase()}.
 											</div>
 										) : filteredContextOptions.length === 0 ? (
-											<div className={styles.contextPopoverEmpty}>
-												No matching entities
-											</div>
+											<ContextPickerEmptyState
+												category={activeContextCategory}
+												query={displayQuery}
+												onPrefill={handleContextPrefill}
+											/>
 										) : (
 											filteredContextOptions.map((option, index) => {
 												const isSelected = selectedContexts.some(

frontend/src/container/AIAssistant/components/ChatInput/ContextPickerEmptyState.tsx

@@ -0,0 +1,68 @@
+import { Sparkles } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import type { CSSProperties } from 'react';
+
+import styles from './ChatInput.module.scss';
+import {
+	CONTEXT_CATEGORY_ICONS,
+	ContextCategory,
+	getContextPickerEmptyContent,
+} from './contextPicker';
+
+// Per-category accent, mapped to semantic accent tokens (robin is the brand
+// primary). Exposed to the SCSS as the `--empty-accent` custom property so the
+// icon and CTA share one colour per category.
+const CATEGORY_ACCENT: Record<ContextCategory, string> = {
+	Dashboards: 'var(--accent-primary)',
+	Alerts: 'var(--accent-cherry)',
+	Services: 'var(--accent-forest)',
+};
+
+interface ContextPickerEmptyStateProps {
+	category: ContextCategory;
+	/** The active search query (mention or in-popover search), original case. */
+	query: string;
+	/** Drops the starter prompt into the composer (never auto-sends). */
+	onPrefill: (prompt: string) => void;
+}
+
+/**
+ * Empty state for the @-mention context picker. Distinguishes a brand-new user
+ * with nothing to pick (onboarding) from a search that matched nothing, and in
+ * both cases offers a clickable CTA that seeds the composer.
+ */
+export default function ContextPickerEmptyState({
+	category,
+	query,
+	onPrefill,
+}: ContextPickerEmptyStateProps): JSX.Element {
+	const { title, ctaLabel, prefill } = getContextPickerEmptyContent(
+		category,
+		query,
+	);
+	const CategoryIcon = CONTEXT_CATEGORY_ICONS[category];
+
+	return (
+		<div
+			className={styles.contextPopoverEmpty}
+			style={{ '--empty-accent': CATEGORY_ACCENT[category] } as CSSProperties}
+		>
+			<span className={styles.contextPopoverEmptyIcon} aria-hidden="true">
+				<CategoryIcon size={16} />
+			</span>
+			<p className={styles.contextPopoverEmptyTitle}>{title}</p>
+			<Button
+				type="button"
+				variant="link"
+				size="sm"
+				color="primary"
+				className={styles.contextPopoverEmptyCta}
+				onClick={(): void => onPrefill(prefill)}
+				data-testid={`ai-context-empty-cta-${category}`}
+				prefix={<Sparkles size={14} />}
+			>
+				<span className={styles.contextPopoverEmptyCtaLabel}>{ctaLabel}</span>
+			</Button>
+		</div>
+	);
+}

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.prefill.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+// The prefill flow only depends on the context-picker data hooks resolving to
+// empty lists (so the empty state renders) — mock them to skip real fetches.
+jest.mock('hooks/dashboard/useGetAllDashboard', () => ({
+	useGetAllDashboard: (): unknown => ({
+		data: [],
+		isLoading: false,
+		isError: false,
+	}),
+}));
+
+jest.mock('api/generated/services/rules', () => ({
+	useListRules: (): unknown => ({ data: [], isLoading: false, isError: false }),
+	getListRulesQueryKey: (): string[] => ['rules'],
+}));
+
+jest.mock('hooks/useQueryService', () => ({
+	useQueryService: (): unknown => ({
+		data: [],
+		isLoading: false,
+		isFetching: false,
+		isError: false,
+	}),
+}));
+
+// Irrelevant to the prefill flow and otherwise require browser APIs / extra
+// context providers, so stub them out.
+jest.mock('../../../hooks/useSpeechRecognition', () => ({
+	useSpeechRecognition: (): unknown => ({
+		isListening: false,
+		isSupported: false,
+		permission: 'prompt',
+		start: jest.fn(),
+		discard: jest.fn(),
+	}),
+}));
+
+jest.mock('../../../hooks/useAIAssistantAnalyticsContext', () => ({
+	useAIAssistantAnalyticsContext: (): unknown => ({
+		threadId: undefined,
+		page: '/',
+		mode: 'sidepane',
+	}),
+}));
+
+// eslint-disable-next-line import/first
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+// eslint-disable-next-line import/first
+import ChatInput from '../ChatInput';
+
+function renderChatInput(): void {
+	render(
+		<TooltipProvider>
+			<ChatInput onSend={jest.fn()} />
+		</TooltipProvider>,
+	);
+}
+
+function getComposer(): HTMLTextAreaElement {
+	return screen.getByPlaceholderText(/Ask anything/i) as HTMLTextAreaElement;
+}
+
+describe('ChatInput — empty-state CTA prefill flow', () => {
+	it('full-replaces existing prose with the query-seeded prompt and closes the picker', async () => {
+		renderChatInput();
+
+		// Pre-existing prose in the composer.
+		await userEvent.type(getComposer(), 'show me something');
+
+		// Open the picker and search for an entity that does not exist.
+		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
+		await userEvent.type(
+			await screen.findByPlaceholderText(/search dashboards/i),
+			'chk',
+		);
+
+		const cta = await screen.findByTestId('ai-context-empty-cta-Dashboards');
+		expect(cta).toHaveTextContent('Create a dashboard for "chk"');
+
+		await userEvent.click(cta);
+
+		// Full-replace is intentional: the prefill is a complete sentence, so the
+		// prior "show me something" prose is discarded rather than producing
+		// broken grammar (see handleContextPrefill). The query is seeded in.
+		expect(getComposer().value).toBe('Create a dashboard for chk');
+
+		// Picker closed → the empty-state CTA is gone.
+		await waitFor(() =>
+			expect(
+				screen.queryByTestId('ai-context-empty-cta-Dashboards'),
+			).not.toBeInTheDocument(),
+		);
+	});
+
+	it('seeds only the prefix (with trailing space) in the onboarding case', async () => {
+		renderChatInput();
+
+		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
+
+		const cta = await screen.findByTestId('ai-context-empty-cta-Dashboards');
+		expect(cta).toHaveTextContent('Ask me to create one');
+
+		await userEvent.click(cta);
+
+		expect(getComposer().value).toBe('Create a dashboard for ');
+		await waitFor(() =>
+			expect(
+				screen.queryByTestId('ai-context-empty-cta-Dashboards'),
+			).not.toBeInTheDocument(),
+		);
+	});
+});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ContextPickerEmptyState.test.tsx

@@ -0,0 +1,135 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { ContextCategory } from '../contextPicker';
+import ContextPickerEmptyState from '../ContextPickerEmptyState';
+
+function renderEmptyState(
+	category: ContextCategory,
+	query: string,
+	onPrefill = jest.fn(),
+): { onPrefill: jest.Mock; container: HTMLElement } {
+	const { container } = render(
+		<ContextPickerEmptyState
+			category={category}
+			query={query}
+			onPrefill={onPrefill}
+		/>,
+	);
+	return { onPrefill, container };
+}
+
+function ctaFor(category: ContextCategory): HTMLElement {
+	return screen.getByTestId(`ai-context-empty-cta-${category}`);
+}
+
+describe('ContextPickerEmptyState', () => {
+	describe('onboarding (no query)', () => {
+		it('renders dashboards copy and prefills the prefix only', async () => {
+			const { onPrefill } = renderEmptyState('Dashboards', '');
+
+			expect(screen.getByText('No dashboards yet.')).toBeInTheDocument();
+			const cta = ctaFor('Dashboards');
+			expect(cta).toHaveTextContent('Ask me to create one');
+
+			await userEvent.click(cta);
+			expect(onPrefill).toHaveBeenCalledTimes(1);
+			expect(onPrefill).toHaveBeenCalledWith('Create a dashboard for ');
+		});
+
+		it('renders alerts copy and prefills the prefix only', async () => {
+			const { onPrefill } = renderEmptyState('Alerts', '');
+
+			expect(screen.getByText('No alerts yet.')).toBeInTheDocument();
+			expect(ctaFor('Alerts')).toHaveTextContent('Ask me to create one');
+
+			await userEvent.click(ctaFor('Alerts'));
+			expect(onPrefill).toHaveBeenCalledWith('Create an alert for ');
+		});
+
+		it('renders instrumentation-flavoured services copy and prefill', async () => {
+			const { onPrefill } = renderEmptyState('Services', '');
+
+			expect(
+				screen.getByText('No services reporting data yet.'),
+			).toBeInTheDocument();
+			expect(ctaFor('Services')).toHaveTextContent(
+				'Ask me to help set up instrumentation',
+			);
+
+			await userEvent.click(ctaFor('Services'));
+			expect(onPrefill).toHaveBeenCalledWith(
+				'Help me set up instrumentation for ',
+			);
+		});
+
+		it('treats a whitespace-only query as onboarding', () => {
+			renderEmptyState('Dashboards', '   ');
+			expect(screen.getByText('No dashboards yet.')).toBeInTheDocument();
+		});
+	});
+
+	describe('search miss (query, no match)', () => {
+		it('seeds the query into dashboards copy and prefill', async () => {
+			const { onPrefill } = renderEmptyState('Dashboards', 'checkout');
+
+			expect(
+				screen.getByText('No dashboards match "checkout".'),
+			).toBeInTheDocument();
+			expect(ctaFor('Dashboards')).toHaveTextContent(
+				'Create a dashboard for "checkout"',
+			);
+
+			await userEvent.click(ctaFor('Dashboards'));
+			expect(onPrefill).toHaveBeenCalledWith('Create a dashboard for checkout');
+		});
+
+		it('seeds the query into alerts copy and prefill', async () => {
+			const { onPrefill } = renderEmptyState('Alerts', 'checkout');
+
+			expect(screen.getByText('No alerts match "checkout".')).toBeInTheDocument();
+			await userEvent.click(ctaFor('Alerts'));
+			expect(onPrefill).toHaveBeenCalledWith('Create an alert for checkout');
+		});
+
+		it('uses instrumentation wording for services search misses', async () => {
+			const { onPrefill } = renderEmptyState('Services', 'checkout');
+
+			expect(
+				screen.getByText('No services match "checkout".'),
+			).toBeInTheDocument();
+			await userEvent.click(ctaFor('Services'));
+			expect(onPrefill).toHaveBeenCalledWith(
+				'Help me set up instrumentation for checkout',
+			);
+		});
+
+		it('preserves the original casing of the query in copy and prefill', async () => {
+			const { onPrefill } = renderEmptyState('Dashboards', 'Checkout API');
+
+			expect(
+				screen.getByText('No dashboards match "Checkout API".'),
+			).toBeInTheDocument();
+			await userEvent.click(ctaFor('Dashboards'));
+			expect(onPrefill).toHaveBeenCalledWith(
+				'Create a dashboard for Checkout API',
+			);
+		});
+	});
+
+	describe('per-category accent token', () => {
+		it.each<[ContextCategory, string]>([
+			['Dashboards', 'var(--accent-primary)'],
+			['Alerts', 'var(--accent-cherry)'],
+			['Services', 'var(--accent-forest)'],
+		])('maps %s to the semantic accent %s', (category, accent) => {
+			const { container } = renderEmptyState(category, '');
+			const root = container.firstChild as HTMLElement;
+			expect(root.style.getPropertyValue('--empty-accent')).toBe(accent);
+		});
+	});
+
+	it('does not auto-send: nothing fires until the CTA is clicked', () => {
+		const { onPrefill } = renderEmptyState('Dashboards', 'checkout');
+		expect(onPrefill).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/contextPicker.test.ts

@@ -0,0 +1,100 @@
+import {
+	CONTEXT_CATEGORIES,
+	getContextPickerEmptyContent,
+} from '../contextPicker';
+
+describe('getContextPickerEmptyContent', () => {
+	describe('onboarding (no query)', () => {
+		it('returns per-category copy and prefix-only prefill for dashboards', () => {
+			expect(getContextPickerEmptyContent('Dashboards', '')).toStrictEqual({
+				title: 'No dashboards yet.',
+				ctaLabel: 'Ask me to create one',
+				prefill: 'Create a dashboard for ',
+			});
+		});
+
+		it('returns per-category copy and prefix-only prefill for alerts', () => {
+			expect(getContextPickerEmptyContent('Alerts', '')).toStrictEqual({
+				title: 'No alerts yet.',
+				ctaLabel: 'Ask me to create one',
+				prefill: 'Create an alert for ',
+			});
+		});
+
+		it('returns instrumentation-flavoured copy for services', () => {
+			expect(getContextPickerEmptyContent('Services', '')).toStrictEqual({
+				title: 'No services reporting data yet.',
+				ctaLabel: 'Ask me to help set up instrumentation',
+				prefill: 'Help me set up instrumentation for ',
+			});
+		});
+
+		it('treats a whitespace-only query as no query', () => {
+			expect(getContextPickerEmptyContent('Dashboards', '   ')).toStrictEqual({
+				title: 'No dashboards yet.',
+				ctaLabel: 'Ask me to create one',
+				prefill: 'Create a dashboard for ',
+			});
+		});
+
+		it('leaves the prefill ending in a space so the caret sits after it', () => {
+			CONTEXT_CATEGORIES.forEach((category) => {
+				expect(getContextPickerEmptyContent(category, '').prefill).toMatch(/ $/);
+			});
+		});
+	});
+
+	describe('search miss (query, no match)', () => {
+		it('seeds the query into dashboards copy and prefill', () => {
+			expect(getContextPickerEmptyContent('Dashboards', 'checkout')).toStrictEqual(
+				{
+					title: 'No dashboards match "checkout".',
+					ctaLabel: 'Create a dashboard for "checkout"',
+					prefill: 'Create a dashboard for checkout',
+				},
+			);
+		});
+
+		it('seeds the query into alerts copy and prefill', () => {
+			expect(getContextPickerEmptyContent('Alerts', 'checkout')).toStrictEqual({
+				title: 'No alerts match "checkout".',
+				ctaLabel: 'Create an alert for "checkout"',
+				prefill: 'Create an alert for checkout',
+			});
+		});
+
+		it('uses instrumentation wording for services search misses', () => {
+			expect(getContextPickerEmptyContent('Services', 'checkout')).toStrictEqual({
+				title: 'No services match "checkout".',
+				ctaLabel: 'Set up instrumentation for "checkout"',
+				prefill: 'Help me set up instrumentation for checkout',
+			});
+		});
+
+		it('preserves the original casing of the query', () => {
+			const { title, ctaLabel, prefill } = getContextPickerEmptyContent(
+				'Dashboards',
+				'Checkout API',
+			);
+			expect(title).toBe('No dashboards match "Checkout API".');
+			expect(ctaLabel).toBe('Create a dashboard for "Checkout API"');
+			expect(prefill).toBe('Create a dashboard for Checkout API');
+		});
+
+		it('trims surrounding whitespace from the query', () => {
+			expect(
+				getContextPickerEmptyContent('Dashboards', '  checkout  ').prefill,
+			).toBe('Create a dashboard for checkout');
+		});
+	});
+
+	it('never emits an em-dash (house style)', () => {
+		CONTEXT_CATEGORIES.forEach((category) => {
+			const empty = getContextPickerEmptyContent(category, '');
+			const miss = getContextPickerEmptyContent(category, 'q');
+			[empty, miss].forEach(({ title, ctaLabel, prefill }) => {
+				expect(`${title}${ctaLabel}${prefill}`).not.toContain('—');
+			});
+		});
+	});
+});

frontend/src/container/AIAssistant/components/ChatInput/contextPicker.ts

@@ -0,0 +1,103 @@
+import { Bell, LayoutDashboard, ShieldCheck } from '@signozhq/icons';
+
+/** Ordered category tabs shown in the @-mention context picker. */
+export const CONTEXT_CATEGORIES = ['Dashboards', 'Alerts', 'Services'] as const;
+
+export type ContextCategory = (typeof CONTEXT_CATEGORIES)[number];
+
+/**
+ * Icon per category, shared by the picker tablist and the empty state. `satisfies`
+ * keeps the concrete component types so callers can render `<Icon size={n} />`.
+ */
+export const CONTEXT_CATEGORY_ICONS = {
+	Dashboards: LayoutDashboard,
+	Alerts: Bell,
+	Services: ShieldCheck,
+} satisfies Record<ContextCategory, unknown>;
+
+/**
+ * Resolved copy + composer prefill for one render of the context picker's empty
+ * state. The picker is tabbed, so a user only ever views one category at a
+ * time — each category gets its own onboarding and search-miss copy rather than
+ * a single combined "nothing to show" line.
+ */
+export interface ContextPickerEmptyContent {
+	/** Primary line explaining why the list is empty. */
+	title: string;
+	/** Clickable call to action that prefills (never auto-sends) the composer. */
+	ctaLabel: string;
+	/**
+	 * Text dropped into the composer when the CTA is clicked. When there's no
+	 * search query this is just the prefix with a trailing space, leaving the
+	 * caret at the end for the user to type the entity name.
+	 */
+	prefill: string;
+}
+
+interface CategoryCopy {
+	/** Onboarding line, e.g. "No dashboards yet." */
+	emptyTitle: string;
+	/** Onboarding CTA label, e.g. "Ask me to create one". */
+	emptyCtaLabel: string;
+	/** Search-miss line, e.g. `No dashboards match "checkout".` */
+	matchTitle: (query: string) => string;
+	/** Search-miss CTA label, e.g. `Create a dashboard for "checkout"`. */
+	matchCtaLabel: (query: string) => string;
+	/**
+	 * Composer prefill prefix (with trailing space). The prefill is always
+	 * `${prefillPrefix}${query}`, so the search-miss case seeds the query and
+	 * the onboarding case leaves only the prefix.
+	 */
+	prefillPrefix: string;
+}
+
+// Services get instrumentation-flavoured copy: the assistant can't "create" a
+// service, they come from telemetry, so the CTA points at setup instead.
+const CONTEXT_PICKER_COPY: Record<ContextCategory, CategoryCopy> = {
+	Dashboards: {
+		emptyTitle: 'No dashboards yet.',
+		emptyCtaLabel: 'Ask me to create one',
+		matchTitle: (query) => `No dashboards match "${query}".`,
+		matchCtaLabel: (query) => `Create a dashboard for "${query}"`,
+		prefillPrefix: 'Create a dashboard for ',
+	},
+	Alerts: {
+		emptyTitle: 'No alerts yet.',
+		emptyCtaLabel: 'Ask me to create one',
+		matchTitle: (query) => `No alerts match "${query}".`,
+		matchCtaLabel: (query) => `Create an alert for "${query}"`,
+		prefillPrefix: 'Create an alert for ',
+	},
+	Services: {
+		emptyTitle: 'No services reporting data yet.',
+		emptyCtaLabel: 'Ask me to help set up instrumentation',
+		matchTitle: (query) => `No services match "${query}".`,
+		matchCtaLabel: (query) => `Set up instrumentation for "${query}"`,
+		prefillPrefix: 'Help me set up instrumentation for ',
+	},
+};
+
+/**
+ * Build the empty-state copy for a category. The two states are driven solely
+ * by whether a search query is active: a non-empty query yields the search-miss
+ * variant, an empty query the onboarding variant.
+ */
+export function getContextPickerEmptyContent(
+	category: ContextCategory,
+	query: string,
+): ContextPickerEmptyContent {
+	const copy = CONTEXT_PICKER_COPY[category];
+	const trimmed = query.trim();
+	if (trimmed) {
+		return {
+			title: copy.matchTitle(trimmed),
+			ctaLabel: copy.matchCtaLabel(trimmed),
+			prefill: `${copy.prefillPrefix}${trimmed}`,
+		};
+	}
+	return {
+		title: copy.emptyTitle,
+		ctaLabel: copy.emptyCtaLabel,
+		prefill: copy.prefillPrefix,
+	};
+}

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -124,7 +124,9 @@ export function getAutoContexts(
 		}
 	}
 
-	// Alert edit — `/alerts/edit?ruleId=…`.
+	// Alert edit — `/alerts/edit?ruleId=…`. The form syncs its query-builder
+	// state to the URL (`useShareBuilderUrl`), so shared metadata carries the
+	// alert's query + time range, mirroring the dashboard panel editor.
 	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
@@ -133,19 +135,21 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit', ruleId },
+					metadata: { page: 'alert_edit', ruleId, ...sharedMetadata },
 				},
 			];
 		}
 	}
 
+	// Alert new — `/alerts/new`. No rule id yet (draft), but the query-builder
+	// state is on the URL, so shared metadata carries the in-progress query.
 	if (matchPath(pathname, { path: ROUTES.ALERTS_NEW, exact: true })) {
 		return [
 			{
 				source: 'auto',
 				type: 'alert',
 				resourceId: null,
-				metadata: { page: 'alert_new' },
+				metadata: { page: 'alert_new', ...sharedMetadata },
 			},
 		];
 	}

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -0,0 +1,27 @@
+.llmObservability {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
+}

frontend/src/container/LLMObservability/LLMObservability.tsx

@@ -0,0 +1,18 @@
+import styles from './LLMObservability.module.scss';
+
+function LLMObservability(): JSX.Element {
+	return (
+		<div className={styles.llmObservability} data-testid="llm-observability-page">
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<h1 className={styles.title}>LLM Observability</h1>
+					<p className={styles.subtitle}>
+						Monitor and analyze your LLM usage, costs, and performance
+					</p>
+				</div>
+			</header>
+		</div>
+	);
+}
+
+export default LLMObservability;

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -0,0 +1,30 @@
+.llmObservabilityModelPricing {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -0,0 +1,47 @@
+import { Tabs } from '@signozhq/ui/tabs';
+import { Typography } from '@signozhq/ui/typography';
+
+import ModelCostTabPanel from './ModelCostTabPanel';
+import styles from './LLMObservabilityModelPricing.module.scss';
+
+function LLMObservabilityModelPricing(): JSX.Element {
+	return (
+		<div
+			className={styles.llmObservabilityModelPricing}
+			data-testid="llm-observability-model-pricing-page"
+		>
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<Typography.Text as="h1" size="large" weight="semibold">
+						Configuration
+					</Typography.Text>
+					<Typography.Text color="muted">
+						Model pricing and cost estimation settings
+					</Typography.Text>
+				</div>
+			</header>
+
+			<Tabs
+				// Model costs is the only enabled tab for now, so default to it. When
+				// the unpriced-models tab lands, this can become a URL-backed param.
+				defaultValue="model-costs"
+				items={[
+					{
+						key: 'model-costs',
+						label: 'Model costs',
+						children: <ModelCostTabPanel />,
+					},
+					{
+						// Unpriced-models tab lands in a later PR.
+						key: 'unpriced-models',
+						label: 'Unpriced models',
+						disabled: true,
+						children: null,
+					},
+				]}
+			/>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss

@@ -0,0 +1,7 @@
+.pageError {
+	padding: var(--spacing-6) var(--spacing-8);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
+	color: var(--text-cherry-400);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
+import { useTableParams } from 'components/TanStackTableView';
+import { Typography } from '@signozhq/ui/typography';
+
+import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
+import styles from './ModelCostTabPanel.module.scss';
+import ModelCostsTable from './components/ModelCostsTable';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+function ModelCostTabPanel(): JSX.Element {
+	const { page, limit } = useTableParams(
+		{ page: PAGE_KEY, limit: LIMIT_KEY },
+		{ page: 1, limit: PAGE_SIZE },
+	);
+
+	// Search + source filters are intentionally omitted for now — the list API
+	// doesn't honour them yet. They'll be reintroduced here once it does.
+	const listParams: ListLLMPricingRulesParams = {
+		offset: (page - 1) * limit,
+		limit,
+	};
+
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+
+	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
+		() => data?.data?.items || [],
+		[data],
+	);
+	const total = data?.data?.total ?? 0;
+
+	return (
+		<>
+			{isError && (
+				<div className={styles.pageError} role="alert">
+					Failed to load pricing rules. Please try again.
+				</div>
+			)}
+
+			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
+			<ModelCostsTable
+				rules={rules}
+				isLoading={isLoading}
+				total={total}
+				selectedRuleId={null}
+				canManage={false}
+				onEdit={(): void => undefined}
+				onDelete={(): void => undefined}
+			/>
+
+			<footer>
+				<Typography.Text color="muted" size="small">
+					All prices per 1M tokens (USD)
+				</Typography.Text>
+			</footer>
+		</>
+	);
+}
+
+export default ModelCostTabPanel;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.module.scss

@@ -0,0 +1,8 @@
+.actionButton {
+	opacity: 0.7;
+	transition: opacity 0.15s ease;
+
+	&:hover {
+		opacity: 1;
+	}
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './ModelCostActionsMenu.module.scss';
+
+interface ModelCostActionsMenuProps {
+	rule: LlmpricingruletypesLLMPricingRuleDTO;
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// Per-row kebab menu for the model-costs table. Only manage users get actions
+// (Edit + Delete); view-only users have nothing to act on, so the cell stays
+// empty rather than showing a single-item menu.
+function ModelCostActionsMenu({
+	rule,
+	canManage,
+	onEdit,
+	onDelete,
+}: ModelCostActionsMenuProps): JSX.Element | null {
+	const menuItems = useMemo<MenuItem[]>(
+		() => [
+			{
+				key: 'edit',
+				label: 'Edit',
+				onClick: (): void => onEdit(rule),
+			},
+			{
+				key: 'delete',
+				label: 'Delete',
+				danger: true,
+				onClick: (): void => onDelete(rule),
+			},
+		],
+		[onEdit, onDelete, rule],
+	);
+
+	if (!canManage) {
+		return null;
+	}
+
+	return (
+		<DropdownMenuSimple menu={{ items: menuItems }} align="end">
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="icon"
+				className={styles.actionButton}
+				testId={`model-cost-actions-${rule.id}`}
+			>
+				<Ellipsis size={16} />
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default ModelCostActionsMenu;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -0,0 +1,20 @@
+.modelCostsTable {
+	margin-top: var(--spacing-8);
+	--tanstack-table-row-height: 48px;
+	height: calc(100vh - 250px);
+	overflow-y: auto;
+
+	:global(table) tbody tr {
+		cursor: default;
+	}
+}
+
+.modelCostsEmpty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: var(--spacing-8);
+	min-height: 400px;
+	color: var(--text-vanilla-400);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+
+import {
+	LIMIT_KEY,
+	PAGE_KEY,
+	PAGE_SIZE,
+	SKELETON_ROW_COUNT,
+} from '../../../constants';
+import styles from './ModelCostsTable.module.scss';
+import { getModelCostsColumns } from './TableConfig';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+interface ModelCostsTableProps {
+	rules: LlmpricingruletypesLLMPricingRuleDTO[];
+	isLoading: boolean;
+	total: number;
+	selectedRuleId: string | null;
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// The table owns its own pagination URL state (page/limit) via enableQueryParams;
+// ModelCostsTab reads the same keys to build the list request. Virtual scroll is
+// disabled: a plain table renders fine at our page sizes (up to 100 rows) and the
+// fixed-height scroll viewport (.modelCostsTable) keeps large pages scrolling
+// inside the table.
+function ModelCostsTable({
+	rules,
+	isLoading,
+	total,
+	selectedRuleId,
+	canManage,
+	onEdit,
+	onDelete,
+}: ModelCostsTableProps): JSX.Element {
+	const columns = useMemo(
+		() => getModelCostsColumns({ canManage, onEdit, onDelete }),
+		[canManage, onEdit, onDelete],
+	);
+
+	if (!isLoading && rules.length === 0) {
+		return (
+			<div className={styles.modelCostsEmpty} data-testid="model-costs-empty">
+				No model costs yet.
+			</div>
+		);
+	}
+
+	return (
+		<TanStackTable<LlmpricingruletypesLLMPricingRuleDTO>
+			className={styles.modelCostsTable}
+			data={rules}
+			columns={columns}
+			isLoading={isLoading}
+			skeletonRowCount={SKELETON_ROW_COUNT}
+			getRowKey={(row): string => row.id}
+			isRowActive={(row): boolean => row.id === selectedRuleId}
+			disableVirtualScroll
+			testId="model-costs-table"
+			enableQueryParams={{ page: PAGE_KEY, limit: LIMIT_KEY }}
+			pagination={{
+				total,
+				defaultLimit: PAGE_SIZE,
+				showTotalCount: true,
+				totalCountLabel: 'models',
+			}}
+		/>
+	);
+}
+
+export default ModelCostsTable;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/index.ts

@@ -0,0 +1 @@
+export { getModelCostsColumns } from './table.config';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/table.config.tsx

@@ -0,0 +1,161 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import { startCase } from 'lodash-es';
+
+import styles from './tableConfig.module.scss';
+import ModelCostActionsMenu from '../ModelCostActionsMenu';
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+	getRelativeLastSeen,
+	getSourceLabel,
+} from '../../../../utils';
+
+interface ColumnsConfig {
+	canManage: boolean;
+	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
+}
+
+// Column definitions for the model-costs TanStackTable. Sorting is intentionally
+// off across the board — the list API only accepts offset/limit, so there's no
+// server-side ordering to back a sortable header yet.
+export function getModelCostsColumns({
+	canManage,
+	onEdit,
+	onDelete,
+}: ColumnsConfig): TableColumnDef<LlmpricingruletypesLLMPricingRuleDTO>[] {
+	return [
+		{
+			id: 'model',
+			header: 'Model',
+			accessorFn: (row): string => row.modelName ?? '',
+			// Flexes to absorb spare width alongside Extra buckets so the row fills
+			// the container instead of leaving a gap on the right.
+			width: { min: 240, default: '100%' },
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element => (
+				<div className={styles.modelCell}>
+					<Typography.Text
+						weight="semibold"
+						truncate={1}
+						testId={`model-cell-name-${row.id}`}
+					>
+						{row.modelName}
+					</Typography.Text>
+
+					<Typography.Text truncate={1}>{getCanonicalId(row)}</Typography.Text>
+				</div>
+			),
+		},
+		{
+			id: 'provider',
+			header: 'Provider',
+			accessorKey: 'provider',
+			width: { min: 140 },
+			enableMove: false,
+			cell: ({ row }): string => row.provider ?? '',
+		},
+		{
+			id: 'input',
+			header: 'Input / 1M',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Typography.Text>
+					{formatPricePerMillion(row.pricing?.input)}
+				</Typography.Text>
+			),
+		},
+		{
+			id: 'output',
+			header: 'Output / 1M',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Typography.Text>
+					{formatPricePerMillion(row.pricing?.output)}
+				</Typography.Text>
+			),
+		},
+		{
+			id: 'extraBuckets',
+			header: 'Extra buckets',
+			width: { min: 200, default: '100%' },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => {
+				const buckets = getExtraBuckets(row);
+				if (buckets.length === 0) {
+					return (
+						<Typography.Text color="muted" as="span">
+							—
+						</Typography.Text>
+					);
+				}
+				return (
+					<div className={styles.extraBuckets}>
+						{buckets.map((bucket) => (
+							<Badge
+								key={bucket.key}
+								color="vanilla"
+								variant="outline"
+								className={styles.extraBucketsChip}
+							>
+								<Typography.Text as="span" size="small">
+									{startCase(bucket.key)}
+								</Typography.Text>
+								<Typography.Text as="span" size="small" weight="semibold">
+									{formatPricePerMillion(bucket.pricePerMillion)}
+								</Typography.Text>
+							</Badge>
+						))}
+					</div>
+				);
+			},
+		},
+		{
+			id: 'source',
+			header: 'Source',
+			width: { min: 130 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Badge
+					color={row.isOverride ? 'amber' : 'robin'}
+					variant="outline"
+					className={styles.sourceBadge}
+					data-testid={`source-badge-${row.id}`}
+				>
+					{getSourceLabel(row)}
+				</Badge>
+			),
+		},
+		{
+			id: 'lastSeen',
+			header: 'Last seen',
+			width: { min: 120 },
+			enableMove: false,
+			cell: ({ row }): string => getRelativeLastSeen(row),
+		},
+		{
+			id: 'actions',
+			header: '',
+			width: { fixed: '56px', ignoreLastColumnFill: true },
+			pin: 'right',
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element | null => (
+				<ModelCostActionsMenu
+					rule={row}
+					canManage={canManage}
+					onEdit={onEdit}
+					onDelete={onDelete}
+				/>
+			),
+		},
+	];
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/tableConfig.module.scss

@@ -0,0 +1,26 @@
+.modelCell {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	min-width: 0;
+}
+
+.extraBuckets {
+	display: flex;
+	// Keep chips on a single line so the row stays at the table's fixed row
+	// height; the column flexes to 100% so there's room for both.
+	flex-wrap: nowrap;
+	gap: var(--spacing-3);
+	overflow: hidden;
+}
+
+.extraBucketsChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin: 0;
+}
+
+.sourceBadge {
+	margin: 0;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/index.ts

@@ -0,0 +1 @@
+export { default } from './ModelCostsTable';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './ModelCostTabPanel';

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -0,0 +1,6 @@
+export const PAGE_SIZE = 20;
+
+export const PAGE_KEY = 'page';
+export const LIMIT_KEY = 'limit';
+
+export const SKELETON_ROW_COUNT = PAGE_SIZE;

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -0,0 +1,4 @@
+export interface ExtraBucket {
+	key: string;
+	pricePerMillion: number;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -0,0 +1,60 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import type { ExtraBucket } from './types';
+import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+dayjs.extend(relativeTime);
+
+const getRelativeTime = (
+	timestamp: string | number | Date | null | undefined,
+): string => {
+	const parsed = timestamp != null ? dayjs(timestamp) : null;
+	return parsed?.isValid() ? parsed.fromNow() : '—';
+};
+
+// ─── Display helpers ─────────────────────────────────────────────────────────
+
+export const formatPricePerMillion = (value: number | undefined): string => {
+	if (value === undefined || value === null) {
+		return '—';
+	}
+	// 2dp is enough for per-1M pricing. we can update this later we models have sub-cent pricing.
+	return `$${value.toFixed(2)}`;
+};
+
+export const getExtraBuckets = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): ExtraBucket[] => {
+	const cache = rule.pricing?.cache;
+	if (!cache) {
+		return [];
+	}
+	const buckets: ExtraBucket[] = [];
+	if (typeof cache.read === 'number' && cache.read > 0) {
+		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
+	}
+	if (typeof cache.write === 'number' && cache.write > 0) {
+		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
+	}
+	return buckets;
+};
+
+export const getSourceLabel = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
+
+export const getRelativeLastSeen = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+
+// Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
+// are lower-cased so the id is consistently normalised (providers/models can
+// arrive with mixed casing).
+export const getCanonicalId = (
+	rule: LlmpricingruletypesLLMPricingRuleDTO,
+): string => {
+	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
+	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
+	return `${provider}:${model}`;
+};

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

@@ -20,7 +20,6 @@ import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
-import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
 import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
@@ -52,7 +51,6 @@ import externalApiMonitoringUrl from '@/assets/Logos/external-api-monitoring.svg
 import fluentbitUrl from '@/assets/Logos/fluentbit.svg';
 import fluentdUrl from '@/assets/Logos/fluentd.svg';
 import flutterMonitoringUrl from '@/assets/Logos/flutter-monitoring.svg';
-import fluxcdUrl from '@/assets/Logos/fluxcd.svg';
 import flyIoUrl from '@/assets/Logos/fly-io.svg';
 import fromLogFileUrl from '@/assets/Logos/from-log-file.svg';
 import gcpAppEngineUrl from '@/assets/Logos/gcp-app-engine.svg';
@@ -96,7 +94,6 @@ import langtraceUrl from '@/assets/Logos/langtrace.svg';
 import litellmUrl from '@/assets/Logos/litellm.svg';
 import livekitUrl from '@/assets/Logos/livekit.svg';
 import llamaindexUrl from '@/assets/Logos/llamaindex.svg';
-import llmMonitoringUrl from '@/assets/Logos/llm-monitoring.svg';
 import logrusUrl from '@/assets/Logos/logrus.svg';
 import logsUrl from '@/assets/Logos/logs.svg';
 import logstashUrl from '@/assets/Logos/logstash.svg';
@@ -123,7 +120,6 @@ import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
 import phpUrl from '@/assets/Logos/php.svg';
 import pinoUrl from '@/assets/Logos/pino.svg';
 import pipecatUrl from '@/assets/Logos/pipecat.svg';
-import planetscaleUrl from '@/assets/Logos/planetscale.svg';
 import postgresqlUrl from '@/assets/Logos/postgresql.svg';
 import prometheusUrl from '@/assets/Logos/prometheus.svg';
 import pydanticAiUrl from '@/assets/Logos/pydantic-ai.svg';
@@ -1530,28 +1526,6 @@ const onboardingConfigWithLinks = [
 		id: 'nginx-tracing',
 		link: '/docs/instrumentation/opentelemetry-nginx/',
 	},
-	{
-		dataSource: 'nginx-ingress-controller',
-		label: 'NGINX Ingress Controller',
-		imgUrl: nginxUrl,
-		tags: ['infrastructure monitoring'],
-		module: 'metrics',
-		relatedSearchKeywords: [
-			'ingress',
-			'ingress controller',
-			'kubernetes ingress',
-			'monitoring',
-			'nginx ingress',
-			'nginx ingress controller',
-			'nginx ingress metrics',
-			'nginx ingress monitoring',
-			'nginx ingress observability',
-			'observability',
-			'opentelemetry nginx ingress',
-		],
-		id: 'nginx-ingress-controller',
-		link: '/docs/metrics-management/nginx-ingress-controller/',
-	},
 	{
 		dataSource: 'opentelemetry-cloudflare',
 		label: 'Cloudflare Tracing',
@@ -1612,119 +1586,6 @@ const onboardingConfigWithLinks = [
 		id: 'opentelemetry-cloudflare-logs',
 		link: '/docs/logs-management/send-logs/cloudflare-logs/',
 	},
-	{
-		dataSource: 'cloudflare-workers',
-		label: 'Cloudflare Workers',
-		imgUrl: cloudflareUrl,
-		tags: ['apm/traces'],
-		module: 'apm',
-		relatedSearchKeywords: [
-			'cloudflare',
-			'cloudflare workers',
-			'cloudflare workers monitoring',
-			'cloudflare workers observability',
-			'cloudflare workers otlp',
-			'edge computing monitoring',
-			'monitor cloudflare workers',
-			'monitoring',
-			'observability',
-			'opentelemetry cloudflare workers',
-			'otlp',
-			'serverless monitoring',
-		],
-		id: 'cloudflare-workers',
-		link: '/docs/integrations/outposts/cloudflare-workers/',
-	},
-	{
-		dataSource: 'opentelemetry-cassandra',
-		label: 'Cassandra',
-		imgUrl: cassandraUrl,
-		tags: ['database'],
-		module: 'apm',
-		relatedSearchKeywords: [
-			'apache cassandra',
-			'cassandra',
-			'cassandra database',
-			'cassandra logs',
-			'cassandra metrics',
-			'cassandra monitoring',
-			'cassandra observability',
-			'database',
-			'monitoring',
-			'nosql',
-			'observability',
-			'opentelemetry cassandra',
-		],
-		id: 'opentelemetry-cassandra',
-		link: '/docs/integrations/opentelemetry-cassandra/',
-	},
-	{
-		dataSource: 'fluxcd',
-		label: 'FluxCD',
-		imgUrl: fluxcdUrl,
-		tags: ['infrastructure monitoring'],
-		module: 'metrics',
-		relatedSearchKeywords: [
-			'continuous delivery',
-			'flux',
-			'fluxcd',
-			'fluxcd dashboard',
-			'fluxcd metrics',
-			'fluxcd monitoring',
-			'fluxcd observability',
-			'gitops',
-			'kubernetes',
-			'monitoring',
-			'observability',
-			'opentelemetry fluxcd',
-		],
-		id: 'fluxcd',
-		link: '/docs/metrics-management/fluxcd-metrics/',
-	},
-	{
-		dataSource: 'planetscale',
-		label: 'PlanetScale',
-		imgUrl: planetscaleUrl,
-		tags: ['database'],
-		module: 'apm',
-		relatedSearchKeywords: [
-			'database',
-			'monitoring',
-			'mysql',
-			'observability',
-			'opentelemetry planetscale',
-			'planetscale',
-			'planetscale database',
-			'planetscale metrics',
-			'planetscale monitoring',
-			'planetscale observability',
-			'serverless database',
-		],
-		id: 'planetscale',
-		link: '/docs/metrics-management/opentelemetry-planetscale/',
-	},
-	{
-		dataSource: 'hermes-agent',
-		label: 'Hermes Agent',
-		imgUrl: llmMonitoringUrl,
-		tags: ['LLM Monitoring'],
-		module: 'apm',
-		relatedSearchKeywords: [
-			'ai agent monitoring',
-			'hermes',
-			'hermes agent',
-			'hermes agent monitoring',
-			'hermes agent observability',
-			'hermes monitoring',
-			'llm monitoring',
-			'monitoring',
-			'nous research',
-			'observability',
-			'opentelemetry hermes',
-		],
-		id: 'hermes-agent',
-		link: '/docs/hermes-monitoring/',
-	},
 	{
 		dataSource: 'convex-logs',
 		label: 'Convex Logs',

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -1,108 +0,0 @@
-.flamegraph {
-	display: flex;
-	height: 30vh;
-	border-bottom: 1px solid var(--l1-border);
-
-	.flamegraph-chart {
-		padding: 15px;
-
-		.loading-skeleton {
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.flamegraph-stats {
-		display: flex;
-		flex-direction: column;
-		border-right: 1px solid var(--l1-border);
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding: 16px 20px;
-
-		.exec-time-service {
-			display: flex;
-			height: 30px;
-			flex-shrink: 0;
-			justify-content: center;
-			align-items: center;
-			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-border);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			margin-bottom: 16px;
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-			letter-spacing: -0.06px;
-		}
-
-		.stats {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			overflow-y: auto;
-			overflow-x: hidden;
-
-			&::-webkit-scrollbar {
-				width: 0rem;
-			}
-
-			.value-row {
-				display: flex;
-				justify-content: space-between;
-
-				.service-name {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					width: 80%;
-
-					.service-text {
-						color: var(--l2-foreground);
-						font-family: 'Inter';
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						width: 80%;
-					}
-
-					.square-box {
-						height: 8px;
-						width: 8px;
-					}
-				}
-
-				.progress-service {
-					display: flex;
-					align-items: center;
-					width: 100px;
-					gap: 8px;
-					justify-content: flex-start;
-					flex-shrink: 0;
-
-					.service-progress-indicator {
-						width: fit-content;
-						--progress-width: 30px;
-					}
-
-					.percent-value {
-						color: var(--l1-foreground);
-						text-align: right;
-						font-family: 'Inter';
-						font-size: 12px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.48px;
-						font-variant-numeric: lining-nums tabular-nums slashed-zero;
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,186 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Skeleton, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import Spinner from 'components/Spinner';
-import { themeColors } from 'constants/theme';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import { TraceFlamegraphStates } from './constants';
-import Error from './TraceFlamegraphStates/Error/Error';
-import NoData from './TraceFlamegraphStates/NoData/NoData';
-import Success from './TraceFlamegraphStates/Success/Success';
-
-import './PaginatedTraceFlamegraph.styles.scss';
-
-interface ITraceFlamegraphProps {
-	serviceExecTime: Record<string, number>;
-	startTime: number;
-	endTime: number;
-	traceFlamegraphStatsWidth: number;
-	selectedSpan: Span | undefined;
-}
-
-function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
-	const {
-		serviceExecTime,
-		startTime,
-		endTime,
-		traceFlamegraphStatsWidth,
-		selectedSpan,
-	} = props;
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
-	const urlQuery = useUrlQuery();
-	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
-		urlQuery.get('spanId') || '',
-	);
-
-	useEffect(() => {
-		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
-	}, [urlQuery]);
-
-	const { data, isFetching, error } = useGetTraceFlamegraph({
-		traceId,
-		selectedSpanId: firstSpanAtFetchLevel,
-	});
-
-	// get the current state of trace flamegraph based on the API lifecycle
-	const traceFlamegraphState = useMemo(() => {
-		if (isFetching) {
-			if (
-				data &&
-				data.payload &&
-				data.payload.spans &&
-				data.payload.spans.length > 0
-			) {
-				return TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT;
-			}
-			return TraceFlamegraphStates.LOADING;
-		}
-		if (error) {
-			return TraceFlamegraphStates.ERROR;
-		}
-		if (
-			data &&
-			data.payload &&
-			data.payload.spans &&
-			data.payload.spans.length === 0
-		) {
-			return TraceFlamegraphStates.NO_DATA;
-		}
-
-		return TraceFlamegraphStates.SUCCESS;
-	}, [error, isFetching, data]);
-
-	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(
-		() => data?.payload?.spans || [],
-		[data?.payload?.spans],
-	);
-
-	// get the content based on the current state of the trace waterfall
-	const getContent = useMemo(() => {
-		switch (traceFlamegraphState) {
-			case TraceFlamegraphStates.LOADING:
-				return (
-					<div className="loading-skeleton">
-						<Skeleton active paragraph={{ rows: 3 }} />
-					</div>
-				);
-			case TraceFlamegraphStates.ERROR:
-				return <Error error={error as AxiosError} />;
-			case TraceFlamegraphStates.NO_DATA:
-				return <NoData id={traceId} />;
-			case TraceFlamegraphStates.SUCCESS:
-			case TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT:
-				return (
-					<Success
-						spans={spans}
-						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
-						}}
-						selectedSpan={selectedSpan}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		error,
-		firstSpanAtFetchLevel,
-		selectedSpan,
-		spans,
-		traceFlamegraphState,
-		traceId,
-	]);
-
-	const spread = useMemo(() => endTime - startTime, [endTime, startTime]);
-
-	return (
-		<div className="flamegraph">
-			<div
-				className="flamegraph-stats"
-				style={{ width: `${traceFlamegraphStatsWidth + 22}px` }}
-			>
-				<div className="exec-time-service">% exec time</div>
-				<div className="stats">
-					{Object.keys(serviceExecTime)
-						.sort((a, b) => {
-							if (spread <= 0) {
-								return 0;
-							}
-							const aValue = (serviceExecTime[a] * 100) / spread;
-							const bValue = (serviceExecTime[b] * 100) / spread;
-							return bValue - aValue;
-						})
-						.map((service) => {
-							const value =
-								spread <= 0 ? 0 : (serviceExecTime[service] * 100) / spread;
-							const color = generateColor(service, themeColors.traceDetailColors);
-							return (
-								<div key={service} className="value-row">
-									<section className="service-name">
-										<div className="square-box" style={{ backgroundColor: color }} />
-										<Tooltip title={service}>
-											<Typography.Text className="service-text" truncate={1}>
-												{service}
-											</Typography.Text>
-										</Tooltip>
-									</section>
-									<section className="progress-service">
-										<Progress
-											percent={parseFloat(value.toFixed(2))}
-											className="service-progress-indicator"
-											showInfo={false}
-										/>
-										<Typography.Text className="percent-value">
-											{parseFloat(value.toFixed(2))}%
-										</Typography.Text>
-									</section>
-								</div>
-							);
-						})}
-				</div>
-			</div>
-			<div
-				className="flamegraph-chart"
-				style={{ width: `calc(100% - ${traceFlamegraphStatsWidth + 22}px)` }}
-			>
-				{getContent}
-			</div>
-		</div>
-	);
-}
-
-export default TraceFlamegraph;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.styles.scss

@@ -1,23 +0,0 @@
-.error-flamegraph {
-	display: flex;
-	gap: 4px;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 15vh;
-
-	.error-flamegraph-img {
-		height: 32px;
-		width: 32px;
-	}
-
-	.no-data-text {
-		color: var(--muted-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.tsx

@@ -1,32 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
-import './Error.styles.scss';
-
-interface IErrorProps {
-	error: AxiosError;
-}
-
-function Error(props: IErrorProps): JSX.Element {
-	const { error } = props;
-
-	return (
-		<div className="error-flamegraph">
-			<img
-				src={noDataUrl}
-				alt="error-flamegraph"
-				className="error-flamegraph-img"
-			/>
-			<Tooltip title={error?.message}>
-				<Typography.Text className="no-data-text">
-					{error?.message || 'Something went wrong!'}
-				</Typography.Text>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default Error;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/NoData/NoData.tsx

@@ -1,12 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-interface INoDataProps {
-	id: string;
-}
-
-function NoData(props: INoDataProps): JSX.Element {
-	const { id } = props;
-	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
-}
-
-export default NoData;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -1,49 +0,0 @@
-.trace-flamegraph {
-	height: 90%;
-	overflow-x: hidden;
-	overflow-y: auto;
-
-	.trace-flamegraph-virtuoso {
-		overflow-x: hidden;
-
-		.flamegraph-row {
-			display: flex;
-			align-items: center;
-			height: 18px;
-			padding-bottom: 6px;
-
-			.span-item {
-				position: absolute;
-				height: 12px;
-				background-color: yellow;
-				border-radius: 6px;
-				cursor: pointer;
-
-				.event-dot {
-					position: absolute;
-					top: 50%;
-					transform: translate(-50%, -50%) rotate(45deg);
-					width: 6px;
-					height: 6px;
-					background-color: var(--primary-background);
-					border: 1px solid var(--bg-robin-600);
-					cursor: pointer;
-					z-index: 1;
-
-					&.error {
-						background-color: var(--danger-background);
-						border-color: var(--bg-cherry-600);
-					}
-
-					&:hover {
-						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-					}
-				}
-			}
-		}
-
-		&::-webkit-scrollbar {
-			width: 0rem;
-		}
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -1,178 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { Tooltip } from 'antd';
-import Color from 'color';
-import TimelineV2 from 'components/TimelineV2/TimelineV2';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './Success.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface ISuccessProps {
-	spans: FlamegraphSpan[][];
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-}
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		setFirstSpanAtFetchLevel,
-		traceMetadata,
-		firstSpanAtFetchLevel,
-		selectedSpan,
-	} = props;
-	const { search } = useLocation();
-	const history = useHistory();
-	const isDarkMode = useIsDarkMode();
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
-	const renderSpanLevel = useCallback(
-		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
-			<div className="flamegraph-row">
-				{spans.map((span) => {
-					const spread = traceMetadata.endTime - traceMetadata.startTime;
-					const leftOffset =
-						((span.timestamp - traceMetadata.startTime) * 100) / spread;
-					let width = ((span.durationNano / 1e6) * 100) / spread;
-					if (width > 100) {
-						width = 100;
-					}
-					const toolTipText = `${span.name}`;
-					const searchParams = new URLSearchParams(search);
-
-					let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-					const selectedSpanColor = isDarkMode
-						? Color(color).lighten(0.7)
-						: Color(color).darken(0.7);
-
-					if (span.hasError) {
-						color = `var(--danger-background)`;
-					}
-
-					return (
-						<Tooltip title={toolTipText} key={span.spanId}>
-							<div
-								className="span-item"
-								style={{
-									left: `${leftOffset}%`,
-									width: `${width}%`,
-									backgroundColor:
-										selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId
-											? `${selectedSpanColor}`
-											: color,
-								}}
-								onMouseEnter={(): void => setHoveredSpanId(span.spanId)}
-								onMouseLeave={(): void => setHoveredSpanId('')}
-								onClick={(event): void => {
-									event.stopPropagation();
-									event.preventDefault();
-									searchParams.set('spanId', span.spanId);
-									history.replace({ search: searchParams.toString() });
-								}}
-							>
-								{span.event?.map((event) => {
-									const eventTimeMs = event.timeUnixNano / 1e6;
-									const eventOffsetPercent =
-										((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
-									const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-									const { isError } = event;
-									const { time, timeUnitName } = convertTimeToRelevantUnit(
-										eventTimeMs - span.timestamp,
-									);
-									return (
-										<Tooltip
-											key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
-											title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
-										>
-											<div
-												className={`event-dot ${isError ? 'error' : ''}`}
-												style={{
-													left: `${clampedOffset}%`,
-												}}
-											/>
-										</Tooltip>
-									);
-								})}
-							</div>
-						</Tooltip>
-					);
-				})}
-			</div>
-		),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[traceMetadata.endTime, traceMetadata.startTime, selectedSpan, hoveredSpanId],
-	);
-
-	const handleRangeChanged = useCallback(
-		(range: ListRange) => {
-			// if there are less than 50 levels on any load that means a single API call is sufficient
-			if (spans.length < 50) {
-				return;
-			}
-
-			const { startIndex, endIndex } = range;
-			if (startIndex === 0 && spans[0][0].level !== 0) {
-				setFirstSpanAtFetchLevel(spans[0][0].spanId);
-			}
-
-			if (endIndex === spans.length - 1) {
-				setFirstSpanAtFetchLevel(spans[spans.length - 1][0].spanId);
-			}
-		},
-		[setFirstSpanAtFetchLevel, spans],
-	);
-
-	useEffect(() => {
-		const index = spans.findIndex(
-			(span) => span[0].spanId === firstSpanAtFetchLevel,
-		);
-
-		virtuosoRef.current?.scrollToIndex({
-			index,
-			behavior: 'auto',
-		});
-	}, [firstSpanAtFetchLevel, spans]);
-
-	return (
-		<>
-			<div className="trace-flamegraph">
-				<Virtuoso
-					ref={virtuosoRef}
-					className="trace-flamegraph-virtuoso"
-					data={spans}
-					itemContent={renderSpanLevel}
-					rangeChanged={handleRangeChanged}
-				/>
-			</div>
-			<TimelineV2
-				startTimestamp={traceMetadata.startTime}
-				endTimestamp={traceMetadata.endTime}
-				timelineHeight={22}
-			/>
-		</>
-	);
-}
-
-export default Success;

frontend/src/container/PaginatedTraceFlamegraph/constants.ts

@@ -1,7 +0,0 @@
-export enum TraceFlamegraphStates {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
-}

frontend/src/container/SpanDetailsDrawer/Attributes/AttributeActions.tsx

@@ -1,202 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Spin, Tooltip } from 'antd';
-import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
-import cx from 'classnames';
-import { OPERATORS } from 'constants/antlrQueryConstants';
-import { useTraceActions } from 'hooks/trace/useTraceActions';
-import {
-	ArrowDownToDot,
-	ArrowUpFromDot,
-	Copy,
-	Ellipsis,
-	Pin,
-} from '@signozhq/icons';
-
-interface AttributeRecord {
-	field: string;
-	value: string;
-}
-
-interface AttributeActionsProps {
-	record: AttributeRecord;
-	isPinned?: boolean;
-	onTogglePin?: (fieldKey: string) => void;
-	showPinned?: boolean;
-	showCopyOptions?: boolean;
-}
-
-export default function AttributeActions({
-	record,
-	isPinned,
-	onTogglePin,
-	showPinned = true,
-	showCopyOptions = true,
-}: AttributeActionsProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [isFilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
-	const [isFilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
-
-	const { onAddToQuery, onGroupByAttribute, onCopyFieldName, onCopyFieldValue } =
-		useTraceActions();
-
-	const textToCopy = useMemo(() => {
-		const str = record.value == null ? '' : String(record.value);
-		// Remove surrounding double-quotes only (e.g., JSON-encoded string values)
-		return str.replace(/^"|"$/g, '');
-	}, [record.value]);
-
-	const handleFilterIn = useCallback(async (): Promise<void> => {
-		if (!onAddToQuery || isFilterInLoading) {
-			return;
-		}
-		setIsFilterInLoading(true);
-		try {
-			await Promise.resolve(
-				onAddToQuery(record.field, record.value, OPERATORS['=']),
-			);
-		} finally {
-			setIsFilterInLoading(false);
-		}
-	}, [onAddToQuery, record.field, record.value, isFilterInLoading]);
-
-	const handleFilterOut = useCallback(async (): Promise<void> => {
-		if (!onAddToQuery || isFilterOutLoading) {
-			return;
-		}
-		setIsFilterOutLoading(true);
-		try {
-			await Promise.resolve(
-				onAddToQuery(record.field, record.value, OPERATORS['!=']),
-			);
-		} finally {
-			setIsFilterOutLoading(false);
-		}
-	}, [onAddToQuery, record.field, record.value, isFilterOutLoading]);
-
-	const handleGroupBy = useCallback((): void => {
-		if (onGroupByAttribute) {
-			onGroupByAttribute(record.field);
-		}
-		setIsOpen(false);
-	}, [onGroupByAttribute, record.field]);
-
-	const handleCopyFieldName = useCallback((): void => {
-		if (onCopyFieldName) {
-			onCopyFieldName(record.field);
-		}
-		setIsOpen(false);
-	}, [onCopyFieldName, record.field]);
-
-	const handleCopyFieldValue = useCallback((): void => {
-		if (onCopyFieldValue) {
-			onCopyFieldValue(textToCopy);
-		}
-		setIsOpen(false);
-	}, [onCopyFieldValue, textToCopy]);
-
-	const handleTogglePin = useCallback((): void => {
-		onTogglePin?.(record.field);
-	}, [onTogglePin, record.field]);
-
-	const moreActionsContent = (
-		<div className="attribute-actions-menu">
-			<Button
-				className="group-by-clause"
-				type="text"
-				icon={<GroupByIcon />}
-				onClick={handleGroupBy}
-				block
-			>
-				Group By Attribute
-			</Button>
-			{showCopyOptions && (
-				<>
-					<Button
-						type="text"
-						icon={<Copy size={14} />}
-						onClick={handleCopyFieldName}
-						block
-					>
-						Copy Field Name
-					</Button>
-					<Button
-						type="text"
-						icon={<Copy size={14} />}
-						onClick={handleCopyFieldValue}
-						block
-					>
-						Copy Field Value
-					</Button>
-				</>
-			)}
-		</div>
-	);
-
-	return (
-		<div className={cx('action-btn', { 'action-btn--is-open': isOpen })}>
-			{showPinned && (
-				<Tooltip title={isPinned ? 'Unpin attribute' : 'Pin attribute'}>
-					<Button
-						className={`filter-btn periscope-btn ${isPinned ? 'pinned' : ''}`}
-						aria-label={isPinned ? 'Unpin attribute' : 'Pin attribute'}
-						icon={<Pin size={14} fill={isPinned ? 'currentColor' : 'none'} />}
-						onClick={handleTogglePin}
-					/>
-				</Tooltip>
-			)}
-			<Tooltip title="Filter for value">
-				<Button
-					className="filter-btn periscope-btn"
-					aria-label="Filter for value"
-					disabled={isFilterInLoading}
-					icon={
-						isFilterInLoading ? (
-							<Spin size="small" />
-						) : (
-							<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
-						)
-					}
-					onClick={handleFilterIn}
-				/>
-			</Tooltip>
-			<Tooltip title="Filter out value">
-				<Button
-					className="filter-btn periscope-btn"
-					aria-label="Filter out value"
-					disabled={isFilterOutLoading}
-					icon={
-						isFilterOutLoading ? (
-							<Spin size="small" />
-						) : (
-							<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
-						)
-					}
-					onClick={handleFilterOut}
-				/>
-			</Tooltip>
-			<Popover
-				open={isOpen}
-				onOpenChange={setIsOpen}
-				arrow={false}
-				content={moreActionsContent}
-				rootClassName="attribute-actions-content"
-				trigger="hover"
-				placement="bottomLeft"
-			>
-				<Button
-					data-testid="attribute-actions-more"
-					aria-label="More attribute actions"
-					icon={<Ellipsis size={14} />}
-					className="filter-btn periscope-btn"
-				/>
-			</Popover>
-		</div>
-	);
-}
-
-AttributeActions.defaultProps = {
-	isPinned: false,
-	showPinned: true,
-	showCopyOptions: true,
-	onTogglePin: undefined,
-};

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

@@ -1,151 +0,0 @@
-.attributes-corner {
-	display: flex;
-	flex-direction: column;
-
-	.no-data {
-		height: 400px;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.search-input {
-		margin: 12px;
-		width: auto;
-	}
-
-	.attributes-container {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding-block: 12px;
-
-		.item {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			justify-content: flex-start;
-			position: relative;
-			padding: 2px 12px;
-
-			&:hover {
-				background-color: var(--l1-border);
-				.action-btn {
-					display: flex;
-				}
-			}
-
-			.item-key-wrapper {
-				display: flex;
-				align-items: center;
-				gap: 6px;
-
-				.pin-icon {
-					color: var(--bg-robin-400);
-					flex-shrink: 0;
-				}
-			}
-
-			.item-key {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.value-wrapper {
-				display: flex;
-				padding: 2px 8px;
-				align-items: center;
-				width: fit-content;
-				max-width: 100%;
-				gap: 8px;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-
-				.copy-wrapper {
-					overflow: hidden;
-				}
-
-				.item-value {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: 0.56px;
-				}
-			}
-
-			.action-btn {
-				display: none;
-
-				&--is-open {
-					display: flex;
-				}
-				position: absolute;
-				right: 8px;
-				top: 50%;
-				transform: translateY(-50%);
-				gap: 4px;
-				border-radius: 4px;
-				padding: 2px;
-
-				.filter-btn {
-					display: flex;
-					align-items: center;
-					border: none;
-					box-shadow: none;
-					border-radius: 2px;
-					background: var(--l1-border);
-					padding: 4px;
-					gap: 3px;
-					height: 24px;
-					width: 24px;
-
-					&:hover {
-						background: var(--l3-background);
-					}
-				}
-			}
-		}
-	}
-
-	.border-top {
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.attribute-actions-menu {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-
-	.ant-btn {
-		text-align: left;
-		height: auto;
-		padding: 6px 12px;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		&:hover {
-			background-color: var(--l1-border);
-		}
-	}
-
-	.group-by-clause {
-		color: var(--text-primary);
-	}
-}
-
-.attribute-actions-content {
-	.ant-popover-inner {
-		padding: 8px;
-		min-width: 160px;
-	}
-}

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,135 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
-import { flattenObject } from 'container/LogDetailedView/utils';
-import { usePinnedAttributes } from 'hooks/spanDetails/usePinnedAttributes';
-import { Pin } from '@signozhq/icons';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import NoData from '../NoData/NoData';
-import AttributeActions from './AttributeActions';
-
-import './Attributes.styles.scss';
-
-interface AttributeRecord {
-	field: string;
-	value: string;
-}
-
-interface IAttributesProps {
-	span: Span;
-	isSearchVisible: boolean;
-	shouldFocusOnToggle?: boolean;
-}
-
-function Attributes(props: IAttributesProps): JSX.Element {
-	const { span, isSearchVisible, shouldFocusOnToggle } = props;
-	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
-
-	const flattenSpanData: Record<string, string> = useMemo(
-		() => (span.tagMap ? flattenObject(span.tagMap) : {}),
-		[span],
-	);
-
-	const availableAttributes = useMemo(
-		() => Object.keys(flattenSpanData),
-		[flattenSpanData],
-	);
-
-	const { pinnedAttributes, togglePin } =
-		usePinnedAttributes(availableAttributes);
-
-	const sortPinnedAttributes = useCallback(
-		(data: AttributeRecord[]): AttributeRecord[] =>
-			data.sort((a, b) => {
-				const aIsPinned = pinnedAttributes[a.field];
-				const bIsPinned = pinnedAttributes[b.field];
-
-				if (aIsPinned && !bIsPinned) {
-					return -1;
-				}
-				if (!aIsPinned && bIsPinned) {
-					return 1;
-				}
-
-				// Within same pinning status, maintain alphabetical order
-				return a.field.localeCompare(b.field);
-			}),
-		[pinnedAttributes],
-	);
-
-	const datasource = useMemo(() => {
-		const filtered = Object.keys(flattenSpanData)
-			.filter((attribute) =>
-				attribute.toLowerCase().includes(fieldSearchInput.toLowerCase()),
-			)
-			.map((key) => ({ field: key, value: flattenSpanData[key] }));
-
-		return sortPinnedAttributes(filtered);
-	}, [flattenSpanData, fieldSearchInput, sortPinnedAttributes]);
-
-	return (
-		<div className="attributes-corner">
-			{isSearchVisible &&
-				(datasource.length > 0 || fieldSearchInput.length > 0) && (
-					<Input
-						autoFocus={shouldFocusOnToggle}
-						placeholder="Search for attribute..."
-						className="search-input"
-						value={fieldSearchInput}
-						onChange={(e): void => setFieldSearchInput(e.target.value)}
-					/>
-				)}
-			{datasource.length === 0 && fieldSearchInput.length === 0 && (
-				<NoData name="attributes" />
-			)}
-			<section
-				className={cx('attributes-container', isSearchVisible ? 'border-top' : '')}
-			>
-				{datasource
-					.filter((item) => !!item.value && item.value !== '-')
-					.map((item) => (
-						<div
-							className={cx('item', { pinned: pinnedAttributes[item.field] })}
-							key={`${item.field} + ${item.value}`}
-						>
-							<div className="item-key-wrapper">
-								<Typography.Text className="item-key" truncate={1}>
-									{item.field}
-								</Typography.Text>
-								{pinnedAttributes[item.field] && (
-									<Pin size={14} className="pin-icon" fill="currentColor" />
-								)}
-							</div>
-							<div className="value-wrapper">
-								<div className="copy-wrapper">
-									<CopyClipboardHOC
-										entityKey={item.value}
-										textToCopy={item.value}
-										tooltipText={item.value}
-									>
-										<Typography.Text className="item-value" truncate={1}>
-											{item.value}
-										</Typography.Text>
-									</CopyClipboardHOC>
-								</div>
-								<AttributeActions
-									record={item}
-									isPinned={pinnedAttributes[item.field]}
-									onTogglePin={togglePin}
-								/>
-							</div>
-						</div>
-					))}
-			</section>
-		</div>
-	);
-}
-
-Attributes.defaultProps = {
-	shouldFocusOnToggle: false,
-};
-
-export default Attributes;

frontend/src/container/SpanDetailsDrawer/Events/Events.styles.scss

@@ -1,142 +0,0 @@
-.events-table {
-	.no-events {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 400px;
-	}
-	.events-container {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 12px;
-
-		.event {
-			.ant-collapse {
-				border: none;
-			}
-			.ant-collapse-content {
-				border-top: none;
-			}
-
-			.ant-collapse-item {
-				border-bottom: 0px;
-			}
-
-			.ant-collapse-content-box {
-				border: 1px solid var(--l1-border);
-				border-top: none;
-			}
-			.ant-collapse-header {
-				display: flex;
-				padding: 8px 6px;
-				align-items: center;
-				justify-content: space-between;
-				gap: 16px;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-
-				.ant-collapse-expand-icon {
-					padding-inline-start: 0px;
-					padding-inline-end: 0px;
-				}
-
-				.collapse-title {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-
-					.diamond {
-						fill: var(--accent-primary);
-					}
-				}
-			}
-			.event-details {
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-
-				.attribute-container {
-					display: flex;
-					flex-direction: column;
-					gap: 8px;
-
-					.attribute-key {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: -0.07px;
-					}
-
-					.timestamp-container {
-						display: flex;
-						gap: 4px;
-						align-items: center;
-
-						.timestamp-text {
-							color: var(--l2-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-
-						.attribute-value {
-							display: flex;
-							padding: 2px 8px;
-							width: fit-content;
-							align-items: center;
-							gap: 8px;
-							border-radius: 50px;
-							border: 1px solid var(--l1-border);
-							background: var(--l1-border);
-
-							color: var(--l1-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-					}
-
-					.wrapper {
-						display: flex;
-						padding: 2px 8px;
-						width: fit-content;
-						max-width: 100%;
-						align-items: center;
-						gap: 8px;
-						border-radius: 50px;
-						border: 1px solid var(--l1-border);
-						background: var(--l1-border);
-						.attribute-value {
-							color: var(--l1-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,141 +0,0 @@
-import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Collapse, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { Diamond } from '@signozhq/icons';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import NoData from '../NoData/NoData';
-import EventAttribute from './components/EventAttribute';
-
-import './Events.styles.scss';
-
-interface IEventsTableProps {
-	span: Span;
-	startTime: number;
-	isSearchVisible: boolean;
-}
-
-function EventsTable(props: IEventsTableProps): JSX.Element {
-	const { span, startTime, isSearchVisible } = props;
-	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
-	const [modalContent, setModalContent] = useState<{
-		title: string;
-		content: string;
-	} | null>(null);
-
-	const showAttributeModal = (title: string, content: string): void => {
-		setModalContent({ title, content });
-	};
-
-	const handleCancel = (): void => {
-		setModalContent(null);
-	};
-
-	const events = span.event;
-
-	return (
-		<div className="events-table">
-			{events.length === 0 && (
-				<div className="no-events">
-					<NoData name="events" />
-				</div>
-			)}
-			<div className="events-container">
-				{isSearchVisible && events.length > 0 && (
-					<Input
-						autoFocus
-						placeholder="Search for events..."
-						className="search-input"
-						value={fieldSearchInput}
-						onChange={(e): void => setFieldSearchInput(e.target.value)}
-					/>
-				)}
-				{events
-					.filter((eve) =>
-						eve.name?.toLowerCase().includes(fieldSearchInput.toLowerCase()),
-					)
-					.map((event) => (
-						<div
-							className="event"
-							key={`${event.name} ${JSON.stringify(event.attributeMap)}`}
-						>
-							<Collapse
-								size="small"
-								defaultActiveKey="1"
-								expandIconPosition="right"
-								items={[
-									{
-										key: '1',
-										label: (
-											<div className="collapse-title">
-												<Diamond size={14} className="diamond" />
-												<Typography.Text className="collapse-title-name">
-													{event.name}
-												</Typography.Text>
-											</div>
-										),
-										children: (
-											<div className="event-details">
-												<div className="attribute-container" key="timeUnixNano">
-													<Typography.Text className="attribute-key">
-														Start Time
-													</Typography.Text>
-													<div className="timestamp-container">
-														<Typography.Text className="attribute-value">
-															{getYAxisFormattedValue(
-																`${(event.timeUnixNano || 0) / 1e6 - startTime}`,
-																'ms',
-															)}
-														</Typography.Text>
-														<Typography.Text className="timestamp-text">
-															since trace start
-														</Typography.Text>
-													</div>
-													<div className="timestamp-container">
-														<Typography.Text className="attribute-value">
-															{getYAxisFormattedValue(
-																`${(event.timeUnixNano || 0) / 1e6 - span.timestamp}`,
-																'ms',
-															)}
-														</Typography.Text>
-														<Typography.Text className="timestamp-text">
-															since span start
-														</Typography.Text>
-													</div>
-												</div>
-												{event.attributeMap &&
-													Object.keys(event.attributeMap).map((attributeKey) => (
-														<EventAttribute
-															key={attributeKey}
-															attributeKey={attributeKey}
-															attributeValue={event.attributeMap[attributeKey]}
-															onExpand={showAttributeModal}
-														/>
-													))}
-											</div>
-										),
-									},
-								]}
-							/>
-						</div>
-					))}
-			</div>
-			<Modal
-				title={modalContent?.title}
-				open={!!modalContent}
-				onCancel={handleCancel}
-				footer={null}
-				width="80vw"
-				centered
-			>
-				<pre className="attribute-with-expandable-popover__full-view">
-					{modalContent?.content}
-				</pre>
-			</Modal>
-		</div>
-	);
-}
-
-export default EventsTable;

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.styles.scss

@@ -1,31 +0,0 @@
-.attribute-with-expandable-popover {
-	&__popover {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		max-width: 50vw;
-	}
-
-	&__preview {
-		max-height: 40vh;
-		overflow-y: auto;
-		white-space: pre-wrap;
-		word-break: break-all;
-		padding: 8px;
-		border-radius: 4px;
-	}
-
-	&__expand-button {
-		align-self: flex-end;
-		display: flex;
-		align-items: center;
-		flex-grow: 0;
-	}
-
-	&__full-view {
-		max-height: 70vh;
-		overflow-y: auto;
-		white-space: pre-wrap;
-		word-break: break-all;
-	}
-}

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.styles.scss

@@ -1,52 +0,0 @@
-.no-linked-spans {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 400px;
-}
-
-.linked-spans-container {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 12px;
-
-	.item {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		justify-content: flex-start;
-
-		.item-key {
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.value-wrapper {
-			display: flex;
-			padding: 2px 8px;
-			align-items: center;
-			width: fit-content;
-			max-width: 100%;
-			gap: 8px;
-			border-radius: 50px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-border);
-
-			.item-value {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: 0.56px;
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.tsx

@@ -1,81 +0,0 @@
-import { useCallback } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ROUTES from 'constants/routes';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { Span } from 'types/api/trace/getTraceV2';
-import { withBasePath } from 'utils/basePath';
-
-import NoData from '../NoData/NoData';
-
-import './LinkedSpans.styles.scss';
-
-interface LinkedSpansProps {
-	span: Span;
-}
-
-interface SpanReference {
-	traceId: string;
-	spanId: string;
-	refType: string;
-}
-
-function LinkedSpans(props: LinkedSpansProps): JSX.Element {
-	const { span } = props;
-
-	const getLink = useCallback((item: SpanReference): string | null => {
-		if (!item.traceId || !item.spanId) {
-			return null;
-		}
-		return withBasePath(
-			`${ROUTES.TRACE}/${item.traceId}${formUrlParams({
-				spanId: item.spanId,
-				levelUp: 0,
-				levelDown: 0,
-			})}`,
-		);
-	}, []);
-
-	// Filter out CHILD_OF references as they are parent-child relationships
-	const linkedSpans =
-		span.references?.filter((ref: SpanReference) => ref.refType !== 'CHILD_OF') ||
-		[];
-
-	if (linkedSpans.length === 0) {
-		return (
-			<div className="no-linked-spans">
-				<NoData name="linked spans" />
-			</div>
-		);
-	}
-
-	return (
-		<div className="linked-spans-container">
-			{linkedSpans.map((item: SpanReference) => {
-				const link = getLink(item);
-				return (
-					<div className="item" key={item.spanId}>
-						<Typography.Text className="item-key" truncate={1}>
-							Linked Span ID
-						</Typography.Text>
-						<div className="value-wrapper">
-							<Tooltip title={item.spanId}>
-								{link ? (
-									<Typography.Link href={link} className="item-value" truncate={1}>
-										{item.spanId}
-									</Typography.Link>
-								) : (
-									<Button type="link" className="item-value" disabled>
-										{item.spanId}
-									</Button>
-								)}
-							</Tooltip>
-						</div>
-					</div>
-				);
-			})}
-		</div>
-	);
-}
-
-export default LinkedSpans;

frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss

@@ -1,20 +0,0 @@
-.no-data {
-	display: flex;
-	gap: 4px;
-	flex-direction: column;
-
-	.no-data-img {
-		height: 32px;
-		width: 32px;
-	}
-
-	.no-data-text {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-}

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

@@ -1,687 +0,0 @@
-.span-details-drawer {
-	display: flex;
-	flex-direction: column;
-	height: calc(100vh - 44px); //44px -> trace details top bar
-	border-left: 1px solid var(--l1-border);
-	overflow-y: auto !important;
-	&:not(&-docked) {
-		min-width: 450px;
-	}
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-	}
-
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 48px;
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-
-		.heading {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.dot {
-				height: 8px;
-				width: 8px;
-				border-radius: 2px;
-				background: var(--danger-background);
-			}
-
-			.text {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-
-	.description {
-		display: flex;
-		flex-direction: column;
-		padding: 10px 0px;
-
-		.item {
-			padding: 8px 12px;
-			&,
-			.attribute-container {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-				position: relative; // ensure absolutely-positioned children anchor to the row
-			}
-
-			// Show attribute actions on hover for hardcoded rows
-			.attribute-actions-wrapper {
-				display: none;
-				gap: 8px;
-				position: absolute;
-				right: 8px;
-				top: 50%;
-				transform: translateY(-50%);
-				border-radius: 4px;
-				padding: 2px;
-
-				// style the action button group
-				.action-btn {
-					display: flex;
-					gap: 4px;
-				}
-				.filter-btn {
-					display: flex;
-					align-items: center;
-					border: none;
-					box-shadow: none;
-					border-radius: 2px;
-					background: var(--l1-border);
-					padding: 4px;
-					gap: 3px;
-					height: 24px;
-					width: 24px;
-
-					&:hover {
-						background: var(--l3-background);
-					}
-				}
-			}
-			&:hover {
-				background-color: var(--l1-border);
-				.attribute-actions-wrapper {
-					display: flex;
-				}
-			}
-
-			.span-name-wrapper {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.loading-spinner-container {
-					padding: 4px 8px;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-
-					display: inline-flex;
-				}
-
-				.span-percentile-value-container {
-					.span-percentile-value {
-						color: var(--bg-sakura-400);
-						font-variant-numeric: lining-nums tabular-nums stacked-fractions
-							slashed-zero;
-						font-feature-settings:
-							'dlig' on,
-							'salt' on;
-
-						border-radius: 0 50px 50px 0;
-
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						min-width: 48px;
-						padding-left: 8px;
-						padding-right: 8px;
-
-						border-left: 1px solid var(--l1-border);
-
-						cursor: pointer;
-
-						display: inline-flex;
-						align-items: center;
-						word-break: normal;
-						gap: 6px;
-					}
-
-					&.span-percentile-value-container-open {
-						.span-percentile-value {
-							border: 1px solid var(--l1-border);
-							background: var(--l1-border);
-						}
-					}
-				}
-			}
-
-			.span-percentiles-container {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-
-				fill: linear-gradient(
-					139deg,
-					color-mix(in srgb, var(--card) 32%, transparent) 0%,
-					color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-				);
-
-				stroke-width: 1px;
-				stroke: var(--l1-border);
-				filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-				backdrop-filter: blur(20px);
-				border: 1px solid var(--l1-border);
-				border-radius: 4px;
-
-				.span-percentiles-header {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					gap: 8px;
-					padding: 8px 12px 8px 12px;
-					border-bottom: 1px solid var(--l1-border);
-
-					.span-percentiles-header-text {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						cursor: pointer;
-					}
-				}
-
-				.span-percentile-content {
-					display: flex;
-					flex-direction: column;
-					gap: 8px;
-					padding: 8px;
-
-					.span-percentile-content-title {
-						.span-percentile-value {
-							color: var(--bg-sakura-400);
-							font-variant-numeric: lining-nums tabular-nums stacked-fractions
-								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on;
-						}
-
-						.span-percentile-value-loader {
-							display: inline-flex;
-							align-items: flex-end;
-							justify-content: flex-end;
-							margin-right: 4px;
-							margin-left: 4px;
-							line-height: 18px;
-						}
-					}
-
-					.span-percentile-timerange {
-						width: 100%;
-
-						.span-percentile-timerange-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(--l2-foreground);
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: 0.28px;
-
-								height: 32px;
-							}
-						}
-					}
-
-					.span-percentile-values-table {
-						.span-percentile-values-table-header-row {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							gap: 8px;
-
-							.span-percentile-values-table-header {
-								color: var(--l2-foreground);
-								text-align: right;
-								font-family: Inter;
-								font-size: 11px;
-								font-style: normal;
-								font-weight: 500;
-								line-height: 20px; /* 181.818% */
-								text-transform: uppercase;
-							}
-						}
-
-						.span-percentile-values-table-data-rows {
-							margin-top: 8px;
-							display: flex;
-							flex-direction: column;
-							gap: 4px;
-
-							.span-percentile-values-table-data-rows-skeleton {
-								display: flex;
-								flex-direction: column;
-								gap: 4px;
-
-								.ant-skeleton-title {
-									width: 100% !important;
-									margin-top: 0px !important;
-								}
-
-								.ant-skeleton-paragraph {
-									margin-top: 8px;
-
-									& > li + li {
-										margin-top: 10px;
-										width: 100% !important;
-									}
-								}
-							}
-						}
-
-						.span-percentile-values-table-data-row {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							gap: 12px;
-							padding: 0px 4px;
-
-							.span-percentile-values-table-data-row-key {
-								flex: 0 0 auto;
-								color: var(--l1-foreground);
-								text-align: right;
-								font-variant-numeric: lining-nums tabular-nums slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on;
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 500;
-								line-height: 20px; /* 166.667% */
-							}
-
-							.span-percentile-values-table-data-row-value {
-								color: var(--l2-foreground);
-								font-variant-numeric: lining-nums tabular-nums stacked-fractions
-									slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on,
-									'ss02' on;
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 166.667% */
-							}
-
-							.dashed-line {
-								flex: 1;
-								height: 0; /* line only */
-								margin: 0 8px;
-								border-top: 1px dashed var(--l1-border);
-
-								/* Use border image to control dash length & spacing */
-								border-top-width: 1px;
-								border-top-style: solid; /* temporary solid for image */
-								border-image: repeating-linear-gradient(
-										to right,
-										#1d212d 0,
-										#1d212d 10px,
-										transparent 10px,
-										transparent 20px
-									)
-									1 stretch;
-							}
-						}
-
-						.current-span-percentile-row {
-							border-radius: 2px;
-							background: color-mix(
-								in srgb,
-								var(--primary-background) 20%,
-								transparent
-							);
-
-							.span-percentile-values-table-data-row-key {
-								color: var(--text-robin-300);
-							}
-
-							.dashed-line {
-								flex: 1;
-								height: 0; /* line only */
-								margin: 0 8px;
-								border-top: 1px dashed #abbdff;
-
-								/* Use border image to control dash length & spacing */
-								border-top-width: 1px;
-								border-top-style: solid; /* temporary solid for image */
-								border-image: repeating-linear-gradient(
-										to right,
-										#abbdff 0,
-										#abbdff 10px,
-										transparent 10px,
-										transparent 20px
-									)
-									1 stretch;
-							}
-
-							.span-percentile-values-table-data-row-value {
-								color: var(--text-robin-400);
-							}
-						}
-					}
-				}
-
-				.resource-attributes-select-container {
-					overflow: hidden;
-					width: calc(100% + 16px);
-
-					position: absolute;
-					top: 32px;
-					left: -8px;
-					z-index: 1000;
-
-					.resource-attributes-select-container-header {
-						.resource-attributes-select-container-input {
-							border-radius: 0px;
-							border: none !important;
-							box-shadow: none !important;
-							height: 36px;
-
-							border-bottom: 1px solid var(--l1-border) !important;
-						}
-					}
-
-					border-radius: 4px;
-					border: 1px solid var(--l1-border);
-					background: linear-gradient(139deg, var(--card) 0%, var(--card) 98.68%);
-					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-					backdrop-filter: blur(20px);
-
-					.ant-select {
-						width: 100%;
-					}
-
-					.resource-attributes-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);
-						}
-
-						&::-webkit-scrollbar-thumb:hover {
-							background: var(--l3-background);
-						}
-					}
-
-					.resource-attributes-select-item {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						padding: 8px 12px 8px 12px;
-
-						.resource-attributes-select-item-checkbox {
-							.ant-checkbox-disabled {
-								background-color: var(--primary-background);
-								color: var(--l1-foreground);
-							}
-
-							.resource-attributes-select-item-value {
-								color: var(--l1-foreground);
-
-								font-family: Inter;
-								font-size: 13px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: -0.07px;
-							}
-						}
-					}
-				}
-			}
-
-			.attribute-key {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-			}
-
-			.attribute-container .wrapper,
-			.value-wrapper {
-				display: flex;
-				align-items: center;
-				width: fit-content;
-				max-width: 100%;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-
-				.attribute-value {
-					padding: 2px 8px;
-					color: var(--l2-foreground);
-					font-family: 'Inter';
-					font-size: 14px;
-					font-style: normal;
-					width: 100%;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: 0.28px;
-				}
-			}
-
-			.service {
-				display: flex;
-				padding: 2px 8px;
-				align-items: center;
-				gap: 8px;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-				width: fit-content;
-
-				.dot {
-					height: 4px;
-					width: 4px;
-				}
-
-				.value-wrapper {
-					display: flex;
-					padding: 0px;
-					align-items: center;
-					width: fit-content;
-					max-width: 100%;
-					border-radius: 0px;
-					border: none;
-					background: var(--l1-border);
-
-					.service-value {
-						color: var(--l2-foreground);
-						font-family: 'Inter';
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: 0.28px;
-					}
-				}
-			}
-
-			.related-signals-section {
-				.view-title {
-					display: flex;
-					gap: 8px;
-					align-items: center;
-					font-size: 12px;
-					line-height: 30px;
-				}
-				.ant-btn.ant-btn-default {
-					padding: 0 15px;
-					&:not(:hover) {
-						border: 1px solid var(--l1-border);
-					}
-				}
-			}
-		}
-	}
-
-	.attributes-events {
-		.details-drawer-tabs {
-			.ant-tabs-extra-content {
-				display: flex;
-				align-items: center;
-
-				.search-icon {
-					width: 33px;
-					padding-right: 12px;
-				}
-			}
-
-			.ant-tabs-nav::before {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-
-			.ant-tabs-tab {
-				margin: 0 !important;
-				padding: 0 2px !important;
-				min-width: 36px;
-				height: 36px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.attributes-tab-btn,
-			.events-tab-btn,
-			.linked-spans-tab-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 100%;
-				padding: 4px 8px;
-				margin-right: 8px;
-				gap: 4px;
-
-				.tab-label {
-					display: flex;
-					align-items: center;
-				}
-
-				.count-badge {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					min-width: 20px;
-					height: 20px;
-					padding: 0 6px;
-					border-radius: 10px;
-					background: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
-					color: var(--l2-foreground);
-					font-variant-numeric: lining-nums tabular-nums slashed-zero;
-					font-feature-settings:
-						'dlig' on,
-						'salt' on;
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px;
-					letter-spacing: -0.065px;
-					text-transform: uppercase;
-				}
-			}
-
-			.attributes-tab-btn:hover,
-			.events-tab-btn:hover,
-			.linked-spans-tab-btn:hover {
-				background: unset;
-			}
-		}
-	}
-}
-
-.span-percentile-tooltip {
-	.ant-tooltip-content {
-		width: 300px;
-		max-width: 300px;
-	}
-
-	.span-percentile-tooltip-text {
-		color: var(--l2-foreground);
-		font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
-			slashed-zero;
-		font-feature-settings:
-			'dlig' on,
-			'salt' on;
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 166.667% */
-		letter-spacing: -0.06px;
-
-		.span-percentile-tooltip-text-percentile {
-			color: var(--text-sakura-500);
-			font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
-			font-feature-settings:
-				'dlig' on,
-				'salt' on;
-			font-family: Inter;
-			font-size: 12px;
-		}
-
-		.span-percentile-tooltip-text-link {
-			color: var(--l2-foreground);
-			text-align: right;
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px; /* 166.667% */
-		}
-	}
-}
-
-.span-details-drawer-docked {
-	width: 48px;
-	flex: 0 48px !important;
-
-	.header {
-		justify-content: center;
-	}
-}
-
-.resizable-handle {
-	box-sizing: border-box;
-	border: 2px solid transparent;
-	&:hover,
-	&[data-resize-handle-state='drag'],
-	&[data-resize-handle-state='hover'] {
-		border-color: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
-	}
-}
-
-.linked-spans-tab-btn {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-}

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

@@ -1,76 +0,0 @@
-.span-logs {
-	margin-inline: 16px;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	&-virtuoso {
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	}
-	&-list-container {
-		flex: 1;
-		min-height: 0;
-
-		.logs-loading-skeleton {
-			height: 100%;
-			border: 1px solid var(--l1-border);
-			border-top: none;
-			color: var(--l2-foreground);
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			padding: 8px 0;
-		}
-	}
-
-	&-empty-content {
-		height: 100%;
-		border-top: none;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding-top: 96px;
-		gap: 12px;
-
-		.description {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.75rem;
-			width: 320px;
-
-			.no-data-img {
-				height: 2rem;
-				width: 2rem;
-			}
-
-			.no-data-text-1 {
-				color: var(--l2-foreground);
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-			}
-			.no-data-text-2 {
-				font-weight: 500;
-			}
-		}
-
-		.action-section {
-			width: 320px;
-
-			.action-btn {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-				color: var(--l2-foreground);
-				padding: 4px 8px;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.styles.scss

@@ -1,99 +0,0 @@
-.span-related-signals-drawer {
-	.ant-drawer-body {
-		padding: 0;
-	}
-
-	.ant-drawer-header {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 16px 15px;
-		.title {
-			color: var(--l2-foreground);
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	&__divider {
-		--divider-vertical-margin: 10px;
-	}
-	.ant-drawer-close {
-		margin: 0 !important;
-	}
-
-	.span-related-signals-drawer__content {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-	.view-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.views-tabs-container {
-		padding: 16px 15px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.open-in-explorer {
-			display: flex;
-			align-items: center;
-			height: 30px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-
-		.ant-radio-button-wrapper {
-			width: 114px;
-			height: 32px;
-
-			.view-title {
-				gap: 6px;
-				color: var(--l1-foreground);
-				font-size: 12px;
-				font-weight: 400;
-				letter-spacing: -0.06px;
-			}
-		}
-	}
-
-	.span-related-signals-drawer__applied-filters {
-		padding: 11px;
-		margin-inline: 16px;
-		border: 1px solid var(--l1-border);
-		border-radius: 3px;
-	}
-
-	.span-related-signals-drawer__filters-list {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-
-	.span-related-signals-drawer__filter-tag {
-		padding: 2px 6px;
-		border-radius: 2px;
-		background: var(--l3-background);
-		cursor: default;
-
-		.ant-typography {
-			color: var(--l2-foreground);
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	.infra-metrics-container {
-		padding-inline: 16px;
-		.infra-metrics-card {
-			border: 1px solid var(--l1-border);
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -1,257 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Drawer } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
-import { Typography } from '@signozhq/ui/typography';
-import LogsIcon from 'assets/AlertHistory/LogsIcon';
-import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
-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 dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { BarChart, Compass, X } from '@signozhq/icons';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Span } from 'types/api/trace/getTraceV2';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import { RelatedSignalsViews } from '../constants';
-import SpanLogs from '../SpanLogs/SpanLogs';
-import { useSpanContextLogs } from '../SpanLogs/useSpanContextLogs';
-import { hasInfraMetadata } from '../utils';
-
-import './SpanRelatedSignals.styles.scss';
-
-const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-
-interface SpanRelatedSignalsProps {
-	selectedSpan: Span;
-	traceStartTime: number;
-	traceEndTime: number;
-	isOpen: boolean;
-	onClose: () => void;
-	initialView: RelatedSignalsViews;
-}
-
-function SpanRelatedSignals({
-	selectedSpan,
-	traceStartTime,
-	traceEndTime,
-	isOpen,
-	onClose,
-	initialView,
-}: SpanRelatedSignalsProps): JSX.Element {
-	const [selectedView, setSelectedView] =
-		useState<RelatedSignalsViews>(initialView);
-	const isDarkMode = useIsDarkMode();
-
-	// Extract infrastructure metadata from span attributes
-	const infraMetadata = useMemo(() => {
-		// Only return metadata if span has infrastructure metadata
-		if (!hasInfraMetadata(selectedSpan)) {
-			return null;
-		}
-
-		return {
-			clusterName: selectedSpan.tagMap['k8s.cluster.name'] || '',
-			podName: selectedSpan.tagMap['k8s.pod.name'] || '',
-			nodeName: selectedSpan.tagMap['k8s.node.name'] || '',
-			hostName: selectedSpan.tagMap['host.name'] || '',
-			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
-		};
-	}, [selectedSpan]);
-	const {
-		logs,
-		isLoading,
-		isError,
-		isFetching,
-		isLogSpanRelated,
-		hasTraceIdLogs,
-	} = useSpanContextLogs({
-		traceId: selectedSpan.traceId,
-		spanId: selectedSpan.spanId,
-		timeRange: {
-			startTime: traceStartTime - FIVE_MINUTES_IN_MS,
-			endTime: traceEndTime + FIVE_MINUTES_IN_MS,
-		},
-		isDrawerOpen: isOpen,
-	});
-
-	const handleTabChange = useCallback((value: string): void => {
-		setSelectedView(value as RelatedSignalsViews);
-	}, []);
-
-	const tabOptions = useMemo(() => {
-		const baseOptions = [
-			{
-				label: (
-					<div className="view-title">
-						<LogsIcon width={14} height={14} />
-						Logs
-					</div>
-				),
-				value: RelatedSignalsViews.LOGS,
-			},
-		];
-
-		// Add Infra option if infrastructure metadata is available
-		if (infraMetadata) {
-			baseOptions.push({
-				label: (
-					<div className="view-title">
-						<BarChart size={14} />
-						Metrics
-					</div>
-				),
-				value: RelatedSignalsViews.INFRA,
-			});
-		}
-
-		return baseOptions;
-	}, [infraMetadata]);
-
-	const handleExplorerPageRedirect = useCallback((): void => {
-		const startTimeMs = traceStartTime - FIVE_MINUTES_IN_MS;
-		const endTimeMs = traceEndTime + 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.traceId,
-				},
-			],
-		};
-
-		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(
-			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, [selectedSpan.traceId, traceStartTime, traceEndTime]);
-
-	const emptyStateConfig = useMemo(
-		() => ({
-			...getEmptyLogsListConfig(() => {}),
-			showClearFiltersButton: false,
-		}),
-		[],
-	);
-
-	return (
-		<Drawer
-			width="50%"
-			title={
-				<>
-					<Divider
-						type="vertical"
-						className="span-related-signals-drawer__divider"
-					/>
-					<Typography.Text className="title">
-						Related Signals - {selectedSpan.name}
-					</Typography.Text>
-				</>
-			}
-			placement="right"
-			onClose={onClose}
-			open={isOpen}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="span-related-signals-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} />}
-		>
-			{selectedSpan && (
-				<div className="span-related-signals-drawer__content">
-					<div className="views-tabs-container">
-						<SignozRadioGroup
-							value={selectedView}
-							options={tabOptions}
-							onChange={handleTabChange}
-							className="related-signals-radio"
-						/>
-						{selectedView === RelatedSignalsViews.LOGS && (
-							<Button
-								icon={<Compass size={18} />}
-								className="open-in-explorer"
-								onClick={handleExplorerPageRedirect}
-								data-testid="open-in-explorer-button"
-							>
-								Open in Logs Explorer
-							</Button>
-						)}
-					</div>
-
-					{selectedView === RelatedSignalsViews.LOGS && (
-						<SpanLogs
-							traceId={selectedSpan.traceId}
-							spanId={selectedSpan.spanId}
-							timeRange={{
-								startTime: traceStartTime - FIVE_MINUTES_IN_MS,
-								endTime: traceEndTime + FIVE_MINUTES_IN_MS,
-							}}
-							logs={logs}
-							isLoading={isLoading}
-							isError={isError}
-							isFetching={isFetching}
-							isLogSpanRelated={isLogSpanRelated}
-							handleExplorerPageRedirect={handleExplorerPageRedirect}
-							emptyStateConfig={!hasTraceIdLogs ? emptyStateConfig : undefined}
-						/>
-					)}
-
-					{selectedView === RelatedSignalsViews.INFRA && infraMetadata && (
-						<InfraMetrics
-							clusterName={infraMetadata.clusterName}
-							podName={infraMetadata.podName}
-							nodeName={infraMetadata.nodeName}
-							hostName={infraMetadata.hostName}
-							timestamp={infraMetadata.spanTimestamp}
-							dataSource={DataSource.TRACES}
-						/>
-					)}
-				</div>
-			)}
-		</Drawer>
-	);
-}
-
-export default SpanRelatedSignals;

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.unit.test.tsx

@@ -1,240 +0,0 @@
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import AttributeActions from '../Attributes/AttributeActions';
-
-// Mock only Popover from antd to simplify hover/open behavior while keeping other components real
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	const MockPopover = ({
-		content,
-		children,
-		open,
-		onOpenChange,
-		...rest
-	}: any): JSX.Element => (
-		<div
-			data-testid="mock-popover-wrapper"
-			onMouseEnter={(): void => onOpenChange?.(true)}
-			{...rest}
-		>
-			{children}
-			{open ? <div data-testid="mock-popover-content">{content}</div> : null}
-		</div>
-	);
-	return { ...actual, Popover: MockPopover };
-});
-
-// Mock getAggregateKeys API used inside useTraceActions to resolve autocomplete keys
-jest.mock('api/queryBuilder/getAttributeKeys', () => ({
-	getAggregateKeys: jest.fn().mockResolvedValue({
-		payload: {
-			attributeKeys: [
-				{
-					key: 'http.method',
-					dataType: 'string',
-					type: 'tag',
-					isColumn: true,
-				},
-			],
-		},
-	}),
-}));
-
-const record = { field: 'http.method', value: 'GET' };
-
-describe('AttributeActions (unit)', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders core action buttons (pin, filter in/out, more)', async () => {
-		render(<AttributeActions record={record} isPinned={false} />);
-
-		expect(
-			screen.getByRole('button', { name: 'Pin attribute' }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: 'Filter for value' }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: 'Filter out value' }),
-		).toBeInTheDocument();
-		// more actions (ellipsis) button
-		expect(screen.getByTestId('attribute-actions-more')).toBeInTheDocument();
-	});
-
-	it('applies "Filter for" and calls redirectWithQueryBuilderData with correct query', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const filterForBtn = screen.getByRole('button', { name: 'Filter for value' });
-
-		await userEvent.click(filterForBtn);
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								filters: expect.objectContaining({
-									items: expect.arrayContaining([
-										expect.objectContaining({
-											key: expect.objectContaining({ key: 'http.method' }),
-											op: '=',
-											value: 'GET',
-										}),
-									]),
-								}),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-	});
-
-	it('applies "Filter out" and calls redirectWithQueryBuilderData with correct query', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const filterOutBtn = screen.getByRole('button', { name: 'Filter out value' });
-
-		await userEvent.click(filterOutBtn);
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								filters: expect.objectContaining({
-									items: expect.arrayContaining([
-										expect.objectContaining({
-											key: expect.objectContaining({ key: 'http.method' }),
-											op: '!=',
-											value: 'GET',
-										}),
-									]),
-								}),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-	});
-
-	it('opens more actions on hover and calls Group By handler; closes after click', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
-		expect(ellipsisBtn).toBeInTheDocument();
-
-		// hover to trigger Popover open via mock
-		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
-
-		// content appears
-		await waitFor(() =>
-			expect(screen.getByText('Group By Attribute')).toBeInTheDocument(),
-		);
-
-		await userEvent.click(screen.getByText('Group By Attribute'));
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								groupBy: expect.arrayContaining([
-									expect.objectContaining({ key: 'http.method' }),
-								]),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-
-		// After clicking group by, popover should close
-		await waitFor(() =>
-			expect(screen.queryByTestId('mock-popover-content')).not.toBeInTheDocument(),
-		);
-	});
-
-	it('hides pin button when showPinned=false', async () => {
-		render(<AttributeActions record={record} showPinned={false} />);
-		expect(
-			screen.queryByRole('button', { name: /pin attribute/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('hides copy options when showCopyOptions=false', async () => {
-		render(<AttributeActions record={record} showCopyOptions={false} />);
-		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
-		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
-
-		await waitFor(() =>
-			expect(screen.queryByText('Copy Field Name')).not.toBeInTheDocument(),
-		);
-		expect(screen.queryByText('Copy Field Value')).not.toBeInTheDocument();
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.userflow.test.tsx

@@ -1,383 +0,0 @@
-import { MemoryRouter, Route } from 'react-router-dom';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import { AppProvider } from 'providers/App/App';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanDetailsDrawer from '../SpanDetailsDrawer';
-
-// Mock external dependencies
-const mockRedirectWithQueryBuilderData = jest.fn();
-const mockNotifications = {
-	success: jest.fn(),
-	error: jest.fn(),
-};
-const mockSetCopy = jest.fn();
-const mockQueryClient = {
-	fetchQuery: jest.fn(),
-};
-
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
-// Mock the hooks
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): any => ({
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		},
-		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-	}),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({ notifications: mockNotifications }),
-}));
-
-jest.mock('react-use', () => ({
-	...jest.requireActual('react-use'),
-	useCopyToClipboard: (): any => [{ value: '' }, mockSetCopy],
-}));
-
-jest.mock('react-query', () => ({
-	...jest.requireActual('react-query'),
-	useQueryClient: (): any => mockQueryClient,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: jest.fn(),
-}));
-
-// Mock the API response for getAggregateKeys
-const mockAggregateKeysResponse = {
-	payload: {
-		attributeKeys: [
-			{
-				key: 'http.method',
-				dataType: 'string',
-				type: 'tag',
-				isColumn: true,
-			},
-			{
-				key: 'service.name',
-				dataType: 'string',
-				type: 'resource',
-				isColumn: true,
-			},
-		],
-	},
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-	mockQueryClient.fetchQuery.mockResolvedValue(mockAggregateKeysResponse);
-});
-
-// Mock trace data with realistic span attributes
-const createMockSpan = (): Span => ({
-	spanId: '28a8a67365d0bd8b',
-	traceId: '000000000000000071dc9b0a338729b4',
-	name: 'HTTP GET /api/users',
-	timestamp: 1699872000000000,
-	durationNano: 150000000,
-	serviceName: 'frontend-service',
-	spanKind: 'server',
-	statusCodeString: 'OK',
-	statusMessage: '',
-	tagMap: {
-		'http.method': 'GET',
-		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/users?page=1',
-		'http.status_code': '200',
-		'service.name': 'frontend-service',
-		'span.kind': 'server',
-		'user.id': '12345',
-		'request.id': 'req-abc-123',
-	},
-	event: [],
-	references: [],
-	hasError: false,
-	rootSpanId: '',
-	parentSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-});
-const renderSpanDetailsDrawer = (span: Span = createMockSpan()): any => {
-	const user = userEvent.setup();
-
-	const component = render(
-		<MockQueryClientProvider>
-			<AppProvider>
-				<MemoryRouter>
-					<Route>
-						<SpanDetailsDrawer
-							isSpanDetailsDocked={false}
-							setIsSpanDetailsDocked={jest.fn()}
-							selectedSpan={span}
-							traceStartTime={span.timestamp}
-							traceEndTime={span.timestamp + span.durationNano}
-						/>
-					</Route>
-				</MemoryRouter>
-			</AppProvider>
-		</MockQueryClientProvider>,
-	);
-
-	return { ...component, user };
-};
-
-describe('AttributeActions User Flow Tests', () => {
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Complete Attribute Actions User Flow', () => {
-		it('should allow user to interact with span attribute actions from trace detail page', async () => {
-			renderSpanDetailsDrawer();
-
-			// Verify Attributes tab is displayed with table view
-			expect(screen.getByText('Attributes')).toBeInTheDocument();
-
-			// Verify attributes are displayed
-			expect(screen.getByText('http.method')).toBeInTheDocument();
-			expect(screen.getByText('GET')).toBeInTheDocument();
-			expect(screen.getByText('service.name')).toBeInTheDocument();
-			expect(screen.getAllByText('frontend-service')[0]).toBeInTheDocument();
-
-			// Find an attribute row to test actions on
-			const httpMethodRow = screen.getByText('http.method').closest('.item');
-			expect(httpMethodRow).toBeInTheDocument();
-
-			// Action buttons are always mounted in the DOM (only CSS-hidden until :hover),
-			// so we can query them directly without simulating a pointer hover.
-			const actionButtons = httpMethodRow!.querySelector('.action-btn');
-			expect(actionButtons).toBeInTheDocument();
-
-			const filterForButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter for value"]',
-			) as HTMLElement;
-			const filterOutButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter out value"]',
-			) as HTMLElement;
-			expect(filterForButton).toBeInTheDocument();
-			expect(filterOutButton).toBeInTheDocument();
-
-			// Test "Filter for" action — use fireEvent to skip userEvent's pointer
-			// simulation and the Antd Tooltip mouseEnterDelay timers it triggers.
-			fireEvent.click(filterForButton);
-
-			// Verify navigation to traces explorer with inclusive filter
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									dataSource: 'traces',
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Reset mock for next test
-			mockRedirectWithQueryBuilderData.mockClear();
-
-			// Test "Filter out" action
-			fireEvent.click(filterOutButton);
-
-			// Verify navigation to traces explorer with exclusive filter
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									dataSource: 'traces',
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '!=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Verify more actions button exists (popover functionality is tested in unit tests)
-			const moreActionsButton = httpMethodRow!
-				.querySelector('.lucide-ellipsis')
-				?.closest('button');
-			expect(moreActionsButton).toBeInTheDocument();
-		});
-	});
-
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Filter Replacement Flow', () => {
-		it('should replace previous filter when applying multiple filters on same field', async () => {
-			renderSpanDetailsDrawer();
-
-			// Find the http.method attribute row
-			const httpMethodRow = screen.getByText('http.method').closest('.item');
-			expect(httpMethodRow).toBeInTheDocument();
-
-			// Action buttons are always mounted (CSS-hidden until :hover, which jsdom
-			// doesn't evaluate), so we can click them directly via fireEvent and skip
-			// userEvent's pointer simulation + Antd Tooltip mouseEnterDelay timers.
-			const filterForButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter for value"]',
-			) as HTMLElement;
-			expect(filterForButton).toBeInTheDocument();
-			fireEvent.click(filterForButton);
-
-			// Verify first filter was applied
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Reset and simulate existing filter in current query
-			mockRedirectWithQueryBuilderData.mockClear();
-
-			// Apply second filter on same field (should replace, not accumulate)
-			const filterOutButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter out value"]',
-			) as HTMLElement;
-			expect(filterOutButton).toBeInTheDocument();
-			fireEvent.click(filterOutButton);
-
-			// Verify the new call contains only the new filter (replacement behavior)
-			await waitFor(() => {
-				const lastCall =
-					mockRedirectWithQueryBuilderData.mock.calls[
-						mockRedirectWithQueryBuilderData.mock.calls.length - 1
-					];
-				const queryData = lastCall[0].builder.queryData[0];
-				const httpMethodFilters = queryData.filters.items.filter(
-					(item: any) => item.key.key === 'http.method',
-				);
-
-				// Should have only one filter for http.method (the new one)
-				expect(httpMethodFilters).toHaveLength(1);
-				expect(httpMethodFilters[0].op).toBe('!=');
-				expect(httpMethodFilters[0].value).toBe('GET');
-			});
-		});
-	});
-
-	describe('Edge Cases', () => {
-		it('should handle attributes with special characters and JSON values', async () => {
-			const spanWithSpecialAttrs = createMockSpan();
-			spanWithSpecialAttrs.tagMap = {
-				'request.headers.content-type': 'application/json',
-				'response.body': '{"status":"success","data":[]}',
-				'trace.annotation': '"quoted_string_value"',
-			};
-
-			const { user } = renderSpanDetailsDrawer(spanWithSpecialAttrs);
-
-			// Test attribute with dashes
-			expect(screen.getByText('request.headers.content-type')).toBeInTheDocument();
-			expect(screen.getByText('application/json')).toBeInTheDocument();
-
-			// Test JSON value
-			expect(screen.getByText('response.body')).toBeInTheDocument();
-
-			// Test quoted string value - should remove surrounding quotes when copying
-			const quotedAttrRow = screen.getByText('trace.annotation').closest('.item');
-			await user.hover(quotedAttrRow!);
-
-			const actionButtons = quotedAttrRow!.querySelectorAll('.action-btn button');
-			const moreActionsButton = actionButtons[actionButtons.length - 1];
-			await user.hover(moreActionsButton);
-
-			await waitFor(() => {
-				expect(screen.getByText('Copy Field Value')).toBeInTheDocument();
-			});
-
-			const copyFieldValueButton = screen.getByText('Copy Field Value');
-			fireEvent.click(copyFieldValueButton);
-
-			// Verify quotes are stripped from copied value
-			await waitFor(() => {
-				expect(mockSetCopy).toHaveBeenCalledWith('quoted_string_value');
-			});
-		});
-
-		it('should handle empty attributes gracefully', async () => {
-			const spanWithNoAttrs = createMockSpan();
-			spanWithNoAttrs.tagMap = {};
-
-			renderSpanDetailsDrawer(spanWithNoAttrs);
-
-			// Verify no attributes message is displayed
-			expect(
-				screen.getByText('No attributes found for selected span'),
-			).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/SpanDetailsDrawer.infraMetrics.test.tsx

@@ -1,495 +0,0 @@
-import ROUTES from 'constants/routes';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { server } from 'mocks-server/server';
-import { QueryBuilderContext } from 'providers/QueryBuilder';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SpanDetailsDrawer from '../SpanDetailsDrawer';
-import {
-	expectedHostOnlyMetadata,
-	expectedInfraMetadata,
-	expectedNodeOnlyMetadata,
-	expectedPodOnlyMetadata,
-	mockEmptyMetricsResponse,
-	mockNodeMetricsResponse,
-	mockPodMetricsResponse,
-	mockSpanWithHostOnly,
-	mockSpanWithInfraMetadata,
-	mockSpanWithNodeOnly,
-	mockSpanWithoutInfraMetadata,
-	mockSpanWithPodOnly,
-} from './infraMetricsTestData';
-
-// Mock external dependencies
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${ROUTES.TRACE_DETAIL}`,
-	}),
-}));
-
-const mockSafeNavigate = jest.fn();
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-const mockUpdateAllQueriesOperators = jest.fn().mockReturnValue({
-	builder: {
-		queryData: [
-			{
-				dataSource: 'logs',
-				queryName: 'A',
-				aggregateOperator: 'noop',
-				filters: { items: [], op: 'AND' },
-				expression: 'A',
-				disabled: false,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				groupBy: [],
-				limit: null,
-				having: [],
-			},
-		],
-		queryFormulas: [],
-	},
-	queryType: 'builder',
-});
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): any => ({
-		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-	}),
-}));
-
-const mockWindowOpen = jest.fn();
-Object.defineProperty(window, 'open', {
-	writable: true,
-	value: mockWindowOpen,
-});
-
-// Mock uplot to avoid rendering issues
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
-// Mock GetMetricQueryRange to track API calls
-jest.mock('lib/dashboard/getQueryResults', () => ({
-	GetMetricQueryRange: jest.fn(),
-}));
-
-// Mock generateColor
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: jest.fn().mockReturnValue('#1f77b4'),
-}));
-
-// Mock OverlayScrollbar
-jest.mock(
-	'components/OverlayScrollbar/OverlayScrollbar',
-	() =>
-		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-		function OverlayScrollbar({ children }: any) {
-			return <div data-testid="overlay-scrollbar">{children}</div>;
-		},
-);
-
-// Mock Virtuoso
-jest.mock('react-virtuoso', () => ({
-	Virtuoso: jest.fn(({ data, itemContent }) => (
-		<div data-testid="virtuoso">
-			{data?.map((item: any, index: number) => (
-				<div key={item.id || index} data-testid={`log-item-${item.id}`}>
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	)),
-}));
-
-// Mock InfraMetrics component for focused testing
-jest.mock(
-	'container/LogDetailedView/InfraMetrics/InfraMetrics',
-	() =>
-		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-		function MockInfraMetrics({
-			podName,
-			nodeName,
-			hostName,
-			clusterName,
-			timestamp,
-			dataSource,
-		}: any) {
-			return (
-				<div data-testid="infra-metrics">
-					<div data-testid="infra-pod-name">{podName}</div>
-					<div data-testid="infra-node-name">{nodeName}</div>
-					<div data-testid="infra-host-name">{hostName}</div>
-					<div data-testid="infra-cluster-name">{clusterName}</div>
-					<div data-testid="infra-timestamp">{timestamp}</div>
-					<div data-testid="infra-data-source">{dataSource}</div>
-				</div>
-			);
-		},
-);
-
-// Mock PreferenceContextProvider
-jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
-	PreferenceContextProvider: ({ children }: any): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-describe('SpanDetailsDrawer - Infra Metrics', () => {
-	// eslint-disable-next-line sonarjs/no-unused-collection
-	let apiCallHistory: any[] = [];
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		apiCallHistory = [];
-		mockSafeNavigate.mockClear();
-		mockWindowOpen.mockClear();
-		mockUpdateAllQueriesOperators.mockClear();
-
-		// Setup API call tracking for infra metrics
-		(GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
-			apiCallHistory.push(query);
-
-			// Return mock responses for different query types
-			if (
-				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
-					(item: any) => item.key?.key === 'k8s_pod_name',
-				)
-			) {
-				return Promise.resolve(mockPodMetricsResponse);
-			}
-
-			if (
-				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
-					(item: any) => item.key?.key === 'k8s_node_name',
-				)
-			) {
-				return Promise.resolve(mockNodeMetricsResponse);
-			}
-
-			return Promise.resolve(mockEmptyMetricsResponse);
-		});
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	// Mock QueryBuilder context value
-	const mockQueryBuilderContextValue = {
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-		stagedQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-		panelType: 'list',
-		redirectWithQuery: jest.fn(),
-		handleRunQuery: jest.fn(),
-		handleStageQuery: jest.fn(),
-		resetQuery: jest.fn(),
-	};
-
-	const renderSpanDetailsDrawer = (props = {}): void => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithInfraMetadata}
-					traceStartTime={1640995200000} // 2022-01-01 00:00:00
-					traceEndTime={1640995260000} // 2022-01-01 00:01:00
-					{...props}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-	};
-
-	it('should detect infra metadata from span attributes', async () => {
-		renderSpanDetailsDrawer();
-
-		// Click on metrics tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		expect(infraMetricsButton).toBeInTheDocument();
-
-		fireEvent.click(infraMetricsButton);
-
-		// Wait for infra metrics to load
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify metadata extraction
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedInfraMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedInfraMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedInfraMetadata.hostName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedInfraMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
-			DataSource.TRACES,
-		);
-	});
-
-	it('should not show infra tab when span lacks infra metadata', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithoutInfraMetadata}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Should NOT show infra tab, only logs tab
-		expect(
-			screen.queryByRole('button', { name: /metrics/i }),
-		).not.toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
-	});
-
-	it('should show infra tab when span has infra metadata', async () => {
-		renderSpanDetailsDrawer();
-
-		// Should show both logs and infra tabs
-		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
-	});
-
-	it('should handle pod-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithPodOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify pod-only metadata
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.hostName,
-		);
-	});
-
-	it('should handle node-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithNodeOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify node-only metadata
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.hostName,
-		);
-	});
-
-	it('should handle host-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithHostOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify host-only metadata
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.hostName,
-		);
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.clusterName,
-		);
-	});
-
-	it('should switch between logs and infra tabs correctly', async () => {
-		renderSpanDetailsDrawer();
-
-		// Initially should show logs tab content
-		const logsButton = screen.getByRole('button', { name: /logs/i });
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-
-		expect(logsButton).toBeInTheDocument();
-		expect(infraMetricsButton).toBeInTheDocument();
-
-		// Ensure logs tab is active and wait for content to load
-		fireEvent.click(logsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
-		});
-
-		// Click on infra tab
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Should not show logs content anymore
-		expect(
-			screen.queryByTestId('open-in-explorer-button'),
-		).not.toBeInTheDocument();
-
-		// Switch back to logs tab
-		fireEvent.click(logsButton);
-
-		// Should not show infra metrics anymore
-		await waitFor(() => {
-			expect(screen.queryByTestId('infra-metrics')).not.toBeInTheDocument();
-		});
-
-		// Verify logs content is shown again
-		await waitFor(() => {
-			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
-		});
-	});
-
-	it('should pass correct data source and handle multiple infra identifiers', async () => {
-		renderSpanDetailsDrawer();
-
-		// Should show infra tab when span has any of: clusterName, podName, nodeName, hostName
-		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify TRACES data source is passed
-		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
-			DataSource.TRACES,
-		);
-
-		// All infra identifiers should be passed through
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			'test-pod-abc123',
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			'test-node-456',
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			'test-host.example.com',
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			'test-cluster',
-		);
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/infraMetricsTestData.ts

@@ -1,167 +0,0 @@
-import { Span } from 'types/api/trace/getTraceV2';
-
-// Constants
-const TEST_TRACE_ID = 'test-trace-id';
-const TEST_CLUSTER_NAME = 'test-cluster';
-const TEST_POD_NAME = 'test-pod-abc123';
-const TEST_NODE_NAME = 'test-node-456';
-const TEST_HOST_NAME = 'test-host.example.com';
-
-// Mock span with infrastructure metadata (pod + node + host)
-export const mockSpanWithInfraMetadata: Span = {
-	spanId: 'infra-span-id',
-	traceId: TEST_TRACE_ID,
-	name: 'api-service',
-	serviceName: 'api-service',
-	timestamp: 1640995200000000, // 2022-01-01 00:00:00 in microseconds
-	durationNano: 2000000000, // 2 seconds in nanoseconds
-	spanKind: 'server',
-	statusCodeString: 'STATUS_CODE_OK',
-	statusMessage: '',
-	parentSpanId: '',
-	references: [],
-	event: [],
-	tagMap: {
-		'k8s.cluster.name': TEST_CLUSTER_NAME,
-		'k8s.pod.name': TEST_POD_NAME,
-		'k8s.node.name': TEST_NODE_NAME,
-		'host.name': TEST_HOST_NAME,
-		'service.name': 'api-service',
-		'http.method': 'GET',
-	},
-	hasError: false,
-	rootSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-// Mock span with only pod metadata
-export const mockSpanWithPodOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'pod-only-span-id',
-	tagMap: {
-		'k8s.cluster.name': TEST_CLUSTER_NAME,
-		'k8s.pod.name': TEST_POD_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span with only node metadata
-export const mockSpanWithNodeOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'node-only-span-id',
-	tagMap: {
-		'k8s.node.name': TEST_NODE_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span with only host metadata
-export const mockSpanWithHostOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'host-only-span-id',
-	tagMap: {
-		'host.name': TEST_HOST_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span without any infrastructure metadata
-export const mockSpanWithoutInfraMetadata: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'no-infra-span-id',
-	tagMap: {
-		'service.name': 'api-service',
-		'http.method': 'GET',
-		'http.status_code': '200',
-	},
-};
-
-// Mock infrastructure metrics API responses
-export const mockPodMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							metric: { pod_name: TEST_POD_NAME },
-							values: [
-								[1640995200, '0.5'], // CPU usage
-								[1640995260, '0.6'],
-							],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockNodeMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							metric: { node_name: TEST_NODE_NAME },
-							values: [
-								[1640995200, '2.1'], // Memory usage
-								[1640995260, '2.3'],
-							],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockEmptyMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [],
-				},
-			},
-		},
-	},
-};
-
-// Expected infrastructure metadata extractions
-export const expectedInfraMetadata = {
-	clusterName: TEST_CLUSTER_NAME,
-	podName: TEST_POD_NAME,
-	nodeName: TEST_NODE_NAME,
-	hostName: TEST_HOST_NAME,
-};
-
-export const expectedPodOnlyMetadata = {
-	clusterName: TEST_CLUSTER_NAME,
-	podName: TEST_POD_NAME,
-	nodeName: '',
-	hostName: '',
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};
-
-export const expectedNodeOnlyMetadata = {
-	clusterName: '',
-	podName: '',
-	nodeName: TEST_NODE_NAME,
-	hostName: '',
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};
-
-export const expectedHostOnlyMetadata = {
-	clusterName: '',
-	podName: '',
-	nodeName: '',
-	hostName: TEST_HOST_NAME,
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -1,224 +0,0 @@
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import { ILog } from 'types/api/logs/log';
-import { Span } from 'types/api/trace/getTraceV2';
-
-// Constants
-const TEST_SPAN_ID = 'test-span-id';
-const TEST_TRACE_ID = 'test-trace-id';
-const TEST_SERVICE = 'test-service';
-
-// Mock span data
-export const mockSpan: Span = {
-	spanId: TEST_SPAN_ID,
-	traceId: TEST_TRACE_ID,
-	name: TEST_SERVICE,
-	serviceName: TEST_SERVICE,
-	timestamp: 1640995200000, // 2022-01-01 00:00:00 in milliseconds
-	durationNano: 1000000000, // 1 second in nanoseconds
-	spanKind: 'server',
-	statusCodeString: 'STATUS_CODE_OK',
-	statusMessage: '',
-	parentSpanId: '',
-	references: [],
-	event: [],
-	tagMap: {
-		'http.method': 'GET',
-		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/test',
-		'http.status_code': '200',
-	},
-	hasError: false,
-	rootSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-// Mock span with long status message (> 100 characters) for testing truncation
-export const mockSpanWithLongStatusMessage: Span = {
-	...mockSpan,
-	statusMessage:
-		'Error: Connection timeout occurred while trying to reach the database server. The connection pool was exhausted and all retry attempts failed after 30 seconds.',
-};
-
-// Mock span with short status message (<= 100 characters)
-export const mockSpanWithShortStatusMessage: Span = {
-	...mockSpan,
-	statusMessage: 'Connection successful',
-};
-
-// Mock logs with proper relationships
-export const mockSpanLogs: ILog[] = [
-	{
-		id: 'span-log-1',
-		timestamp: '2022-01-01T00:00:01.000Z',
-		body: 'Processing request in span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: TEST_SPAN_ID,
-		span_id: TEST_SPAN_ID,
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-	{
-		id: 'span-log-2',
-		timestamp: '2022-01-01T00:00:02.000Z',
-		body: 'Span operation completed',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: TEST_SPAN_ID,
-		span_id: TEST_SPAN_ID,
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-];
-
-export const mockContextLogs: ILog[] = [
-	{
-		id: 'context-log-before',
-		timestamp: '2021-12-31T23:59:59.000Z',
-		body: 'Context log before span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: 'different-span-id',
-		span_id: 'different-span-id',
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-	{
-		id: 'context-log-after',
-		timestamp: '2022-01-01T00:00:03.000Z',
-		body: 'Context log after span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: 'another-different-span-id',
-		span_id: 'another-different-span-id',
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-];
-
-// Combined logs in chronological order
-export const mockAllLogs: ILog[] = [
-	mockContextLogs[0], // before
-	...mockSpanLogs, // span logs
-	mockContextLogs[1], // after
-];
-
-// Mock API responses
-export const mockSpanLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: mockSpanLogs.map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockBeforeLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [mockContextLogs[0]].map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockAfterLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [mockContextLogs[1]].map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockEmptyLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-// Expected v5 filter expressions
-export const expectedSpanFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND span_id = '${TEST_SPAN_ID}'`;
-export const expectedBeforeFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id < 'span-log-1'`;
-export const expectedAfterFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id > 'span-log-2'`;
-export const expectedTraceOnlyFilterExpression = `trace_id = '${TEST_TRACE_ID}'`;

frontend/src/container/SpanDetailsDrawer/constants.ts

@@ -1,11 +0,0 @@
-export enum RelatedSignalsViews {
-	LOGS = 'logs',
-	// METRICS = 'metrics',
-	INFRA = 'infra',
-}
-
-export const RELATED_SIGNALS_VIEW_TYPES = {
-	LOGS: RelatedSignalsViews.LOGS,
-	// METRICS: RelatedSignalsViews.METRICS,
-	INFRA: RelatedSignalsViews.INFRA,
-};

frontend/src/container/SpanDetailsDrawer/utils.ts

@@ -1,24 +0,0 @@
-import { Span } from 'types/api/trace/getTraceV2';
-
-/**
- * Infrastructure metadata keys that indicate infra signals are available
- */
-export const INFRA_METADATA_KEYS = [
-	'k8s.cluster.name',
-	'k8s.pod.name',
-	'k8s.node.name',
-	'host.name',
-] as const;
-
-/**
- * Checks if a span has any infrastructure metadata attributes
- * @param span - The span to check for infrastructure metadata
- * @returns true if the span has at least one infrastructure metadata key, false otherwise
- */
-export function hasInfraMetadata(span: Span | undefined): boolean {
-	if (!span?.tagMap) {
-		return false;
-	}
-
-	return INFRA_METADATA_KEYS.some((key) => span.tagMap?.[key]);
-}

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

@@ -203,6 +203,8 @@ export const routesToSkip = [
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 	ROUTES.SOMETHING_WENT_WRONG,
+	ROUTES.LLM_OBSERVABILITY_BASE,
+	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/container/TraceMetadata/TraceMetadata.styles.scss

@@ -1,186 +0,0 @@
-.trace-metadata {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0px 16px 0px 16px;
-
-	.metadata-info {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-
-		.first-row {
-			display: flex;
-			align-items: center;
-
-			.previous-btn {
-				display: flex;
-				height: 30px;
-				padding: 6px 8px;
-				align-items: center;
-				gap: 4px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				border-radius: 4px;
-				box-shadow: none;
-			}
-
-			.trace-name {
-				display: flex;
-				padding: 6px 8px;
-				margin-left: 6px;
-				align-items: center;
-				gap: 4px;
-				border: 1px solid var(--l1-border);
-				border-radius: 4px 0px 0px 4px;
-				background: var(--l2-background);
-
-				.drafting {
-					color: var(--l1-foreground);
-				}
-
-				.trace-id {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.trace-id-value {
-				display: flex;
-				padding: 6px 8px;
-				justify-content: center;
-				align-items: center;
-				gap: 10px;
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-				border: 1px solid var(--l1-border);
-				border-left: unset;
-				border-radius: 0px 4px 4px 0px;
-			}
-		}
-
-		.second-row {
-			display: flex;
-			gap: 24px;
-
-			.service-entry-info {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-
-				.root-span-name {
-					display: flex;
-					padding: 2px 8px;
-					align-items: center;
-					gap: 8px;
-					border-radius: 50px;
-					border: 1px solid var(--l1-border);
-					background: var(--l1-border);
-				}
-			}
-
-			.trace-duration {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.start-time-info {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-		}
-	}
-
-	.datapoints-info {
-		display: flex;
-		gap: 16px;
-
-		.separator {
-			width: 1px;
-			background: var(--l3-background);
-		}
-
-		.data-point {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			gap: 4px;
-
-			.text {
-				color: var(--l2-foreground);
-				text-align: center;
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-			}
-
-			.value {
-				color: var(--l1-foreground);
-				font-variant-numeric: lining-nums tabular-nums stacked-fractions
-					slashed-zero;
-				font-feature-settings:
-					'case' on,
-					'cpsp' on,
-					'dlig' on,
-					'salt' on;
-				font-family: Inter;
-				font-size: 20px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 28px; /* 140% */
-				letter-spacing: -0.1px;
-				text-transform: uppercase;
-				text-align: right;
-			}
-		}
-	}
-}

frontend/src/container/TraceMetadata/TraceMetadata.tsx

@@ -1,171 +0,0 @@
-import { useMemo } from 'react';
-import { useLocation, useRouteMatch } from 'react-router-dom';
-import { Skeleton, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import removeLocalStorageKey from 'api/browser/localstorage/remove';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import dayjs from 'dayjs';
-import history from 'lib/history';
-import {
-	ArrowLeft,
-	BetweenHorizontalStart,
-	CalendarClock,
-	DraftingCompass,
-	Timer,
-} from '@signozhq/icons';
-import { useTimezone } from 'providers/Timezone';
-
-import './TraceMetadata.styles.scss';
-
-export interface ITraceMetadataProps {
-	traceID: string;
-	rootServiceName: string;
-	rootSpanName: string;
-	startTime: number;
-	duration: number;
-	totalSpans: number;
-	totalErrorSpans: number;
-	notFound: boolean;
-	isDataLoading: boolean;
-}
-
-function TraceMetadata(props: ITraceMetadataProps): JSX.Element {
-	const {
-		traceID,
-		rootServiceName,
-		rootSpanName,
-		startTime,
-		duration,
-		totalErrorSpans,
-		totalSpans,
-		notFound,
-		isDataLoading,
-	} = props;
-
-	const { timezone } = useTimezone();
-
-	const startTimeInMs = useMemo(
-		() =>
-			dayjs(startTime * 1e3)
-				.tz(timezone.value)
-				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS),
-		[startTime, timezone.value],
-	);
-
-	const handlePreviousBtnClick = (): void => {
-		if (window.history.length > 1) {
-			history.goBack();
-		} else {
-			history.push(ROUTES.TRACES_EXPLORER);
-		}
-	};
-
-	const isOnOldRoute = !!useRouteMatch({
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
-	});
-
-	const location = useLocation();
-
-	const handleSwitchToNewView = (): void => {
-		removeLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW);
-		history.replace({
-			pathname: `/trace/${traceID}`,
-			search: location.search,
-			hash: location.hash,
-			state: location.state,
-		});
-	};
-
-	return (
-		<div className="trace-metadata">
-			<section className="metadata-info">
-				<div className="first-row">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="icon"
-						className="previous-btn"
-						prefix={<ArrowLeft size={14} />}
-						onClick={handlePreviousBtnClick}
-					/>
-					<div className="trace-name">
-						<DraftingCompass size={14} className="drafting" />
-						<Typography.Text className="trace-id">Trace ID</Typography.Text>
-					</div>
-					<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
-					{isOnOldRoute && (
-						<Button
-							variant="solid"
-							color="primary"
-							size="md"
-							className="new-view-btn"
-							onClick={handleSwitchToNewView}
-						>
-							Try new experience
-						</Button>
-					)}
-				</div>
-
-				{isDataLoading && (
-					<div className="second-row">
-						<div className="service-entry-info">
-							<BetweenHorizontalStart size={14} />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-						</div>
-					</div>
-				)}
-				{!isDataLoading && !notFound && (
-					<div className="second-row">
-						<div className="service-entry-info">
-							<BetweenHorizontalStart size={14} />
-							<Typography.Text className="text">{rootServiceName}</Typography.Text>
-							&#8212;
-							<Typography.Text className="text root-span-name">
-								{rootSpanName}
-							</Typography.Text>
-						</div>
-						<div className="trace-duration">
-							<Tooltip title="Duration of trace">
-								<Timer size={14} />
-							</Tooltip>
-							<Typography.Text className="text">
-								{getYAxisFormattedValue(`${duration}`, 'ms')}
-							</Typography.Text>
-						</div>
-						<div className="start-time-info">
-							<Tooltip title="Start timestamp">
-								<CalendarClock size={14} />
-							</Tooltip>
-
-							<Typography.Text className="text">
-								{startTimeInMs || 'N/A'}
-							</Typography.Text>
-						</div>
-					</div>
-				)}
-			</section>
-			{!notFound && (
-				<section className="datapoints-info">
-					<div className="data-point">
-						<Typography.Text className="text">Total Spans</Typography.Text>
-						<Typography.Text className="value">{totalSpans}</Typography.Text>
-					</div>
-					<div className="separator" />
-					<div className="data-point">
-						<Typography.Text className="text">Error Spans</Typography.Text>
-						<Typography.Text className="value">{totalErrorSpans}</Typography.Text>
-					</div>
-				</section>
-			)}
-		</div>
-	);
-}
-
-export default TraceMetadata;

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -1,239 +0,0 @@
-// Modal base styles
-.add-span-to-funnel-modal {
-	&__loading-spinner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 400px;
-	}
-	&-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--l1-background);
-			}
-
-			&-header {
-				border-bottom: none;
-
-				.ant-modal-title {
-					color: var(--l1-foreground);
-				}
-			}
-
-			&-body {
-				padding: 14px 16px !important;
-				padding-bottom: 0 !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			&-footer {
-				margin-top: 0;
-				background: var(--l2-background);
-				border-top: 1px solid var(--l1-border);
-				padding: 16px !important;
-				.add-span-to-funnel-modal {
-					&__save-button {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 4px;
-						color: var(--l1-foreground);
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 24px;
-						width: 135px;
-
-						.ant-btn-icon {
-							display: flex;
-						}
-						&:disabled {
-							color: var(--l2-foreground);
-							.ant-btn-icon {
-								svg {
-									stroke: var(--l2-foreground);
-								}
-							}
-						}
-					}
-					&__discard-button {
-						background: var(--l1-border);
-					}
-				}
-				.ant-btn {
-					border-radius: 2px;
-					padding: 4px 8px;
-					margin: 0 !important;
-					border: none;
-					box-shadow: none;
-				}
-			}
-		}
-	}
-}
-
-// Main modal styles
-.add-span-to-funnel-modal {
-	// Common button styles
-	%button-base {
-		display: flex;
-		align-items: center;
-		font-family: Inter;
-	}
-
-	// Details view styles
-	&--details {
-		.traces-funnel-details {
-			height: unset;
-
-			&__steps-config {
-				width: unset;
-				border: none;
-			}
-
-			.funnel-step-wrapper {
-				gap: 15px;
-			}
-
-			.steps-content {
-				padding: 0 16px;
-				max-height: 500px;
-			}
-		}
-	}
-
-	// Search section
-	&__search {
-		display: flex;
-		gap: 12px;
-		margin-bottom: 14px;
-		align-items: center;
-
-		&-input {
-			flex: 1;
-			padding: 6px 8px;
-			background: var(--l3-background);
-
-			.ant-input-prefix {
-				height: 18px;
-				margin-inline-end: 6px;
-				svg {
-					opacity: 0.4;
-				}
-			}
-
-			&,
-			input {
-				font-family: Inter;
-				font-size: 14px;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-				font-weight: 400;
-				background: var(--l3-background);
-			}
-
-			input::placeholder {
-				color: var(--l2-foreground);
-				opacity: 0.4;
-			}
-		}
-	}
-
-	// Create button
-	&__create-button {
-		@extend %button-base;
-		width: 153px;
-		padding: 4px 8px;
-		justify-content: center;
-		gap: 4px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		background: var(--l1-border);
-		border: none;
-		box-shadow: none;
-		color: var(--l2-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 24px;
-	}
-	.funnel-item {
-		padding: 8px 8px 12px 16px;
-		&,
-		&:first-child {
-			border-radius: 6px;
-		}
-
-		&__header {
-			line-height: 20px;
-		}
-		&__details {
-			line-height: 18px;
-		}
-	}
-
-	// List section
-	&__list {
-		max-height: 400px;
-		overflow-y: scroll;
-		.funnels-empty {
-			&__content {
-				padding: 0;
-			}
-		}
-
-		.funnels-list {
-			gap: 8px;
-
-			.funnel-item {
-				padding: 8px 16px 12px;
-
-				&__details {
-					margin-top: 8px;
-				}
-			}
-		}
-	}
-
-	&__spinner {
-		height: 400px;
-	}
-
-	// Back button
-	&__back-button {
-		@extend %button-base;
-		gap: 6px;
-		color: var(--l2-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		margin-bottom: 14px;
-	}
-
-	// Details section
-	&__details {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-
-		.funnel-configuration__steps {
-			padding: 0;
-
-			.funnel-step {
-				&__content .filters__service-and-span .ant-select {
-					width: 170px;
-				}
-
-				&__footer .error {
-					width: 25%;
-				}
-			}
-
-			.inter-step-config {
-				width: calc(100% - 104px);
-			}
-		}
-		.funnel-item__actions-popover {
-			display: none;
-		}
-	}
-}

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,294 +0,0 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Spin } from 'antd';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import SignozModal from 'components/SignozModal/SignozModal';
-import {
-	useFunnelDetails,
-	useFunnelsList,
-} from 'hooks/TracesFunnels/useFunnels';
-import { isEqual } from 'lodash-es';
-import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
-import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
-import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
-import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
-import {
-	FunnelProvider,
-	useFunnelContext,
-} from 'pages/TracesFunnels/FunnelContext';
-import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
-import { Span } from 'types/api/trace/getTraceV2';
-import { FunnelData } from 'types/api/traceFunnels';
-
-import './AddSpanToFunnelModal.styles.scss';
-
-enum ModalView {
-	LIST = 'list',
-	DETAILS = 'details',
-}
-
-function FunnelDetailsView({
-	funnel,
-	span,
-	triggerAutoSave,
-	showNotifications,
-	onChangesDetected,
-	triggerDiscard,
-}: {
-	funnel: FunnelData;
-	span: Span;
-	triggerAutoSave: boolean;
-	showNotifications: boolean;
-	onChangesDetected: (hasChanges: boolean) => void;
-	triggerDiscard: boolean;
-}): JSX.Element {
-	const { handleRestoreSteps, steps } = useFunnelContext();
-
-	// Track changes between current steps and original steps
-	useEffect(() => {
-		const hasChanges = !isEqual(steps, funnel.steps);
-		if (onChangesDetected) {
-			onChangesDetected(hasChanges);
-		}
-	}, [steps, funnel.steps, onChangesDetected]);
-
-	// Handle discard when triggered from parent
-	useEffect(() => {
-		if (triggerDiscard && funnel.steps) {
-			handleRestoreSteps(funnel.steps);
-		}
-	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
-
-	return (
-		<div className="add-span-to-funnel-modal__details">
-			<FunnelListItem
-				funnel={funnel}
-				shouldRedirectToTracesListOnDeleteSuccess={false}
-				isSpanDetailsPage
-			/>
-			<FunnelConfiguration
-				funnel={funnel}
-				isTraceDetailsPage
-				span={span}
-				triggerAutoSave={triggerAutoSave}
-				showNotifications={showNotifications}
-			/>
-		</div>
-	);
-}
-
-interface AddSpanToFunnelModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	span: Span;
-}
-
-function AddSpanToFunnelModal({
-	isOpen,
-	onClose,
-	span,
-}: AddSpanToFunnelModalProps): JSX.Element {
-	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
-	const [searchQuery, setSearchQuery] = useState<string>('');
-	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
-		undefined,
-	);
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
-	const [triggerSave, setTriggerSave] = useState<boolean>(false);
-	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
-	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
-	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
-
-	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
-		setSearchQuery(e.target.value);
-	};
-
-	const { data, isLoading, isError, isFetching } = useFunnelsList();
-
-	const filteredData = useMemo(
-		() =>
-			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
-				(a, b) =>
-					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-			),
-		[data?.payload, searchQuery],
-	);
-
-	const {
-		data: funnelDetails,
-		isLoading: isFunnelDetailsLoading,
-		isFetching: isFunnelDetailsFetching,
-	} = useFunnelDetails({
-		funnelId: selectedFunnelId,
-	});
-
-	const handleFunnelClick = (funnel: FunnelData): void => {
-		setSelectedFunnelId(funnel.funnel_id);
-		setActiveView(ModalView.DETAILS);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleBack = (): void => {
-		setActiveView(ModalView.LIST);
-		setSelectedFunnelId(undefined);
-		setIsUnsavedChanges(false);
-		setTriggerSave(false);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleCreateNewClick = (): void => {
-		setIsCreateModalOpen(true);
-	};
-
-	const handleSaveFunnel = (): void => {
-		setTriggerSave(true);
-		// Reset trigger after a brief moment to allow the save to be processed
-		setTimeout(() => {
-			setTriggerSave(false);
-			onClose();
-		}, 100);
-	};
-
-	const handleDiscard = (): void => {
-		setTriggerDiscard(true);
-		// Reset trigger after a brief moment
-		setTimeout(() => {
-			setTriggerDiscard(false);
-			onClose();
-		}, 100);
-	};
-
-	const renderListView = (): JSX.Element => (
-		<div className="add-span-to-funnel-modal">
-			{!!filteredData?.length && (
-				<div className="add-span-to-funnel-modal__search">
-					<Input
-						className="add-span-to-funnel-modal__search-input"
-						placeholder="Search by name, description, or tags..."
-						prefix={<Search size={12} />}
-						value={searchQuery}
-						onChange={handleSearch}
-					/>
-				</div>
-			)}
-			<div className="add-span-to-funnel-modal__list">
-				<OverlayScrollbar>
-					<TracesFunnelsContentRenderer
-						isError={isError}
-						isLoading={isLoading || isFetching}
-						data={filteredData || []}
-						onCreateFunnel={handleCreateNewClick}
-						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
-						shouldRedirectToTracesListOnDeleteSuccess={false}
-					/>
-				</OverlayScrollbar>
-			</div>
-			<CreateFunnel
-				isOpen={isCreateModalOpen}
-				onClose={(funnelId): void => {
-					if (funnelId) {
-						setSelectedFunnelId(funnelId);
-						setActiveView(ModalView.DETAILS);
-						setIsCreatedFromSpan(true);
-					}
-					setIsCreateModalOpen(false);
-				}}
-				redirectToDetails={false}
-			/>
-		</div>
-	);
-
-	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
-		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
-			<Button
-				type="text"
-				className="add-span-to-funnel-modal__back-button"
-				onClick={handleBack}
-			>
-				<ArrowLeft size={14} />
-				All funnels
-			</Button>
-			<div className="traces-funnel-details">
-				<div className="traces-funnel-details__steps-config">
-					<Spin
-						className="add-span-to-funnel-modal__loading-spinner"
-						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
-						indicator={<Loader className="animate-spin" size="md" />}
-					>
-						{selectedFunnelId && funnelDetails?.payload && (
-							<FunnelProvider
-								funnelId={selectedFunnelId}
-								hasSingleStep={isCreatedFromSpan}
-							>
-								<FunnelDetailsView
-									funnel={funnelDetails.payload}
-									span={span}
-									triggerAutoSave={triggerSave}
-									showNotifications
-									onChangesDetected={setIsUnsavedChanges}
-									triggerDiscard={triggerDiscard}
-								/>
-							</FunnelProvider>
-						)}
-					</Spin>
-				</div>
-			</div>
-		</div>
-	);
-
-	return (
-		<SignozModal
-			open={isOpen}
-			onCancel={onClose}
-			width={570}
-			title="Add span to funnel"
-			className={cx('add-span-to-funnel-modal-container', {
-				'add-span-to-funnel-modal-container--details':
-					activeView === ModalView.DETAILS,
-			})}
-			footer={
-				activeView === ModalView.DETAILS
-					? [
-							<Button
-								type="default"
-								key="discard"
-								onClick={handleDiscard}
-								className="add-span-to-funnel-modal__discard-button"
-								disabled={!isUnsavedChanges}
-							>
-								Discard
-							</Button>,
-							<Button
-								key="save"
-								type="primary"
-								className="add-span-to-funnel-modal__save-button"
-								onClick={handleSaveFunnel}
-								disabled={!isUnsavedChanges}
-								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
-							>
-								Save Funnel
-							</Button>,
-						]
-					: [
-							<Button
-								key="create"
-								type="default"
-								className="add-span-to-funnel-modal__create-button"
-								onClick={handleCreateNewClick}
-								icon={<Plus size={14} />}
-							>
-								Create new funnel
-							</Button>,
-						]
-			}
-		>
-			{activeView === ModalView.LIST
-				? renderListView()
-				: renderDetailsView({ span })}
-		</SignozModal>
-	);
-}
-
-export default AddSpanToFunnelModal;

frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -1,28 +0,0 @@
-.span-line-action-buttons {
-	display: flex;
-	position: absolute;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	right: 0;
-	cursor: pointer;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
-
-	.ant-btn-default {
-		border: none;
-		box-shadow: none;
-		padding: 9px;
-		justify-content: center;
-		align-items: center;
-		display: flex;
-
-		&.active-tab {
-			background-color: var(--l1-border);
-		}
-	}
-
-	.copy-span-btn {
-		border-color: var(--l1-border) !important;
-	}
-}

frontend/src/container/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -1,131 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { render } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanLineActionButtons from '../index';
-
-// Mock the useCopySpanLink hook
-jest.mock('hooks/trace/useCopySpanLink');
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1000,
-	timestamp: 1234567890,
-	rootSpanId: 'test-root-span-id',
-	parentSpanId: 'test-parent-span-id',
-	traceId: 'test-trace-id',
-	hasError: false,
-	kind: 0,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'test-root-name',
-	statusMessage: 'test-status-message',
-	statusCodeString: 'test-status-code-string',
-	spanKind: 'test-span-kind',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-describe('SpanLineActionButtons', () => {
-	beforeEach(() => {
-		// Clear mock before each test
-		jest.clearAllMocks();
-	});
-
-	it('renders copy link button with correct icon', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the button is rendered with an icon
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toBeInTheDocument();
-		expect(copyButton.querySelector('svg')).toBeInTheDocument();
-	});
-
-	it('calls onSpanCopy when copy button is clicked', () => {
-		const mockOnSpanCopy = jest.fn();
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: mockOnSpanCopy,
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called
-		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
-	});
-
-	it('applies correct styling classes', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the main container has the correct class
-		const container = screen
-			.getByRole('button')
-			.closest('.span-line-action-buttons');
-		expect(container).toHaveClass('span-line-action-buttons');
-
-		// Check if the button has the correct class
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toHaveClass('copy-span-btn');
-	});
-
-	it('copies span link to clipboard when copy button is clicked', () => {
-		const mockSetCopy = jest.fn();
-		const mockUrlQuery = {
-			delete: jest.fn(),
-			set: jest.fn(),
-			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
-		};
-		const mockPathname = '/test-path';
-		const mockLocation = {
-			origin: 'http://localhost:3000',
-		};
-
-		// Mock window.location
-		Object.defineProperty(window, 'location', {
-			value: mockLocation,
-			writable: true,
-		});
-
-		// Mock useCopySpanLink hook
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: (event: React.MouseEvent) => {
-				event.preventDefault();
-				event.stopPropagation();
-				mockUrlQuery.delete('spanId');
-				mockUrlQuery.set('spanId', mockSpan.spanId);
-				const link = `${
-					window.location.origin
-				}${mockPathname}?${mockUrlQuery.toString()}`;
-				mockSetCopy(link);
-			},
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called with correct link
-		expect(mockSetCopy).toHaveBeenCalledWith(
-			'http://localhost:3000/test-path?spanId=test-span-id',
-		);
-	});
-});

frontend/src/container/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -1,28 +0,0 @@
-import { Link } from '@signozhq/icons';
-import { Button, Tooltip } from 'antd';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import './SpanLineActionButtons.styles.scss';
-
-export interface SpanLineActionButtonsProps {
-	span: Span;
-}
-export default function SpanLineActionButtons({
-	span,
-}: SpanLineActionButtonsProps): JSX.Element {
-	const { onSpanCopy } = useCopySpanLink(span);
-
-	return (
-		<div className="span-line-action-buttons">
-			<Tooltip title="Copy Span Link">
-				<Button
-					size="small"
-					icon={<Link size={14} />}
-					onClick={onSpanCopy}
-					className="copy-span-btn"
-				/>
-			</Tooltip>
-		</div>
-	);
-}

frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss

@@ -1,9 +0,0 @@
-.trace-waterfall {
-	height: calc(70vh - 236px);
-
-	.loading-skeleton {
-		justify-content: center;
-		align-items: center;
-		padding: 20px;
-	}
-}

frontend/src/container/TraceWaterfall/TraceWaterfall.tsx

@@ -1,137 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { Skeleton } from 'antd';
-import { AxiosError } from 'axios';
-import Spinner from 'components/Spinner';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
-
-import { TraceWaterfallStates } from './constants';
-import Error from './TraceWaterfallStates/Error/Error';
-import NoData from './TraceWaterfallStates/NoData/NoData';
-import Success from './TraceWaterfallStates/Success/Success';
-
-import './TraceWaterfall.styles.scss';
-
-export interface IInterestedSpan {
-	spanId: string;
-	isUncollapsed: boolean;
-}
-
-interface ITraceWaterfallProps {
-	traceId: string;
-	uncollapsedNodes: string[];
-	traceData:
-		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
-		| ErrorResponse
-		| undefined;
-	isFetchingTraceData: boolean;
-	errorFetchingTraceData: unknown;
-	interestedSpanId: IInterestedSpan;
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
-	const {
-		traceData,
-		isFetchingTraceData,
-		errorFetchingTraceData,
-		interestedSpanId,
-		traceId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setTraceFlamegraphStatsWidth,
-		setSelectedSpan,
-		selectedSpan,
-	} = props;
-	// get the current state of trace waterfall based on the API lifecycle
-	const traceWaterfallState = useMemo(() => {
-		if (isFetchingTraceData) {
-			if (
-				traceData &&
-				traceData.payload &&
-				traceData.payload.spans &&
-				traceData.payload.spans.length > 0
-			) {
-				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
-			}
-			return TraceWaterfallStates.LOADING;
-		}
-		if (errorFetchingTraceData) {
-			return TraceWaterfallStates.ERROR;
-		}
-		if (
-			traceData &&
-			traceData.payload &&
-			traceData.payload.spans &&
-			traceData.payload.spans.length === 0
-		) {
-			return TraceWaterfallStates.NO_DATA;
-		}
-
-		return TraceWaterfallStates.SUCCESS;
-	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
-
-	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(
-		() => traceData?.payload?.spans || [],
-		[traceData?.payload?.spans],
-	);
-
-	// get the content based on the current state of the trace waterfall
-	const getContent = useMemo(() => {
-		switch (traceWaterfallState) {
-			case TraceWaterfallStates.LOADING:
-				return (
-					<div className="loading-skeleton">
-						<Skeleton active paragraph={{ rows: 6 }} />
-					</div>
-				);
-			case TraceWaterfallStates.ERROR:
-				return <Error error={errorFetchingTraceData as AxiosError} />;
-			case TraceWaterfallStates.NO_DATA:
-				return <NoData id={traceId} />;
-			case TraceWaterfallStates.SUCCESS:
-			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
-				return (
-					<Success
-						spans={spans}
-						traceMetadata={{
-							traceId,
-							startTime: traceData?.payload?.startTimestampMillis || 0,
-							endTime: traceData?.payload?.endTimestampMillis || 0,
-							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
-						}}
-						interestedSpanId={interestedSpanId || ''}
-						uncollapsedNodes={uncollapsedNodes}
-						setInterestedSpanId={setInterestedSpanId}
-						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
-						selectedSpan={selectedSpan}
-						setSelectedSpan={setSelectedSpan}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		errorFetchingTraceData,
-		interestedSpanId,
-		selectedSpan,
-		setInterestedSpanId,
-		setSelectedSpan,
-		setTraceFlamegraphStatsWidth,
-		spans,
-		traceData?.payload?.endTimestampMillis,
-		traceData?.payload?.hasMissingSpans,
-		traceData?.payload?.startTimestampMillis,
-		traceId,
-		traceWaterfallState,
-		uncollapsedNodes,
-	]);
-
-	return <div className="trace-waterfall">{getContent}</div>;
-}
-
-export default TraceWaterfall;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -1,30 +0,0 @@
-.error-waterfall {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--danger-background);
-
-	.text {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		flex-shrink: 0;
-	}
-
-	.value {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -1,26 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-
-import './Error.styles.scss';
-
-interface IErrorProps {
-	error: AxiosError;
-}
-
-function Error(props: IErrorProps): JSX.Element {
-	const { error } = props;
-
-	return (
-		<div className="error-waterfall">
-			<Typography.Text className="text">Something went wrong!</Typography.Text>
-			<Tooltip title={error?.message}>
-				<Typography.Text className="value" truncate={1}>
-					{error?.message}
-				</Typography.Text>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default Error;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx

@@ -1,12 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-interface INoDataProps {
-	id: string;
-}
-
-function NoData(props: INoDataProps): JSX.Element {
-	const { id } = props;
-	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
-}
-
-export default NoData;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -1,46 +0,0 @@
-.filter-row {
-	display: flex;
-	align-items: center;
-	padding: 16px 20px 0px 20px;
-	gap: 12px;
-
-	.query-builder-search-v2 {
-		width: 100%;
-	}
-
-	.pre-next-toggle {
-		display: flex;
-		flex-shrink: 0;
-		gap: 12px;
-
-		.ant-typography {
-			display: flex;
-			align-items: center;
-			color: var(--l2-foreground);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-		}
-
-		.ant-btn {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			box-shadow: none;
-		}
-	}
-
-	.no-results {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-		font-family: 'Geist Mono';
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 150% */
-	}
-}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -1,214 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import {
-	ChevronDown,
-	ChevronUp,
-	Loader,
-	SolidInfoCircle,
-} from '@signozhq/icons';
-import { Button, Spin, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { uniqBy } from 'lodash-es';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { TracesAggregatorOperator } from 'types/common/queryBuilder';
-
-import { BASE_FILTER_QUERY } from './constants';
-
-import './Filters.styles.scss';
-
-function prepareQuery(filters: TagFilter, traceID: string): Query {
-	return {
-		...initialQueriesMap.traces,
-		builder: {
-			...initialQueriesMap.traces.builder,
-			queryData: [
-				{
-					...initialQueriesMap.traces.builder.queryData[0],
-					aggregateOperator: TracesAggregatorOperator.NOOP,
-					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
-					filters: {
-						...filters,
-						items: [
-							...filters.items,
-							{
-								id: '5ab8e1cf',
-								key: {
-									key: 'trace_id',
-									dataType: DataTypes.String,
-									type: '',
-									id: 'trace_id--string----true',
-								},
-								op: '=',
-								value: traceID,
-							},
-						],
-					},
-				},
-			],
-		},
-	};
-}
-
-function Filters({
-	startTime,
-	endTime,
-	traceID,
-	onFilteredSpansChange = (): void => {},
-}: {
-	startTime: number;
-	endTime: number;
-	traceID: string;
-	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
-}): JSX.Element {
-	const [filters, setFilters] = useState<TagFilter>(
-		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
-	);
-	const [noData, setNoData] = useState<boolean>(false);
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
-
-	const handleFilterChange = useCallback(
-		(value: TagFilter): void => {
-			if (value.items.length === 0) {
-				setFilteredSpanIds([]);
-				onFilteredSpansChange?.([], false);
-				setCurrentSearchedIndex(0);
-				setNoData(false);
-			}
-			setFilters(value);
-		},
-		[onFilteredSpansChange],
-	);
-	const { search } = useLocation();
-	const history = useHistory();
-
-	const handlePrevNext = useCallback(
-		(index: number, spanId?: string): void => {
-			const searchParams = new URLSearchParams(search);
-			if (spanId) {
-				searchParams.set('spanId', spanId);
-			} else {
-				searchParams.set('spanId', filteredSpanIds[index]);
-			}
-
-			history.replace({ search: searchParams.toString() });
-		},
-		[filteredSpanIds, history, search],
-	);
-
-	const { isFetching, error } = useGetQueryRange(
-		{
-			query: prepareQuery(filters, traceID),
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			start: startTime,
-			end: endTime,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: {
-					offset: 0,
-					limit: 200,
-				},
-				selectColumns: [
-					{
-						key: 'name',
-						dataType: 'string',
-						type: 'tag',
-						id: 'name--string--tag--true',
-						isIndexed: false,
-					},
-				],
-			},
-		},
-		DEFAULT_ENTITY_VERSION,
-		{
-			queryKey: [filters],
-			enabled: filters.items.length > 0,
-			onSuccess: (data) => {
-				const isFilterActive = filters.items.length > 0;
-				if (data?.payload.data.newResult.data.result[0].list) {
-					const uniqueSpans = uniqBy(
-						data?.payload.data.newResult.data.result[0].list,
-						'data.spanID',
-					);
-
-					const spanIds = uniqueSpans.map((val) => val.data.spanID);
-					setFilteredSpanIds(spanIds);
-					onFilteredSpansChange?.(spanIds, isFilterActive);
-					handlePrevNext(0, spanIds[0]);
-					setNoData(false);
-				} else {
-					setNoData(true);
-					setFilteredSpanIds([]);
-					onFilteredSpansChange?.([], isFilterActive);
-					setCurrentSearchedIndex(0);
-				}
-			},
-		},
-	);
-
-	return (
-		<div className="filter-row">
-			<QueryBuilderSearchV2
-				query={{
-					...BASE_FILTER_QUERY,
-					filters,
-				}}
-				onChange={handleFilterChange}
-				hideSpanScopeSelector={false}
-				skipQueryBuilderRedirect
-				selectProps={{ listHeight: 125 }}
-			/>
-			{filteredSpanIds.length > 0 && (
-				<div className="pre-next-toggle">
-					<Typography.Text>
-						{currentSearchedIndex + 1} / {filteredSpanIds.length}
-					</Typography.Text>
-					<Button
-						icon={<ChevronUp size={14} />}
-						disabled={currentSearchedIndex === 0}
-						type="text"
-						onClick={(): void => {
-							handlePrevNext(currentSearchedIndex - 1);
-							setCurrentSearchedIndex((prev) => prev - 1);
-						}}
-					/>
-					<Button
-						icon={<ChevronDown size={14} />}
-						type="text"
-						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-						onClick={(): void => {
-							handlePrevNext(currentSearchedIndex + 1);
-							setCurrentSearchedIndex((prev) => prev + 1);
-						}}
-					/>
-				</div>
-			)}
-			{isFetching && (
-				<Spin indicator={<Loader className="animate-spin" />} size="small" />
-			)}
-			{error && (
-				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
-					<SolidInfoCircle size={14} />
-				</Tooltip>
-			)}
-			{noData && (
-				<Typography.Text className="no-results">No results found</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-Filters.defaultProps = {
-	onFilteredSpansChange: undefined,
-};
-
-export default Filters;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts

@@ -1,38 +0,0 @@
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-
-export const BASE_FILTER_QUERY: IBuilderQuery = {
-	queryName: 'A',
-	dataSource: DataSource.TRACES,
-	aggregateOperator: 'noop',
-	aggregateAttribute: {
-		id: '------false',
-		dataType: DataTypes.EMPTY,
-		key: '',
-		type: '',
-	},
-	timeAggregation: 'rate',
-	spaceAggregation: 'sum',
-	functions: [],
-	filters: {
-		items: [],
-		op: 'AND',
-	},
-	expression: 'A',
-	disabled: false,
-	stepInterval: 60,
-	having: [],
-	limit: 200,
-	orderBy: [
-		{
-			columnName: 'timestamp',
-			order: 'desc',
-		},
-	],
-	groupBy: [],
-	legend: '',
-	reduceTo: ReduceOperators.AVG,
-	offset: 0,
-	selectColumns: [],
-};

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -1,416 +0,0 @@
-.success-content {
-	overflow-y: hidden;
-	overflow-x: hidden;
-	max-width: 100%;
-
-	.missing-spans {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 44px;
-		margin: 16px;
-		padding: 12px;
-		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-600) 10%, transparent);
-
-		.left-info {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-
-			.text {
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.right-info {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: row-reverse;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.right-info:hover {
-			background-color: unset;
-			color: var(--bg-robin-200);
-		}
-	}
-
-	.waterfall-table {
-		height: calc(70vh - 236px);
-		overflow: auto;
-		overflow-x: hidden;
-		padding: 0px 20px 20px 20px;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-
-		// default table overrides css for table v3
-		.div-table {
-			width: 100% !important;
-			border: none !important;
-		}
-
-		.div-thead {
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			background-color: var(--l1-background) !important;
-
-			.div-tr {
-				height: 16px;
-			}
-		}
-
-		.div-tr {
-			display: flex;
-			width: 100%;
-			align-items: center;
-			height: 54px;
-		}
-
-		.div-tr:hover {
-			border-radius: 4px;
-			background: color-mix(
-				in srgb,
-				var(--bg-robin-200) 6%,
-				transparent
-			) !important;
-
-			.div-td .span-overview .second-row .add-funnel-button {
-				opacity: 1;
-			}
-
-			.span-overview {
-				background: unset !important;
-
-				.span-overview-content {
-					background: unset !important;
-				}
-			}
-		}
-
-		.div-th,
-		.div-td {
-			box-shadow: none;
-			padding: 0px !important;
-		}
-
-		.div-th {
-			padding: 2px 4px;
-			position: relative;
-			font-weight: bold;
-			text-align: center;
-		}
-
-		.div-td {
-			display: flex;
-			height: 54px;
-			align-items: center;
-			overflow: hidden;
-
-			.span-overview {
-				display: flex;
-				align-items: center;
-				flex-shrink: 0;
-				height: 100%;
-				width: 100%;
-				cursor: pointer;
-
-				.connector-lines {
-					display: flex;
-				}
-
-				.span-overview-content {
-					display: flex;
-					flex-shrink: 0;
-					flex-direction: column;
-					align-items: flex-start;
-					gap: 5px;
-					width: 100%;
-					background-color: var(--l1-background);
-					height: 100%;
-					justify-content: center;
-					&:not(:first-child) {
-						.first-row {
-							width: calc(100% - 28px);
-						}
-					}
-
-					.first-row {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						height: 20px;
-						width: 100%;
-
-						.span-det {
-							display: flex;
-							gap: 6px;
-							flex-shrink: 0;
-							align-items: center;
-
-							.collapse-uncollapse-button {
-								display: flex;
-								align-items: center;
-								justify-content: center;
-								padding: 4px 4px;
-								gap: 4px;
-								border-radius: 2px;
-								border: 1px solid var(--l1-border);
-								background: var(--l1-border);
-								box-shadow: none;
-								height: 20px;
-
-								.children-count {
-									color: var(--l2-foreground);
-									font-family: 'Space Mono';
-									font-size: 14px;
-									font-style: normal;
-									font-weight: 400;
-									line-height: 20px; /* 142.857% */
-									letter-spacing: 0.28px;
-								}
-							}
-
-							.span-name {
-								color: var(--l1-foreground);
-								font-family: 'Inter';
-								font-size: 14px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: 0.28px;
-							}
-						}
-
-						.status-code-container {
-							display: flex;
-							padding-right: 10px;
-
-							.status-code {
-								display: flex;
-								height: 20px;
-								padding: 3px;
-								align-items: center;
-								border-radius: 3px;
-							}
-
-							.success {
-								border: 1px solid var(--primary-background);
-								background: var(--primary-background);
-							}
-
-							.error {
-								border: 1px solid var(--danger-background);
-								background: var(--danger-background);
-							}
-						}
-					}
-
-					.second-row {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						height: 18px;
-						width: 100%;
-						.service-name {
-							color: var(--l2-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 18px; /* 128.571% */
-							letter-spacing: -0.07px;
-						}
-						.add-funnel-button {
-							position: relative;
-							z-index: 1;
-							opacity: 0;
-							display: flex;
-							align-items: center;
-							gap: 6px;
-							transition: opacity 0.1s ease-in-out;
-
-							&__separator {
-								color: var(--l2-foreground);
-							}
-							&__button {
-								display: flex;
-								align-items: center;
-								justify-content: center;
-							}
-						}
-					}
-				}
-			}
-
-			.span-duration {
-				display: flex;
-				flex-direction: column;
-				height: 54px;
-				position: relative;
-				width: 100%;
-				padding-left: 15px;
-				cursor: pointer;
-
-				.span-line {
-					position: relative;
-					height: 12px;
-					top: 35%;
-					border-radius: 6px;
-				}
-
-				.event-dot {
-					position: absolute;
-					top: 50%;
-					transform: translate(-50%, -50%) rotate(45deg);
-					width: 6px;
-					height: 6px;
-					background-color: var(--primary-background);
-					border: 1px solid var(--bg-robin-600);
-					cursor: pointer;
-					z-index: 1;
-
-					&.error {
-						background-color: var(--danger-background);
-						border-color: var(--bg-cherry-600);
-					}
-
-					&:hover {
-						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-					}
-				}
-
-				.span-line-text {
-					position: relative;
-					top: 40%;
-					font-variant-numeric: lining-nums tabular-nums stacked-fractions
-						slashed-zero;
-					font-feature-settings:
-						'case' on,
-						'cpsp' on,
-						'dlig' on,
-						'salt' on;
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.interested-span,
-			.selected-non-matching-span {
-				border-radius: 4px;
-				background: color-mix(
-					in srgb,
-					var(--bg-robin-200) 6%,
-					transparent
-				) !important;
-
-				.span-overview-content {
-					background: unset;
-				}
-			}
-
-			.dimmed-span {
-				opacity: 0.4;
-			}
-			.highlighted-span {
-				opacity: 1;
-			}
-
-			.selected-non-matching-span {
-				.span-overview-content,
-				.span-line-text {
-					opacity: 0.5;
-				}
-			}
-		}
-
-		.div-td + .div-td {
-			border-left: 1px solid var(--l1-border);
-		}
-
-		.div-th + .div-th {
-			border-left: 1px solid var(--l1-border);
-		}
-
-		.div-tr .div-th:nth-child(2) {
-			width: calc(100% - var(--header-span-name-size) * 1px) !important;
-		}
-		.div-tr .div-td:nth-child(2) {
-			width: calc(100% - var(--header-span-name-size) * 1px) !important;
-		}
-		.resizer {
-			width: 10px !important;
-			position: absolute;
-			top: 0;
-			height: calc(70vh - 236px);
-			right: 0;
-			width: 2px;
-			background: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
-			cursor: col-resize;
-			user-select: none;
-			touch-action: none;
-		}
-
-		.resizer.isResizing {
-			background: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
-			opacity: 1;
-		}
-
-		@media (hover: hover) {
-			.resizer {
-				opacity: 0;
-			}
-
-			*:hover > .resizer {
-				opacity: 1;
-			}
-		}
-	}
-
-	.missing-spans-waterfall-table {
-		height: calc(70vh - 312px);
-	}
-}
-
-.span-dets {
-	.related-logs {
-		display: flex;
-		width: 160px;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 8px;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-border);
-		box-shadow: none;
-	}
-}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -1,591 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
-import { Virtualizer } from '@tanstack/react-virtual';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
-import SpanHoverCard from 'components/SpanHoverCard/SpanHoverCard';
-import { TableV3 } from 'components/TableV3/TableV3';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import AddSpanToFunnelModal from 'container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal';
-import SpanLineActionButtons from 'container/TraceWaterfall/SpanLineActionButtons';
-import { IInterestedSpan } from 'container/TraceWaterfall/TraceWaterfall';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import {
-	ArrowUpRight,
-	ChevronDown,
-	ChevronRight,
-	CircleAlert,
-	Leaf,
-} from '@signozhq/icons';
-import { useAppContext } from 'providers/App/App';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import funnelAddUrl from '@/assets/Icons/funnel-add.svg';
-
-import Filters from './Filters/Filters';
-
-import './Success.styles.scss';
-
-// css config
-const CONNECTOR_WIDTH = 28;
-const VERTICAL_CONNECTOR_WIDTH = 1;
-
-interface ITraceMetadata {
-	traceId: string;
-	startTime: number;
-	endTime: number;
-	hasMissingSpans: boolean;
-}
-interface ISuccessProps {
-	spans: Span[];
-	traceMetadata: ITraceMetadata;
-	interestedSpanId: IInterestedSpan;
-	uncollapsedNodes: string[];
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function SpanOverview({
-	span,
-	isSpanCollapsed,
-	handleCollapseUncollapse,
-	handleSpanClick,
-	handleAddSpanToFunnel,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-	traceMetadata,
-}: {
-	span: Span;
-	isSpanCollapsed: boolean;
-	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	handleAddSpanToFunnel: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-	traceMetadata: ITraceMetadata;
-}): JSX.Element {
-	const isRootSpan = span.level === 0;
-	const { hasEditPermission } = useAppContext();
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-	if (span.hasError) {
-		color = `var(--danger-background)`;
-	}
-
-	// Smart highlighting logic
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	return (
-		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-			<div
-				className={cx('span-overview', {
-					'interested-span': isSelected && (!isFilterActive || isMatching),
-					'highlighted-span': isHighlighted,
-					'selected-non-matching-span': isSelectedNonMatching,
-					'dimmed-span': isDimmed,
-				})}
-				style={{
-					paddingLeft: `${
-						isRootSpan
-							? span.level * CONNECTOR_WIDTH
-							: (span.level - 1) * (CONNECTOR_WIDTH + VERTICAL_CONNECTOR_WIDTH)
-					}px`,
-					backgroundImage: `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="54"><line x1="0" y1="0" x2="0" y2="54" stroke="rgb(29 33 45)" stroke-width="1" /></svg>')`,
-					backgroundRepeat: 'repeat',
-					backgroundSize: `${CONNECTOR_WIDTH + 1}px 54px`,
-				}}
-				onClick={(): void => handleSpanClick(span)}
-			>
-				{!isRootSpan && (
-					<div className="connector-lines">
-						<div
-							style={{
-								width: `${CONNECTOR_WIDTH}px`,
-								height: '1px',
-								borderTop: '1px solid var(--bg-slate-400)',
-								display: 'flex',
-								flexShrink: 0,
-								position: 'relative',
-								top: '-10px',
-							}}
-						/>
-					</div>
-				)}
-				<div className="span-overview-content">
-					<section className="first-row">
-						<div className="span-det">
-							{span.hasChildren ? (
-								<Button
-									onClick={(event): void => {
-										event.stopPropagation();
-										event.preventDefault();
-										handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
-									}}
-									className="collapse-uncollapse-button"
-								>
-									{isSpanCollapsed ? (
-										<ChevronRight size={14} />
-									) : (
-										<ChevronDown size={14} />
-									)}
-									<Typography.Text className="children-count">
-										{span.subTreeNodeCount}
-									</Typography.Text>
-								</Button>
-							) : (
-								<Button className="collapse-uncollapse-button">
-									<Leaf size={14} />
-								</Button>
-							)}
-							<Typography.Text className="span-name">{span.name}</Typography.Text>
-						</div>
-						<HttpStatusBadge statusCode={span.tagMap?.['http.status_code']} />
-					</section>
-					<section className="second-row">
-						<div style={{ width: '2px', background: color, height: '100%' }} />
-						<Typography.Text className="service-name">
-							{span.serviceName}
-						</Typography.Text>
-						{!!span.serviceName && !!span.name && (
-							<div className="add-funnel-button">
-								<span className="add-funnel-button__separator">·</span>
-								<Tooltip
-									title={
-										!hasEditPermission
-											? 'You need editor or admin access to add spans to funnels'
-											: ''
-									}
-								>
-									<Button
-										type="text"
-										size="small"
-										className="add-funnel-button__button"
-										onClick={(e): void => {
-											e.preventDefault();
-											e.stopPropagation();
-											handleAddSpanToFunnel(span);
-										}}
-										disabled={!hasEditPermission}
-										icon={
-											<img
-												className="add-funnel-button__icon"
-												src={funnelAddUrl}
-												alt="funnel-icon"
-											/>
-										}
-									/>
-								</Tooltip>
-							</div>
-						)}
-					</section>
-				</div>
-			</div>
-		</SpanHoverCard>
-	);
-}
-
-export function SpanDuration({
-	span,
-	traceMetadata,
-	handleSpanClick,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-}: {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(
-		span.durationNano / 1e6,
-	);
-
-	const spread = traceMetadata.endTime - traceMetadata.startTime;
-	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
-	const width = (span.durationNano * 1e2) / (spread * 1e6);
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-	if (span.hasError) {
-		color = `var(--danger-background)`;
-	}
-
-	const [hasActionButtons, setHasActionButtons] = useState(false);
-
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	const handleMouseEnter = (): void => {
-		setHasActionButtons(true);
-	};
-
-	const handleMouseLeave = (): void => {
-		setHasActionButtons(false);
-	};
-
-	// Calculate text positioning to handle overflow cases
-	const textStyle = useMemo(() => {
-		const spanRightEdge = leftOffset + width;
-		const textWidthApprox = 8; // Approximate text width in percentage
-
-		// If span would cause text overflow, right-align text to span end
-		if (leftOffset > 100 - textWidthApprox) {
-			return {
-				right: `${100 - spanRightEdge}%`,
-				color,
-				textAlign: 'right' as const,
-			};
-		}
-
-		// Default: left-align text to span start
-		return {
-			left: `${leftOffset}%`,
-			color,
-		};
-	}, [leftOffset, width, color]);
-
-	return (
-		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-			<div
-				className={cx('span-duration', {
-					'interested-span': isSelected && (!isFilterActive || isMatching),
-					'highlighted-span': isHighlighted,
-					'selected-non-matching-span': isSelectedNonMatching,
-					'dimmed-span': isDimmed,
-				})}
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-				onClick={(): void => handleSpanClick(span)}
-			>
-				<div
-					className="span-line"
-					style={{
-						left: `${leftOffset}%`,
-						width: `${width}%`,
-						backgroundColor: color,
-						position: 'relative',
-					}}
-				>
-					{span.event?.map((event) => {
-						const eventTimeMs = event.timeUnixNano / 1e6;
-						const eventOffsetPercent =
-							((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
-						const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-						const { isError } = event;
-						const { time, timeUnitName } = convertTimeToRelevantUnit(
-							eventTimeMs - span.timestamp,
-						);
-						return (
-							<Tooltip
-								key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
-								title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
-							>
-								<div
-									className={`event-dot ${isError ? 'error' : ''}`}
-									style={{
-										left: `${clampedOffset}%`,
-									}}
-								/>
-							</Tooltip>
-						);
-					})}
-				</div>
-				{hasActionButtons && <SpanLineActionButtons span={span} />}
-				<Typography.Text
-					className="span-line-text"
-					truncate={1}
-					style={textStyle}
-				>{`${toFixed(time, 2)} ${timeUnitName}`}</Typography.Text>
-			</div>
-		</SpanHoverCard>
-	);
-}
-
-// table config
-const columnDefHelper = createColumnHelper<Span>();
-
-function getWaterfallColumns({
-	handleCollapseUncollapse,
-	uncollapsedNodes,
-	traceMetadata,
-	selectedSpan,
-	handleSpanClick,
-	handleAddSpanToFunnel,
-	filteredSpanIds,
-	isFilterActive,
-}: {
-	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
-	uncollapsedNodes: string[];
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	handleAddSpanToFunnel: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}): ColumnDef<Span, any>[] {
-	const waterfallColumns: ColumnDef<Span, any>[] = [
-		columnDefHelper.display({
-			id: 'span-name',
-			header: '',
-			cell: (props): JSX.Element => (
-				<SpanOverview
-					span={props.row.original}
-					handleCollapseUncollapse={handleCollapseUncollapse}
-					isSpanCollapsed={!uncollapsedNodes.includes(props.row.original.spanId)}
-					selectedSpan={selectedSpan}
-					handleSpanClick={handleSpanClick}
-					handleAddSpanToFunnel={handleAddSpanToFunnel}
-					traceMetadata={traceMetadata}
-					filteredSpanIds={filteredSpanIds}
-					isFilterActive={isFilterActive}
-				/>
-			),
-			size: 450,
-			/**
-			 * Note: The TanStack table currently does not support percentage-based column sizing.
-			 * Therefore, we specify both `minSize` and `maxSize` for the "span-name" column to ensure
-			 * that its width remains between 240px and 900px. Setting a `maxSize` here is important
-			 * because the "span-duration" column has column resizing disabled, making it difficult
-			 * to enforce a minimum width for that column. By constraining the "span-name" column,
-			 * we indirectly control the minimum width available for the "span-duration" column.
-			 */
-			minSize: 240,
-			maxSize: 900,
-		}),
-		columnDefHelper.display({
-			id: 'span-duration',
-			header: () => <div />,
-			enableResizing: false,
-			cell: (props): JSX.Element => (
-				<SpanDuration
-					span={props.row.original}
-					traceMetadata={traceMetadata}
-					selectedSpan={selectedSpan}
-					handleSpanClick={handleSpanClick}
-					filteredSpanIds={filteredSpanIds}
-					isFilterActive={isFilterActive}
-				/>
-			),
-		}),
-	];
-
-	return waterfallColumns;
-}
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		traceMetadata,
-		interestedSpanId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setTraceFlamegraphStatsWidth,
-		setSelectedSpan,
-		selectedSpan,
-	} = props;
-
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
-	const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element>>();
-
-	const handleFilteredSpansChange = useCallback(
-		(spanIds: string[], isActive: boolean) => {
-			setFilteredSpanIds(spanIds);
-			setIsFilterActive(isActive);
-		},
-		[],
-	);
-
-	const handleCollapseUncollapse = useCallback(
-		(spanId: string, collapse: boolean) => {
-			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
-		},
-		[setInterestedSpanId],
-	);
-
-	const handleVirtualizerInstanceChanged = (
-		instance: Virtualizer<HTMLDivElement, Element>,
-	): void => {
-		const { range } = instance;
-		// when there are less than 500 elements in the API call that means there is nothing to fetch on top and bottom so
-		// do not trigger the API call
-		if (spans.length < 500) {
-			return;
-		}
-
-		if (range?.startIndex === 0 && instance.isScrolling) {
-			// do not trigger for trace root as nothing to fetch above
-			if (spans[0].level !== 0) {
-				setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
-			}
-			return;
-		}
-
-		if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
-			setInterestedSpanId({
-				spanId: spans[spans.length - 1].spanId,
-				isUncollapsed: false,
-			});
-		}
-	};
-
-	const [isAddSpanToFunnelModalOpen, setIsAddSpanToFunnelModalOpen] =
-		useState(false);
-	const [selectedSpanToAddToFunnel, setSelectedSpanToAddToFunnel] = useState<
-		Span | undefined
-	>(undefined);
-	const handleAddSpanToFunnel = useCallback((span: Span): void => {
-		setIsAddSpanToFunnelModalOpen(true);
-		setSelectedSpanToAddToFunnel(span);
-	}, []);
-
-	const urlQuery = useUrlQuery();
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleSpanClick = useCallback(
-		(span: Span): void => {
-			setSelectedSpan(span);
-			if (span?.spanId) {
-				urlQuery.set('spanId', span?.spanId);
-			}
-
-			safeNavigate({ search: urlQuery.toString() });
-		},
-		[setSelectedSpan, urlQuery, safeNavigate],
-	);
-
-	const columns = useMemo(
-		() =>
-			getWaterfallColumns({
-				handleCollapseUncollapse,
-				uncollapsedNodes,
-				traceMetadata,
-				selectedSpan,
-				handleSpanClick,
-				handleAddSpanToFunnel,
-				filteredSpanIds,
-				isFilterActive,
-			}),
-		[
-			handleCollapseUncollapse,
-			uncollapsedNodes,
-			traceMetadata,
-			selectedSpan,
-			handleSpanClick,
-			handleAddSpanToFunnel,
-			filteredSpanIds,
-			isFilterActive,
-		],
-	);
-
-	useEffect(() => {
-		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
-			const idx = spans.findIndex(
-				(span) => span.spanId === interestedSpanId.spanId,
-			);
-			if (idx !== -1) {
-				setTimeout(() => {
-					virtualizerRef.current?.scrollToIndex(idx, {
-						align: 'center',
-						behavior: 'auto',
-					});
-				}, 400);
-
-				setSelectedSpan(spans[idx]);
-			}
-		} else {
-			setSelectedSpan((prev) => {
-				if (!prev) {
-					return spans[0];
-				}
-				return prev;
-			});
-		}
-	}, [interestedSpanId, setSelectedSpan, spans]);
-
-	return (
-		<div className="success-content">
-			{traceMetadata.hasMissingSpans && (
-				<div className="missing-spans">
-					<section className="left-info">
-						<CircleAlert size={14} />
-						<Typography.Text className="text">
-							This trace has missing spans
-						</Typography.Text>
-					</section>
-					<Button
-						icon={<ArrowUpRight size={14} />}
-						className="right-info"
-						type="text"
-						onClick={(): WindowProxy | null =>
-							window.open(
-								'https://signoz.io/docs/userguide/traces/#missing-spans',
-								'_blank',
-							)
-						}
-					>
-						Learn More
-					</Button>
-				</div>
-			)}
-			<Filters
-				startTime={traceMetadata.startTime / 1e3}
-				endTime={traceMetadata.endTime / 1e3}
-				traceID={traceMetadata.traceId}
-				onFilteredSpansChange={handleFilteredSpansChange}
-			/>
-			<TableV3
-				columns={columns}
-				data={spans}
-				config={{
-					handleVirtualizerInstanceChanged,
-				}}
-				customClassName={cx(
-					'waterfall-table',
-					traceMetadata.hasMissingSpans ? 'missing-spans-waterfall-table' : '',
-				)}
-				virtualiserRef={virtualizerRef}
-				setColumnWidths={setTraceFlamegraphStatsWidth}
-			/>
-			{selectedSpanToAddToFunnel && (
-				<AddSpanToFunnelModal
-					span={selectedSpanToAddToFunnel}
-					isOpen={isAddSpanToFunnelModalOpen}
-					onClose={(): void => setIsAddSpanToFunnelModalOpen(false)}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default Success;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -1,264 +0,0 @@
-import useUrlQuery from 'hooks/useUrlQuery';
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import { SpanDuration } from '../Success';
-
-// Constants to avoid string duplication
-const SPAN_DURATION_TEXT = '1.16 ms';
-const SPAN_DURATION_CLASS = '.span-duration';
-const INTERESTED_SPAN_CLASS = 'interested-span';
-const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
-const DIMMED_SPAN_CLASS = 'dimmed-span';
-const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
-
-// Mock the hooks
-jest.mock('hooks/useUrlQuery');
-jest.mock('@signozhq/ui/badge', () => ({
-	...jest.requireActual('@signozhq/ui/badge'),
-	Badge: jest.fn(),
-}));
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1160000, // 1ms in nano
-	timestamp: 1234567890,
-	rootSpanId: 'test-root-span-id',
-	parentSpanId: 'test-parent-span-id',
-	traceId: 'test-trace-id',
-	hasError: false,
-	kind: 0,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'test-root-name',
-	statusMessage: 'test-status-message',
-	statusCodeString: 'test-status-code-string',
-	spanKind: 'test-span-kind',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1234567000,
-	endTime: 1234569000,
-	hasMissingSpans: false,
-};
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-describe('SpanDuration', () => {
-	const mockSetSelectedSpan = jest.fn();
-	const mockUrlQuerySet = jest.fn();
-	const mockUrlQueryGet = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Mock URL query hook
-		(useUrlQuery as jest.Mock).mockReturnValue({
-			set: mockUrlQuerySet,
-			get: mockUrlQueryGet,
-			toString: () => 'spanId=test-span-id',
-		});
-	});
-
-	it('calls handleSpanClick when clicked', () => {
-		const mockHandleSpanClick = jest.fn();
-
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockHandleSpanClick}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		// Find and click the span duration element
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-		fireEvent.click(spanElement);
-
-		// Verify handleSpanClick was called with the correct span
-		expect(mockHandleSpanClick).toHaveBeenCalledWith(mockSpan);
-	});
-
-	it('shows action buttons on hover', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-
-		// Initially, action buttons should not be visible
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-
-		// Hover over the span
-		fireEvent.mouseEnter(spanElement);
-
-		// Action buttons should now be visible
-		expect(screen.getByRole('button')).toBeInTheDocument();
-
-		// Mouse leave should hide the buttons
-		fireEvent.mouseLeave(spanElement);
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-	});
-
-	it('applies interested-span class when span is selected', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies highlighted-span class when span matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies dimmed-span class when span does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['other-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-	});
-
-	it('prioritizes interested-span over highlighted-span when span is selected and matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies selected-non-matching-span class when span is selected but does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['different-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies interested-span class when span is selected and no filter is active', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('dims span when filter is active but no matches found', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]} // Empty array but filter is active
-				isFilterActive // This is the key difference
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-});

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -1,447 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import Success from '../Success';
-
-// Mock the required hooks with proper typing
-const mockSafeNavigate = jest.fn() as jest.MockedFunction<
-	(params: { search: string }) => void
->;
-const mockUrlQuery = new URLSearchParams();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('hooks/useUrlQuery', () => (): URLSearchParams => mockUrlQuery);
-
-// App provider is already handled by test-utils
-
-// React Router is already globally mocked
-
-// Mock complex external dependencies that cause provider issues
-jest.mock('components/SpanHoverCard/SpanHoverCard', () => {
-	function SpanHoverCard({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return <div>{children}</div>;
-	}
-	SpanHoverCard.displayName = 'SpanHoverCard';
-	return SpanHoverCard;
-});
-
-// Mock the Filters component that's causing React Query issues
-jest.mock('../Filters/Filters', () => {
-	function Filters(): null {
-		return null;
-	}
-	Filters.displayName = 'Filters';
-	return Filters;
-});
-
-// Mock other potential dependencies
-jest.mock(
-	'container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal',
-	() => {
-		function AddSpanToFunnelModal(): null {
-			return null;
-		}
-		AddSpanToFunnelModal.displayName = 'AddSpanToFunnelModal';
-		return AddSpanToFunnelModal;
-	},
-);
-
-jest.mock('container/TraceWaterfall/SpanLineActionButtons', () => {
-	function SpanLineActionButtons(): null {
-		return null;
-	}
-	SpanLineActionButtons.displayName = 'SpanLineActionButtons';
-	return SpanLineActionButtons;
-});
-
-jest.mock('components/HttpStatusBadge/HttpStatusBadge', () => {
-	function HttpStatusBadge(): null {
-		return null;
-	}
-	HttpStatusBadge.displayName = 'HttpStatusBadge';
-	return HttpStatusBadge;
-});
-
-// Mock other utilities that might cause issues
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (): string => '#1890ff',
-}));
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		value: number,
-	): { time: number; timeUnitName: string } => ({
-		time: value < 1000 ? value : value / 1000,
-		timeUnitName: value < 1000 ? 'ms' : 's',
-	}),
-}));
-
-jest.mock('utils/toFixed', () => ({
-	toFixed: (value: number, decimals: number): string => value.toFixed(decimals),
-}));
-
-// Create a simplified mock TableV3 that renders the actual column components
-jest.mock('components/TableV3/TableV3', () => ({
-	TableV3: ({
-		columns,
-		data,
-	}: {
-		columns: unknown[];
-		data: Span[];
-	}): JSX.Element => {
-		// Get the current props from the columns (which contain the current state)
-		const spanOverviewColumn = columns[0] as {
-			cell?: (props: any) => JSX.Element;
-		};
-		const spanDurationColumn = columns[1] as {
-			cell?: (props: any) => JSX.Element;
-		};
-
-		return (
-			<div data-testid="trace-table">
-				{data.map((row: Span) => {
-					// Create proper cell props that match what TanStack Table expects
-					const cellProps = {
-						row: {
-							original: row,
-							getValue: (): Span => row,
-							getAllCells: (): any[] => [],
-							getVisibleCells: (): any[] => [],
-							getUniqueValues: (): any[] => [],
-							getIsSelected: (): boolean => false,
-							getIsSomeSelected: (): boolean => false,
-							getIsAllSelected: (): boolean => false,
-							getCanSelect: (): boolean => true,
-							getCanSelectSubRows: (): boolean => true,
-							getCanSelectAll: (): boolean => true,
-							toggleSelected: (): void => {},
-							getToggleSelectedHandler: (): (() => void) => (): void => {},
-						},
-						column: { id: 'span-name' },
-						table: {},
-						cell: {},
-						renderValue: (): Span => row,
-						getValue: (): Span => row,
-					};
-
-					const durationCellProps = {
-						...cellProps,
-						column: { id: 'span-duration' },
-					};
-
-					return (
-						<div key={row.spanId} data-testid={`table-row-${row.spanId}`}>
-							{/* Render span overview column */}
-							<div data-testid={`cell-0-${row.spanId}`}>
-								{spanOverviewColumn?.cell?.(cellProps)}
-							</div>
-							{/* Render span duration column */}
-							<div data-testid={`cell-1-${row.spanId}`}>
-								{spanDurationColumn?.cell?.(durationCellProps)}
-							</div>
-						</div>
-					);
-				})}
-			</div>
-		);
-	},
-}));
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1679748225000000,
-	endTime: 1679748226000000,
-	hasMissingSpans: false,
-};
-
-const createMockSpan = (spanId: string, level = 1): Span => ({
-	spanId,
-	traceId: 'test-trace-id',
-	rootSpanId: 'span-1',
-	parentSpanId: level === 0 ? '' : 'span-1',
-	name: `Test Span ${spanId}`,
-	serviceName: 'test-service',
-	timestamp: mockTraceMetadata.startTime + level * 100000,
-	durationNano: 50000000,
-	level,
-	hasError: false,
-	kind: 1,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'Test Root Span',
-	statusMessage: '',
-	statusCodeString: 'OK',
-	spanKind: 'server',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 1,
-});
-
-const mockSpans = [
-	createMockSpan('span-1', 0),
-	createMockSpan('span-2', 1),
-	createMockSpan('span-3', 1),
-];
-
-// Shared TestComponent for all tests
-function TestComponent(): JSX.Element {
-	const [selectedSpan, setSelectedSpan] = React.useState<Span | undefined>(
-		undefined,
-	);
-
-	return (
-		<Success
-			spans={mockSpans}
-			traceMetadata={mockTraceMetadata}
-			interestedSpanId={{ spanId: '', isUncollapsed: false }}
-			uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-			setInterestedSpanId={jest.fn()}
-			setTraceFlamegraphStatsWidth={jest.fn()}
-			selectedSpan={selectedSpan}
-			setSelectedSpan={setSelectedSpan}
-		/>
-	);
-}
-
-describe('Span Click User Flows', () => {
-	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
-	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
-	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
-	const SPAN_OVERVIEW_CLASS = '.span-overview';
-	const SPAN_DURATION_CLASS = '.span-duration';
-	const INTERESTED_SPAN_CLASS = 'interested-span';
-	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		// Clear all URL parameters
-		Array.from(mockUrlQuery.keys()).forEach((key) => mockUrlQuery.delete(key));
-	});
-
-	it('clicking span updates URL with spanId parameter', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				setTraceFlamegraphStatsWidth={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Initially URL should not have spanId
-		expect(mockUrlQuery.get('spanId')).toBeNull();
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify URL was updated with spanId
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringContaining('spanId=span-1'),
-		});
-	});
-
-	it('clicking span duration visually selects the span', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click on span-2 to test selection change
-		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-		const span2DurationElement = span2Duration.querySelector(
-			SPAN_DURATION_CLASS,
-		) as HTMLElement;
-		await user.click(span2DurationElement);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('both click areas produce the same visual result', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Initially both areas should show the same visual selection (first span is auto-selected)
-			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click span-2 to test selection change
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Now span-2 should be selected, span-1 should not
-			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-
-			// Check that span-2 is selected
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2OverviewElement = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(span2OverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('clicking different spans updates selection correctly', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click second span
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Element = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-
-			// Second span should be selected, first should not
-			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('preserves existing URL parameters when selecting spans', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		// Pre-populate URL with existing parameters
-		mockUrlQuery.set('existingParam', 'existingValue');
-		mockUrlQuery.set('anotherParam', 'anotherValue');
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				setTraceFlamegraphStatsWidth={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify existing parameters are preserved and spanId is added
-		expect(mockUrlQuery.get('existingParam')).toBe('existingValue');
-		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-
-		// Verify navigation was called with all parameters
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringMatching(
-				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,
-			),
-		});
-	});
-});

frontend/src/container/TraceWaterfall/constants.ts

@@ -1,7 +0,0 @@
-export enum TraceWaterfallStates {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
-}

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -1,31 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-import getTraceFlamegraph from 'api/trace/getTraceFlamegraph';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceFlamegraphPayloadProps,
-	GetTraceFlamegraphSuccessResponse,
-} from 'types/api/trace/getTraceFlamegraph';
-
-const useGetTraceFlamegraph = (
-	props: GetTraceFlamegraphPayloadProps,
-): UseLicense =>
-	useQuery({
-		queryFn: () => getTraceFlamegraph(props),
-		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
-			props.traceId,
-			props.selectedSpanId,
-			props.selectFields,
-		],
-		enabled: !!props.traceId,
-		keepPreviousData: true,
-		refetchOnWindowFocus: false,
-	});
-
-type UseLicense = UseQueryResult<
-	SuccessResponse<GetTraceFlamegraphSuccessResponse> | ErrorResponse,
-	unknown
->;
-
-export default useGetTraceFlamegraph;