feat(saved-views): gate saved views on their permissions

saved-view added to the authz generator allow-list so the frontend
permission types include it, same as quick filters

.github/workflows/integrationci.yaml

@@ -68,7 +68,6 @@ jobs:
           - semconvfamilies
           - serviceaccount
           - spanmapper
-          - tracedetail
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl

cmd/authz.go

@@ -104,6 +104,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSavedView).String():         true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/api/openapi.yml

@@ -1,44 +1,5 @@
 components:
   schemas:
-    AiobservabilitytypesMessage:
-      properties:
-        content:
-          items:
-            $ref: '#/components/schemas/AiobservabilitytypesPart'
-          type: array
-        finishReason:
-          type: string
-        role:
-          type: string
-      required:
-      - content
-      type: object
-    AiobservabilitytypesPart:
-      properties:
-        arguments: {}
-        content:
-          type: string
-        id:
-          type: string
-        isError:
-          type: boolean
-        name:
-          type: string
-        toolCallId:
-          type: string
-        type:
-          $ref: '#/components/schemas/AiobservabilitytypesPartType'
-      required:
-      - type
-      type: object
-    AiobservabilitytypesPartType:
-      enum:
-      - text
-      - thinking
-      - tool_call
-      - tool_result
-      - generic
-      type: string
     AlertmanagertypesChannel:
       properties:
         createdAt:
@@ -223,6 +184,7 @@ components:
         headers:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         html:
           type: string
@@ -256,6 +218,7 @@ components:
         metadata:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -297,6 +260,7 @@ components:
           type: string
         customFields:
           additionalProperties: {}
+          nullable: true
           type: object
         description:
           type: string
@@ -307,6 +271,7 @@ components:
         labels:
           items:
             type: string
+          nullable: true
           type: array
         priority:
           type: string
@@ -385,6 +350,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         message:
           type: string
@@ -413,6 +379,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         group:
           type: string
@@ -490,6 +457,7 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
+          nullable: true
           type: array
         apiUrl:
           format: password
@@ -503,6 +471,7 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
+          nullable: true
           type: array
         footer:
           type: string
@@ -1802,12 +1771,15 @@ components:
           additionalProperties: {}
           nullable: true
           type: object
+        syncState:
+          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
         timestampMillis:
           format: int64
           type: integer
       required:
       - timestampMillis
       - data
+      - syncState
       type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
@@ -2052,6 +2024,8 @@ components:
           format: date-time
           nullable: true
           type: string
+        syncState:
+          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
       required:
       - account_id
       - cloud_account_id
@@ -2061,6 +2035,7 @@ components:
       - providerAccountId
       - integrationConfig
       - removedAt
+      - syncState
       type: object
     CloudintegrationtypesGettableServicesMetadata:
       properties:
@@ -2160,6 +2135,9 @@ components:
           type: object
         providerAccountId:
           type: string
+        syncedVersion:
+          nullable: true
+          type: integer
       required:
       - data
       type: object
@@ -2172,6 +2150,18 @@ components:
         gcp:
           $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
       type: object
+    CloudintegrationtypesRegionState:
+      enum:
+      - enabled
+      - disabled
+      type: string
+    CloudintegrationtypesRegionSyncState:
+      properties:
+        state:
+          $ref: '#/components/schemas/CloudintegrationtypesRegionState'
+      required:
+      - state
+      type: object
     CloudintegrationtypesService:
       properties:
         assets:
@@ -2313,6 +2303,23 @@ components:
         metrics:
           type: boolean
       type: object
+    CloudintegrationtypesSyncState:
+      nullable: true
+      properties:
+        inSync:
+          type: boolean
+        regions:
+          additionalProperties:
+            $ref: '#/components/schemas/CloudintegrationtypesRegionSyncState'
+          type: object
+        version:
+          format: int64
+          type: integer
+      required:
+      - version
+      - inSync
+      - regions
+      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -9686,19 +9693,6 @@ components:
       required:
       - aggregations
       type: object
-    SpantypesGettableTraceThread:
-      properties:
-        nextCursor:
-          type: string
-        prevCursor:
-          type: string
-        spans:
-          items:
-            $ref: '#/components/schemas/SpantypesThreadSpan'
-          type: array
-      required:
-      - spans
-      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         endTimestampMillis:
@@ -10013,92 +10007,6 @@ components:
           nullable: true
           type: object
       type: object
-    SpantypesThreadSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/SpantypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        formatted_input:
-          items:
-            $ref: '#/components/schemas/AiobservabilitytypesMessage'
-          type: array
-        formatted_output:
-          items:
-            $ref: '#/components/schemas/AiobservabilitytypesMessage'
-          type: array
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        references:
-          items:
-            $ref: '#/components/schemas/SpantypesOtelSpanRef'
-          type: array
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        time_unix:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      required:
-      - references
-      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -15823,90 +15731,6 @@ paths:
       tags:
       - tracedetail
       x-signoz-stability: alpha
-  /api/v1/traces/{traceID}/thread:
-    get:
-      deprecated: false
-      description: Returns the spans carrying gen_ai input or output messages in timestamp
-        order, each with the messages normalised into formatted_input and formatted_output.
-        Pass nextCursor as after or prevCursor as before to page, or spanId to open
-        the page around a span.
-      operationId: GetTraceThread
-      parameters:
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: after
-        schema:
-          type: string
-      - in: query
-        name: before
-        schema:
-          type: string
-      - in: query
-        name: spanId
-        schema:
-          type: string
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableTraceThread'
-                  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 thread view for a trace
-      tags:
-      - tracedetail
-      x-signoz-stability: alpha
   /api/v1/user/me:
     get:
       deprecated: true

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,32 +183,52 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
+	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
+	if err != nil {
+		return nil, err
+	}
+
+	syncState := account.NextSyncState(req.SyncedVersion)
+
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
-	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
+		// Heartbeat stays frozen after removal, only the sync state is updated.
+		if account.AgentReport != nil && syncState != nil {
+			account.UpdateSyncState(syncState)
+
+			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+			if err != nil {
+				return nil, err
+			}
+
+			err = module.store.UpdateAgentReport(ctx, storableAccount)
+			if err != nil {
+				return nil, err
+			}
+		}
+
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
+			syncState,
 		), nil
 	}
 
-	// update account with cloud provider account id and agent report (heartbeat)
-	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
+	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
 
-	err = module.store.UpdateAccount(ctx, account)
+	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
 	if err != nil {
 		return nil, err
 	}
 
-	// Get account as domain object for config access (enabled regions, etc.)
-	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
+	err = module.store.UpdateAgentReport(ctx, storableAccount)
 	if err != nil {
 		return nil, err
 	}
@@ -223,8 +243,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	// Delegate integration config building entirely to the provider module
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -234,6 +253,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
+		syncState,
 	), nil
 }
 

frontend/package.json

@@ -49,6 +49,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@grafana/data": "^11.6.15",
+    "@lezer/highlight": "1.2.1",
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",

frontend/pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@grafana/data':
         specifier: ^11.6.15
         version: 11.6.15(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@lezer/highlight':
+        specifier: 1.2.1
+        version: 1.2.1
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/public/locales/en-GB/titles.json

@@ -33,7 +33,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/titles.json

@@ -42,7 +42,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",

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

@@ -300,14 +300,6 @@ describe('PrivateRoute', () => {
 			);
 		});
 
-		it('should redirect /logs-explorer/live to /logs/logs-explorer/live', () => {
-			renderPrivateRoute({ initialRoute: '/logs-explorer/live' });
-
-			expect(screen.getByTestId('location-display')).toHaveTextContent(
-				'/logs/logs-explorer/live',
-			);
-		});
-
 		it('should redirect /logs-save-views to /logs/saved-views', () => {
 			renderPrivateRoute({ initialRoute: '/logs-save-views' });
 
@@ -1596,7 +1588,6 @@ describe('PrivateRoute', () => {
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
-			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/pageComponents.ts

@@ -154,10 +154,6 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
-export const LiveLogs = Loadable(
-	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
-);
-
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,7 +23,6 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
-	LiveLogs,
 	Login,
 	Logs,
 	LogsIndexToFields,
@@ -282,13 +281,6 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LIVE_LOGS,
-		exact: true,
-		component: LiveLogs,
-		key: 'LIVE_LOGS',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
 		exact: true,
@@ -521,7 +513,6 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
-	'/logs-explorer/live': '/logs/logs-explorer/live',
 	'/logs-save-views': '/logs/saved-views',
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/service-accounts',

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

@@ -4,53 +4,6 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-export enum AiobservabilitytypesPartTypeDTO {
-	text = 'text',
-	thinking = 'thinking',
-	tool_call = 'tool_call',
-	tool_result = 'tool_result',
-	generic = 'generic',
-}
-export interface AiobservabilitytypesPartDTO {
-	arguments?: unknown;
-	/**
-	 * @type string
-	 */
-	content?: string;
-	/**
-	 * @type string
-	 */
-	id?: string;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	toolCallId?: string;
-	type: AiobservabilitytypesPartTypeDTO;
-}
-
-export interface AiobservabilitytypesMessageDTO {
-	/**
-	 * @type array
-	 */
-	content: AiobservabilitytypesPartDTO[];
-	/**
-	 * @type string
-	 */
-	finishReason?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
-}
-
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -151,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
+	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
 	/**
 	 * @type string
 	 * @format password
@@ -172,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -213,13 +166,19 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
+export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelEmailConfigDTOHeaders =
+	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
+
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -286,10 +245,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
+	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -312,7 +277,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -354,10 +319,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
+	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -373,7 +344,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -470,10 +441,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
 	[key: string]: unknown;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
+	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
+
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -481,7 +458,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -497,9 +474,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	labels?: string[];
+	labels?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -590,17 +567,23 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
+	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
+
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3413,6 +3396,37 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
+export enum CloudintegrationtypesRegionStateDTO {
+	enabled = 'enabled',
+	disabled = 'disabled',
+}
+export interface CloudintegrationtypesRegionSyncStateDTO {
+	state: CloudintegrationtypesRegionStateDTO;
+}
+
+export type CloudintegrationtypesSyncStateDTORegions = {
+	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesSyncStateDTO = {
+	/**
+	 * @type boolean
+	 */
+	inSync: boolean;
+	/**
+	 * @type object
+	 */
+	regions: CloudintegrationtypesSyncStateDTORegions;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	version: number;
+} | null;
+
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3431,6 +3445,7 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3859,6 +3874,7 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3929,6 +3945,10 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
+	/**
+	 * @type integer,null
+	 */
+	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
@@ -11189,169 +11209,6 @@ export interface SpantypesOtelSpanRefDTO {
 	traceId?: string;
 }
 
-export type SpantypesThreadSpanDTOAttributesAnyOf = { [key: string]: unknown };
-
-/**
- * @nullable
- */
-export type SpantypesThreadSpanDTOAttributes =
-	SpantypesThreadSpanDTOAttributesAnyOf | null;
-
-export type SpantypesThreadSpanDTOResourceAnyOf = { [key: string]: string };
-
-/**
- * @nullable
- */
-export type SpantypesThreadSpanDTOResource =
-	SpantypesThreadSpanDTOResourceAnyOf | null;
-
-export interface SpantypesThreadSpanDTO {
-	/**
-	 * @type object,null
-	 */
-	attributes?: SpantypesThreadSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array,null
-	 */
-	events?: SpantypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type array
-	 */
-	formatted_input?: AiobservabilitytypesMessageDTO[];
-	/**
-	 * @type array
-	 */
-	formatted_output?: AiobservabilitytypesMessageDTO[];
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type array
-	 */
-	references: SpantypesOtelSpanRefDTO[];
-	/**
-	 * @type object,null
-	 */
-	resource?: SpantypesThreadSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	time_unix?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
-export interface SpantypesGettableTraceThreadDTO {
-	/**
-	 * @type string
-	 */
-	nextCursor?: string;
-	/**
-	 * @type string
-	 */
-	prevCursor?: string;
-	/**
-	 * @type array
-	 */
-	spans: SpantypesThreadSpanDTO[];
-}
-
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
 	[key: string]: unknown;
 };
@@ -13025,40 +12882,6 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
-export type GetTraceThreadPathParameters = {
-	traceID: string;
-};
-export type GetTraceThreadParams = {
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	after?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	before?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	spanId?: string;
-};
-
-export type GetTraceThread200 = {
-	data: SpantypesGettableTraceThreadDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUserPreferences200 = {
 	/**
 	 * @type array

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

@@ -4,17 +4,11 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';
 
 import type {
@@ -22,9 +16,6 @@ import type {
 	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
-	GetTraceThread200,
-	GetTraceThreadParams,
-	GetTraceThreadPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
@@ -36,26 +27,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Computes span aggregations grouped by requested field.
  * @summary Get aggregations for a trace
@@ -156,121 +127,6 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
-/**
- * Returns the spans carrying gen_ai input or output messages in timestamp order, each with the messages normalised into formatted_input and formatted_output. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
- * @summary Get thread view for a trace
- */
-export const getTraceThread = (
-	{ traceID }: GetTraceThreadPathParameters,
-	params?: GetTraceThreadParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetTraceThread200>({
-		url: `/api/v1/traces/${traceID}/thread`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetTraceThreadQueryKey = (
-	{ traceID }: GetTraceThreadPathParameters,
-	params?: GetTraceThreadParams,
-) => {
-	return [
-		`/api/v1/traces/${traceID}/thread`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getGetTraceThreadQueryOptions = <
-	TData = Awaited<ReturnType<typeof getTraceThread>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ traceID }: GetTraceThreadPathParameters,
-	params?: GetTraceThreadParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getTraceThread>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetTraceThreadQueryKey({ traceID }, params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceThread>>> = ({
-		signal,
-	}) => getTraceThread({ traceID }, params, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: traceID !== null && traceID !== undefined,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getTraceThread>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetTraceThreadQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getTraceThread>>
->;
-export type GetTraceThreadQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get thread view for a trace
- */
-
-export function useGetTraceThread<
-	TData = Awaited<ReturnType<typeof getTraceThread>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ traceID }: GetTraceThreadPathParameters,
-	params?: GetTraceThreadParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getTraceThread>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetTraceThreadQueryOptions(
-		{ traceID },
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary Get thread view for a trace
- */
-export const invalidateGetTraceThread = async (
-	queryClient: QueryClient,
-	{ traceID }: GetTraceThreadPathParameters,
-	params?: GetTraceThreadParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetTraceThreadQueryKey({ traceID }, params) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * Returns the flamegraph view of spans for a given trace ID.
  * @summary Get flamegraph view for a trace

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
+		expect(button).toHaveAccessibleName('Download');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Tooltip } from 'antd';
+import { Popover, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
-import { Download, LoaderCircle } from '@signozhq/icons';
+import { Download } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -111,8 +112,9 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
-					type="primary"
-					icon={<Download size={16} />}
+					variant="solid"
+					color="primary"
+					prefix={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
@@ -144,16 +146,14 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<LoaderCircle size={14} className="animate-spin" />
-						) : (
-							<Download size={14} />
-						)
-					}
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={<Download size={14} />}
+					aria-label="Download"
 					data-testid={`periscope-btn-download-${dataSource}`}
 					disabled={isDownloading}
+					loading={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,7 +1,7 @@
 import { DrawerProps } from 'antd';
-import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
+import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
+import { ActionItemProps } from 'container/LogDetailedView/LogDetailedView.types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

@@ -19,10 +19,6 @@ jest.mock('periscope/components/DataViewer', () => ({
 }));
 
 // Force v2 for these tests regardless of route.
-jest.mock('../useIsLogDetailsV2', () => ({
-	useIsLogDetailsV2: (): boolean => true,
-}));
-
 const mockLog: ILog = {
 	id: 'log-1',
 	timestamp: '2024-01-15T09:45:30Z',
@@ -58,7 +54,7 @@ function renderDrawer(props: Partial<LogDetailProps> = {}): void {
 	);
 }
 
-describe('LogDetail drawer — header (isLogDetailsV2)', () => {
+describe('LogDetail drawer — header', () => {
 	afterEach(() => {
 		jest.clearAllMocks();
 		localStorage.clear();

frontend/src/components/LogDetail/index.tsx

@@ -1,16 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import LogStateIndicator, {
-	LogType,
-} from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -19,33 +13,24 @@ import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import Overview from 'container/LogDetailedView/Overview';
 import {
-	aggregateAttributesResourcesToString,
 	getSanitizedLogBody,
 	removeEscapeCharacters,
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
-	Braces,
-	ChevronDown,
-	ChevronUp,
-	Compass,
-	Copy,
 	Filter,
 	Histogram,
 	Table,
 	TextSelect,
 	X,
 } from '@signozhq/icons';
-import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -56,7 +41,6 @@ import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
-import { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -64,11 +48,8 @@ import './LogDetails.styles.scss';
 function LogDetailInner({
 	log,
 	onClose,
-	onAddToQuery,
-	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
-	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	logs,
 	onNavigateLog,
@@ -81,7 +62,6 @@ function LogDetailInner({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
 		initialContextQuery,
 	);
-	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
@@ -94,8 +74,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -173,12 +151,6 @@ function LogDetailInner({
 
 	const isDarkMode = useIsDarkMode();
 
-	const { notifications } = useNotifications();
-
-	const { onLogCopy } = useCopyLogLink(log?.id);
-
-	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
-
 	const handleModeChange = (value: string): void => {
 		setSelectedView(value as VIEWS);
 		setIsEdit(false);
@@ -220,13 +192,6 @@ function LogDetailInner({
 		[logBody],
 	);
 
-	const handleJSONCopy = (): void => {
-		copyToClipboard(LogJsonData);
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
-
 	const handleQueryExpressionChange = useCallback(
 		(value: string, queryIndex: number) => {
 			// update the query at the given index
@@ -295,8 +260,6 @@ function LogDetailInner({
 		}
 	};
 
-	const logType = log?.attributes_string?.log_level || LogType.INFO;
-
 	return (
 		<Drawer
 			width="60%"
@@ -304,69 +267,15 @@ function LogDetailInner({
 			maskClosable={false}
 			getContainer={getContainer}
 			title={
-				isLogDetailsV2 ? (
-					<LogDetailsHeader
-						log={log}
-						onNavigatePrev={goToPrev}
-						onNavigateNext={goToNext}
-						isPrevDisabled={isPrevDisabled}
-						isNextDisabled={isNextDisabled}
-						showOpenInExplorer={!!handleOpenInExplorer}
-						onOpenInExplorer={handleOpenInExplorer}
-					/>
-				) : (
-					<div className="log-detail-drawer__title" data-log-detail-ignore="true">
-						<div className="log-detail-drawer__title-left">
-							<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
-							<Typography.Text className="title">Log details</Typography.Text>
-						</div>
-						<div className="log-detail-drawer__title-right">
-							<div className="log-arrows">
-								<Tooltip
-									title={isPrevDisabled ? '' : 'Move to previous log'}
-									placement="top"
-									mouseLeaveDelay={0}
-								>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<ChevronUp size={14} />}
-										className="log-arrow-btn log-arrow-btn-up"
-										disabled={isPrevDisabled}
-										onClick={goToPrev}
-									/>
-								</Tooltip>
-								<Tooltip
-									title={isNextDisabled ? '' : 'Move to next log'}
-									placement="top"
-									mouseLeaveDelay={0}
-								>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<ChevronDown size={14} />}
-										className="log-arrow-btn log-arrow-btn-down"
-										disabled={isNextDisabled}
-										onClick={goToNext}
-									/>
-								</Tooltip>
-							</div>
-							{handleOpenInExplorer && (
-								<div>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<Compass size={16} />}
-										className="open-in-explorer-btn"
-										onClick={handleOpenInExplorer}
-									>
-										Open in Explorer
-									</Button>
-								</div>
-							)}
-						</div>
-					</div>
-				)
+				<LogDetailsHeader
+					log={log}
+					onNavigatePrev={goToPrev}
+					onNavigateNext={goToNext}
+					isPrevDisabled={isPrevDisabled}
+					isNextDisabled={isNextDisabled}
+					showOpenInExplorer={!!handleOpenInExplorer}
+					onOpenInExplorer={handleOpenInExplorer}
+				/>
 			}
 			placement="right"
 			onClose={drawerCloseHandler}
@@ -385,15 +294,11 @@ function LogDetailInner({
 				data-testid="log-detail-drawer"
 			>
 				<div className="log-detail-drawer__log">
-					{isLogDetailsV2 ? (
-						<LogStateIndicator
-							severityText={log.severity_text}
-							severityNumber={log.severity_number}
-							fontSize={options?.fontSize ?? FontSize.MEDIUM}
-						/>
-					) : (
-						<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					)}
+					<LogStateIndicator
+						severityText={log.severity_text}
+						severityNumber={log.severity_number}
+						fontSize={options?.fontSize ?? FontSize.MEDIUM}
+					/>
 					<Tooltip
 						title={removeEscapeCharacters(logBody)}
 						placement="left"
@@ -405,9 +310,9 @@ function LogDetailInner({
 					<div className="log-overflow-shadow">&nbsp;</div>
 				</div>
 
-				{isLogDetailsV2 && <LogHighlights log={log} />}
+				<LogHighlights log={log} />
 
-				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
+				<div className="log-detail-drawer__section-divider" />
 
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
@@ -425,21 +330,6 @@ function LogDetailInner({
 									</div>
 								),
 							},
-							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
-							// JSON tab is redundant.
-							...(isLogDetailsV2
-								? []
-								: [
-										{
-											value: VIEW_TYPES.JSON,
-											label: (
-												<div className="view-title">
-													<Braces size={14} />
-													JSON
-												</div>
-											),
-										},
-									]),
 							{
 								value: VIEW_TYPES.CONTEXT,
 								label: (
@@ -478,26 +368,6 @@ function LogDetailInner({
 								/>
 							</Tooltip>
 						)}
-
-						{/* V2 moves copy actions into the header ⋯ menu */}
-						{!isLogDetailsV2 && (
-							<Tooltip
-								title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-								placement="topLeft"
-								aria-label={
-									selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-								}
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Copy size={12} />}
-									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-								/>
-							</Tooltip>
-						)}
 					</div>
 				</div>
 				{isFilterVisible && contextQuery?.builder.queryData[0] && (
@@ -514,19 +384,11 @@ function LogDetailInner({
 				{selectedView === VIEW_TYPES.OVERVIEW && (
 					<Overview
 						logData={log}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onClickActionItem}
 						isListViewPanel={isListViewPanel}
-						selectedOptions={options}
-						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
 						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
-				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
-
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView
 						log={log}

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,11 +0,0 @@
-import ROUTES from 'constants/routes';
-import { useLocation } from 'react-router-dom';
-
-export function useIsLogDetailsV2(): boolean {
-	const { pathname } = useLocation();
-	return (
-		pathname === ROUTES.LOGS_EXPLORER ||
-		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
-		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
-	);
-}

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,54 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { Popover } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
-
-function CopyClipboardHOC({
-	entityKey,
-	textToCopy,
-	tooltipText = 'Copy to clipboard',
-	children,
-}: CopyClipboardHOCProps): JSX.Element {
-	const [value, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-	useEffect(() => {
-		if (value.value) {
-			const key = entityKey || '';
-
-			const notificationMessage = `${key} copied to clipboard`;
-
-			notifications.success({
-				message: notificationMessage,
-				key: notificationMessage,
-			});
-		}
-	}, [value, notifications, entityKey]);
-
-	const onClick = useCallback((): void => {
-		setCopy(textToCopy);
-	}, [setCopy, textToCopy]);
-
-	return (
-		<span onClick={onClick} role="presentation" tabIndex={-1}>
-			<Popover
-				placement="top"
-				overlayClassName="drawer-popover"
-				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
-			>
-				{children}
-			</Popover>
-		</span>
-	);
-}
-
-interface CopyClipboardHOCProps {
-	entityKey: string | undefined;
-	textToCopy: string;
-	tooltipText?: string;
-	children: ReactNode;
-}
-
-export default CopyClipboardHOC;
-CopyClipboardHOC.defaultProps = {
-	tooltipText: 'Copy to clipboard',
-};

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

@@ -12,6 +12,7 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
+		clip-path: inset(0 -100vw 0 0);
 	}
 }
 
@@ -34,7 +35,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 10.5px;
+		padding: var(--spacing-2) 10.5px;
 		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
@@ -45,6 +46,9 @@
 			justify-content: flex-start;
 
 			.text {
+				padding-left: var(--spacing-4);
+				white-space: nowrap;
+				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -77,6 +81,8 @@
 			}
 
 			.select-box {
+				--combobox-trigger-width: auto;
+
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -94,10 +100,9 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: 10px;
-			width: 100%;
+			gap: var(--spacing-1);
+			flex-shrink: 0;
 			justify-content: flex-end;
-			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;
@@ -105,26 +110,8 @@
 				background: var(--l1-background);
 			}
 
-			.sync-icon {
-				cursor: pointer;
-			}
-
-			.right-action-icon-container {
-				position: relative;
-				display: flex;
-				padding: 2px;
-				background-color: var(--l1-background);
-
-				.settings-icon {
-					height: 14px;
-					width: 14px;
-					cursor: pointer;
-				}
-
-				&.active,
-				&:hover {
-					background: var(--l2-background);
-				}
+			.active {
+				background: var(--l2-background);
 			}
 		}
 	}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
-	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -14,8 +13,9 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton, Tooltip } from 'antd';
+import { Skeleton } from 'antd';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -57,6 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
+		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -179,7 +180,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
-			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +216,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<Tooltip
+					<TooltipSimple
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 				)
 			)}
 		</section>
@@ -230,51 +230,54 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<Tooltip title="Reset All">
+			<TooltipSimple title="Reset All">
 				<Button
-					variant="link"
+					variant="ghost"
 					color="secondary"
+					size="icon"
 					aria-label="Reset All"
-					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw className="sync-icon" size="md" />}
+					prefix={<RefreshCw size={14} />}
 				/>
-			</Tooltip>
-			{showFilterCollapse && (
-				<Tooltip title="Collapse Filters">
+			</TooltipSimple>
+			{showFilterCollapse && handleFilterVisibilityChange && (
+				<TooltipSimple title="Collapse Filters">
 					<Button
-						variant="link"
+						variant="ghost"
 						color="secondary"
+						size="icon"
 						aria-label="Collapse Filters"
-						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
 					/>
-				</Tooltip>
-			)}
-			{isDynamicFilters && (
-				<AuthZButton
-					checks={QuickFilterManagePermissions}
-					variant="link"
-					color="secondary"
-					aria-label="Settings"
-					className={classNames('right-action-icon-container', {
-						active: isSettingsOpen,
-					})}
-					onClick={(): void => setIsSettingsOpen(true)}
-					testId="settings-icon-container"
-					prefix={
-						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
-							<SettingsIcon
-								className="settings-icon"
-								data-testid="settings-icon"
-								width={14}
-								height={14}
-							/>
-						</Tooltip>
-					}
-				/>
+				</TooltipSimple>
 			)}
+			{isDynamicFilters &&
+				(isSettingsDisabled ? (
+					<AuthZButton
+						checks={QuickFilterManagePermissions}
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Settings"
+						onClick={(): void => setIsSettingsOpen(true)}
+						testId="settings-icon-container"
+						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
+					/>
+				) : (
+					<TooltipSimple title="Settings">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label="Settings"
+							className={classNames({ active: isSettingsOpen })}
+							onClick={(): void => setIsSettingsOpen(true)}
+							data-testid="settings-icon-container"
+							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
+						/>
+					</TooltipSimple>
+				))}
 		</section>
 	);
 
@@ -379,6 +382,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
+				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -8,9 +8,7 @@
 	overflow: hidden;
 }
 
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
+.sidebar {
 	width: 280px;
 	flex-shrink: 0;
 	display: flex;
@@ -21,6 +19,44 @@
 	z-index: 2;
 }
 
+.savedViews {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+	border-right: 1px solid var(--l1-border);
+}
+
+.quickFilters {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--l1-background);
+	transition: transform 0.2s ease-in-out;
+	z-index: 1;
+
+	&.isOpen {
+		transform: translateX(100%);
+	}
+}
+
+// No quick filters: the header sits in flow and the list stays under it
+.isStatic {
+	border-right: 1px solid var(--l1-border);
+
+	.quickFilters {
+		position: static;
+		flex-shrink: 0;
+	}
+
+	.savedViews {
+		border-right: 0;
+	}
+}
+
 // Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
 // `height: 100%`), which owns the scrolling.
 .content {
@@ -31,3 +67,7 @@
 	flex-direction: column;
 	overflow: hidden;
 }
+
+.contentInner {
+	height: 100%;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,20 +1,36 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
+import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
 
 import styles from './QuickFiltersLayout.module.scss';
 
 // Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	ComponentProps<typeof QuickFilters>
+type QuickFiltersElementProps = Omit<
+	JSX.LibraryManagedAttributes<
+		typeof QuickFilters,
+		ComponentProps<typeof QuickFilters>
+	>,
+	'handleFilterVisibilityChange'
+>;
+
+// What the page configures; the layout adds the open / close wiring.
+type SavedViewsElementProps = Omit<
+	ComponentProps<typeof SavedViewsPanel>,
+	'onClose'
 >;
 
 export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
+	quickFilterProps?: QuickFiltersElementProps;
+	savedViewProps?: SavedViewsElementProps;
 	showFilters: boolean;
+	onToggleFilters?: () => void;
 	className?: string;
 	contentClassName?: string;
 	testId?: string;
@@ -23,20 +39,70 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
+	onToggleFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
+	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
+
+	const isSliding = hasQuickFilters && isViewsListOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={
+				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
+			}
+			onCollapse={hasQuickFilters ? undefined : onToggleFilters}
+		/>
+	) : undefined;
+
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
+			{showSidebar && (
 				<aside
-					className={styles.filters}
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
 					data-testid="quick-filters-layout-filters"
 				>
-					<QuickFilters {...quickFilterProps} />
+					<TooltipProvider delayDuration={SIDEBAR_TOOLTIP_DELAY_MS}>
+						<div
+							className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+							data-testid="quick-filters-layout-drawer"
+						>
+							{hasQuickFilters ? (
+								<QuickFilters
+									{...quickFilterProps}
+									handleFilterVisibilityChange={onToggleFilters}
+									savedViewsHeader={savedViewsHeader}
+								/>
+							) : (
+								savedViewsHeader
+							)}
+						</div>
+						<div className={styles.savedViews}>
+							{hasSavedViews && isViewsListVisible && (
+								<SavedViewsPanel
+									{...savedViewProps}
+									onClose={
+										isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+									}
+								/>
+							)}
+						</div>
+					</TooltipProvider>
 				</aside>
 			)}
 			<section
@@ -44,7 +110,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div>{children}</div>
+					<div className={styles.contentInner}>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,4 +1,6 @@
-import { render, screen } from 'tests/test-utils';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { render, screen, userEvent } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
 import QuickFiltersLayout from '../QuickFiltersLayout';
@@ -7,24 +9,59 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	__esModule: true,
 	default: {
 		layout: 'layout',
-		filters: 'filters',
+		sidebar: 'sidebar',
+		isStatic: 'isStatic',
+		savedViews: 'savedViews',
+		quickFilters: 'quickFilters',
+		isOpen: 'isOpen',
 		content: 'content',
+		contentInner: 'contentInner',
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
+	default: ({
+		source,
+		savedViewsHeader,
+		handleFilterVisibilityChange,
+	}: {
+		source: string;
+		savedViewsHeader?: React.ReactNode;
+		handleFilterVisibilityChange?: () => void;
+	}): JSX.Element => (
+		<div data-testid="quick-filters">
+			{savedViewsHeader}
+			{source}
+			{handleFilterVisibilityChange && (
+				<button
+					type="button"
+					aria-label="Collapse Filters"
+					data-testid="quick-filters-collapse"
+					onClick={handleFilterVisibilityChange}
+				/>
+			)}
+		</div>
 	),
 }));
 
 const quickFilterProps = {
 	source: QuickFiltersSource.TRACES_EXPLORER,
-	handleFilterVisibilityChange: jest.fn(),
 };
+const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
+
+const drawer = (): HTMLElement =>
+	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -40,11 +77,16 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
 			'content',
 		);
+		expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
 	});
 
 	it('does not render the filters pane when showFilters is false', () => {
 		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+			<QuickFiltersLayout
+				showFilters={false}
+				quickFilterProps={quickFilterProps}
+				savedViewProps={savedViewProps}
+			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
@@ -56,24 +98,186 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByText('content')).toBeInTheDocument();
 	});
 
+	it('renders no sidebar at all without quick filters or saved views', () => {
+		render(
+			<QuickFiltersLayout showFilters>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
 	it('merges classNames onto the root and content panes', () => {
 		render(
 			<QuickFiltersLayout
 				showFilters
 				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
+				className="root-extra"
+				contentClassName="content-extra"
+				testId="layout"
 			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
 
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
 			'content',
-			'page-content',
+			'content-extra',
 		);
 	});
+
+	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+		});
+
+		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			const user = userEvent.setup();
+			const quickFilters = screen.getByTestId('quick-filters');
+
+			expect(quickFilters).toContainElement(
+				screen.getByTestId('saved-views-header'),
+			);
+			expect(drawer()).toContainElement(quickFilters);
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+
+			await user.click(screen.getByTestId('saved-views-open'));
+
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(drawer()).toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+
+			await user.click(screen.getByTestId('saved-views-close'));
+
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
+		});
+
+		it('hands the source to the header and the panel', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('saved-views-header')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+			await userEvent.setup().click(screen.getByTestId('saved-views-open'));
+			expect(screen.getByTestId('saved-views-panel')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+		});
+
+		it('without quick filters: static sidebar, header on top, list always on screen with no open or close controls', () => {
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			const sidebar = screen.getByTestId('quick-filters-layout-filters');
+			expect(sidebar).toHaveClass('isStatic');
+			expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('saved-views-panel-header'),
+			).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+		});
+
+		it('collapses from the quick filters header when they are shown', async () => {
+			const onToggleFilters = jest.fn();
+			render(
+				<QuickFiltersLayout
+					showFilters
+					onToggleFilters={onToggleFilters}
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.queryByTestId('saved-views-collapse')).not.toBeInTheDocument();
+			await userEvent.click(screen.getByTestId('quick-filters-collapse'));
+			expect(onToggleFilters).toHaveBeenCalledTimes(1);
+		});
+
+		it('collapses from the saved views header without quick filters', async () => {
+			const onToggleFilters = jest.fn();
+			render(
+				<QuickFiltersLayout
+					showFilters
+					onToggleFilters={onToggleFilters}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			await userEvent.click(screen.getByTestId('saved-views-collapse'));
+			expect(onToggleFilters).toHaveBeenCalledTimes(1);
+		});
+
+		it('has no collapse without a toggle', () => {
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.queryByTestId('saved-views-collapse')).not.toBeInTheDocument();
+		});
+	});
 });

frontend/src/components/QuickFilters/QuickFiltersLayout/constants.ts

@@ -0,0 +1 @@
+export const SIDEBAR_TOOLTIP_DELAY_MS = 500;

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

@@ -8,29 +8,34 @@
 	width: 342px;
 	height: 100%;
 	background: var(--l1-background);
-	transition: width 0.05s ease-in-out;
+	border-right: 1px solid var(--l1-border);
 	overflow: hidden;
 	color: var(--l1-foreground);
+	transition:
+		transform 0.2s ease-in-out,
+		visibility 0s;
 
 	&.hidden {
-		width: 0;
+		transform: translateX(-100%);
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			transform 0.2s ease-in-out,
+			visibility 0s 0.2s;
 	}
 	.qf-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 10.5px;
+		padding: var(--spacing-2) var(--spacing-5);
+		border-bottom: 1px solid var(--l1-border);
 
 		.qf-title {
 			display: flex;
 			align-items: center;
-			gap: 12px;
-		}
-
-		.qf-header-icon {
-			width: 16px;
-			height: 16px;
-			cursor: pointer;
+			gap: var(--spacing-6);
+			color: var(--l2-foreground);
+			font-size: var(--font-size-sm);
 		}
 	}
 
@@ -47,11 +52,17 @@
 	}
 
 	.search {
-		.ant-input {
-			background-color: var(--l1-background);
-			height: 46px;
-			border-radius: 0;
-		}
+		--input-height: var(--spacing-20);
+		--input-border-radius: 0;
+		--input-border-color: transparent;
+		--input-hover-border-color: transparent;
+		--input-focus-border-color: transparent;
+		--input-focus-outline-width: 0;
+		--input-background: var(--l1-background);
+		--input-hover-background: var(--l1-background);
+		--input-focus-background: var(--l1-background);
+
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	.qf-other-filters-list {
@@ -117,6 +128,7 @@
 	justify-content: space-between;
 	padding: 8px;
 	border-radius: 4px;
+	color: var(--l2-foreground);
 	user-select: none;
 	transition: background-color 0.2s ease-in-out;
 

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,3 +1,4 @@
+import { Button as SignozButton } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
@@ -43,14 +44,17 @@ function QuickFiltersSettings({
 		<>
 			<div className="qf-header">
 				<div className="qf-title">
-					<TableColumnsSplit width={16} height={16} />
+					<TableColumnsSplit size={16} />
 					Edit quick filters
 				</div>
-				<X
-					className="qf-header-icon"
-					width={16}
-					height={16}
+				<SignozButton
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label="Close"
+					prefix={<X size={14} />}
 					onClick={handleSettingsClose}
+					data-testid="quick-filters-settings-close"
 				/>
 			</div>
 			<section className="search">

frontend/src/components/QuickFilters/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -51,7 +52,7 @@ export interface QuickFilterChangeEventData {
 
 export interface IQuickFiltersProps {
 	config: IQuickFiltersConfig[];
-	handleFilterVisibilityChange: () => void;
+	handleFilterVisibilityChange?: () => void;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
 	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
@@ -61,6 +62,7 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
+	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

frontend/src/constants/routes.ts

@@ -38,7 +38,6 @@ const ROUTES = {
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
-	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',

frontend/src/constants/shortcutActions.tsx

@@ -15,7 +15,6 @@ import {
 	ListMinus,
 	ScrollText,
 	Settings,
-	TowerControl,
 	Workflow,
 } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -138,16 +137,6 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.LOGS_PIPELINES),
 		},
-		{
-			id: 'logs',
-			name: 'Go to Logs Views',
-			shortcut: [GlobalShortcutsName.NavigateToLogsViews],
-			keywords: 'logs views',
-			section: 'Logs',
-			icon: <TowerControl size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: (): void => navigate(ROUTES.LOGS_SAVE_VIEWS),
-		},
 
 		// metrics
 		{
@@ -170,16 +159,6 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_EXPLORER),
 		},
-		{
-			id: 'metrics-views',
-			name: 'Go to Metrics Views',
-			shortcut: [GlobalShortcutsName.NavigateToMetricsViews],
-			keywords: 'metrics views',
-			section: 'Metrics',
-			icon: <TowerControl size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_VIEWS),
-		},
 
 		// Traces
 		{

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -10,17 +10,14 @@ export const GlobalShortcuts = {
 	// logs
 	NavigateToLogs: 'shift+l',
 	NavigateToLogsPipelines: 'shift+l+p',
-	NavigateToLogsViews: 'shift+l+v',
 
 	// traces
 	NavigateToTraces: 'shift+t',
 	NavigateToTracesFunnel: 'shift+t+f',
-	NavigateToTracesViews: 'shift+t+v',
 
 	// metrics
 	NavigateToMetricsSummary: 'shift+m',
 	NavigateToMetricsExplorer: 'shift+m+e',
-	NavigateToMetricsViews: 'shift+m+v',
 
 	// settings
 	NavigateToSettings: 'shift+g',
@@ -42,10 +39,8 @@ export const GlobalShortcutsName = {
 	ToggleSidebar: 'shift+b',
 	NavigateToHome: 'shift+h',
 	NavigateToTracesFunnel: 'shift+t+f',
-	NavigateToTracesViews: 'shift+t+v',
 	NavigateToMetricsSummary: 'shift+m',
 	NavigateToMetricsExplorer: 'shift+m+e',
-	NavigateToMetricsViews: 'shift+m+v',
 	NavigateToSettings: 'shift+g',
 	NavigateToSettingsIngestion: 'shift+g+i',
 	NavigateToSettingsBilling: 'shift+g+b',
@@ -55,7 +50,6 @@ export const GlobalShortcutsName = {
 	NavigateToSettingsMembers: 'shift+g+m',
 	NavigateToLogs: 'shift+l',
 	NavigateToLogsPipelines: 'shift+l+p',
-	NavigateToLogsViews: 'shift+l+v',
 };
 
 export const GlobalShortcutsDescription = {
@@ -69,17 +63,14 @@ export const GlobalShortcutsDescription = {
 	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
 	ToggleSidebar: 'Toggle sidebar visibility',
 	NavigateToTracesFunnel: 'Navigate to Traces Funnel',
-	NavigateToTracesViews: 'Navigate to Traces Views',
 	NavigateToMetricsSummary: 'Navigate to Metrics Summary',
 	NavigateToMetricsExplorer: 'Navigate to Metrics Explorer',
-	NavigateToMetricsViews: 'Navigate to Metrics Views',
 	NavigateToSettings: 'Navigate to Settings',
 	NavigateToSettingsIngestion: 'Navigate to Ingestion Settings',
 	NavigateToSettingsBilling: 'Navigate to Billing Settings',
 	NavigateToSettingsNotificationChannels:
 		'Navigate to Notification Channels Settings',
 	NavigateToLogsPipelines: 'Navigate to Logs Pipelines',
-	NavigateToLogsViews: 'Navigate to Logs Views',
 	NavigateToSettingsServiceAccounts: 'Navigate to Service Accounts Settings',
 	NavigateToSettingsRoles: 'Navigate to Roles Settings',
 	NavigateToSettingsMembers: 'Navigate to Members Settings',

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -5,12 +5,10 @@ import {
 import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	findSavedView,
-	getSavedViewQuery,
-	SavedViewSourcePage,
-	toSavedViewSource,
-} from 'container/SavedViews/utils';
+import { SavedViewSourcePage } from 'container/SavedViews/types';
+import { findSavedView } from 'container/SavedViews/utils/findSavedView';
+import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

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

@@ -75,6 +75,38 @@
 	word-break: break-word;
 }
 
+// Error bubble: a subtle error-tinted callout replacing the default
+// assistant background, rendered when a turn fails.
+.bubble.error {
+	.assistant & {
+		background: var(--callout-error-background);
+		border: 1px solid var(--callout-error-border);
+	}
+}
+
+.errorContent {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+.errorIcon {
+	flex-shrink: 0;
+	margin-top: 2px;
+	color: var(--destructive);
+}
+
+.errorText {
+	color: var(--callout-error-title);
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.retryButton {
+	margin-top: 6px;
+	align-self: flex-start;
+}
+
 // User-bubble row: pencil button sits to the LEFT of the bubble within
 // the right-aligned message line, so it visually "ends" at the bubble's
 // right edge while keeping the bubble in its original position.

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

@@ -2,6 +2,10 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { Button } from '@signozhq/ui/button';
+import { RotateCw, TriangleAlert } from '@signozhq/icons';
+
+import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 // Side-effect: registers all built-in block types into the BlockRegistry
 import '../blocks';
@@ -104,18 +108,23 @@ function renderGroup(group: RenderGroup): JSX.Element {
 interface MessageBubbleProps {
 	message: Message;
 	onRegenerate?: () => void;
+	onRetry?: () => void;
 	isLastAssistant?: boolean;
 }
 
 export default function MessageBubble({
 	message,
 	onRegenerate,
+	onRetry,
 	isLastAssistant = false,
 }: MessageBubbleProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
 	const isUser = message.role === 'user';
+	const isError = !isUser && Boolean(message.isError);
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
+	const showRetry =
+		isError && message.retryAction === RetryActionDTO.manual && Boolean(onRetry);
 
 	// Recompute groups only when the blocks array identity changes — store
 	// updates that don't touch this message's blocks should not re-render the
@@ -138,7 +147,7 @@ export default function MessageBubble({
 		<div className={messageClass} data-testid={`ai-message-${message.id}`}>
 			<div className={bodyClass}>
 				<div className={styles.bubbleRow}>
-					<div className={styles.bubble}>
+					<div className={cx(styles.bubble, { [styles.error]: isError })}>
 						{message.attachments && message.attachments.length > 0 && (
 							<div className={styles.attachments}>
 								{message.attachments.map((att) => {
@@ -161,6 +170,11 @@ export default function MessageBubble({
 
 						{isUser ? (
 							<p className={styles.text}>{message.content}</p>
+						) : isError ? (
+							<div className={styles.errorContent}>
+								<TriangleAlert size={14} className={styles.errorIcon} />
+								<span className={styles.errorText}>{message.content}</span>
+							</div>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
 								{groups.map((g) => renderGroup(g))}
@@ -183,7 +197,21 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{!isUser && !message.isRateLimitError && (
+				{showRetry && (
+					<Button
+						className={styles.retryButton}
+						size="sm"
+						variant="ghost"
+						color="secondary"
+						onClick={onRetry}
+						testId={`ai-message-retry-${message.id}`}
+					>
+						<RotateCw size={12} />
+						Retry
+					</Button>
+				)}
+
+				{!isUser && !isError && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

frontend/src/container/AIAssistant/components/MessageBubble/__tests__/MessageBubble.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen, userEvent } from 'tests/test-utils';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { Message } from '../../../types';
+
+// react-markdown + remark-gfm are ESM-only and pull a large untransformed
+// dependency chain into jest. The error-rendering path under test renders
+// plain text (no markdown), so stub them to keep the import graph loadable.
+jest.mock('react-markdown', () => ({
+	__esModule: true,
+	default: ({ children }: { children?: React.ReactNode }): React.ReactNode =>
+		children,
+}));
+jest.mock('remark-gfm', () => ({
+	__esModule: true,
+	default: (): void => undefined,
+}));
+
+// eslint-disable-next-line import/first
+import MessageBubble from '../MessageBubble';
+
+function errorMessage(overrides: Partial<Message> = {}): Message {
+	return {
+		id: 'err-1',
+		role: 'assistant',
+		content: 'This conversation is still finishing a previous response.',
+		isError: true,
+		errorCode: ErrorCodeDTO.thread_busy,
+		retryAction: RetryActionDTO.manual,
+		createdAt: 0,
+		...overrides,
+	};
+}
+
+const retryButton = (): HTMLElement | null =>
+	screen.queryByRole('button', { name: /retry/i });
+
+describe('MessageBubble — error rendering', () => {
+	it('shows a Retry button for a manual error and invokes onRetry on click', async () => {
+		const onRetry = jest.fn();
+		render(<MessageBubble message={errorMessage()} onRetry={onRetry} />);
+
+		// Error copy is rendered, and the feedback bar is suppressed on errors.
+		expect(
+			screen.getByText(/still finishing a previous response/i),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /copy message/i }),
+		).not.toBeInTheDocument();
+
+		const button = retryButton();
+		expect(button).toBeInTheDocument();
+		await userEvent.click(button as HTMLElement);
+		expect(onRetry).toHaveBeenCalledTimes(1);
+	});
+
+	it('hides the Retry button when retryAction is none', () => {
+		render(
+			<MessageBubble
+				message={errorMessage({ retryAction: RetryActionDTO.none })}
+				onRetry={jest.fn()}
+			/>,
+		);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+
+	it('hides the Retry button when retryAction is auto', () => {
+		render(
+			<MessageBubble
+				message={errorMessage({ retryAction: RetryActionDTO.auto })}
+				onRetry={jest.fn()}
+			/>,
+		);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+
+	it('hides the Retry button when no onRetry handler is provided', () => {
+		render(<MessageBubble message={errorMessage()} />);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+});

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

@@ -37,6 +37,9 @@ export default function VirtualizedMessages({
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
+	const retryAssistantMessage = useAIAssistantStore(
+		(s) => s.retryAssistantMessage,
+	);
 	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
@@ -85,6 +88,14 @@ export default function VirtualizedMessages({
 		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
 	);
 
+	const handleRetry = useCallback((): void => {
+		if (isStreaming) {
+			return;
+		}
+		void logEvent(AIAssistantEvents.RetryClicked, { threadId });
+		void retryAssistantMessage(conversationId);
+	}, [conversationId, isStreaming, retryAssistantMessage, threadId]);
+
 	// Scroll all the way to the actual bottom — including the 64px of bottom
 	// padding on the scroller — so the last bubble has visible breathing room
 	// above the disclaimer / input bar. Virtuoso's `scrollToIndex(LAST,
@@ -206,6 +217,11 @@ export default function VirtualizedMessages({
 									? (): void => handleRegenerate(msg.id)
 									: undefined
 							}
+							onRetry={
+								msg.isError && isLastAssistant && !showStreamingSlot
+									? handleRetry
+									: undefined
+							}
 							isLastAssistant={isLastAssistant}
 						/>
 					);

frontend/src/container/AIAssistant/events.ts

@@ -90,6 +90,7 @@ export enum AIAssistantEvents {
 	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
 	CancelClicked = 'AI Assistant: Cancel clicked',
 	RegenerateClicked = 'AI Assistant: Regenerate clicked',
+	RetryClicked = 'AI Assistant: Retry clicked',
 	MessageCopied = 'AI Assistant: Message copied',
 	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
 	ResourceOpened = 'AI Assistant: Resource opened',

frontend/src/container/AIAssistant/store/__tests__/useAIAssistantStore.test.ts

@@ -0,0 +1,263 @@
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import type { SSEEvent } from 'api/ai-assistant/chat';
+
+import { useAIAssistantStore } from '../useAIAssistantStore';
+import type { Message } from '../../types';
+
+// The store talks to the chat API only through these named exports. Mock the
+// whole module so we can drive the SSE stream + REST calls deterministically.
+jest.mock('api/ai-assistant/chat', () => ({
+	__esModule: true,
+	createThread: jest.fn(),
+	sendMessage: jest.fn(),
+	streamEvents: jest.fn(),
+	approveExecution: jest.fn(),
+	clarifyExecution: jest.fn(),
+	regenerateMessage: jest.fn(),
+	rejectExecution: jest.fn(),
+	cancelExecution: jest.fn(),
+	listThreads: jest.fn(),
+	getThreadDetail: jest.fn(),
+	updateThread: jest.fn(),
+	submitFeedback: jest.fn(),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+const chat = jest.requireMock('api/ai-assistant/chat') as Record<
+	string,
+	jest.Mock
+>;
+
+// Builds a single-use async stream from a fixed list of SSE events.
+async function* eventStream(events: SSEEvent[]): AsyncGenerator<SSEEvent> {
+	for (const event of events) {
+		yield event;
+	}
+}
+
+function errorEvent(
+	executionId: string,
+	code: ErrorCodeDTO,
+	retryAction: RetryActionDTO,
+): SSEEvent {
+	return {
+		type: 'error',
+		executionId,
+		error: { code, message: 'backend message' },
+		retryAction,
+	};
+}
+
+function lastMessage(conversationId: string): Message {
+	const conv = useAIAssistantStore.getState().conversations[conversationId];
+	return conv.messages[conv.messages.length - 1];
+}
+
+describe('useAIAssistantStore — streaming error handling', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useAIAssistantStore.setState((s) => {
+			s.conversations = {};
+			s.streams = {};
+			s.activeConversationId = null;
+		});
+	});
+
+	it('commits a manually-retryable error bubble with friendly copy and metadata', async () => {
+		chat.createThread.mockResolvedValue('thread-1');
+		chat.sendMessage.mockResolvedValue('exec-1');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hello');
+
+		const conv = useAIAssistantStore.getState().conversations['thread-1'];
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			isError: true,
+			errorCode: ErrorCodeDTO.thread_busy,
+			retryAction: RetryActionDTO.manual,
+		});
+		// Code-specific FE copy, not the raw backend message.
+		expect(conv.messages[1].content).toContain(
+			'still finishing a previous response',
+		);
+	});
+
+	it('replays the send on retry without re-pushing the user message', async () => {
+		chat.createThread.mockResolvedValue('thread-1');
+		chat.sendMessage.mockResolvedValue('exec-1');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hello');
+
+		// The retry succeeds this time.
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				{
+					type: 'message',
+					executionId: 'exec-1',
+					messageId: 'm1',
+					delta: 'Hi there',
+					done: true,
+				},
+			]),
+		);
+
+		await useAIAssistantStore.getState().retryAssistantMessage('thread-1');
+
+		const conv = useAIAssistantStore.getState().conversations['thread-1'];
+		// Error bubble replaced by the assistant reply; the user message stays.
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			content: 'Hi there',
+		});
+		expect(conv.messages[1].isError).toBeUndefined();
+		// Thread already existed on retry; the user message was never re-sent as new.
+		expect(chat.createThread).toHaveBeenCalledTimes(1);
+		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
+	});
+
+	it('silently retries auto-flagged errors, then downgrades to manual once spent', async () => {
+		chat.createThread.mockResolvedValue('thread-2');
+		chat.sendMessage.mockResolvedValue('exec');
+		// Always auto-retryable: 1 initial attempt + MAX_AUTO_RETRIES (2) = 3 sends.
+		chat.streamEvents.mockImplementation(() =>
+			eventStream([
+				errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		expect(chat.sendMessage).toHaveBeenCalledTimes(3);
+		expect(lastMessage('thread-2')).toMatchObject({
+			isError: true,
+			errorCode: ErrorCodeDTO.internal_error,
+			// Auto budget exhausted → presented as manual so a Retry button shows.
+			retryAction: RetryActionDTO.manual,
+		});
+	}, 10000);
+
+	it('marks rate-limit errors and offers no retry', async () => {
+		chat.createThread.mockResolvedValue('thread-3');
+		chat.sendMessage.mockResolvedValue('exec');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec', ErrorCodeDTO.hourly_message_limit, RetryActionDTO.none),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		expect(lastMessage('thread-3')).toMatchObject({
+			isError: true,
+			isRateLimitError: true,
+			retryAction: RetryActionDTO.none,
+		});
+
+		// No retry thunk registered for a non-retryable error — retry is a no-op.
+		const before =
+			useAIAssistantStore.getState().conversations['thread-3'].messages.length;
+		await useAIAssistantStore.getState().retryAssistantMessage('thread-3');
+		expect(
+			useAIAssistantStore.getState().conversations['thread-3'].messages,
+		).toHaveLength(before);
+	});
+
+	it('recovers silently when an auto-flagged error succeeds on retry', async () => {
+		chat.createThread.mockResolvedValue('thread-4');
+		chat.sendMessage.mockResolvedValue('exec');
+		chat.streamEvents
+			.mockReturnValueOnce(
+				eventStream([
+					errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
+				]),
+			)
+			.mockReturnValueOnce(
+				eventStream([
+					{
+						type: 'message',
+						executionId: 'exec',
+						messageId: 'm1',
+						delta: 'Recovered',
+						done: true,
+					},
+				]),
+			);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		// 1 initial attempt + 1 silent auto retry, then success — no error bubble.
+		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
+		const conv = useAIAssistantStore.getState().conversations['thread-4'];
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hi' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			content: 'Recovered',
+		});
+		expect(conv.messages.some((m) => m.isError)).toBe(false);
+	}, 10000);
+
+	it('replays the originating action on retry for a non-send error (approve)', async () => {
+		chat.approveExecution.mockResolvedValue('exec-a');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-a', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		const convId = useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().approveAction(convId, 'approval-1');
+
+		expect(lastMessage(convId)).toMatchObject({
+			isError: true,
+			retryAction: RetryActionDTO.manual,
+		});
+		expect(chat.approveExecution).toHaveBeenCalledTimes(1);
+
+		// Retry replays the approval (not a send) and succeeds this time.
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				{
+					type: 'message',
+					executionId: 'exec-a',
+					messageId: 'm1',
+					delta: 'Approved',
+					done: true,
+				},
+			]),
+		);
+		await useAIAssistantStore.getState().retryAssistantMessage(convId);
+
+		const conv = useAIAssistantStore.getState().conversations[convId];
+		expect(conv.messages).toHaveLength(1);
+		expect(conv.messages[0]).toMatchObject({
+			role: 'assistant',
+			content: 'Approved',
+		});
+		expect(conv.messages[0].isError).toBeUndefined();
+		expect(chat.approveExecution).toHaveBeenCalledTimes(2);
+		expect(chat.sendMessage).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -8,6 +8,7 @@ import type {
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 import {
 	approveExecution,
@@ -35,7 +36,10 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
+import {
+	resolveAssistantError,
+	type AssistantErrorResolution,
+} from '../utils/resolveAssistantError';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -56,6 +60,15 @@ interface SSEStreamCtx {
 
 const streamControllers = new Map<string, AbortController>();
 
+/**
+ * Per-conversation retry thunks for the most recent failed turn. Populated by
+ * `finalizeStreamingError` when the error is manually retryable; consumed by
+ * the `retryAssistantMessage` action when the user clicks Retry. Transient
+ * (not persisted) — it shares the in-memory lifetime of the error bubble it
+ * backs, so a page reload drops both together.
+ */
+const retryRegistry = new Map<string, () => Promise<void>>();
+
 function abortStream(conversationId: string): void {
 	const ctrl = streamControllers.get(conversationId);
 	if (ctrl) {
@@ -197,7 +210,7 @@ function resetStreamingState(
  * Marker thrown by `runStreamingLoop` when an SSE event reports
  * `invalid_token`. Callers that own an originating action (sendMessage /
  * approve / clarify / regenerate) catch this and re-issue that action via
- * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
+ * `streamWithRetry`; the retry's first REST call will 401, at which point
  * the shared axios `interceptorRejected` rotates the access token and replays.
  */
 class AuthExpiredError extends Error {
@@ -207,27 +220,50 @@ class AuthExpiredError extends Error {
 	}
 }
 
+/** Capped silent re-attempts for backend-flagged transient (`auto`) errors. */
+const MAX_AUTO_RETRIES = 2;
+/** Backoff before each auto re-attempt, indexed by prior auto-retry count. */
+const AUTO_RETRY_BACKOFF_MS = [500, 1500];
+
+function delay(ms: number): Promise<void> {
+	return new Promise((resolve) => {
+		setTimeout(resolve, ms);
+	});
+}
+
+/** True when the SSE error carries the backend's `retryAction: 'auto'` flag. */
+function isAutoRetryableError(err: unknown): boolean {
+	return (
+		(err as { retryAction?: unknown } | undefined)?.retryAction ===
+		RetryActionDTO.auto
+	);
+}
+
 /**
  * Runs the originating action (e.g. sendMessage POST) and streams the
- * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
- * retry's REST call hits 401, the shared axios interceptor rotates the
- * access token and replays, and the new SSE picks up the rotated token from
- * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
- * so the dead execution can't be resumed — only a fresh one helps.
+ * resulting execution, with two independent retry budgets:
+ *
+ *   • Auth — on `AuthExpiredError` (SSE `invalid_token`), re-issues `start`
+ *     once. The retry's REST call 401s, the shared axios interceptor rotates
+ *     the access token + replays, and the new SSE picks up the rotated token.
+ *     Backend flags `invalid_token` as `manual`, so only a fresh execution helps.
+ *   • Auto — on an SSE error the backend flagged `retryAction: 'auto'`
+ *     (transient), silently re-issues `start` up to `MAX_AUTO_RETRIES` times
+ *     with backoff. Once exhausted the error propagates so the caller can
+ *     surface a manual Retry affordance.
+ *
+ * Both reset the stream state before re-attempting so a dead execution's
+ * partial output isn't concatenated onto the retry.
  */
-async function streamWithAuthRetry(
+async function streamWithRetry(
 	conversationId: string,
 	start: () => Promise<string>,
 	set: StoreSetter,
 ): Promise<void> {
-	for (let attempt = 0; attempt <= 1; attempt += 1) {
-		if (attempt > 0) {
-			// Drop any partial content/events from the previous attempt so the
-			// retried execution's stream isn't concatenated with the dead one.
-			set((s) => {
-				resetStreamingState(s, conversationId);
-			});
-		}
+	let authRetried = false;
+	let autoRetries = 0;
+
+	for (;;) {
 		// eslint-disable-next-line no-await-in-loop
 		const executionId = await start();
 		const ctrl = newStreamController(conversationId);
@@ -242,10 +278,28 @@ async function streamWithAuthRetry(
 			return;
 		} catch (err) {
 			streamControllers.delete(conversationId);
-			if (err instanceof AuthExpiredError && attempt < 1) {
-				continue;
+
+			if (err instanceof AuthExpiredError && !authRetried) {
+				authRetried = true;
+			} else if (isAutoRetryableError(err) && autoRetries < MAX_AUTO_RETRIES) {
+				// eslint-disable-next-line no-await-in-loop
+				await delay(AUTO_RETRY_BACKOFF_MS[autoRetries] ?? 1500);
+				autoRetries += 1;
+			} else {
+				if (isAutoRetryableError(err)) {
+					// Auto-retry budget spent — present the failure as manually
+					// retryable so the caller surfaces a Retry button rather than
+					// silently giving up.
+					(err as { retryAction?: RetryActionDTO }).retryAction =
+						RetryActionDTO.manual;
+				}
+				throw err;
 			}
-			throw err;
+
+			// Drop partial content/events from the failed attempt before retrying.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
 		}
 	}
 }
@@ -258,7 +312,7 @@ async function streamWithAuthRetry(
  *
  * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
  * throws `AuthExpiredError` so the caller can re-issue the originating
- * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
+ * action via `streamWithRetry`. We don't refresh here ourselves — the
  * retry's REST call will 401 and the shared axios `interceptorRejected`
  * handles rotation + replay. Throws on any other `error` event — the
  * caller's catch block handles UI feedback.
@@ -484,20 +538,37 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
+/**
+ * Commits a failed turn as an error message and removes the stream entry.
+ * When the failure is manually retryable and a `retry` thunk is supplied, the
+ * thunk is stashed in `retryRegistry` so the bubble's Retry button can replay
+ * the originating action.
+ */
 function finalizeStreamingError(
 	conversationId: string,
-	errorContent: string,
+	resolution: AssistantErrorResolution,
 	set: StoreSetter,
-	isRateLimit = false,
+	retry?: () => Promise<void>,
 ): void {
+	const { message, code, retryAction, isRateLimit } = resolution;
+
+	if (retryAction === RetryActionDTO.manual && retry) {
+		retryRegistry.set(conversationId, retry);
+	} else {
+		retryRegistry.delete(conversationId);
+	}
+
 	set((s) => {
 		const conv = s.conversations[conversationId];
 		if (conv) {
 			conv.messages.push({
 				id: uuidv4(),
 				role: 'assistant',
-				content: errorContent,
+				content: message,
 				createdAt: Date.now(),
+				isError: true,
+				retryAction,
+				...(code ? { errorCode: code } : {}),
 				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
@@ -506,6 +577,40 @@ function finalizeStreamingError(
 	});
 }
 
+/**
+ * Shared streaming wrapper for actions that have no pre-stream setup beyond
+ * resetting state (approve / clarify / regenerate). Streams the execution,
+ * finalizes the message on success, and on failure resolves the error +
+ * registers `retry` (the caller's own re-invocation) so the bubble can replay
+ * it. `sendMessage` does not use this — it owns thread-creation/re-keying and
+ * runs its own equivalent loop.
+ */
+async function streamAndFinalize(
+	conversationId: string,
+	start: () => Promise<string>,
+	fallback: string,
+	logLabel: string,
+	set: StoreSetter,
+	get: StoreGetter,
+	retry: () => Promise<void>,
+): Promise<void> {
+	try {
+		await streamWithRetry(conversationId, start, set);
+		if (!hasPendingInput(conversationId, get)) {
+			finalizeStreamingMessage(conversationId, set, get);
+		}
+	} catch (err) {
+		// Abort errors are expected when the user cancels — not a failure.
+		if (err instanceof DOMException && err.name === 'AbortError') {
+			return;
+		}
+		// eslint-disable-next-line no-console
+		console.error(logLabel, err);
+		const resolution = resolveAssistantError(err, fallback);
+		finalizeStreamingError(conversationId, resolution, set, retry);
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Store interface
 // ---------------------------------------------------------------------------
@@ -564,6 +669,8 @@ export interface AIAssistantStore {
 		conversationId: string,
 		messageId: string,
 	) => Promise<void>;
+	/** Replays the originating action for a manually-retryable error bubble. */
+	retryAssistantMessage: (conversationId: string) => Promise<void>;
 	submitMessageFeedback: (
 		messageId: string,
 		rating: FeedbackRating,
@@ -877,7 +984,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					// there's no "originating action" to redo — reopening the
 					// same dead executionId would just re-emit the failure.
 					// Let the error bubble; the user can send a new message,
-					// which will go through `streamWithAuthRetry`.
+					// which will go through `streamWithRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1060,7 +1167,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				attachments?: MessageAttachment[],
 				contexts?: MessageContext[],
 			): Promise<void> => {
-				let convId = get().activeConversationId;
+				const convId = get().activeConversationId;
 				if (!convId || !get().conversations[convId]) {
 					return;
 				}
@@ -1093,63 +1200,75 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				};
 
 				set((state) => {
-					const conv = state.conversations[convId!];
+					const conv = state.conversations[convId];
 					conv.messages.push(userMessage);
 					conv.updatedAt = Date.now();
 					if (!conv.title && text.trim()) {
 						conv.title = deriveTitle(text);
 					}
-					resetStreamingState(state, convId!);
+					resetStreamingState(state, convId);
 				});
 
-				try {
-					let { threadId } = get().conversations[convId];
-					if (!threadId) {
-						threadId = await createThread();
-						// Re-key the conversation from client UUID to backend threadId
-						// so fetchThreads won't create a duplicate entry later.
-						const oldId = convId;
-						convId = threadId;
-						set((s) => {
-							const conv = s.conversations[oldId];
-							if (conv) {
-								conv.id = convId!;
-								conv.threadId = convId!;
-								s.conversations[convId!] = conv;
-								delete s.conversations[oldId];
-								if (s.activeConversationId === oldId) {
-									s.activeConversationId = convId!;
+				// The full send — ensure a backend thread exists (re-keying the
+				// optimistic client UUID on first send), POST the message, and
+				// stream the reply. Defined as a closure so the error bubble's
+				// Retry button can replay it without re-pushing the user message.
+				const runSend = async (cid: string): Promise<void> => {
+					let targetConvId = cid;
+					try {
+						let { threadId } = get().conversations[targetConvId];
+						if (!threadId) {
+							threadId = await createThread();
+							// Re-key the conversation from client UUID to backend threadId
+							// so fetchThreads won't create a duplicate entry later.
+							const oldId = targetConvId;
+							const newId = threadId;
+							set((s) => {
+								const conv = s.conversations[oldId];
+								if (conv) {
+									conv.id = newId;
+									conv.threadId = newId;
+									s.conversations[newId] = conv;
+									delete s.conversations[oldId];
+									if (s.activeConversationId === oldId) {
+										s.activeConversationId = newId;
+									}
+									const stream = s.streams[oldId];
+									if (stream) {
+										s.streams[newId] = stream;
+										delete s.streams[oldId];
+									}
 								}
-								const stream = s.streams[oldId];
-								if (stream) {
-									s.streams[convId!] = stream;
-									delete s.streams[oldId];
-								}
-							}
-						});
-					}
-					const tid = threadId;
-					await streamWithAuthRetry(
-						convId,
-						() => sendMessageToThread(tid, text, contexts),
-						set,
-					);
+							});
+							targetConvId = newId;
+						}
+						const tid = threadId;
+						await streamWithRetry(
+							targetConvId,
+							() => sendMessageToThread(tid, text, contexts),
+							set,
+						);
 
-					if (!hasPendingInput(convId, get)) {
-						finalizeStreamingMessage(convId, set, get);
+						if (!hasPendingInput(targetConvId, get)) {
+							finalizeStreamingMessage(targetConvId, set, get);
+						}
+					} catch (err) {
+						// Abort errors are expected when the user cancels — not a failure.
+						if (err instanceof DOMException && err.name === 'AbortError') {
+							return;
+						}
+						console.error('[AIAssistant] sendMessage failed:', err);
+						const resolution = resolveAssistantError(
+							err,
+							'Something went wrong while fetching the response. Please try again.',
+						);
+						finalizeStreamingError(targetConvId, resolution, set, () =>
+							runSend(targetConvId),
+						);
 					}
-				} catch (err) {
-					// Abort errors are expected when the user cancels — not a failure
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] sendMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while fetching the response. Please try again.',
-					);
-					finalizeStreamingError(convId, message, set, isRateLimit);
-				}
+				};
+
+				await runSend(convId);
 			},
 
 			approveAction: async (
@@ -1167,26 +1286,17 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => approveExecution(approvalId),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] approveAction failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while processing the approval. Please try again.',
+						'[AIAssistant] approveAction failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
-				}
+				await run();
 			},
 
 			rejectAction: async (
@@ -1246,26 +1356,17 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					resetStreamingState(s, conversationId);
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => regenerateMessage(messageId),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while regenerating the response. Please try again.',
+						'[AIAssistant] regenerateAssistantMessage failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
-				}
+				await run();
 			},
 
 			submitMessageFeedback: async (
@@ -1312,26 +1413,42 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => clarifyExecution(clarificationId, answers),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] submitClarification failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while processing your answers. Please try again.',
+						'[AIAssistant] submitClarification failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				await run();
+			},
+
+			retryAssistantMessage: async (conversationId: string): Promise<void> => {
+				const retry = retryRegistry.get(conversationId);
+				if (!retry) {
+					return;
 				}
+				retryRegistry.delete(conversationId);
+
+				// Drop the trailing error bubble we're retrying from and reset the
+				// stream so the in-progress retry renders immediately. The retry
+				// thunk replays the originating action without re-pushing the
+				// user's message.
+				set((s) => {
+					const conv = s.conversations[conversationId];
+					if (conv) {
+						const last = conv.messages[conv.messages.length - 1];
+						if (last?.isError) {
+							conv.messages.pop();
+						}
+					}
+					resetStreamingState(s, conversationId);
+				});
+
+				await retry();
 			},
 		})),
 		{

frontend/src/container/AIAssistant/types.ts

@@ -15,9 +15,11 @@
 import type {
 	ApprovalEventDTO,
 	ClarificationEventDTO,
+	ErrorCodeDTO,
 	FeedbackRatingDTO,
 	MessageActionDTO,
 	MessageActionKindDTO,
+	RetryActionDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 /** Client-only file attachment — no API equivalent (uploads happen via data URLs). */
@@ -91,6 +93,18 @@ export interface Message {
 	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
 	 */
 	isRateLimitError?: boolean;
+	/**
+	 * Marks an assistant message that represents a failed turn. Drives the
+	 * error styling and replaces the feedback bar with a retry affordance.
+	 */
+	isError?: boolean;
+	/** Known backend error code for the failure, when recognised. */
+	errorCode?: ErrorCodeDTO;
+	/**
+	 * Retry semantics for a failed turn — `manual` renders an inline Retry
+	 * button on the error bubble; `none`/`auto` render no button.
+	 */
+	retryAction?: RetryActionDTO;
 	createdAt: number;
 }
 

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantError.test.ts

@@ -0,0 +1,154 @@
+import { AxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantError } from '../resolveAssistantError';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+function restError(status: number, code: string, message: string): AxiosError {
+	const err = new AxiosError('Request failed');
+	err.response = {
+		status,
+		data: { error: { code, message } },
+	} as AxiosError['response'];
+	return err;
+}
+
+describe('resolveAssistantError', () => {
+	describe('message resolution', () => {
+		it('prefers code-specific FE copy over the backend message', () => {
+			const err = restError(409, ErrorCodeDTO.thread_busy, 'raw backend phrasing');
+
+			const { message } = resolveAssistantError(err, FALLBACK);
+			expect(message).toBe(
+				'This conversation is still finishing a previous response. Give it a moment and try again.',
+			);
+		});
+
+		it('falls through to the backend message for a known code without FE copy', () => {
+			const err = restError(
+				400,
+				ErrorCodeDTO.message_not_found,
+				'No such message exists.',
+			);
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: 'No such message exists.',
+				code: ErrorCodeDTO.message_not_found,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: false,
+			});
+		});
+
+		it('falls back when the error code is not in ErrorCodeDTO', () => {
+			const err = restError(400, 'future_unknown_code', 'Backend-only message');
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: FALLBACK,
+				code: undefined,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: false,
+			});
+		});
+	});
+
+	describe('rate limiting', () => {
+		it('marks HTTP 429 responses as rate limited and non-retryable', () => {
+			const err = restError(
+				429,
+				ErrorCodeDTO.hourly_message_limit,
+				'Hourly limit reached.',
+			);
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: "You've reached the hourly message limit. Please try again later.",
+				code: ErrorCodeDTO.hourly_message_limit,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: true,
+			});
+		});
+
+		it('treats known SSE rate-limit codes as rate limited', () => {
+			const err = Object.assign(new Error('Daily token limit exceeded.'), {
+				code: ErrorCodeDTO.daily_token_limit,
+			});
+
+			const res = resolveAssistantError(err, FALLBACK);
+			expect(res.isRateLimit).toBe(true);
+			expect(res.retryAction).toBe(RetryActionDTO.none);
+		});
+
+		it('marks 429 as rate limited even when the code is unknown', () => {
+			const err = restError(429, 'future_unknown_code', 'Too many requests');
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: FALLBACK,
+				code: undefined,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: true,
+			});
+		});
+	});
+
+	describe('retryAction resolution', () => {
+		it('honours an explicit retryAction from an SSE error event', () => {
+			const err = Object.assign(new Error('Transient hiccup'), {
+				code: ErrorCodeDTO.internal_error,
+				retryAction: RetryActionDTO.auto,
+			});
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.auto,
+			);
+		});
+
+		it('forces none for non-retryable permission errors', () => {
+			const err = restError(403, ErrorCodeDTO.permission_denied, 'forbidden');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.none,
+			);
+		});
+
+		it('derives manual for 409 conflicts', () => {
+			const err = restError(409, ErrorCodeDTO.thread_has_active_execution, 'busy');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives manual for 5xx responses', () => {
+			const err = restError(503, 'future_unknown_code', 'unavailable');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives manual for network failures with no response', () => {
+			const err = new AxiosError('Network Error');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives none for other 4xx responses', () => {
+			const err = restError(400, 'future_unknown_code', 'bad request');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.none,
+			);
+		});
+
+		it('defaults to manual for non-Axios errors with no code', () => {
+			expect(resolveAssistantError(new Error('boom'), FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -1,91 +0,0 @@
-import { AxiosError } from 'axios';
-import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-describe('resolveAssistantErrorMessage', () => {
-	it('returns backend message for a known error code', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: ErrorCodeDTO.thread_busy,
-					message: 'This thread is busy. Try again shortly.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'This thread is busy. Try again shortly.',
-			isRateLimit: false,
-		});
-	});
-
-	it('falls back when error code is not in ErrorCodeDTO', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Backend-only message',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: false,
-		});
-	});
-
-	it('marks HTTP 429 responses as rate limited', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: ErrorCodeDTO.hourly_message_limit,
-					message: 'Hourly limit reached.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Hourly limit reached.',
-			isRateLimit: true,
-		});
-	});
-
-	it('uses backend message for known SSE rate-limit error codes', () => {
-		const err = Object.assign(new Error('Daily token limit exceeded.'), {
-			code: ErrorCodeDTO.daily_token_limit,
-		});
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Daily token limit exceeded.',
-			isRateLimit: true,
-		});
-	});
-
-	it('marks 429 as rate limited even when error code is unknown', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Too many requests',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: true,
-		});
-	});
-});

frontend/src/container/AIAssistant/utils/resolveAssistantError.ts

@@ -0,0 +1,209 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	/** User-facing copy: code-specific FE copy → backend message → caller fallback. */
+	message: string;
+	/** Known backend error code, when one we recognise was supplied. */
+	code?: ErrorCodeDTO;
+	/**
+	 * Whether/how the failed action may be retried:
+	 *   • `auto`   — transient; the caller may silently re-attempt (capped).
+	 *   • `manual` — surface a Retry affordance to the user.
+	 *   • `none`   — retrying would re-fail deterministically; offer nothing.
+	 */
+	retryAction: RetryActionDTO;
+	/** Quota/limit error — callers hide the retry + feedback bar (retrying just re-limits). */
+	isRateLimit: boolean;
+}
+
+/** Quota/limit codes — surfaced as rate-limit errors (no retry, feedback bar hidden). */
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+/**
+ * Codes whose retry would re-fail deterministically — permission/config/validation
+ * failures. These force `retryAction: none` regardless of HTTP status.
+ */
+const NON_RETRYABLE_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.permission_denied,
+	ErrorCodeDTO.user_disabled,
+	ErrorCodeDTO.org_disabled,
+	ErrorCodeDTO.validation_error,
+	ErrorCodeDTO.invalid_content_length,
+	ErrorCodeDTO.invalid_fork_target,
+	ErrorCodeDTO.missing_signoz_url,
+	ErrorCodeDTO.invalid_signoz_url,
+	ErrorCodeDTO.region_not_configured,
+]);
+
+/**
+ * Code-specific, user-friendly copy. Takes precedence over the backend's raw
+ * `error.message` so the user sees an actionable, consistent sentence rather
+ * than internal phrasing. Codes absent here fall through to the backend message.
+ */
+const ERROR_CODE_COPY: Partial<Record<ErrorCodeDTO, string>> = {
+	[ErrorCodeDTO.permission_denied]:
+		"You don't have permission to do that. Contact your workspace admin if you think this is a mistake.",
+	[ErrorCodeDTO.user_disabled]:
+		'Your access to the AI assistant has been disabled. Contact your workspace admin to re-enable it.',
+	[ErrorCodeDTO.org_disabled]:
+		'The AI assistant is disabled for your organisation. An admin can enable it in settings.',
+	[ErrorCodeDTO.thread_busy]:
+		'This conversation is still finishing a previous response. Give it a moment and try again.',
+	[ErrorCodeDTO.thread_has_active_execution]:
+		'This conversation is still finishing a previous response. Give it a moment and try again.',
+	[ErrorCodeDTO.hourly_message_limit]:
+		"You've reached the hourly message limit. Please try again later.",
+	[ErrorCodeDTO.daily_message_limit]:
+		"You've reached the daily message limit. Please try again tomorrow.",
+	[ErrorCodeDTO.daily_token_limit]:
+		"You've reached today's usage limit. Please try again tomorrow.",
+	[ErrorCodeDTO.daily_cost_limit]:
+		"You've reached today's usage limit. Please try again tomorrow.",
+	[ErrorCodeDTO.budget_exceeded]:
+		"You've reached your usage budget. Contact your workspace admin to raise it.",
+	[ErrorCodeDTO.thread_message_limit]:
+		'This conversation has reached its length limit. Start a new conversation to continue.',
+	[ErrorCodeDTO.connection_limit_exceeded]:
+		'Too many active conversations right now. Close one and try again.',
+	[ErrorCodeDTO.max_turns_exceeded]:
+		'The assistant reached the maximum number of steps for this request. Try rephrasing or breaking it into smaller asks.',
+	[ErrorCodeDTO.region_unreachable]:
+		"Couldn't reach your region's services. Please try again in a moment.",
+	[ErrorCodeDTO.region_not_configured]:
+		'No region is configured for the AI assistant yet. An admin can set this up in settings.',
+	[ErrorCodeDTO.mcp_unavailable]:
+		'A required service is temporarily unavailable. Please try again shortly.',
+	[ErrorCodeDTO.sandbox_unavailable]:
+		'The execution environment is temporarily unavailable. Please try again shortly.',
+	[ErrorCodeDTO.internal_error]:
+		'Something went wrong on our end. Please try again.',
+};
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+function isRetryActionDTO(value: unknown): value is RetryActionDTO {
+	return (
+		typeof value === 'string' &&
+		(Object.values(RetryActionDTO) as string[]).includes(value)
+	);
+}
+
+/**
+ * Pulls the structured error body out of either an Axios REST error or the
+ * SSE error the streaming loop throws (a plain `Error` augmented with `code`).
+ */
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+function isRateLimit(code: ErrorCodeDTO | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+	return code !== undefined && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+/**
+ * Resolves how the failed action may be retried. The backend's explicit signal
+ * (SSE `ErrorEventDTO.retryAction`) is authoritative; otherwise we derive it
+ * from the rate-limit/non-retryable code sets and the HTTP status.
+ */
+function resolveRetryAction(
+	err: unknown,
+	code: ErrorCodeDTO | undefined,
+	rateLimited: boolean,
+): RetryActionDTO {
+	const explicit = (err as { retryAction?: unknown } | undefined)?.retryAction;
+	if (isRetryActionDTO(explicit)) {
+		return explicit;
+	}
+
+	if (rateLimited || (code !== undefined && NON_RETRYABLE_CODES.has(code))) {
+		return RetryActionDTO.none;
+	}
+
+	if (isAxiosError(err)) {
+		const status = err.response?.status;
+		// No response → network/timeout failure; retrying may well succeed.
+		if (status === undefined || status === 408) {
+			return RetryActionDTO.manual;
+		}
+		if (status === 401 || status === 403) {
+			return RetryActionDTO.none;
+		}
+		if (status === 409 || status >= 500) {
+			return RetryActionDTO.manual;
+		}
+		// Other 4xx (validation, bad request) re-fail deterministically.
+		return RetryActionDTO.none;
+	}
+
+	// Non-Axios transport/parse error with no code — let the user retry.
+	return RetryActionDTO.manual;
+}
+
+function resolveMessage(
+	code: ErrorCodeDTO | undefined,
+	body: ErrorBodyDTO | null,
+	fallback: string,
+): string {
+	if (code !== undefined && ERROR_CODE_COPY[code]) {
+		return ERROR_CODE_COPY[code] as string;
+	}
+	// Trust the backend's message only for codes we recognise — never surface
+	// raw text for unknown codes (could be an internal stack trace).
+	if (code !== undefined && body?.message.trim()) {
+		return body.message.trim();
+	}
+	return fallback;
+}
+
+/**
+ * Single resolution point for both SSE and REST assistant errors. Maps the
+ * error onto user-facing copy plus retry semantics, degrading gracefully for
+ * unknown codes (falls back to `fallback` + a `manual` retry where sensible).
+ */
+export function resolveAssistantError(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const code = isErrorCodeDTO(body?.code) ? body?.code : undefined;
+	const rateLimited = isRateLimit(code, err);
+
+	return {
+		message: resolveMessage(code, body, fallback),
+		code,
+		retryAction: resolveRetryAction(err, code, rateLimited),
+		isRateLimit: rateLimited,
+	};
+}

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -1,71 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	message: string;
-	isRateLimit: boolean;
-}
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-function isRateLimitError(code: string | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-
-	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-/**
- * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
- * otherwise returns `fallback`.
- */
-export function resolveAssistantErrorMessage(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const isRateLimit = isRateLimitError(body?.code, err);
-
-	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
-		return {
-			message: body.message.trim(),
-			isRateLimit,
-		};
-	}
-
-	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
-}

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

@@ -26,9 +26,7 @@ function Explorer(): JSX.Element {
 					className: 'qf-api-monitoring',
 					source: QuickFiltersSource.API_MONITORING,
 					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
 					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
 					useFieldApis: quickFilterFieldApis,
 				}}
 			>

frontend/src/container/ExplorerActions/AddToDashboardButton.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { Grid2X2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
+import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
+import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 } from 'uuid';
+
+import {
+	EXPLORER_ACTION_EVENTS,
+	getExplorerActionEventPayload,
+	getExportPanelType,
+} from './utils';
+
+function AddToDashboardButton({
+	query,
+	sourcepage,
+	panelType,
+	isOneChartPerQuery = false,
+}: {
+	query: Query | null;
+	sourcepage: DataSource;
+	panelType?: PANEL_TYPES;
+	isOneChartPerQuery?: boolean;
+}): JSX.Element {
+	const [queryToExport, setQueryToExport] = useState<Query | null>(null);
+	const { panelType: contextPanelType } = useQueryBuilder();
+	const { safeNavigate } = useSafeNavigate();
+	const getExportToDashboardLink = useGetExportToDashboardLink();
+
+	const open = (): void => {
+		if (!query) {
+			return;
+		}
+		void logEvent(
+			EXPLORER_ACTION_EVENTS[sourcepage].addToDashboard,
+			getExplorerActionEventPayload({
+				sourcepage,
+				panelType: contextPanelType,
+				isOneChartPerQuery,
+			}),
+		);
+		setQueryToExport(query);
+	};
+
+	const handleExport = (
+		dashboard: ExportDashboard | null,
+		isNewDashboard?: boolean,
+	): void => {
+		if (!dashboard || !queryToExport) {
+			return;
+		}
+		const exportPanelType = panelType ?? getExportPanelType(contextPanelType);
+
+		void logEvent(EXPLORER_ACTION_EVENTS[sourcepage].exported, {
+			...getExplorerActionEventPayload({
+				sourcepage,
+				panelType: contextPanelType,
+				isOneChartPerQuery,
+			}),
+			isNewDashboard,
+			dashboardName: dashboard.title,
+		});
+
+		const link = getExportToDashboardLink({
+			query: queryToExport,
+			panelType: exportPanelType,
+			dashboardId: dashboard.id,
+			widgetId: v4(),
+		});
+		if (link) {
+			safeNavigate(link);
+		}
+	};
+
+	const button = (
+		<Button
+			variant="ghost"
+			color="secondary"
+			size="icon"
+			disabled={!query}
+			onClick={open}
+			prefix={<Grid2X2 size={16} />}
+			aria-label="Add to dashboard"
+			data-testid="explorer-add-to-dashboard"
+		/>
+	);
+
+	return (
+		<>
+			<TooltipSimple title="Add to dashboard">{button}</TooltipSimple>
+			<ExportPanelContainer
+				open={queryToExport !== null}
+				onClose={(): void => setQueryToExport(null)}
+				query={queryToExport}
+				onExport={handleExport}
+			/>
+		</>
+	);
+}
+
+export default AddToDashboardButton;

frontend/src/container/ExplorerActions/CreateAlertButton.tsx

@@ -0,0 +1,61 @@
+import { useHistory } from 'react-router-dom';
+import { ConciergeBell } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	EXPLORER_ACTION_EVENTS,
+	getCreateAlertLink,
+	getExplorerActionEventPayload,
+} from './utils';
+
+function CreateAlertButton({
+	query,
+	sourcepage,
+	isOneChartPerQuery = false,
+}: {
+	query: Query | null;
+	sourcepage: DataSource;
+	isOneChartPerQuery?: boolean;
+}): JSX.Element {
+	const history = useHistory();
+	const { panelType } = useQueryBuilder();
+
+	const createAlert = (): void => {
+		if (!query) {
+			return;
+		}
+		void logEvent(
+			EXPLORER_ACTION_EVENTS[sourcepage].createAlert,
+			getExplorerActionEventPayload({ sourcepage, panelType, isOneChartPerQuery }),
+		);
+		history.push(getCreateAlertLink({ query, panelType }));
+	};
+
+	const button = (
+		<Button
+			variant="ghost"
+			color="secondary"
+			size={isOneChartPerQuery ? 'icon' : 'md'}
+			disabled={!query}
+			onClick={createAlert}
+			prefix={<ConciergeBell size={16} />}
+			aria-label="Create an alert"
+			data-testid="explorer-create-alert"
+		>
+			{!isOneChartPerQuery && 'Create an alert'}
+		</Button>
+	);
+
+	return isOneChartPerQuery ? (
+		<TooltipSimple title="Create an alert">{button}</TooltipSimple>
+	) : (
+		button
+	);
+}
+
+export default CreateAlertButton;

frontend/src/container/ExplorerActions/ExplorerActions.tsx

@@ -0,0 +1,39 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import AddToDashboardButton from './AddToDashboardButton';
+import CreateAlertButton from './CreateAlertButton';
+
+function ExplorerActions({
+	query,
+	dashboardQuery = query,
+	sourcepage,
+	panelType,
+	isOneChartPerQuery,
+}: {
+	query: Query | null;
+	// When the dashboard export differs from the alert one (traces list injects columns).
+	dashboardQuery?: Query | null;
+	sourcepage: DataSource;
+	panelType?: PANEL_TYPES;
+	isOneChartPerQuery?: boolean;
+}): JSX.Element {
+	return (
+		<>
+			<CreateAlertButton
+				query={query}
+				sourcepage={sourcepage}
+				isOneChartPerQuery={isOneChartPerQuery}
+			/>
+			<AddToDashboardButton
+				query={dashboardQuery}
+				sourcepage={sourcepage}
+				panelType={panelType}
+				isOneChartPerQuery={isOneChartPerQuery}
+			/>
+		</>
+	);
+}
+
+export default ExplorerActions;

frontend/src/container/ExplorerActions/__tests__/AddToDashboardButton.test.tsx

@@ -0,0 +1,320 @@
+import logEvent from 'api/common/logEvent';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	getExportQueryData as getLogsExportQuery,
+	getQueryByPanelType as getLogsQueryByPanelType,
+} from 'container/LogsExplorerViews/explorerUtils';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import {
+	getExportQueryData as getTracesExportQuery,
+	getQueryByPanelType as getTracesQueryByPanelType,
+} from 'container/TracesExplorer/explorerUtils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { buildExportPanelLink } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+
+import AddToDashboardButton from '../AddToDashboardButton';
+import { getExportPanelType } from '../utils';
+
+const DASHBOARD = { id: 'dash-1', title: 'Dash 1' };
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: jest.fn(),
+}));
+jest.mock('uuid', () => ({ v4: (): string => 'widget-1' }));
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+// The picker is the dialog's business; here it just hands a dashboard back.
+jest.mock('container/ExportPanel/ExportPanelContainer', () => ({
+	__esModule: true,
+	default: ({
+		open,
+		query,
+		onExport,
+	}: {
+		open: boolean;
+		query: Query | null;
+		onExport: (dashboard: { id: string; title: string }) => void;
+	}): JSX.Element | null =>
+		open ? (
+			<button
+				type="button"
+				data-testid="export-stub"
+				data-query={JSON.stringify(query)}
+				onClick={(): void => onExport({ id: 'dash-1', title: 'Dash 1' })}
+			>
+				export
+			</button>
+		) : null,
+}));
+
+const mockSafeNavigate = jest.fn();
+const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
+const mockedUseSafeNavigate = jest.mocked(useSafeNavigate);
+const mockedLogEvent = jest.mocked(logEvent);
+
+const FILTER = "service.name = 'frontend'";
+const COLUMNS = [{ name: 'service.name' }, { name: 'name' }];
+const options = { selectColumns: COLUMNS } as unknown as OptionsQuery;
+
+function stagedQuery(dataSource: DataSource, queryName = 'A'): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		id: `query-${queryName}`,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					queryName,
+					aggregateOperator: StringOperators.COUNT,
+					filter: { expression: FILTER },
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+function setPanelType(panelType: PANEL_TYPES): void {
+	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
+		typeof useQueryBuilder
+	>);
+}
+
+async function exportTo(
+	query: Query | null,
+	sourcepage: DataSource,
+	panelType: PANEL_TYPES,
+	panelTypeProp?: PANEL_TYPES,
+): Promise<void> {
+	setPanelType(panelType);
+	render(
+		<AddToDashboardButton
+			query={query}
+			sourcepage={sourcepage}
+			panelType={panelTypeProp}
+		/>,
+	);
+	const user = userEvent.setup();
+	await user.click(screen.getByTestId('explorer-add-to-dashboard'));
+	await user.click(screen.getByTestId('export-stub'));
+}
+
+function expectedLink(query: Query, panelType: PANEL_TYPES): string | null {
+	return buildExportPanelLink({
+		query,
+		panelType,
+		dashboardId: DASHBOARD.id,
+	});
+}
+
+describe('AddToDashboardButton', () => {
+	beforeEach(() => {
+		mockSafeNavigate.mockReset();
+		mockedLogEvent.mockClear();
+		mockedUseSafeNavigate.mockReturnValue({ safeNavigate: mockSafeNavigate });
+	});
+
+	it('is disabled without a query and the picker stays closed', () => {
+		setPanelType(PANEL_TYPES.LIST);
+		render(<AddToDashboardButton query={null} sourcepage={DataSource.LOGS} />);
+
+		expect(screen.getByTestId('explorer-add-to-dashboard')).toBeDisabled();
+		expect(screen.queryByTestId('export-stub')).not.toBeInTheDocument();
+	});
+
+	it('hands the picker the same query it will export', async () => {
+		const query = stagedQuery(DataSource.LOGS);
+		setPanelType(PANEL_TYPES.TIME_SERIES);
+		render(<AddToDashboardButton query={query} sourcepage={DataSource.LOGS} />);
+
+		await userEvent
+			.setup()
+			.click(screen.getByTestId('explorer-add-to-dashboard'));
+
+		expect(screen.getByTestId('export-stub')).toHaveAttribute(
+			'data-query',
+			JSON.stringify(query),
+		);
+	});
+
+	it("logs the explorer's own open and success events", async () => {
+		const query = stagedQuery(DataSource.TRACES);
+
+		await exportTo(query, DataSource.TRACES, PANEL_TYPES.TABLE);
+
+		expect(mockedLogEvent).toHaveBeenCalledWith(
+			'Traces Explorer: Add to dashboard clicked',
+			{
+				sourcepage: DataSource.TRACES,
+				panelType: PANEL_TYPES.TABLE,
+			},
+		);
+		expect(mockedLogEvent).toHaveBeenCalledWith(
+			'Traces Explorer: Add to dashboard successful',
+			{
+				sourcepage: DataSource.TRACES,
+				panelType: PANEL_TYPES.TABLE,
+				isNewDashboard: undefined,
+				dashboardName: DASHBOARD.title,
+			},
+		);
+	});
+
+	it('a panel type from the page wins over the fold of the context one', async () => {
+		const query = stagedQuery(DataSource.METRICS);
+
+		// context says list, the page says time series
+		await exportTo(
+			query,
+			DataSource.METRICS,
+			PANEL_TYPES.LIST,
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expectedLink(query, PANEL_TYPES.TIME_SERIES),
+		);
+	});
+
+	describe('logs, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.LOGS);
+
+		it('list: the list request shaping with timestamp desc, panel type list', async () => {
+			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
+				page: 1,
+				pageSize: 100,
+				filters: { items: [], op: 'AND' },
+				filter: { expression: FILTER },
+			});
+			const exportQuery = getLogsExportQuery(
+				listRequest,
+				PANEL_TYPES.LIST,
+			) as Query;
+
+			await exportTo(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
+
+			expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([
+				{ columnName: 'timestamp', order: 'desc' },
+			]);
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.LIST),
+			);
+		});
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query untouched, same panel type',
+			async (panelType) => {
+				const exportQuery = getLogsExportQuery(staged, panelType) as Query;
+
+				await exportTo(exportQuery, DataSource.LOGS, panelType);
+
+				expect(exportQuery).toBe(staged);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(staged, panelType),
+				);
+			},
+		);
+	});
+
+	describe('traces, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.TRACES);
+
+		it('list: list shaping plus the selected columns, panel type list', async () => {
+			const exportQuery = getTracesExportQuery(
+				getTracesQueryByPanelType(staged, PANEL_TYPES.LIST),
+				getExportPanelType(PANEL_TYPES.LIST),
+				options,
+			);
+
+			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.LIST);
+
+			const [queryData] = exportQuery.builder.queryData;
+			expect(queryData.selectColumns).toStrictEqual(COLUMNS);
+			expect(queryData.groupBy).toStrictEqual([]);
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.LIST),
+			);
+		});
+
+		it('trace: list shaping, no columns, panel type folds to time series', async () => {
+			const exportQuery = getTracesExportQuery(
+				getTracesQueryByPanelType(staged, PANEL_TYPES.TRACE),
+				getExportPanelType(PANEL_TYPES.TRACE),
+				options,
+			);
+
+			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.TRACE);
+
+			expect(exportQuery.builder.queryData[0].selectColumns).toBeUndefined();
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expectedLink(exportQuery, PANEL_TYPES.TIME_SERIES),
+			);
+		});
+
+		// Same as the alert: the list / trace order lives in ListView state and the
+		// page shapes the export without it, so the panel query has no order by.
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: order by is not carried into the panel query',
+			async (panelType) => {
+				expect(staged.builder.queryData[0].orderBy).toHaveLength(1);
+				const exportQuery = getTracesExportQuery(
+					getTracesQueryByPanelType(staged, panelType),
+					getExportPanelType(panelType),
+					options,
+				);
+
+				await exportTo(exportQuery, DataSource.TRACES, panelType);
+
+				expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([]);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(exportQuery, getExportPanelType(panelType)),
+				);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query untouched, same panel type',
+			async (panelType) => {
+				const exportQuery = getTracesExportQuery(
+					getTracesQueryByPanelType(staged, panelType),
+					getExportPanelType(panelType),
+					options,
+				);
+
+				await exportTo(exportQuery, DataSource.TRACES, panelType);
+
+				expect(exportQuery).toBe(staged);
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					expectedLink(staged, panelType),
+				);
+			},
+		);
+	});
+
+	it('metrics: the chart query as is, panel type time series from the page', async () => {
+		const query = stagedQuery(DataSource.METRICS);
+
+		await exportTo(
+			query,
+			DataSource.METRICS,
+			PANEL_TYPES.TIME_SERIES,
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expectedLink(query, PANEL_TYPES.TIME_SERIES),
+		);
+	});
+});

frontend/src/container/ExplorerActions/__tests__/CreateAlertButton.test.tsx

@@ -0,0 +1,245 @@
+import { useHistory } from 'react-router-dom';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import {
+	getExportQueryData as getLogsExportQuery,
+	getQueryByPanelType as getLogsQueryByPanelType,
+} from 'container/LogsExplorerViews/explorerUtils';
+import { getQueryByPanelType as getTracesQueryByPanelType } from 'container/TracesExplorer/explorerUtils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+
+import CreateAlertButton from '../CreateAlertButton';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useHistory: jest.fn(),
+}));
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+
+const mockPush = jest.fn();
+const mockedUseHistory = jest.mocked(useHistory);
+const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
+const mockedLogEvent = jest.mocked(logEvent);
+
+const FILTER = "service.name = 'frontend'";
+const ORDER_BY = [{ columnName: 'timestamp', order: 'asc' }];
+
+function stagedQuery(
+	dataSource: DataSource,
+	aggregateOperator: StringOperators,
+	queryName = 'A',
+): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		id: `query-${queryName}`,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					queryName,
+					aggregateOperator,
+					filter: { expression: FILTER },
+					orderBy: ORDER_BY,
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+function pushedQuery(): Query {
+	expect(mockPush).toHaveBeenCalledTimes(1);
+	const [path, search] = (mockPush.mock.calls[0][0] as string).split('?');
+	expect(path).toBe(ROUTES.ALERTS_NEW);
+	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
+	return JSON.parse(raw as string);
+}
+
+function setPanelType(panelType: PANEL_TYPES): void {
+	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
+		typeof useQueryBuilder
+	>);
+}
+
+async function clickCreateAlert(
+	query: Query | null,
+	sourcepage: DataSource,
+	panelType: PANEL_TYPES,
+): Promise<void> {
+	setPanelType(panelType);
+	render(<CreateAlertButton query={query} sourcepage={sourcepage} />);
+	await userEvent.setup().click(screen.getByTestId('explorer-create-alert'));
+}
+
+describe('CreateAlertButton', () => {
+	beforeEach(() => {
+		mockPush.mockReset();
+		mockedLogEvent.mockClear();
+		mockedUseHistory.mockReturnValue({ push: mockPush } as unknown as ReturnType<
+			typeof useHistory
+		>);
+	});
+
+	it('is disabled and does nothing without a query', async () => {
+		await clickCreateAlert(null, DataSource.LOGS, PANEL_TYPES.LIST);
+
+		expect(screen.getByTestId('explorer-create-alert')).toBeDisabled();
+		expect(mockPush).not.toHaveBeenCalled();
+	});
+
+	it("logs the explorer's own create alert event", async () => {
+		const query = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
+
+		await clickCreateAlert(query, DataSource.TRACES, PANEL_TYPES.TIME_SERIES);
+
+		expect(mockedLogEvent).toHaveBeenCalledWith('Traces Explorer: Create alert', {
+			sourcepage: DataSource.TRACES,
+			panelType: PANEL_TYPES.TIME_SERIES,
+		});
+	});
+
+	it('one chart per query on metrics: icon only, and the event carries the layout', async () => {
+		setPanelType(PANEL_TYPES.TIME_SERIES);
+		render(
+			<CreateAlertButton
+				query={stagedQuery(DataSource.METRICS, StringOperators.COUNT)}
+				sourcepage={DataSource.METRICS}
+				isOneChartPerQuery
+			/>,
+		);
+		const button = screen.getByTestId('explorer-create-alert');
+		expect(button).not.toHaveTextContent('Create an alert');
+
+		await userEvent.setup().click(button);
+
+		expect(mockedLogEvent).toHaveBeenCalledWith(
+			'Metrics Explorer: Add to alert clicked',
+			{
+				sourcepage: DataSource.METRICS,
+				panelType: PANEL_TYPES.TIME_SERIES,
+				tab: 'explorer',
+				oneChartPerQueryEnabled: true,
+			},
+		);
+	});
+
+	describe('logs, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.LOGS, StringOperators.NOOP);
+
+		it('list: count aggregation, no order by, filter and pagination as the page sent them', async () => {
+			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
+				page: 1,
+				pageSize: 100,
+				filters: { items: [], op: 'AND' },
+				filter: { expression: FILTER },
+			});
+			const exportQuery = getLogsExportQuery(
+				listRequest,
+				PANEL_TYPES.LIST,
+			) as Query;
+
+			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
+
+			const [queryData] = pushedQuery().builder.queryData;
+			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+			expect(queryData.orderBy).toStrictEqual([]);
+			expect(queryData.groupBy).toStrictEqual([]);
+			expect(queryData.filter).toStrictEqual({ expression: FILTER });
+			expect(queryData.pageSize).toBe(100);
+		});
+
+		it('time series: staged query as is, order by and group by kept', async () => {
+			const tsStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
+			const exportQuery = getLogsExportQuery(
+				tsStaged,
+				PANEL_TYPES.TIME_SERIES,
+			) as Query;
+
+			await clickCreateAlert(
+				exportQuery,
+				DataSource.LOGS,
+				PANEL_TYPES.TIME_SERIES,
+			);
+
+			const [queryData] = pushedQuery().builder.queryData;
+			expect(queryData).toStrictEqual(tsStaged.builder.queryData[0]);
+		});
+
+		it('table: staged query as is', async () => {
+			const tableStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
+			const exportQuery = getLogsExportQuery(
+				tableStaged,
+				PANEL_TYPES.TABLE,
+			) as Query;
+
+			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.TABLE);
+
+			expect(pushedQuery().builder).toStrictEqual(tableStaged.builder);
+		});
+	});
+
+	describe('traces, the query the page hands over per view', () => {
+		const staged = stagedQuery(DataSource.TRACES, StringOperators.NOOP);
+
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: count aggregation, group by cleared by the list shaping, filter kept',
+			async (panelType) => {
+				const exportQuery = getTracesQueryByPanelType(staged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				const [queryData] = pushedQuery().builder.queryData;
+				expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+				expect(queryData.groupBy).toStrictEqual([]);
+				expect(queryData.filter).toStrictEqual({ expression: FILTER });
+			},
+		);
+
+		// The list / trace views keep their order in ListView state, and the page
+		// shapes the export without it, so the alert never sees an order by.
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'%s: order by is not carried, even when the staged query has one',
+			async (panelType) => {
+				expect(staged.builder.queryData[0].orderBy).toStrictEqual(ORDER_BY);
+				const exportQuery = getTracesQueryByPanelType(staged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				expect(pushedQuery().builder.queryData[0].orderBy).toStrictEqual([]);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'%s: staged query as is',
+			async (panelType) => {
+				const aggStaged = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
+				const exportQuery = getTracesQueryByPanelType(aggStaged, panelType);
+
+				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
+
+				expect(pushedQuery().builder).toStrictEqual(aggStaged.builder);
+			},
+		);
+	});
+
+	it('metrics: the chart query as is', async () => {
+		const query = stagedQuery(DataSource.METRICS, StringOperators.COUNT);
+
+		await clickCreateAlert(query, DataSource.METRICS, PANEL_TYPES.TIME_SERIES);
+
+		expect(pushedQuery().builder).toStrictEqual(query.builder);
+	});
+});

frontend/src/container/ExplorerActions/__tests__/utils.test.ts

@@ -0,0 +1,144 @@
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { StringOperators } from 'types/common/queryBuilder';
+
+import { getCreateAlertLink, getExportPanelType } from '../utils';
+
+function withFirstQuery(
+	base: Query,
+	overrides: Partial<Query['builder']['queryData'][number]>,
+): Query {
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [{ ...base.builder.queryData[0], ...overrides }],
+		},
+	};
+}
+
+function decodeQuery(link: string): Query {
+	const search = link.split('?')[1];
+	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
+	return JSON.parse(raw as string);
+}
+
+describe('getExportPanelType', () => {
+	it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE, PANEL_TYPES.LIST])(
+		'keeps %s',
+		(panelType) => {
+			expect(getExportPanelType(panelType)).toBe(panelType);
+		},
+	);
+
+	it.each([PANEL_TYPES.BAR, PANEL_TYPES.PIE, PANEL_TYPES.TRACE, null])(
+		'folds %s to time series',
+		(panelType) => {
+			expect(getExportPanelType(panelType)).toBe(PANEL_TYPES.TIME_SERIES);
+		},
+	);
+});
+
+describe('getCreateAlertLink', () => {
+	const orderBy = [{ columnName: 'timestamp', order: 'desc' }];
+
+	it('points at the new alert route with the query in the url', () => {
+		const query = initialQueriesMap.traces;
+		const link = getCreateAlertLink({
+			query,
+			panelType: PANEL_TYPES.TIME_SERIES,
+		});
+
+		expect(link.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
+		expect(decodeQuery(link)).toStrictEqual(query);
+	});
+
+	it('logs list: noop becomes count and order by is dropped', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.NOOP,
+			orderBy,
+		});
+
+		const [queryData] = decodeQuery(
+			getCreateAlertLink({
+				query,
+				panelType: PANEL_TYPES.LIST,
+			}),
+		).builder.queryData;
+
+		expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+		expect(queryData.orderBy).toStrictEqual([]);
+	});
+
+	it('logs time series keeps order by', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.COUNT,
+			orderBy,
+		});
+
+		const [queryData] = decodeQuery(
+			getCreateAlertLink({
+				query,
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		).builder.queryData;
+
+		expect(queryData.orderBy).toStrictEqual(orderBy);
+	});
+
+	it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+		'%s drops order by whatever the source',
+		(panelType) => {
+			const query = withFirstQuery(initialQueriesMap.traces, {
+				aggregateOperator: StringOperators.NOOP,
+				orderBy,
+			});
+
+			const [queryData] = decodeQuery(getCreateAlertLink({ query, panelType }))
+				.builder.queryData;
+
+			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
+			expect(queryData.orderBy).toStrictEqual([]);
+		},
+	);
+
+	it('converts a noop on any query, not only the first', () => {
+		const first = initialQueriesMap.logs.builder.queryData[0];
+		const query: Query = {
+			...initialQueriesMap.logs,
+			builder: {
+				...initialQueriesMap.logs.builder,
+				queryData: [
+					{ ...first, aggregateOperator: StringOperators.COUNT },
+					{ ...first, queryName: 'B', aggregateOperator: StringOperators.NOOP },
+				],
+			},
+		};
+
+		const operators = decodeQuery(
+			getCreateAlertLink({ query, panelType: PANEL_TYPES.TIME_SERIES }),
+		).builder.queryData.map((item) => item.aggregateOperator);
+
+		expect(operators).toStrictEqual([
+			StringOperators.COUNT,
+			StringOperators.COUNT,
+		]);
+	});
+
+	it('does not mutate the query it is given', () => {
+		const query = withFirstQuery(initialQueriesMap.logs, {
+			aggregateOperator: StringOperators.NOOP,
+			orderBy,
+		});
+		const snapshot = JSON.stringify(query);
+
+		getCreateAlertLink({
+			query,
+			panelType: PANEL_TYPES.LIST,
+		});
+
+		expect(JSON.stringify(query)).toBe(snapshot);
+	});
+});

frontend/src/container/ExplorerActions/utils.ts

@@ -0,0 +1,85 @@
+import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import {
+	MetricsExplorerEventKeys,
+	MetricsExplorerEvents,
+} from 'container/MetricsExplorer/events';
+import { cloneDeep } from 'lodash-es';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+
+export const EXPLORER_ACTION_EVENTS: Record<
+	DataSource,
+	{ createAlert: string; addToDashboard: string; exported: string }
+> = {
+	[DataSource.LOGS]: {
+		createAlert: 'Logs Explorer: Create alert',
+		addToDashboard: 'Logs Explorer: Add to dashboard clicked',
+		exported: 'Logs Explorer: Add to dashboard successful',
+	},
+	[DataSource.TRACES]: {
+		createAlert: 'Traces Explorer: Create alert',
+		addToDashboard: 'Traces Explorer: Add to dashboard clicked',
+		exported: 'Traces Explorer: Add to dashboard successful',
+	},
+	[DataSource.METRICS]: {
+		createAlert: MetricsExplorerEvents.AddToAlertClicked,
+		addToDashboard: MetricsExplorerEvents.AddToDashboardClicked,
+		exported: MetricsExplorerEvents.AddToDashboardSuccessful,
+	},
+};
+
+export function getExplorerActionEventPayload({
+	sourcepage,
+	panelType,
+	isOneChartPerQuery,
+}: {
+	sourcepage: DataSource;
+	panelType: PANEL_TYPES | null;
+	isOneChartPerQuery: boolean;
+}): Record<string, unknown> {
+	if (sourcepage !== DataSource.METRICS) {
+		return { sourcepage, panelType };
+	}
+	return {
+		sourcepage,
+		panelType,
+		[MetricsExplorerEventKeys.Tab]: 'explorer',
+		[MetricsExplorerEventKeys.OneChartPerQueryEnabled]: isOneChartPerQuery,
+	};
+}
+
+export function getExportPanelType(panelType: PANEL_TYPES | null): PANEL_TYPES {
+	return panelType && AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
+		? panelType
+		: PANEL_TYPES.TIME_SERIES;
+}
+
+// Alerts need an aggregation, and list style views carry an order the alert
+// cannot use.
+export function getCreateAlertLink({
+	query,
+	panelType,
+}: {
+	query: Query;
+	panelType: PANEL_TYPES | null;
+}): string {
+	const isListStyle =
+		panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
+
+	const alertQuery = cloneDeep(query);
+	alertQuery.builder.queryData = alertQuery.builder.queryData.map((item) => ({
+		...item,
+		aggregateOperator:
+			item.aggregateOperator === StringOperators.NOOP
+				? StringOperators.COUNT
+				: item.aggregateOperator,
+		orderBy: isListStyle ? [] : item.orderBy,
+	}));
+
+	return `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+		JSON.stringify(alertQuery),
+	)}`;
+}

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -8,10 +8,11 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils';
+import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
@@ -35,6 +36,7 @@ export default function SavedViews({
 	loadingUserPreferences: boolean;
 }): JSX.Element {
 	const { user } = useAppContext();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const [selectedEntity, setSelectedEntity] = useState<string>('logs');
 	const [selectedEntityViews, setSelectedEntityViews] = useState<
 		SavedviewtypesSavedViewDTO[]
@@ -351,7 +353,7 @@ export default function SavedViews({
 				{selectedEntityViews.length > 0 ? renderSavedViews() : emptyStateCard()}
 			</Card.Content>
 
-			{selectedEntityViews.length > 0 && (
+			{!isSavedViewEnabled && selectedEntityViews.length > 0 && (
 				<Card.Footer>
 					<div className="services-footer home-data-card-footer">
 						<Link to={footerLink}>

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EventsContent.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/TableView';
+import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
 
 import styles from './EventsContent.module.scss';
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -24,6 +24,7 @@ const accountsResponse: ListAccounts200 = {
 				agentReport: {
 					timestampMillis: 1747114366214,
 					data: null,
+					syncState: null,
 				},
 				providerAccountId: PROVIDER_ACCOUNT_ID,
 				removedAt: null,

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -190,14 +190,12 @@ function Explorer(): JSX.Element {
 				className="trace-explorer-page"
 				testId="llm-observability-explorer"
 				showFilters={isOpen}
+				onToggleFilters={(): void => setOpen(!isOpen)}
 				quickFilterProps={{
 					className: 'qf-traces-explorer',
 					source: QuickFiltersSource.AI_OBSERVABILITY,
 					signal: SignalType.AI_OBSERVABILITY,
 					useFieldApis: quickFiltersFieldApis,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
 				}}
 			>
 				<div className="trace-explorer">

frontend/src/container/LogDetailedView/ActionItem.tsx

@@ -1,64 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import { CircleMinus, CirclePlus } from '@signozhq/icons';
-import { Button, Col, Popover } from 'antd';
-import { OPERATORS } from 'constants/queryBuilder';
-import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-function ActionItem({
-	fieldKey,
-	fieldValue,
-	onClickActionItem,
-}: ActionItemProps): JSX.Element {
-	const handleClick = useCallback(
-		(operator: string) => {
-			const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
-
-			onClickActionItem(fieldKey, validatedFieldValue, operator);
-		},
-		[onClickActionItem, fieldKey, fieldValue],
-	);
-
-	const onClickHandler = useCallback(
-		(operator: string) => (): void => {
-			handleClick(operator);
-		},
-		[handleClick],
-	);
-
-	const PopOverMenuContent = useMemo(
-		() => (
-			<Col>
-				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.IN)}>
-					<CirclePlus size={12} /> Filter for value
-				</Button>
-				<br />
-				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.NIN)}>
-					<CircleMinus size={12} /> Filter out value
-				</Button>
-			</Col>
-		),
-		[onClickHandler],
-	);
-	return (
-		<Popover placement="bottomLeft" content={PopOverMenuContent} trigger="click">
-			<Button type="text" size="small">
-				...
-			</Button>
-		</Popover>
-	);
-}
-
-export interface ActionItemProps {
-	fieldKey: string;
-	fieldValue: string;
-	onClickActionItem: (
-		fieldKey: string,
-		fieldValue: string,
-		operator: string,
-		dataType?: DataTypes,
-		fieldType?: string,
-	) => void;
-}
-
-export default memo(ActionItem);

frontend/src/container/LogDetailedView/BodyTitleRenderer.styles.ts

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-export const TitleWrapper = styled.span`
-	user-select: text !important;
-	cursor: text;
-
-	.hover-reveal {
-		visibility: hidden;
-	}
-
-	&:hover .hover-reveal {
-		visibility: visible;
-	}
-`;

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -1,247 +0,0 @@
-import { useCallback } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { orange } from '@ant-design/colors';
-import { Settings } from '@signozhq/icons';
-import {
-	type BaseMenuItem,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
-import {
-	negateOperator,
-	OPERATORS,
-	QUERY_BUILDER_FUNCTIONS,
-} from 'constants/antlrQueryConstants';
-import { FeatureKeys } from 'constants/features';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
-import { useNotifications } from 'hooks/useNotifications';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import { useAppContext } from 'providers/App/App';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-import { TitleWrapper } from './BodyTitleRenderer.styles';
-import { DROPDOWN_KEY } from './constant';
-import { BodyTitleRendererProps } from './LogDetailedView.types';
-import {
-	generateFieldKeyForArray,
-	getDataTypes,
-	removeObjectFromString,
-} from './utils';
-
-function BodyTitleRenderer({
-	title,
-	parentIsArray = false,
-	nodeKey,
-	value,
-	handleChangeSelectedView,
-}: BodyTitleRendererProps): JSX.Element {
-	const { onAddToQuery } = useActiveLog();
-	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-
-	const { featureFlags } = useAppContext();
-	const [, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-
-	const cleanedNodeKey = removeObjectFromString(nodeKey);
-	const isBodyJsonQueryEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
-			?.active || false;
-
-	// Group by is supported only for body json query enabled and not for array elements
-	const isGroupBySupported =
-		isBodyJsonQueryEnabled && !cleanedNodeKey.includes('[]');
-
-	const filterHandler = (isFilterIn: boolean) => (): void => {
-		if (parentIsArray) {
-			onAddToQuery(
-				generateFieldKeyForArray(
-					cleanedNodeKey,
-					getDataTypes(value),
-					isBodyJsonQueryEnabled,
-				),
-				`${value}`,
-				isFilterIn
-					? QUERY_BUILDER_FUNCTIONS.HAS
-					: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
-				parentIsArray ? getDataTypes([value]) : getDataTypes(value),
-			);
-		} else {
-			onAddToQuery(
-				`body.${cleanedNodeKey}`,
-				`${value}`,
-				isFilterIn ? OPERATORS['='] : OPERATORS['!='],
-				getDataTypes(value),
-			);
-		}
-	};
-
-	const groupByHandler = useCallback((): void => {
-		if (!stagedQuery) {
-			return;
-		}
-
-		const groupByKey = parentIsArray
-			? generateFieldKeyForArray(
-					cleanedNodeKey,
-					getDataTypes(value),
-					isBodyJsonQueryEnabled,
-				)
-			: `body.${cleanedNodeKey}`;
-
-		const fieldDataType = getDataTypes(value);
-		const normalizedDataType: DataTypes | undefined = Object.values(
-			DataTypes,
-		).includes(fieldDataType as DataTypes)
-			? (fieldDataType as DataTypes)
-			: undefined;
-
-		const updatedQuery = updateQueriesData(
-			stagedQuery,
-			'queryData',
-			(item, index) => {
-				if (index === 0) {
-					const newGroupByItem: BaseAutocompleteData = {
-						key: groupByKey,
-						type: '',
-						dataType: normalizedDataType,
-					};
-
-					return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
-				}
-
-				return item;
-			},
-		);
-
-		const queryData: ICurrentQueryData = {
-			query: updatedQuery,
-		};
-
-		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
-	}, [
-		cleanedNodeKey,
-		handleChangeSelectedView,
-		isBodyJsonQueryEnabled,
-		parentIsArray,
-		stagedQuery,
-		updateQueriesData,
-		value,
-	]);
-
-	const onClickHandler = (key: string): void => {
-		const mapper = {
-			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
-			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
-			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
-		};
-
-		const handler = mapper[key];
-
-		if (handler) {
-			handler();
-		}
-	};
-
-	const menuItems: BaseMenuItem[] = [
-		{
-			key: DROPDOWN_KEY.FILTER_IN,
-			label: `Filter for ${value}`,
-		},
-		{
-			key: DROPDOWN_KEY.FILTER_OUT,
-			label: `Filter out ${value}`,
-		},
-		...(isGroupBySupported
-			? [
-					{
-						key: DROPDOWN_KEY.GROUP_BY,
-						label: `Group by ${nodeKey}`,
-					},
-				]
-			: []),
-	];
-
-	const handleNodeClick = useCallback(
-		(e: React.MouseEvent): void => {
-			// Prevent tree node expansion/collapse
-			e.stopPropagation();
-			let copyText: string;
-
-			// Check if value is an object or array
-			const isObject = typeof value === 'object' && value !== null;
-
-			if (isObject) {
-				// For objects/arrays, stringify the entire structure
-				copyText = JSON.stringify(value, null, 2);
-			} else if (parentIsArray) {
-				// array elements
-				copyText = `${value}`;
-			} else {
-				// primitive values
-				const valueStr = typeof value === 'string' ? value : String(value);
-				copyText = valueStr;
-			}
-
-			setCopy(copyText);
-
-			if (copyText) {
-				const notificationMessage = isObject
-					? `${cleanedNodeKey} object copied to clipboard`
-					: `${cleanedNodeKey} copied to clipboard`;
-
-				notifications.success({
-					message: notificationMessage,
-					key: notificationMessage,
-				});
-			}
-		},
-		[cleanedNodeKey, parentIsArray, setCopy, value, notifications],
-	);
-
-	return (
-		<TitleWrapper onClick={handleNodeClick}>
-			{typeof value !== 'object' && (
-				<span
-					onClick={(e): void => {
-						e.stopPropagation();
-						e.preventDefault();
-					}}
-					onMouseDown={(e): void => e.preventDefault()}
-				>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent align="start">
-							<div data-log-detail-ignore="true">
-								{menuItems.map((item) => (
-									<DropdownMenuItem
-										key={item.key}
-										onSelect={(): void => onClickHandler(item.key as string)}
-									>
-										{item.label}
-									</DropdownMenuItem>
-								))}
-							</div>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</span>
-			)}
-			{title.toString()}{' '}
-			{!parentIsArray && typeof value !== 'object' && (
-				<span>
-					: <span style={{ color: orange[6] }}>{`${value}`}</span>
-				</span>
-			)}
-		</TitleWrapper>
-	);
-}
-
-export default BodyTitleRenderer;

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -1,92 +0,0 @@
-import { useMemo, useState } from 'react';
-import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { JSONViewProps } from './LogDetailedView.types';
-import { aggregateAttributesResourcesToString } from './utils';
-
-import './JsonView.styles.scss';
-
-function JSONView({ logData }: JSONViewProps): JSX.Element {
-	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-
-	const LogJsonData = useMemo(
-		() => aggregateAttributesResourcesToString(logData),
-		[logData],
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const options: EditorProps['options'] = {
-		automaticLayout: true,
-		readOnly: true,
-		wordWrap: isWrapWord ? 'on' : 'off',
-		minimap: {
-			enabled: false,
-		},
-		fontWeight: '400',
-		// fontFamily: 'SF Mono',
-		fontFamily: 'Geist Mono',
-		fontSize: 13,
-		lineHeight: 18,
-		colorDecorators: true,
-		scrollBeyondLastLine: false,
-		scrollbar: {
-			vertical: 'hidden',
-			horizontal: 'hidden',
-		},
-		folding: false,
-	};
-
-	const handleWrapWord = (checked: boolean): void => {
-		setIsWrapWord(checked);
-	};
-
-	function setEditorTheme(monaco: Monaco): void {
-		monaco.editor.defineTheme('my-theme', {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-			],
-			colors: {
-				'editor.background': Color.BG_INK_400,
-			},
-			// fontFamily: 'SF Mono',
-			fontFamily: 'Space Mono',
-			fontSize: 12,
-			fontWeight: 'normal',
-			lineHeight: 18,
-			letterSpacing: -0.06,
-		});
-	}
-
-	return (
-		<div className="json-view-container">
-			<MEditor
-				value={LogJsonData}
-				language="json"
-				options={options}
-				onChange={(): void => {}}
-				height="68vh"
-				theme={isDarkMode ? 'my-theme' : 'light'}
-				beforeMount={setEditorTheme}
-			/>
-
-			<div className="json-view-footer">
-				<div className="log-switch">
-					<div className="wrap-word-switch">
-						<Typography.Text>Wrap text</Typography.Text>
-						<Switch value={isWrapWord} onChange={handleWrapWord} />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default JSONView;

frontend/src/container/LogDetailedView/LogDetailedView.types.ts

@@ -1,14 +1,5 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { ILog } from 'types/api/logs/log';
-
-export interface BodyTitleRendererProps {
-	title: string;
-	nodeKey: string;
-	value: unknown;
-	parentIsArray?: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 export type AnyObject = { [key: string]: any };
 
@@ -22,6 +13,21 @@ export interface IFieldAttributes {
 	logType?: MetricsType;
 }
 
-export interface JSONViewProps {
-	logData: ILog;
+/** One key/field/value row in an attribute table. */
+export interface DataType {
+	key: string;
+	field: string;
+	value: string;
+}
+
+export interface ActionItemProps {
+	fieldKey: string;
+	fieldValue: string;
+	onClickActionItem: (
+		fieldKey: string,
+		fieldValue: string,
+		operator: string,
+		dataType?: DataTypes,
+		fieldType?: string,
+	) => void;
 }

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,32 +1,13 @@
-import { ReactNode, useState } from 'react';
-import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { Switch } from '@signozhq/ui/switch';
-import { Collapse } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
+import { ReactNode } from 'react';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
-import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
 import { DataViewer } from 'periscope/components/DataViewer';
-import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
-import { ActionItemProps } from './ActionItem';
 import { useLogAttributeActions } from './hooks/useLogAttributeActions';
-import TableView from './TableView';
 import {
 	aggregateAttributesResourcesToObject,
 	buildPrettyViewData,
-	getBodyDisplayString,
 	getSanitizedLogBody,
-	removeEscapeCharacters,
 } from './utils';
 
 import './Overview.styles.scss';
@@ -38,247 +19,58 @@ const MAX_BODY_SANITIZE_CHARS = 64 * 1024;
 interface OverviewProps {
 	logData: ILog;
 	isListViewPanel?: boolean;
-	selectedOptions: OptionsQuery;
-	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onApplyLogFilter?: (expression: string) => void;
 }
 
-type Props = OverviewProps &
-	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
-	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
-
 function Overview({
 	logData,
-	onAddToQuery,
-	onClickActionItem,
 	isListViewPanel = false,
-	selectedOptions,
-	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	onApplyLogFilter,
-}: Props): JSX.Element {
-	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
-	const [isAttributesExpanded, setIsAttributesExpanded] =
-		useState<boolean>(true);
-	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
-
-	const isDarkMode = useIsDarkMode();
-
+}: OverviewProps): JSX.Element {
 	const { actions, visibleActions } = useLogAttributeActions({
 		handleChangeSelectedView,
 		isListViewPanel,
 		onApplyLogFilter,
 	});
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
-	if (isLogDetailsV2) {
-		const raw = aggregateAttributesResourcesToObject(logData);
-		const prettyData = buildPrettyViewData(raw);
-		return (
-			<div className="overview-container">
-				<DataViewer
-					data={prettyData}
-					drawerKey="logs-details"
-					fontSize={13}
-					prettyViewProps={{
-						actions,
-						visibleActions,
-						renderLeafValue: (value, keyPath): ReactNode | undefined => {
-							// Sanitize (unescape + ANSI→color) string values under `body`.
-							// Skip huge ones (render raw, still safe) to avoid the sanitize
-							// choke;
-							if (
-								typeof value !== 'string' ||
-								keyPath[keyPath.length - 1] !== 'body' ||
-								value.length > MAX_BODY_SANITIZE_CHARS
-							) {
-								return undefined;
-							}
-							return (
-								<span
-									className="log-body-value"
-									// Safe: getSanitizedLogBody runs the value through dompurify.
-									// eslint-disable-next-line react/no-danger
-									dangerouslySetInnerHTML={{
-										__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
-									}}
-								/>
-							);
-						},
-					}}
-					jsonString={JSON.stringify(raw, null, 2)}
-				/>
-			</div>
-		);
-	}
-
-	const options: EditorProps['options'] = {
-		automaticLayout: true,
-		readOnly: true,
-		wordWrap: isWrapWord ? 'on' : 'off',
-		minimap: {
-			enabled: false,
-		},
-		fontWeight: '400',
-		fontFamily: 'Geist Mono',
-		fontSize: 13,
-		lineHeight: 18,
-		colorDecorators: true,
-		scrollBeyondLastLine: false,
-		scrollbar: {
-			vertical: 'hidden',
-			horizontal: 'hidden',
-		},
-	};
-
-	const handleWrapWord = (checked: boolean): void => {
-		setIsWrapWord(checked);
-	};
-
-	function setEditorTheme(monaco: Monaco): void {
-		monaco.editor.defineTheme('my-theme', {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-			],
-			colors: {
-				'editor.background': Color.BG_INK_400,
-			},
-		});
-	}
-
-	const handleSearchVisible = (): void => {
-		setIsSearchVisible(!isSearchVisible);
-	};
-
-	const toogleAttributePanelOpenState = (): void => {
-		setIsAttributesExpanded(!isAttributesExpanded);
-	};
+	const raw = aggregateAttributesResourcesToObject(logData);
+	const prettyData = buildPrettyViewData(raw);
 
 	return (
 		<div className="overview-container">
-			<Collapse
-				defaultActiveKey={['1']}
-				expandIcon={(props): ReactNode =>
-					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-				}
-				items={[
-					{
-						key: '1',
-						label: (
-							<Badge color="vanilla">
-								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
-									body
-								</Typography.Text>
-							</Badge>
-						),
-						children: (
-							<div className="logs-body-content">
-								<MEditor
-									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
-									language="json"
-									options={options}
-									onChange={(): void => {}}
-									height="20vh"
-									theme={isDarkMode ? 'my-theme' : 'light'}
-									onMount={(_, monaco): void => {
-										document.fonts.ready.then(() => {
-											monaco.editor.remeasureFonts();
-										});
-									}}
-									beforeMount={setEditorTheme}
-								/>
-								<Divider
-									style={{
-										margin: 0,
-										border: isDarkMode
-											? `1px solid ${Color.BG_SLATE_500}`
-											: `1px solid ${Color.BG_VANILLA_200}`,
-									}}
-								/>
-								<div className="log-switch">
-									<div className="wrap-word-switch">
-										<Typography.Text>Wrap text</Typography.Text>
-										<Switch value={isWrapWord} onChange={handleWrapWord} />
-									</div>
-								</div>
-							</div>
-						),
-						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
-						className: 'collapse-content',
+			<DataViewer
+				data={prettyData}
+				drawerKey="logs-details"
+				fontSize={13}
+				prettyViewProps={{
+					actions,
+					visibleActions,
+					renderLeafValue: (value, keyPath): ReactNode | undefined => {
+						// Sanitize (unescape + ANSI→color) string values under `body`.
+						// Skip huge ones (render raw, still safe) to avoid the sanitize
+						// choke;
+						if (
+							typeof value !== 'string' ||
+							keyPath[keyPath.length - 1] !== 'body' ||
+							value.length > MAX_BODY_SANITIZE_CHARS
+						) {
+							return undefined;
+						}
+						return (
+							<span
+								className="log-body-value"
+								// Safe: getSanitizedLogBody runs the value through dompurify.
+								// eslint-disable-next-line react/no-danger
+								dangerouslySetInnerHTML={{
+									__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
+								}}
+							/>
+						);
 					},
-				]}
-			/>
-
-			<Collapse
-				className="attribute-table"
-				defaultActiveKey={['1']}
-				bordered={false}
-				expandIcon={(props): ReactNode =>
-					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-				}
-				items={[
-					{
-						key: '1',
-						label: (
-							<div
-								className="attribute-tab-header"
-								onClick={toogleAttributePanelOpenState}
-							>
-								<Badge color="vanilla">
-									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
-										Attributes
-									</Typography.Text>
-								</Badge>
-
-								{isAttributesExpanded && (
-									<Button
-										variant="link"
-										color="none"
-										className="action-btn"
-										prefix={<Search size={12} />}
-										onClick={(e): void => {
-											e.stopPropagation();
-											handleSearchVisible();
-										}}
-									>
-										Search
-									</Button>
-								)}
-							</div>
-						),
-						children: (
-							<>
-								{isSearchVisible && (
-									<Input
-										autoFocus
-										placeholder="Search for a field..."
-										className="search-input"
-										value={fieldSearchInput}
-										onChange={(e): void => setFieldSearchInput(e.target.value)}
-									/>
-								)}
-
-								<TableView
-									logData={logData}
-									onAddToQuery={onAddToQuery}
-									fieldSearchInput={fieldSearchInput}
-									onClickActionItem={onClickActionItem}
-									isListViewPanel={isListViewPanel}
-									selectedOptions={selectedOptions}
-									listViewPanelSelectedFields={listViewPanelSelectedFields}
-									handleChangeSelectedView={handleChangeSelectedView}
-								/>
-							</>
-						),
-						className: 'collapse-content attribute-collapse',
-					},
-				]}
+				}}
+				jsonString={JSON.stringify(raw, null, 2)}
 			/>
 		</div>
 	);
@@ -286,7 +78,6 @@ function Overview({
 
 Overview.defaultProps = {
 	isListViewPanel: false,
-	listViewPanelSelectedFields: null,
 	handleChangeSelectedView: undefined,
 };
 

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

@@ -1,93 +0,0 @@
-.attribute-table-container {
-	.ant-table {
-		background: var(--l2-background);
-
-		.ant-table-row:hover {
-			.ant-table-cell {
-				.value-field {
-					.action-btn {
-						display: flex;
-						position: absolute;
-						top: 50%;
-						right: 16px;
-						transform: translateY(-50%);
-						gap: 4px;
-					}
-				}
-			}
-		}
-
-		.ant-table-cell {
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			vertical-align: top;
-		}
-
-		.attribute-name {
-			.ant-btn {
-				&:hover {
-					background-color: none !important;
-				}
-			}
-		}
-
-		.attribute-pin {
-			cursor: pointer;
-
-			padding: 14px 8px 8px;
-			vertical-align: top;
-			text-align: center;
-
-			.log-attribute-pin {
-				padding: 0;
-
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.pin-attribute-icon {
-					border: none;
-
-					&.pinned svg {
-						fill: var(--accent-primary);
-					}
-				}
-			}
-		}
-
-		.value-field-container {
-			background: var(--l2-background);
-
-			&.attribute-pin {
-				background: var(--l2-background);
-			}
-
-			.value-field {
-				font-family: 'Geist Mono';
-
-				position: relative;
-			}
-
-			.action-btn {
-				display: none;
-				width: max-content;
-				position: absolute;
-				padding: 0 16px;
-				right: 0;
-
-				.filter-btn {
-					display: flex;
-					align-items: center;
-					border: none;
-					box-shadow: none;
-					border-radius: 2px;
-					background: var(--l3-background);
-					padding: 2px 3px;
-					gap: 3px;
-					height: 18px;
-					width: 20px;
-				}
-			}
-		}
-	}
-}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,349 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { generatePath } from 'react-router-dom';
-import { Link, Pin } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Space, TableColumnsType as ColumnsType, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import AddToQueryHOC, {
-	AddToQueryHOCProps,
-} from 'components/Logs/AddToQueryHOC';
-import { ResizeTable } from 'components/ResizeTable';
-import { OPERATORS } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { MetricsType } from 'container/MetricsApplication/constant';
-import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
-import { fieldSearchFilter } from 'lib/logs/fieldSearch';
-import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
-import { IField } from 'types/api/logs/fields';
-import { ILog } from 'types/api/logs/log';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { openInNewTab } from 'utils/navigation';
-
-import { ActionItemProps } from './ActionItem';
-import { RESTRICTED_SELECTED_FIELDS } from './config';
-import FieldRenderer from './FieldRenderer';
-import TableViewActions from './TableView/TableViewActions';
-import {
-	filterKeyForField,
-	findKeyPath,
-	flattenObject,
-	getFieldAttributes,
-} from './utils';
-
-import './TableView.styles.scss';
-
-interface TableViewProps {
-	logData: ILog;
-	fieldSearchInput: string;
-	selectedOptions: OptionsQuery;
-	isListViewPanel?: boolean;
-	listViewPanelSelectedFields?: IField[] | null;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
-
-type Props = TableViewProps &
-	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
-	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
-
-function TableView({
-	logData,
-	fieldSearchInput,
-	onAddToQuery,
-	onClickActionItem,
-	isListViewPanel = false,
-	selectedOptions,
-	listViewPanelSelectedFields,
-	handleChangeSelectedView,
-}: Props): JSX.Element | null {
-	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
-	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
-	const isDarkMode = useIsDarkMode();
-
-	const [pinnedAttributes, setPinnedAttributes] = useState<
-		Record<string, boolean>
-	>({});
-
-	useEffect(() => {
-		const pinnedAttributes: Record<string, boolean> = {};
-
-		if (isListViewPanel) {
-			listViewPanelSelectedFields?.forEach((val) => {
-				const path = findKeyPath(logData, val.name, '');
-				if (path) {
-					pinnedAttributes[path] = true;
-				}
-			});
-		} else {
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			selectedOptions.selectColumns.forEach((val) => {
-				const path = findKeyPath(logData, val.name, '');
-				if (path) {
-					pinnedAttributes[path] = true;
-				}
-			});
-		}
-		// pin trace_id by default when present
-		if (logData?.trace_id) {
-			pinnedAttributes.trace_id = true;
-		}
-
-		setPinnedAttributes(pinnedAttributes);
-	}, [
-		logData,
-		selectedOptions.selectColumns,
-		listViewPanelSelectedFields,
-		isListViewPanel,
-	]);
-
-	// When USE_JSON_BODY is enabled, body arrives as a pre-parsed object. Serialize it
-	// back to a string so flattenObject keeps `body` as a single table row instead of
-	// recursively expanding it into dotted sub-keys (body.message, body.foo.bar, …),
-	// which would break the tree view in BodyContent that relies on record.field === 'body'.
-	const flattenLogData: Record<string, string> | null = useMemo(() => {
-		if (!logData) {
-			return null;
-		}
-		const normalizedLog =
-			typeof logData.body === 'object' && logData.body !== null
-				? { ...logData, body: JSON.stringify(logData.body) }
-				: logData;
-		return flattenObject(normalizedLog);
-	}, [logData]);
-
-	const handleClick = (
-		operator: string,
-		fieldKey: string,
-		fieldValue: string,
-		dataType: string | undefined,
-		fieldType: string | undefined,
-	): void => {
-		const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
-		if (onClickActionItem) {
-			onClickActionItem(
-				fieldKey,
-				validatedFieldValue,
-				operator,
-				dataType as DataTypes,
-				fieldType,
-			);
-		}
-	};
-
-	const onClickHandler =
-		(
-			operator: string,
-			fieldKey: string,
-			fieldValue: string,
-			dataType: string | undefined,
-			fieldType: MetricsType | undefined,
-		) =>
-		(): void => {
-			handleClick(operator, fieldKey, fieldValue, dataType, fieldType);
-			if (operator === OPERATORS['=']) {
-				setIsFilterInLoading(true);
-			}
-			if (operator === OPERATORS['!=']) {
-				setIsFilterOutLoading(true);
-			}
-		};
-
-	if (logData === null) {
-		return null;
-	}
-
-	const dataSource =
-		flattenLogData !== null &&
-		Object.keys(flattenLogData)
-			.filter((field) => fieldSearchFilter(field, fieldSearchInput))
-			.map((key) => ({
-				key,
-				field: key,
-				value: JSON.stringify(flattenLogData[key]),
-			}));
-
-	const onTraceHandler = (
-		record: DataType,
-		event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-	): void => {
-		if (flattenLogData === null) {
-			return;
-		}
-
-		const traceId = flattenLogData[record.field];
-
-		const spanId = flattenLogData?.span_id;
-
-		if (traceId) {
-			const basePath = generatePath(ROUTES.TRACE_DETAIL, {
-				id: traceId,
-			});
-
-			const route = spanId ? `${basePath}?spanId=${spanId}` : basePath;
-
-			if (event.ctrlKey || event.metaKey) {
-				// open the trace in new tab
-				openInNewTab(route);
-			} else {
-				history.push(route);
-			}
-		}
-	};
-
-	if (!dataSource) {
-		return null;
-	}
-
-	const columns: ColumnsType<DataType> = [
-		{
-			title: '',
-			dataIndex: 'pin',
-			key: 'pin',
-			width: 5,
-			align: 'left',
-			className: 'attribute-pin value-field-container',
-			render: (fieldData: Record<string, string>, record): JSX.Element => {
-				let pinColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500;
-
-				if (pinnedAttributes[record?.key]) {
-					pinColor = Color.BG_ROBIN_500;
-				}
-
-				return (
-					<div className="log-attribute-pin value-field">
-						<div
-							className={cx(
-								'pin-attribute-icon',
-								pinnedAttributes[record?.key] ? 'pinned' : '',
-							)}
-						>
-							{pinnedAttributes[record?.key] && <Pin size={14} color={pinColor} />}
-						</div>
-					</div>
-				);
-			},
-		},
-		{
-			title: 'Field',
-			dataIndex: 'field',
-			key: 'field',
-			width: 50,
-			align: 'left',
-			ellipsis: true,
-			className: 'attribute-name',
-			render: (field: string, record): JSX.Element => {
-				const renderedField = <FieldRenderer field={field} />;
-
-				if (record.field === 'trace_id') {
-					const traceId = flattenLogData[record.field];
-
-					return (
-						<Space size="middle" className="log-attribute">
-							<Typography.Text>{renderedField}</Typography.Text>
-
-							{traceId && (
-								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
-									<Button
-										className="periscope-btn"
-										onClick={(
-											event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-										): void => {
-											onTraceHandler(record, event);
-										}}
-									>
-										<Link size={15} />
-									</Button>
-								</Tooltip>
-							)}
-						</Space>
-					);
-				}
-
-				const fieldFilterKey = filterKeyForField(field);
-				const { dataType } = getFieldAttributes(field);
-				if (!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey)) {
-					return (
-						<AddToQueryHOC
-							fieldKey={fieldFilterKey}
-							fieldValue={flattenLogData[field]}
-							onAddToQuery={onAddToQuery}
-							fontSize={FontSize.SMALL}
-							dataType={dataType as DataTypes}
-						>
-							{renderedField}
-						</AddToQueryHOC>
-					);
-				}
-				return renderedField;
-			},
-		},
-		{
-			title: 'Value',
-			key: 'value',
-			width: 70,
-			ellipsis: false,
-			className: 'value-field-container attribute-value',
-			render: (fieldData: Record<string, string>, record): JSX.Element => (
-				<TableViewActions
-					fieldData={fieldData}
-					record={record}
-					isListViewPanel={isListViewPanel}
-					isfilterInLoading={isfilterInLoading}
-					isfilterOutLoading={isfilterOutLoading}
-					onClickHandler={onClickHandler}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			),
-		},
-	];
-	function sortPinnedAttributes(
-		data: Record<string, string>[],
-		sortingObj: Record<string, boolean>,
-	): Record<string, string>[] {
-		const sortingKeys = Object.keys(sortingObj);
-		return data.sort((a, b) => {
-			const aKey = a.key;
-			const bKey = b.key;
-			const aSortIndex = sortingKeys.indexOf(aKey);
-			const bSortIndex = sortingKeys.indexOf(bKey);
-
-			if (sortingObj[aKey] && !sortingObj[bKey]) {
-				return -1;
-			}
-			if (!sortingObj[aKey] && sortingObj[bKey]) {
-				return 1;
-			}
-			return aSortIndex - bSortIndex;
-		});
-	}
-
-	const sortedAttributes = sortPinnedAttributes(dataSource, pinnedAttributes);
-
-	return (
-		<ResizeTable
-			columns={columns}
-			tableLayout="fixed"
-			dataSource={sortedAttributes}
-			pagination={false}
-			showHeader={false}
-			className="attribute-table-container"
-		/>
-	);
-}
-
-TableView.defaultProps = {
-	isListViewPanel: false,
-	listViewPanelSelectedFields: null,
-	handleChangeSelectedView: undefined,
-};
-
-export interface DataType {
-	key: string;
-	field: string;
-	value: string;
-}
-
-export default TableView;

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -1,62 +0,0 @@
-.open-popover {
-	&.value-field {
-		.action-btn {
-			display: flex !important;
-			position: absolute !important;
-			top: 50% !important;
-			right: 16px !important;
-			transform: translateY(-50%) !important;
-			gap: 4px !important;
-		}
-	}
-}
-
-.selectable-tree {
-	.ant-tree-node-content-wrapper {
-		user-select: text !important;
-		cursor: text !important;
-		min-width: 0;
-	}
-
-	.ant-tree-title {
-		user-select: text !important;
-		cursor: text !important;
-		overflow-wrap: anywhere;
-	}
-}
-
-.table-view-actions-content {
-	.ant-popover-inner {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 0px;
-		.more-filter-actions {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: normal;
-			letter-spacing: 0.14px;
-			padding: 12px 18px 12px 14px;
-
-			.ant-btn-icon {
-				margin-inline-end: 0px;
-			}
-		}
-
-		.more-filter-actions:hover {
-			background-color: unset !important;
-		}
-	}
-}

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -1,532 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
-import type { DataNode } from 'antd/es/tree';
-import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
-import cx from 'classnames';
-import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { OPERATORS } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { MetricsType } from 'container/MetricsApplication/constant';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
-import {
-	ArrowDownToDot,
-	ArrowUpFromDot,
-	Ellipsis,
-	RefreshCw,
-} from '@signozhq/icons';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import { useTimezone } from 'providers/Timezone';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-import { RESTRICTED_SELECTED_FIELDS } from '../config';
-import { DataType } from '../TableView';
-import {
-	filterKeyForField,
-	getFieldAttributes,
-	getSanitizedLogBody,
-	parseFieldValue,
-	removeEscapeCharacters,
-} from '../utils';
-import useAsyncJSONProcessing from './useAsyncJSONProcessing';
-
-import './TableViewActions.styles.scss';
-
-interface ITableViewActionsProps {
-	fieldData: Record<string, string>;
-	record: DataType;
-	isListViewPanel: boolean;
-	isfilterInLoading: boolean;
-	isfilterOutLoading: boolean;
-	onClickHandler: (
-		operator: string,
-		fieldKey: string,
-		fieldValue: string,
-		dataType: string | undefined,
-		logType: MetricsType | undefined,
-	) => () => void;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
-
-// Memoized Tree Component
-const MemoizedTree = React.memo<{ treeData: DataNode[] }>(({ treeData }) => (
-	<Tree
-		defaultExpandAll
-		showLine
-		treeData={treeData}
-		className="selectable-tree"
-	/>
-));
-
-MemoizedTree.displayName = 'MemoizedTree';
-
-// Body Content Component
-const BodyContent: React.FC<{
-	fieldData: Record<string, string>;
-	record: DataType;
-	bodyHtml: { __html: string };
-	textToCopy: string;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}> = React.memo(
-	({ fieldData, record, bodyHtml, textToCopy, handleChangeSelectedView }) => {
-		const { isLoading, treeData, error } = useAsyncJSONProcessing(
-			fieldData.value,
-			record.field === 'body',
-			handleChangeSelectedView,
-		);
-
-		// Show JSON tree if available, otherwise show HTML content
-		if (record.field === 'body' && treeData) {
-			return <MemoizedTree treeData={treeData} />;
-		}
-
-		if (record.field === 'body' && isLoading) {
-			return (
-				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Spin size="small" />
-					<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
-				</div>
-			);
-		}
-
-		if (record.field === 'body' && error) {
-			return (
-				<span
-					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-				>
-					Error parsing Body JSON
-				</span>
-			);
-		}
-
-		if (record.field === 'body') {
-			return (
-				<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
-					<span
-						style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-					>
-						<span dangerouslySetInnerHTML={bodyHtml} />
-					</span>
-				</CopyClipboardHOC>
-			);
-		}
-
-		return null;
-	},
-);
-
-BodyContent.displayName = 'BodyContent';
-
-export default function TableViewActions(
-	props: ITableViewActionsProps,
-): React.ReactElement {
-	const {
-		fieldData,
-		record,
-		isListViewPanel,
-		isfilterInLoading,
-		isfilterOutLoading,
-		onClickHandler,
-		handleChangeSelectedView,
-	} = props;
-
-	const { pathname } = useLocation();
-	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
-
-	// there is no option for where clause in live logs page or infra monitoring
-	const isLiveLogsOrInfraPage = useMemo(
-		() =>
-			pathname === ROUTES.LIVE_LOGS ||
-			pathname === ROUTES.INFRASTRUCTURE_MONITORING_HOSTS ||
-			pathname === ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		[pathname],
-	);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	// Memoize bodyHtml computation
-	const bodyHtml = useMemo(() => {
-		if (record.field !== 'body') {
-			return { __html: '' };
-		}
-
-		return {
-			__html: getSanitizedLogBody(record.value, { shouldEscapeHtml: true }),
-		};
-	}, [record.field, record.value]);
-
-	const fieldFilterKey = filterKeyForField(fieldData.field);
-
-	const handleGroupByAttribute = useCallback((): void => {
-		if (!stagedQuery) {
-			return;
-		}
-		const normalizedDataType: DataTypes | undefined =
-			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
-				? (dataType as DataTypes)
-				: undefined;
-
-		const updatedQuery = updateQueriesData(
-			stagedQuery,
-			'queryData',
-			(item, index) => {
-				// Only add groupBy for index 0
-				if (index === 0) {
-					const newGroupByItem: BaseAutocompleteData = {
-						key: fieldFilterKey,
-						type: fieldType || '',
-						dataType: normalizedDataType,
-					};
-
-					const updatedGroupBy = [...(item.groupBy || []), newGroupByItem];
-
-					return { ...item, groupBy: updatedGroupBy };
-				}
-
-				return item;
-			},
-		);
-
-		const queryData: ICurrentQueryData = {
-			query: updatedQuery,
-		};
-
-		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
-	}, [
-		stagedQuery,
-		updateQueriesData,
-		fieldFilterKey,
-		fieldType,
-		dataType,
-		handleChangeSelectedView,
-	]);
-
-	const handleReplaceFilter = useCallback((): void => {
-		if (!stagedQuery) {
-			return;
-		}
-		const normalizedDataType: DataTypes | undefined =
-			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
-				? (dataType as DataTypes)
-				: undefined;
-
-		const updatedQuery = updateQueriesData(
-			stagedQuery,
-			'queryData',
-			(item, index) => {
-				// Only replace filters for index 0
-				if (index === 0) {
-					const newFilterItem: BaseAutocompleteData = {
-						key: fieldFilterKey,
-						type: fieldType || '',
-						dataType: normalizedDataType,
-					};
-
-					// Create new filter items array with single IN filter
-					const newFilters = {
-						items: [
-							{
-								id: '',
-								key: newFilterItem,
-								op: OPERATORS.IN,
-								value: [parseFieldValue(fieldData.value)],
-							},
-						],
-						op: 'AND',
-					};
-
-					// Clear the expression and update filters
-					return {
-						...item,
-						filters: newFilters,
-						filter: { expression: '' },
-					};
-				}
-
-				return item;
-			},
-		);
-
-		const queryData: ICurrentQueryData = {
-			query: updatedQuery,
-		};
-
-		handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
-	}, [
-		stagedQuery,
-		updateQueriesData,
-		fieldFilterKey,
-		fieldType,
-		dataType,
-		fieldData,
-		handleChangeSelectedView,
-	]);
-
-	// Memoize textToCopy computation
-	const textToCopy = useMemo(() => {
-		let text = fieldData.value;
-		try {
-			text = text.replace(/^"|"$/g, '');
-		} catch (error) {
-			console.error(
-				'Failed to remove starting and ending quotes from the value',
-				error,
-			);
-		}
-		// If the value is valid JSON (object or array), pretty-print it for copying
-		try {
-			const parsed = JSON.parse(text);
-			if (typeof parsed === 'object' && parsed !== null) {
-				return JSON.stringify(parsed, null, 2);
-			}
-		} catch {
-			// not JSON, return as-is
-		}
-		return text;
-	}, [fieldData.value]);
-
-	// Memoize cleanTimestamp computation
-	const cleanTimestamp = useMemo(() => {
-		if (record.field !== 'timestamp') {
-			return '';
-		}
-		return fieldData.value.replace(/^["']|["']$/g, '');
-	}, [record.field, fieldData.value]);
-
-	const renderFieldContent = useCallback((): JSX.Element => {
-		const commonStyles: React.CSSProperties = {
-			color: Color.BG_SIENNA_400,
-			whiteSpace: 'pre-wrap',
-			tabSize: 4,
-		};
-
-		switch (record.field) {
-			case 'body':
-				return (
-					<BodyContent
-						fieldData={fieldData}
-						record={record}
-						bodyHtml={bodyHtml}
-						textToCopy={textToCopy}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				);
-
-			case 'timestamp':
-				return (
-					<span style={commonStyles}>
-						{formatTimezoneAdjustedTimestamp(
-							cleanTimestamp,
-							DATE_TIME_FORMATS.UTC_US_MS,
-						)}
-					</span>
-				);
-
-			default:
-				return (
-					<span style={commonStyles}>{removeEscapeCharacters(fieldData.value)}</span>
-				);
-		}
-	}, [
-		record,
-		fieldData,
-		bodyHtml,
-		textToCopy,
-		handleChangeSelectedView,
-		formatTimezoneAdjustedTimestamp,
-		cleanTimestamp,
-	]);
-
-	// Early return for body field with async processing
-	if (record.field === 'body') {
-		return (
-			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
-				<BodyContent
-					fieldData={fieldData}
-					record={record}
-					bodyHtml={bodyHtml}
-					textToCopy={textToCopy}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-				{!isListViewPanel &&
-					!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
-						<span className="action-btn">
-							<Tooltip title="Filter for value" mouseLeaveDelay={0}>
-								<Button
-									className="filter-btn periscope-btn"
-									icon={
-										isfilterInLoading ? (
-											<Spin size="small" />
-										) : (
-											<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
-										)
-									}
-									onClick={onClickHandler(
-										OPERATORS['='],
-										fieldFilterKey,
-										parseFieldValue(fieldData.value),
-										dataType,
-										fieldType,
-									)}
-								/>
-							</Tooltip>
-							<Tooltip title="Filter out value" mouseLeaveDelay={0}>
-								<Button
-									className="filter-btn periscope-btn"
-									icon={
-										isfilterOutLoading ? (
-											<Spin size="small" />
-										) : (
-											<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
-										)
-									}
-									onClick={onClickHandler(
-										OPERATORS['!='],
-										fieldFilterKey,
-										parseFieldValue(fieldData.value),
-										dataType,
-										fieldType,
-									)}
-								/>
-							</Tooltip>
-							{!isLiveLogsOrInfraPage && (
-								<Popover
-									open={isOpen}
-									onOpenChange={setIsOpen}
-									arrow={false}
-									content={
-										<div data-log-detail-ignore="true">
-											<Button
-												className="more-filter-actions"
-												type="text"
-												icon={<GroupByIcon />}
-												onClick={handleGroupByAttribute}
-											>
-												Group By Attribute
-											</Button>
-											<Button
-												className="more-filter-actions"
-												type="text"
-												icon={<RefreshCw size={14} />}
-												onClick={handleReplaceFilter}
-											>
-												Replace filters with this value
-											</Button>
-										</div>
-									}
-									rootClassName="table-view-actions-content"
-									trigger="hover"
-									placement="bottomLeft"
-								>
-									<Button
-										icon={<Ellipsis size={14} />}
-										className="filter-btn periscope-btn"
-									/>
-								</Popover>
-							)}
-						</span>
-					)}
-			</div>
-		);
-	}
-
-	return (
-		<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
-			<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
-				{renderFieldContent()}
-			</CopyClipboardHOC>
-			{!isListViewPanel &&
-				!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
-					<span className="action-btn">
-						<Tooltip title="Filter for value" mouseLeaveDelay={0}>
-							<Button
-								className="filter-btn periscope-btn"
-								icon={
-									isfilterInLoading ? (
-										<Spin size="small" />
-									) : (
-										<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
-									)
-								}
-								onClick={onClickHandler(
-									OPERATORS['='],
-									fieldFilterKey,
-									parseFieldValue(fieldData.value),
-									dataType,
-									fieldType,
-								)}
-							/>
-						</Tooltip>
-						<Tooltip title="Filter out value" mouseLeaveDelay={0}>
-							<Button
-								className="filter-btn periscope-btn"
-								icon={
-									isfilterOutLoading ? (
-										<Spin size="small" />
-									) : (
-										<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
-									)
-								}
-								onClick={onClickHandler(
-									OPERATORS['!='],
-									fieldFilterKey,
-									parseFieldValue(fieldData.value),
-									dataType,
-									fieldType,
-								)}
-							/>
-						</Tooltip>
-						{!isLiveLogsOrInfraPage && (
-							<Popover
-								open={isOpen}
-								onOpenChange={setIsOpen}
-								arrow={false}
-								content={
-									<div data-log-detail-ignore="true">
-										<Button
-											className="more-filter-actions"
-											type="text"
-											icon={<GroupByIcon />}
-											onClick={handleGroupByAttribute}
-										>
-											Group By Attribute
-										</Button>
-										<Button
-											className="more-filter-actions"
-											type="text"
-											icon={<RefreshCw size={14} />}
-											onClick={handleReplaceFilter}
-										>
-											Replace filters with this value
-										</Button>
-									</div>
-								}
-								rootClassName="table-view-actions-content"
-								trigger="hover"
-								placement="bottomLeft"
-							>
-								<Button
-									icon={<Ellipsis size={14} />}
-									className="filter-btn periscope-btn"
-								/>
-							</Popover>
-						)}
-					</span>
-				)}
-		</div>
-	);
-}
-
-TableViewActions.defaultProps = {
-	handleChangeSelectedView: undefined,
-};

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -1,366 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-
-import { RESTRICTED_SELECTED_FIELDS } from '../../config';
-import TableViewActions from '../TableViewActions';
-import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
-
-// Mock data for tests
-let mockCopyToClipboard: jest.Mock;
-let mockNotificationsSuccess: jest.Mock;
-
-// Mock the components and hooks
-jest.mock('components/Logs/CopyClipboardHOC', () => ({
-	__esModule: true,
-	default: ({
-		children,
-		textToCopy,
-		entityKey,
-	}: {
-		children: React.ReactNode;
-		textToCopy: string;
-		entityKey: string;
-	}): JSX.Element => (
-		<div
-			className="CopyClipboardHOC"
-			data-testid={`copy-clipboard-${entityKey}`}
-			data-text-to-copy={textToCopy}
-			onClick={(): void => {
-				if (mockCopyToClipboard) {
-					mockCopyToClipboard(textToCopy);
-				}
-				if (mockNotificationsSuccess) {
-					mockNotificationsSuccess({
-						message: `${entityKey} copied to clipboard`,
-						key: `${entityKey} copied to clipboard`,
-					});
-				}
-			}}
-			role="button"
-			tabIndex={0}
-		>
-			{children}
-		</div>
-	),
-}));
-
-jest.mock('../useAsyncJSONProcessing', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('antd', () => {
-	const antd = jest.requireActual('antd');
-	return {
-		...antd,
-		// Render popover content inline to make its children testable
-		Popover: ({ content, children }: any): JSX.Element => (
-			<div data-testid="popover">
-				<div data-testid="popover-content">{content}</div>
-				{children}
-			</div>
-		),
-	};
-});
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): {
-		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
-	} => ({
-		formatTimezoneAdjustedTimestamp: (timestamp: string): string => timestamp,
-	}),
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): {
-		pathname: string;
-		search: string;
-		hash: string;
-		state: null;
-	} => ({
-		pathname: '/test',
-		search: '',
-		hash: '',
-		state: null,
-	}),
-}));
-
-jest.mock('hooks/queryBuilder/useQueryBuilder');
-jest.mock('hooks/saveViews/useGetSavedViewParams');
-
-describe('TableViewActions', () => {
-	const TEST_VALUE = 'test value';
-	const TEST_FIELD = 'test-field';
-	const ACTION_BUTTON_TEST_ID = '.action-btn';
-	const defaultProps = {
-		fieldData: {
-			field: TEST_FIELD,
-			value: TEST_VALUE,
-		},
-		record: {
-			key: 'test-key',
-			field: TEST_FIELD,
-			value: TEST_VALUE,
-		},
-		isListViewPanel: false,
-		isfilterInLoading: false,
-		isfilterOutLoading: false,
-		onClickHandler: jest.fn(),
-		handleChangeSelectedView: jest.fn(),
-	};
-
-	beforeEach(() => {
-		mockCopyToClipboard = jest.fn();
-		mockNotificationsSuccess = jest.fn();
-		defaultProps.onClickHandler = jest.fn();
-		defaultProps.handleChangeSelectedView = jest.fn();
-
-		// Default mock for useAsyncJSONProcessing
-		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
-		mockUseAsyncJSONProcessing.mockReturnValue({
-			isLoading: false,
-			treeData: null,
-			error: null,
-		});
-
-		// Default mock for useQueryBuilder
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: null,
-			updateQueriesData: jest.fn((query, type, callback) => {
-				const updatedBuilder = {
-					...query.builder,
-					[type]: query.builder[type].map(callback),
-				};
-				return {
-					...query,
-					builder: updatedBuilder,
-				};
-			}),
-		} as any);
-
-		// Default mock for useGetSavedViewParams
-		jest
-			.mocked(useGetSavedViewParams)
-			.mockReturnValue({ viewName: '', viewKey: '' });
-	});
-
-	it('should render without crashing', () => {
-		render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel={defaultProps.isListViewPanel}
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-		expect(screen.getByText(TEST_VALUE)).toBeInTheDocument();
-	});
-
-	it('should not render action buttons for restricted fields', () => {
-		RESTRICTED_SELECTED_FIELDS.forEach((field) => {
-			const { container } = render(
-				<TableViewActions
-					fieldData={{
-						...defaultProps.fieldData,
-						field,
-					}}
-					record={{
-						...defaultProps.record,
-						field,
-					}}
-					isListViewPanel={defaultProps.isListViewPanel}
-					isfilterInLoading={defaultProps.isfilterInLoading}
-					isfilterOutLoading={defaultProps.isfilterOutLoading}
-					onClickHandler={defaultProps.onClickHandler}
-					handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-				/>,
-			);
-			// Verify that action buttons are not rendered for restricted fields
-			expect(
-				container.querySelector(ACTION_BUTTON_TEST_ID),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	it('should render action buttons for non-restricted fields', () => {
-		const { container } = render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel={defaultProps.isListViewPanel}
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-		// Verify that action buttons are rendered for non-restricted fields
-		expect(container.querySelector(ACTION_BUTTON_TEST_ID)).toBeInTheDocument();
-	});
-
-	it('should call handleChangeSelectedView when clicking group by', () => {
-		const mockStagedQuery = {
-			id: 'test-query-id',
-			queryType: 'queryBuilder',
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						dataSource: 'logs',
-						aggregateOperator: 'count',
-						functions: [],
-						filter: {},
-						groupBy: [],
-						expression: '',
-						disabled: false,
-						having: [],
-						limit: null,
-						stepInterval: null,
-						orderBy: [],
-						legend: '',
-					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			promql: [],
-			clickhouse_sql: [],
-		};
-
-		const mockUpdateQueriesData = jest.fn((query, type, callback) => {
-			const section = query.builder?.[type];
-			if (!Array.isArray(section)) {
-				return query;
-			}
-			return {
-				...query,
-				builder: {
-					...query.builder,
-					[type]: section.map(callback),
-				},
-			};
-		});
-
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: mockStagedQuery,
-			updateQueriesData: mockUpdateQueriesData,
-		} as any);
-
-		jest
-			.mocked(useGetSavedViewParams)
-			.mockReturnValue({ viewName: '', viewKey: '' });
-
-		render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel={defaultProps.isListViewPanel}
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-
-		fireEvent.click(screen.getByText('Group By Attribute'));
-
-		expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith(
-			ExplorerViews.TIMESERIES,
-			expect.objectContaining({
-				query: expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								groupBy: expect.arrayContaining([
-									expect.objectContaining({
-										key: TEST_FIELD,
-										type: '',
-									}),
-								]),
-							}),
-						]),
-					}),
-				}),
-			}),
-		);
-	});
-
-	it('should not render action buttons in list view panel', () => {
-		const { container } = render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-		// Verify that action buttons are not rendered in list view panel
-		expect(
-			container.querySelector(ACTION_BUTTON_TEST_ID),
-		).not.toBeInTheDocument();
-	});
-
-	it('should copy non-JSON body text without quotes when user clicks on body', () => {
-		// Setup: body field with surrounding quotes
-		const bodyValueWithQuotes =
-			'"FeatureFlag \'kafkaQueueProblems\' is enabled, sleeping 1 second"';
-		const expectedCopiedText =
-			"FeatureFlag 'kafkaQueueProblems' is enabled, sleeping 1 second";
-
-		const bodyProps = {
-			fieldData: {
-				field: 'body',
-				value: bodyValueWithQuotes,
-			},
-			record: {
-				key: 'body-key',
-				field: 'body',
-				value: bodyValueWithQuotes,
-			},
-			isListViewPanel: false,
-			isfilterInLoading: false,
-			isfilterOutLoading: false,
-			onClickHandler: jest.fn(),
-			handleChangeSelectedView: jest.fn(),
-		};
-
-		// Render component with body field
-		render(
-			<TableViewActions
-				fieldData={bodyProps.fieldData}
-				record={bodyProps.record}
-				isListViewPanel={bodyProps.isListViewPanel}
-				isfilterInLoading={bodyProps.isfilterInLoading}
-				isfilterOutLoading={bodyProps.isfilterOutLoading}
-				onClickHandler={bodyProps.onClickHandler}
-				handleChangeSelectedView={bodyProps.handleChangeSelectedView}
-			/>,
-		);
-
-		// Find the clickable copy area for body
-		const copyArea = screen.getByTestId('copy-clipboard-body');
-
-		// Verify it has the correct text to copy (without quotes)
-		expect(copyArea).toHaveAttribute('data-text-to-copy', expectedCopiedText);
-
-		// Action: User clicks on body content
-		fireEvent.click(copyArea);
-
-		// Assert: Text was copied without surrounding quotes
-		expect(mockCopyToClipboard).toHaveBeenCalledWith(expectedCopiedText);
-
-		// Assert: Success notification shown
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'body copied to clipboard',
-			key: 'body copied to clipboard',
-		});
-	});
-});

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -1,129 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { FeatureKeys } from 'constants/features';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-
-import { jsonToDataNodes, recursiveParseJSON } from '../utils';
-
-const MAX_BODY_BYTES = 100 * 1024; // 100 KB
-
-// Hook for async JSON processing
-const useAsyncJSONProcessing = (
-	value: string | Record<string, unknown>,
-	shouldProcess: boolean,
-	handleChangeSelectedView?: ChangeViewFunctionType,
-): {
-	isLoading: boolean;
-	treeData: any[] | null;
-	error: string | null;
-} => {
-	const [jsonState, setJsonState] = useState<{
-		isLoading: boolean;
-		treeData: any[] | null;
-		error: string | null;
-	}>({
-		isLoading: false,
-		treeData: null,
-		error: null,
-	});
-
-	const processingRef = useRef<boolean>(false);
-	const { featureFlags } = useAppContext();
-	const isBodyJsonQueryEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
-			?.active || false;
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	useEffect((): (() => void) => {
-		if (!shouldProcess || processingRef.current) {
-			return (): void => {};
-		}
-
-		// When value is already a parsed object skip the size check and JSON parsing
-		const parseBody = (): Record<string, unknown> | null => {
-			if (typeof value === 'object' && value !== null) {
-				return value as Record<string, unknown>;
-			}
-			const byteSize = new Blob([value as string]).size;
-			if (byteSize > MAX_BODY_BYTES) {
-				return null;
-			}
-			return recursiveParseJSON(value as string);
-		};
-
-		processingRef.current = true;
-		setJsonState({ isLoading: true, treeData: null, error: null });
-
-		// Option 1: Using setTimeout for non-blocking processing
-		const processAsync = (): void => {
-			setTimeout(() => {
-				try {
-					const parsedBody = parseBody();
-					if (parsedBody && !isEmpty(parsedBody)) {
-						const treeData = jsonToDataNodes(parsedBody, {
-							isBodyJsonQueryEnabled,
-							handleChangeSelectedView,
-						});
-						setJsonState({ isLoading: false, treeData, error: null });
-					} else {
-						setJsonState({ isLoading: false, treeData: null, error: null });
-					}
-				} catch (error) {
-					setJsonState({
-						isLoading: false,
-						treeData: null,
-						error: error instanceof Error ? error.message : 'Parsing failed',
-					});
-				} finally {
-					processingRef.current = false;
-				}
-			}, 0);
-		};
-
-		// Option 2: Using requestIdleCallback for better performance
-		const processWithIdleCallback = (): void => {
-			if ('requestIdleCallback' in window) {
-				requestIdleCallback(
-					// eslint-disable-next-line sonarjs/no-identical-functions
-					(): void => {
-						try {
-							const parsedBody = parseBody();
-							if (parsedBody && !isEmpty(parsedBody)) {
-								const treeData = jsonToDataNodes(parsedBody, {
-									isBodyJsonQueryEnabled,
-									handleChangeSelectedView,
-								});
-								setJsonState({ isLoading: false, treeData, error: null });
-							} else {
-								setJsonState({ isLoading: false, treeData: null, error: null });
-							}
-						} catch (error) {
-							setJsonState({
-								isLoading: false,
-								treeData: null,
-								error: error instanceof Error ? error.message : 'Parsing failed',
-							});
-						} finally {
-							processingRef.current = false;
-						}
-					},
-					{ timeout: 1000 },
-				);
-			} else {
-				processAsync();
-			}
-		};
-
-		processWithIdleCallback();
-
-		// Cleanup function
-		return (): void => {
-			processingRef.current = false;
-		};
-	}, [value, shouldProcess, isBodyJsonQueryEnabled, handleChangeSelectedView]);
-
-	return jsonState;
-};
-
-export default useAsyncJSONProcessing;

frontend/src/container/LogDetailedView/__tests__/BodyTitleRenderer.test.tsx

@@ -1,108 +0,0 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import BodyTitleRenderer from '../BodyTitleRenderer';
-
-let mockSetCopy: jest.Mock;
-const mockNotification = jest.fn();
-
-jest.mock('hooks/logs/useActiveLog', () => ({
-	useActiveLog: (): any => ({
-		onAddToQuery: jest.fn(),
-	}),
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): any => {
-		mockSetCopy = jest.fn();
-		return [{ value: null }, mockSetCopy];
-	},
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({
-		notifications: {
-			success: mockNotification,
-			error: jest.fn(),
-			info: jest.fn(),
-			warning: jest.fn(),
-			open: jest.fn(),
-			destroy: jest.fn(),
-		},
-	}),
-}));
-
-describe('BodyTitleRenderer', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should copy primitive value when node is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<BodyTitleRenderer
-				title="name"
-				nodeKey="user.name"
-				value="John"
-				parentIsArray={false}
-			/>,
-		);
-
-		await user.click(screen.getByText('name'));
-
-		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('John');
-			expect(mockNotification).toHaveBeenCalledWith(
-				expect.objectContaining({
-					message: expect.stringContaining('user.name'),
-				}),
-			);
-		});
-	});
-
-	it('should copy array element value when clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<BodyTitleRenderer
-				title="0"
-				nodeKey="items[*].0"
-				value="arrayElement"
-				parentIsArray
-			/>,
-		);
-
-		await user.click(screen.getByText('0'));
-
-		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('arrayElement');
-		});
-	});
-
-	it('should copy entire object when object node is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const testObject = { id: 123, active: true };
-
-		render(
-			<BodyTitleRenderer
-				title="metadata"
-				nodeKey="user.metadata"
-				value={testObject}
-				parentIsArray={false}
-			/>,
-		);
-
-		await user.click(screen.getByText('metadata'));
-
-		await waitFor(() => {
-			const callArg = mockSetCopy.mock.calls[0][0];
-			const expectedJson = JSON.stringify(testObject, null, 2);
-			expect(callArg).toBe(expectedJson);
-			expect(mockNotification).toHaveBeenCalledWith(
-				expect.objectContaining({
-					message: expect.stringContaining('object copied'),
-				}),
-			);
-		});
-	});
-});

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
-import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
@@ -53,7 +51,6 @@ export function useLogAttributeActions({
 	isListViewPanel = false,
 	onApplyLogFilter,
 }: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
-	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { featureFlags } = useAppContext();
 
@@ -61,8 +58,6 @@ export function useLogAttributeActions({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
 			?.active || false;
 
-	const isLiveLogs = pathname === ROUTES.LIVE_LOGS;
-
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
 			const target = buildLogFilterTarget(
@@ -219,8 +214,7 @@ export function useLogAttributeActions({
 				shouldHide: (_key, fieldKeyPath): boolean =>
 					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-						.groupBySupported ||
-					isLiveLogs,
+						.groupBySupported,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -228,7 +222,7 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView || isRestricted(fieldKeyPath) || isLiveLogs,
+					!handleChangeSelectedView || isRestricted(fieldKeyPath),
 			},
 		];
 	}, [
@@ -236,7 +230,6 @@ export function useLogAttributeActions({
 		groupBy,
 		replaceFilter,
 		isBodyJsonQueryEnabled,
-		isLiveLogs,
 		handleChangeSelectedView,
 		onApplyLogFilter,
 	]);

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,10 +1,7 @@
 import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
-import type { DataNode } from 'antd/es/tree';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
-import { uniqueId } from 'lodash-es';
 import {
 	ILog,
 	ILogAggregateAttributesResources,
@@ -13,7 +10,6 @@ import {
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
-import BodyTitleRenderer from './BodyTitleRenderer';
 import { typeToArrayTypeMapper } from './config';
 import { AnyObject, IFieldAttributes } from './LogDetailedView.types';
 
@@ -40,135 +36,6 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	}
 };
 
-type JsonToDataNodesOptions = {
-	parentKey?: string;
-	parentIsArray?: boolean;
-	isBodyJsonQueryEnabled?: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-};
-
-type ComputeDataNodeOptions = {
-	key: string;
-	valueIsArray: boolean;
-	value: unknown;
-	nodeKey: string;
-	parentIsArray: boolean;
-	isBodyJsonQueryEnabled?: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
-};
-
-export const computeDataNode = ({
-	key,
-	valueIsArray,
-	value,
-	nodeKey,
-	parentIsArray,
-	isBodyJsonQueryEnabled = false,
-	handleChangeSelectedView,
-}: ComputeDataNodeOptions): DataNode => ({
-	key: uniqueId(),
-	title: (
-		<BodyTitleRenderer
-			title={`${key} ${valueIsArray ? '[...]' : ''}`}
-			nodeKey={nodeKey}
-			value={value}
-			parentIsArray={parentIsArray}
-			handleChangeSelectedView={handleChangeSelectedView}
-		/>
-	),
-	children: jsonToDataNodes(value as Record<string, unknown>, {
-		parentKey: valueIsArray
-			? `${nodeKey}${isBodyJsonQueryEnabled ? '[]' : '[*]'}`
-			: nodeKey,
-		parentIsArray: valueIsArray,
-		isBodyJsonQueryEnabled,
-		handleChangeSelectedView,
-	}),
-});
-
-export function jsonToDataNodes(
-	json: Record<string, unknown>,
-	options: JsonToDataNodesOptions = {},
-): DataNode[] {
-	const {
-		parentKey = '',
-		parentIsArray = false,
-		isBodyJsonQueryEnabled = false,
-		handleChangeSelectedView,
-	} = options;
-
-	return Object.entries(json).map(([key, value]) => {
-		let nodeKey = parentKey || key;
-		if (parentIsArray) {
-			nodeKey += `.${value}`;
-		} else if (parentKey) {
-			nodeKey += `.${key}`;
-		}
-
-		const valueIsArray = Array.isArray(value);
-
-		if (parentIsArray) {
-			if (typeof value === 'object' && value !== null) {
-				return computeDataNode({
-					key,
-					valueIsArray,
-					value,
-					nodeKey,
-					parentIsArray,
-					isBodyJsonQueryEnabled,
-					handleChangeSelectedView,
-				});
-			}
-
-			return {
-				key: uniqueId(),
-				title: (
-					<BodyTitleRenderer
-						title={value as string}
-						nodeKey={nodeKey}
-						value={value}
-						parentIsArray={parentIsArray}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				),
-				children: jsonToDataNodes(
-					{},
-					{
-						parentKey: nodeKey,
-						parentIsArray: valueIsArray,
-						isBodyJsonQueryEnabled,
-						handleChangeSelectedView,
-					},
-				),
-			};
-		}
-
-		if (typeof value === 'object' && value !== null) {
-			return computeDataNode({
-				key,
-				valueIsArray,
-				value,
-				nodeKey,
-				parentIsArray,
-				isBodyJsonQueryEnabled,
-				handleChangeSelectedView,
-			});
-		}
-		return {
-			key: uniqueId(),
-			title: (
-				<BodyTitleRenderer
-					title={key}
-					nodeKey={nodeKey}
-					value={value}
-					parentIsArray={parentIsArray}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			),
-		};
-	});
-}
-
 export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 	return Object.keys(obj).reduce((acc: AnyObject, k: string): AnyObject => {
 		const pre = prefix.length ? `${prefix}.` : '';
@@ -254,14 +121,6 @@ export const getFieldAttributes = (field: string): IFieldAttributes => {
 // Returns key to be used when filtering for `field` via
 // the query builder. This is useful for powering filtering
 // by field values from log details view.
-export const filterKeyForField = (field: string): string => {
-	// Must work for all 3 of the following types of cases
-	// timestamp -> timestamp
-	// attributes_string.log.file -> log.file
-	// resources_string.k8s.pod.name -> k8s.pod.name
-	const fieldAttribs = getFieldAttributes(field);
-	return fieldAttribs?.newField || field;
-};
 
 export const aggregateAttributesResourcesToObject = (
 	logData: ILog,
@@ -418,16 +277,6 @@ export const escapeHtml = (unsafe: string): string =>
 		.replace(/'/g, '&#039;');
 
 // parse field value to remove escaping characters
-export const parseFieldValue = (value: string): string => {
-	try {
-		return JSON.parse(value);
-	} catch (error) {
-		return value;
-	}
-};
-
-// now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make
-// the log line readable
 export const removeEscapeCharacters = (str: string): string =>
 	(str ?? '')
 		.replace(/\\x1[bB][[0-9;]*m/g, '')
@@ -458,10 +307,6 @@ export const unescapeString = (str: string): string =>
 			String.fromCharCode(parseInt(hex, 16)),
 		); // Replaces Unicode escape sequences
 
-export function removeExtraSpaces(input: string): string {
-	return input.replace(/\s+/g, ' ').trim();
-}
-
 export function findKeyPath(
 	obj: AnyObject,
 	targetKey: string,

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
@@ -6,7 +6,6 @@ import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
@@ -14,18 +13,18 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 function LogsActionsContainer({
 	listQuery,
-	selectedPanelType,
 	showFrequencyChart,
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
+	explorerActions,
 }: {
 	listQuery: any;
-	selectedPanelType: PANEL_TYPES;
 	showFrequencyChart: boolean;
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
+	explorerActions: ReactNode;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -60,48 +59,43 @@ function LogsActionsContainer({
 		<div className="logs-actions-container">
 			<div className="tab-options">
 				<div className="tab-options-left">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<div className="frequency-chart-view-controller">
-							<Typography>Frequency chart</Typography>
-							<Switch
-								value={showFrequencyChart}
-								defaultValue
-								onChange={handleToggleFrequencyChart}
-							/>
-						</div>
-					)}
+					<div className="frequency-chart-view-controller">
+						<Typography>Frequency chart</Typography>
+						<Switch
+							value={showFrequencyChart}
+							defaultValue
+							onChange={handleToggleFrequencyChart}
+						/>
+					</div>
 				</div>
 
 				<div className="tab-options-right">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<>
-							<div className="order-by-container">
-								<div className="order-by-label">
-									Order by <Minus size={14} /> <ArrowUp10 size={14} />
-								</div>
+					{explorerActions}
+					<div className="order-by-container">
+						<div className="order-by-label">
+							Order by <Minus size={14} /> <ArrowUp10 size={14} />
+						</div>
 
-								<ListViewOrderBy
-									value={orderBy}
-									onChange={(value): void => setOrderBy(value)}
-									dataSource={DataSource.LOGS}
-								/>
-							</div>
-							<div className="download-options-container">
-								<DownloadOptionsMenu
-									dataSource={DataSource.LOGS}
-									selectedColumns={options?.selectColumns}
-								/>
-							</div>
-							<div className="format-options-container">
-								<LogsFormatOptionsMenu
-									items={formatItems}
-									selectedOptionFormat={options.format}
-									config={config}
-									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
-								/>
-							</div>
-						</>
-					)}
+						<ListViewOrderBy
+							value={orderBy}
+							onChange={(value): void => setOrderBy(value)}
+							dataSource={DataSource.LOGS}
+						/>
+					</div>
+					<div className="download-options-container">
+						<DownloadOptionsMenu
+							dataSource={DataSource.LOGS}
+							selectedColumns={options?.selectColumns}
+						/>
+					</div>
+					<div className="format-options-container">
+						<LogsFormatOptionsMenu
+							items={formatItems}
+							selectedOptionFormat={options.format}
+							config={config}
+							onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
+						/>
+					</div>
 				</div>
 			</div>
 			{config.fieldsSelector && (

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

@@ -187,6 +187,7 @@
 					display: flex;
 					justify-content: flex-end;
 					align-items: center;
+					gap: 8px;
 					padding: 12px;
 					flex-shrink: 0;
 				}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -37,6 +37,7 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
+import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -44,6 +45,7 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
@@ -80,6 +82,7 @@ function LogsExplorerViewsContainer({
 	handleChangeSelectedView: ChangeViewFunctionType;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 
 	const [showFrequencyChart, setShowFrequencyChart] = useState(
@@ -140,6 +143,13 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
+	const explorerActions = useMemo(
+		() => (
+			<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
+		),
+		[exportDefaultQuery],
+	);
+
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -416,14 +426,14 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && (
+				{!showLiveLogs && selectedPanelType === PANEL_TYPES.LIST && (
 					<LogsActionsContainer
 						listQuery={listQuery}
-						selectedPanelType={selectedPanelType}
 						showFrequencyChart={showFrequencyChart}
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
+						explorerActions={explorerActions}
 					/>
 				)}
 
@@ -474,21 +484,23 @@ function LogsExplorerViewsContainer({
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
 								allowExport
+								headerActions={explorerActions}
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							{data && !isError && (
-								<div className="table-view-container-header">
+							<div className="table-view-container-header">
+								{explorerActions}
+								{data && !isError && (
 									<ExportMenu
 										dataSource={DataSource.LOGS}
 										data={data}
 										query={stagedQuery || initialQueriesMap.metrics}
 										fileName="logs-table"
 									/>
-								</div>
-							)}
+								)}
+							</div>
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||
@@ -506,13 +518,15 @@ function LogsExplorerViewsContainer({
 
 			<GoToTop />
 
-			<ExplorerOptionWrapper
-				disabled={!stagedQuery}
-				query={exportDefaultQuery}
-				onExport={handleExport}
-				sourcepage={DataSource.LOGS}
-				handleChangeSelectedView={handleChangeSelectedView}
-			/>
+			{!isSavedViewEnabled && (
+				<ExplorerOptionWrapper
+					disabled={!stagedQuery}
+					query={exportDefaultQuery}
+					onExport={handleExport}
+					sourcepage={DataSource.LOGS}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</div>
 	);
 }

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

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
@@ -17,6 +18,7 @@ import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashb
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -38,6 +40,7 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 	const queryClient = useQueryClient();
 	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
@@ -123,15 +126,14 @@ function Explorer(): JSX.Element {
 			<QuickFiltersLayout
 				className="meter-explorer-container"
 				showFilters={showQuickFilters}
+				onToggleFilters={(): void => setShowQuickFilters(!showQuickFilters)}
+				savedViewProps={{ source: SavedviewtypesSourceDTO.meter }}
 				quickFilterProps={{
 					className: 'qf-meter-explorer',
 					source: QuickFiltersSource.METER_EXPLORER,
 					signal: SignalType.METER_EXPLORER,
 					showFilterCollapse: true,
 					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {
-						setShowQuickFilters(!showQuickFilters);
-					},
 					useFieldApis: quickFilterFieldApis,
 				}}
 			>
@@ -177,15 +179,17 @@ function Explorer(): JSX.Element {
 							/>
 						</div>
 					</div>
-					<ExplorerOptionWrapper
-						disabled={!stagedQuery}
-						query={exportDefaultQuery}
-						sourcepage={DataSource.METRICS}
-						signalSource="meter"
-						onExport={handleExport}
-						isOneChartPerQuery={false}
-						splitedQueries={splitedQueries}
-					/>
+					{!isSavedViewEnabled && (
+						<ExplorerOptionWrapper
+							disabled={!stagedQuery}
+							query={exportDefaultQuery}
+							sourcepage={DataSource.METRICS}
+							signalSource="meter"
+							onExport={handleExport}
+							isOneChartPerQuery={false}
+							splitedQueries={splitedQueries}
+						/>
+					)}
 				</div>
 			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>

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

@@ -3,13 +3,18 @@ import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Tooltip } from 'antd';
+import { Filter } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@@ -23,6 +28,7 @@ import {
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import {
@@ -62,10 +68,12 @@ function Explorer(): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
+	const [showSidebar, setShowSidebar] = useState(true);
 
 	const queryClient = useQueryClient();
 	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
@@ -347,65 +355,87 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className="metrics-explorer-explore-container">
-				<div className="explore-header">
-					<div className="explore-header-left-actions">
-						<span>1 chart/query</span>
-						<Tooltip
-							open={disableOneChartPerQuery ? undefined : false}
-							title={oneChartPerQueryDisabledTooltip}
-						>
-							<Switch
-								value={showOneChartPerQuery}
-								onChange={handleToggleShowOneChartPerQuery}
-								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+			<QuickFiltersLayout
+				showFilters={showSidebar}
+				onToggleFilters={(): void => setShowSidebar(!showSidebar)}
+				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
+			>
+				<div className="metrics-explorer-explore-container">
+					<div className="explore-header">
+						<div className="explore-header-left-actions">
+							{!showSidebar && (
+								<TooltipSimple title="Show Views">
+									<Button
+										variant="outlined"
+										color="secondary"
+										size="icon"
+										aria-label="Show Views"
+										prefix={<Filter size={16} />}
+										onClick={(): void => setShowSidebar(true)}
+										data-testid="metrics-explorer-show-sidebar"
+									/>
+								</TooltipSimple>
+							)}
+							<span>1 chart/query</span>
+							<Tooltip
+								open={disableOneChartPerQuery ? undefined : false}
+								title={oneChartPerQueryDisabledTooltip}
+							>
+								<Switch
+									value={showOneChartPerQuery}
+									onChange={handleToggleShowOneChartPerQuery}
+									disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								/>
+							</Tooltip>
+						</div>
+						<div className="explore-header-right-actions">
+							{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+							<DateTimeSelector showAutoRefresh />
+							<RightToolbarActions
+								onStageRunQuery={(): void => handleRunQuery()}
+								isLoadingQueries={isLoadingQueries}
+								handleCancelQuery={handleCancelQuery}
 							/>
-						</Tooltip>
+						</div>
 					</div>
-					<div className="explore-header-right-actions">
-						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
-						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+					<QueryBuilderV2
+						config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+						panelType={PANEL_TYPES.TIME_SERIES}
+						showFunctions={false}
+						version="v3"
+					/>
+					<div className="explore-content">
+						<TimeSeries
+							onFetchingStateChange={setIsLoadingQueries}
+							showOneChartPerQuery={showOneChartPerQuery}
+							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
+							showYAxisUnitSelector={showYAxisUnitSelector}
+							isCancelled={isCancelled}
+							exportDefaultQuery={exportDefaultQuery}
 						/>
 					</div>
 				</div>
-				<QueryBuilderV2
-					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					showFunctions={false}
-					version="v3"
+			</QuickFiltersLayout>
+			{!isSavedViewEnabled && (
+				<ExplorerOptionWrapper
+					disabled={!stagedQuery}
+					query={exportDefaultQuery}
+					sourcepage={DataSource.METRICS}
+					onExport={handleExport}
+					isOneChartPerQuery={showOneChartPerQuery}
+					splitedQueries={splitedQueries}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
-				<div className="explore-content">
-					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
-						showOneChartPerQuery={showOneChartPerQuery}
-						setWarning={setWarning}
-						areAllMetricUnitsSame={areAllMetricUnitsSame}
-						isMetricUnitsLoading={isMetricUnitsLoading}
-						isMetricUnitsError={isMetricUnitsError}
-						metricUnits={units}
-						metricNames={metricNames}
-						metrics={metrics}
-						handleOpenMetricDetails={handleOpenMetricDetails}
-						yAxisUnit={yAxisUnit}
-						setYAxisUnit={setYAxisUnit}
-						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
-					/>
-				</div>
-			</div>
-			<ExplorerOptionWrapper
-				disabled={!stagedQuery}
-				query={exportDefaultQuery}
-				sourcepage={DataSource.METRICS}
-				onExport={handleExport}
-				isOneChartPerQuery={showOneChartPerQuery}
-				splitedQueries={splitedQueries}
-				handleChangeSelectedView={handleChangeSelectedView}
-			/>
+			)}
 			{isMetricDetailsOpen && selectedMetricName && (
 				<MetricDetails
 					metricName={selectedMetricName}

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

@@ -19,6 +19,7 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -51,6 +52,7 @@ function TimeSeries({
 	showYAxisUnitSelector,
 	metrics,
 	isCancelled = false,
+	exportDefaultQuery,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -272,6 +274,9 @@ function TimeSeries({
 							metricName;
 
 						const currentYAxisUnit = yAxisUnit || metricUnit;
+						const exportQuery = changeLayoutForOneChartPerQuery
+							? queryPayloads[index]
+							: exportDefaultQuery;
 
 						return (
 							<div
@@ -312,6 +317,14 @@ function TimeSeries({
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
 									allowExport
+									headerActions={
+										<ExplorerActions
+											query={stagedQuery ? exportQuery : null}
+											sourcepage={DataSource.METRICS}
+											panelType={PANEL_TYPES.TIME_SERIES}
+											isOneChartPerQuery={changeLayoutForOneChartPerQuery}
+										/>
+									}
 								/>
 							</div>
 						);

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
@@ -146,9 +147,11 @@ function renderExplorer(): void {
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter>
 				<Provider store={store}>
-					<ErrorModalProvider>
-						<Explorer />
-					</ErrorModalProvider>
+					<TooltipProvider>
+						<ErrorModalProvider>
+							<Explorer />
+						</ErrorModalProvider>
+					</TooltipProvider>
 				</Provider>
 			</MemoryRouter>
 		</QueryClientProvider>,

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { initialQueriesMap } from 'constants/queryBuilder';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
@@ -71,6 +72,7 @@ function renderTimeSeries(
 			yAxisUnit="count"
 			setYAxisUnit={mockSetYAxisUnit}
 			showYAxisUnitSelector={false}
+			exportDefaultQuery={initialQueriesMap.metrics}
 			{...overrides}
 		/>,
 	);

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

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { Warning } from 'types/api';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -17,4 +18,5 @@ export interface TimeSeriesProps {
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
 	isCancelled?: boolean;
+	exportDefaultQuery: Query;
 }

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

@@ -7,7 +7,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import ResizeTable from 'components/ResizeTable/ResizeTable';
-import { DataType } from 'container/LogDetailedView/TableView';
+import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
 import { CircleArrowDown, CircleArrowRight, Focus } from '@signozhq/icons';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
-import { DataType } from 'container/LogDetailedView/TableView';
+import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
 import {
 	Check,
 	Copy,

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -21,7 +21,7 @@ import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/TableView';
+import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Save, X } from '@signozhq/icons';
 

frontend/src/container/MetricsExplorer/events.ts

@@ -19,6 +19,7 @@ export enum MetricsExplorerEvents {
 	YAxisUnitApplied = 'Metrics Explorer: Y axis unit applied',
 	AddToAlertClicked = 'Metrics Explorer: Add to alert clicked',
 	AddToDashboardClicked = 'Metrics Explorer: Add to dashboard clicked',
+	AddToDashboardSuccessful = 'Metrics Explorer: Add to dashboard successful',
 	SaveViewClicked = 'Metrics Explorer: Save view clicked',
 	SearchApplied = 'Metrics Explorer: Search applied',
 	ViewEdited = 'Metrics Explorer: View edited',

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -41,7 +41,7 @@ import { buildCompositeKey, getOptionsFromKeys } from './utils';
 interface UseOptionsMenuProps {
 	storageKey?: string;
 	dataSource: DataSource;
-	aggregateOperator: string;
+	aggregateOperator?: string;
 	initialOptions?: InitialOptions;
 }
 

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,7 +329,7 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(11);
+		expect(result).toHaveLength(12);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -339,6 +339,7 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 			'metrics',
 			'quick-filter',
 			'role',
+			'saved-view',
 			'serviceaccount',
 			'subscription',
 			'traces',
@@ -422,7 +423,7 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(11);
+		expect(result).toHaveLength(12);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -432,6 +433,7 @@ describe('createEmptyRolePermissions', () => {
 			'metrics',
 			'quick-filter',
 			'role',
+			'saved-view',
 			'serviceaccount',
 			'subscription',
 			'traces',

frontend/src/container/RolesSettings/permissions.config.ts

@@ -10,6 +10,7 @@ import {
 	Logs,
 	Receipt,
 	Shield,
+	TowerControl,
 } from '@signozhq/icons';
 
 import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
@@ -95,6 +96,14 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type quick filter ID, separate multiple with comma or space',
 		docsAnchor: 'quick-filter',
 	},
+	'saved-view': {
+		label: 'Saved Views',
+		description: 'Saved views in the logs, traces, metrics and meter explorers.',
+		icon: TowerControl,
+		selectorPlaceholder:
+			'Type saved view ID, separate multiple with comma or space',
+		docsAnchor: 'saved-view',
+	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/container/SavedViews/DeleteSavedViewDialog.tsx

@@ -0,0 +1,55 @@
+import { Check, Trash2, X } from '@signozhq/icons';
+import { AlertDialog } from '@signozhq/ui/alert-dialog';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import { DeleteSavedViewDialogProps } from './types';
+
+function DeleteSavedViewDialog({
+	isDeleting,
+	onCancel,
+	onConfirm,
+}: DeleteSavedViewDialogProps): JSX.Element {
+	return (
+		<AlertDialog
+			open
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onCancel();
+				}
+			}}
+			width="narrow"
+			title="Delete this view"
+			titleIcon={<Trash2 size={16} />}
+			footer={
+				<>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onCancel}
+						prefix={<X size={12} />}
+						testId="delete-saved-view-cancel"
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						loading={isDeleting}
+						onClick={onConfirm}
+						prefix={<Check size={12} />}
+						testId="delete-saved-view-confirm"
+					>
+						Delete view
+					</Button>
+				</>
+			}
+		>
+			<Typography.Text>
+				Deleting this view is irreversible and cannot be undone.
+			</Typography.Text>
+		</AlertDialog>
+	);
+}
+
+export default DeleteSavedViewDialog;

frontend/src/container/SavedViews/SaveChangesMenu.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { Check } from '@signozhq/icons';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import {
+	buildSavedViewUpdatePermission,
+	SavedViewCreatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+import SavedViewsIconButton from './SavedViewsIconButton';
+import { SaveChangesMenuProps } from './types';
+
+import styles from './SavedViewsMenu.module.scss';
+
+function SaveChangesMenu({
+	viewId,
+	disabled,
+	onSaveAsNew,
+	onUpdate,
+}: SaveChangesMenuProps): JSX.Element {
+	const updatePermission = buildSavedViewUpdatePermission(viewId);
+	const { deniedPermissions } = useAuthZ([
+		SavedViewCreatePermission,
+		updatePermission,
+	]);
+
+	const items = useMemo<MenuItem[]>(() => {
+		const isCreateDenied = deniedPermissions.includes(SavedViewCreatePermission);
+		const isUpdateDenied = deniedPermissions.includes(updatePermission);
+		return [
+			{
+				key: 'save-as-new',
+				label: (
+					<AuthZTooltip checks={[SavedViewCreatePermission]}>
+						<span>Save as new view</span>
+					</AuthZTooltip>
+				),
+				disabled: isCreateDenied,
+				className: isCreateDenied ? styles.deniedItem : undefined,
+				onClick: onSaveAsNew,
+			},
+			{
+				key: 'update',
+				label: (
+					<AuthZTooltip checks={[updatePermission]}>
+						<span>Update selected view</span>
+					</AuthZTooltip>
+				),
+				disabled: isUpdateDenied,
+				className: isUpdateDenied ? styles.deniedItem : undefined,
+				onClick: onUpdate,
+			},
+		];
+	}, [deniedPermissions, updatePermission, onSaveAsNew, onUpdate]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }} align="end" className={styles.menu}>
+			<SavedViewsIconButton
+				title="Save changes"
+				icon={<Check size={14} />}
+				color="warning"
+				disabled={disabled}
+				testId="saved-views-save-changes"
+			/>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SaveChangesMenu;

frontend/src/container/SavedViews/SaveViewModal.module.scss

@@ -0,0 +1,18 @@
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.label {
+	font-size: var(--font-size-xs);
+	color: var(--l1-foreground);
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-4);
+	width: 100%;
+}

frontend/src/container/SavedViews/SaveViewModal.tsx

@@ -0,0 +1,95 @@
+import { FormEvent, useState } from 'react';
+import { Check, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+
+import { SAVE_VIEW_MODAL_TITLE } from './constants';
+import { SaveViewModalProps } from './types';
+
+import styles from './SaveViewModal.module.scss';
+
+const NAME_INPUT_ID = 'save-view-name';
+
+function SaveViewModal({
+	mode,
+	initialName = '',
+	isSaving,
+	onClose,
+	onSave,
+}: SaveViewModalProps): JSX.Element {
+	const [name, setName] = useState(initialName);
+	const displayName = name.trim();
+
+	const handleSave = async (): Promise<void> => {
+		if (!displayName || isSaving) {
+			return;
+		}
+		if (await onSave(displayName)) {
+			onClose();
+		}
+	};
+
+	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		void handleSave();
+	};
+
+	return (
+		<DialogWrapper
+			open
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title={SAVE_VIEW_MODAL_TITLE[mode]}
+			testId="save-view-modal"
+			footer={
+				<div className={styles.footer}>
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="md"
+						prefix={<X size={14} />}
+						onClick={onClose}
+						testId="save-view-cancel"
+					>
+						Cancel
+					</Button>
+					<Button
+						color="primary"
+						size="md"
+						prefix={<Check size={14} />}
+						loading={isSaving}
+						disabled={!displayName}
+						onClick={(): void => {
+							void handleSave();
+						}}
+						testId="save-view-submit"
+					>
+						Save view
+					</Button>
+				</div>
+			}
+		>
+			<form className={styles.field} onSubmit={handleSubmit}>
+				<label htmlFor={NAME_INPUT_ID}>
+					<Typography.Text className={styles.label}>Enter view name</Typography.Text>
+				</label>
+				<Input
+					id={NAME_INPUT_ID}
+					placeholder="Eg. payments-view"
+					value={name}
+					onChange={(event): void => setName(event.target.value)}
+					autoFocus
+					autoComplete="off"
+					testId="save-view-name"
+				/>
+			</form>
+		</DialogWrapper>
+	);
+}
+
+export default SaveViewModal;

frontend/src/container/SavedViews/SavedViewHighlightedExpression.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { highlightQueryExpression } from './utils/highlightQueryExpression';
+
+function SavedViewHighlightedExpression({
+	expression,
+}: {
+	expression: string;
+}): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const parts = useMemo(
+		() => highlightQueryExpression(expression, isDarkMode),
+		[expression, isDarkMode],
+	);
+
+	return (
+		<>
+			{parts.map(({ from, text, color }) =>
+				color ? (
+					<span key={from} style={{ color }}>
+						{text}
+					</span>
+				) : (
+					text
+				),
+			)}
+		</>
+	);
+}
+
+export default SavedViewHighlightedExpression;

frontend/src/container/SavedViews/SavedViewHoverCard.module.scss

@@ -0,0 +1,110 @@
+.anchor {
+	position: absolute;
+	left: 100%;
+	width: 1px;
+	pointer-events: none;
+}
+
+.card {
+	--popover-padding: 0;
+	--popover-background: var(--l1-background);
+	--popover-border-color: var(--l2-border);
+	--popover-border-radius: var(--radius-2);
+	--popover-foreground: var(--l1-foreground);
+
+	width: 324px;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-6) var(--spacing-8);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+}
+
+.name {
+	min-width: 0;
+	color: var(--l1-foreground);
+	font-size: var(--periscope-font-size-base);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.query {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-3) var(--spacing-4);
+	border-radius: var(--radius-2);
+	background: var(--l2-background);
+}
+
+.queryItem {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.queryName {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-small);
+}
+
+.metric {
+	color: var(--l2-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-xs);
+	word-break: break-all;
+}
+
+.expression {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 4;
+	line-clamp: 4;
+	overflow: hidden;
+	color: var(--l1-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-xs);
+	word-break: break-all;
+}
+
+.noFilters {
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.updated {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.sectionTitle {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-18);
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
+}
+
+.meta {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	color: var(--l2-foreground);
+}
+
+.metaText {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/SavedViews/SavedViewHoverCard.tsx

@@ -0,0 +1,130 @@
+import { CalendarClock } from '@signozhq/icons';
+import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
+import { useMemo } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
+import { useTimezone } from 'providers/Timezone';
+
+import { SAVED_VIEW_UPDATED_AT_FORMAT } from './constants';
+import SavedViewHighlightedExpression from './SavedViewHighlightedExpression';
+import { getSavedViewQuerySummaries } from './utils/getSavedViewQuerySummaries';
+import { SavedViewHoverCardProps } from './types';
+
+import styles from './SavedViewHoverCard.module.scss';
+
+function SavedViewHoverCard({
+	target,
+	onCardEnter,
+	onCardLeave,
+	onClose,
+}: SavedViewHoverCardProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const view = target?.view;
+	const querySummaries = useMemo(
+		() => (view ? getSavedViewQuerySummaries(view) : []),
+		[view],
+	);
+	const hasQueryNames = querySummaries.length > 1;
+	const copyValue = querySummaries
+		.filter(({ expression }) => expression.length > 0)
+		.map(({ queryName, expression }) =>
+			hasQueryNames ? `${queryName}: ${expression}` : expression,
+		)
+		.join('\n');
+
+	return (
+		<Popover
+			open={!!view}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+		>
+			<PopoverAnchor asChild>
+				<div
+					className={styles.anchor}
+					style={{ top: target?.anchorTop ?? 0, height: target?.anchorHeight ?? 0 }}
+				/>
+			</PopoverAnchor>
+			<PopoverContent
+				side="right"
+				align="start"
+				sideOffset={4}
+				className={styles.card}
+				onOpenAutoFocus={(event): void => event.preventDefault()}
+				onCloseAutoFocus={(event): void => event.preventDefault()}
+			>
+				{view && (
+					<div
+						className={styles.content}
+						onMouseEnter={onCardEnter}
+						onMouseLeave={onCardLeave}
+						data-testid="saved-view-hover-card"
+					>
+						<div className={styles.header}>
+							<Typography.Text className={styles.name}>
+								{view.spec.displayName}
+							</Typography.Text>
+							{copyValue && (
+								<CopyButton
+									value={copyValue}
+									ariaLabel="Copy query"
+									testId="saved-view-hover-card-copy"
+								/>
+							)}
+						</div>
+						<div className={styles.query} data-testid="saved-view-hover-card-query">
+							{querySummaries.length === 0 ? (
+								<Typography.Text className={styles.noFilters}>
+									No filters
+								</Typography.Text>
+							) : (
+								querySummaries.map(({ queryName, expression, metric }) => (
+									<div key={queryName} className={styles.queryItem}>
+										{hasQueryNames && (
+											<Typography.Text className={styles.queryName}>
+												{queryName}
+											</Typography.Text>
+										)}
+										{metric && (
+											<Typography.Text className={styles.metric}>{metric}</Typography.Text>
+										)}
+										{expression && (
+											<Typography.Text className={styles.expression}>
+												<SavedViewHighlightedExpression expression={expression} />
+											</Typography.Text>
+										)}
+									</div>
+								))
+							)}
+						</div>
+						<div className={styles.updated}>
+							<Typography.Text className={styles.sectionTitle}>
+								Last updated
+							</Typography.Text>
+							{view.updatedBy && (
+								<Typography.Text className={styles.metaText}>
+									{view.updatedBy}
+								</Typography.Text>
+							)}
+							{view.updatedAt && (
+								<div className={styles.meta}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.metaText}>
+										{formatTimezoneAdjustedTimestamp(
+											view.updatedAt,
+											SAVED_VIEW_UPDATED_AT_FORMAT,
+										)}
+									</Typography.Text>
+								</div>
+							)}
+						</div>
+					</div>
+				)}
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export default SavedViewHoverCard;

frontend/src/container/SavedViews/SavedViewsEmptyState.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { SavedViewCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+
+import SaveViewModal from './SaveViewModal';
+import { SavedViewsEmptyStateProps } from './types';
+
+import styles from './SavedViewsList.module.scss';
+
+function SavedViewsEmptyState({
+	isSearching,
+	isSaving,
+	onSave,
+}: SavedViewsEmptyStateProps): JSX.Element {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	if (isSearching) {
+		return (
+			<div className={styles.state} data-testid="saved-views-list-no-results">
+				<Typography.Text className={styles.stateText}>
+					No views match your search
+				</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.state} data-testid="saved-views-list-empty">
+			<Typography.Text className={styles.stateTitle}>No views yet</Typography.Text>
+			<Typography.Text className={styles.stateText}>
+				Save the current view to open it later.
+			</Typography.Text>
+			<AuthZButton
+				checks={[SavedViewCreatePermission]}
+				variant="outlined"
+				color="secondary"
+				size="sm"
+				prefix={<Plus size={12} />}
+				onClick={(): void => setIsModalOpen(true)}
+				data-testid="saved-views-list-create"
+			>
+				Create view
+			</AuthZButton>
+			{isModalOpen && (
+				<SaveViewModal
+					mode="create"
+					isSaving={isSaving}
+					onClose={(): void => setIsModalOpen(false)}
+					onSave={onSave}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsEmptyState;

frontend/src/container/SavedViews/SavedViewsHeader.module.scss

@@ -0,0 +1,78 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+	padding: var(--spacing-2) var(--spacing-5);
+	border-bottom: 1px solid var(--l1-border);
+	color: var(--l1-foreground);
+	flex-shrink: 0;
+
+	&.isDirty {
+		background: linear-gradient(
+			to right,
+			var(--callout-warning-background),
+			transparent
+		);
+	}
+
+	&.isError {
+		background: linear-gradient(
+			to right,
+			var(--callout-error-background),
+			transparent
+		);
+	}
+}
+
+.name {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	min-width: 0;
+	padding: var(--spacing-1) var(--spacing-4);
+	border-radius: var(--spacing-1);
+	background: var(--l3-background);
+	color: var(--l1-foreground);
+	font-size: var(--font-size-sm);
+
+	&.isDirty {
+		background: var(--callout-warning-background);
+		color: var(--callout-warning-title);
+	}
+
+	&.isError {
+		background: var(--callout-error-background);
+		color: var(--callout-error-title);
+	}
+}
+
+.nameText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dot {
+	width: var(--spacing-3);
+	height: var(--spacing-3);
+	flex-shrink: 0;
+	border-radius: 50%;
+	background: var(--callout-warning-icon);
+}
+
+.skeleton {
+	flex: 1;
+	min-width: 0;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	gap: var(--spacing-1);
+}
+
+.collapseIcon {
+	rotate: 270deg;
+}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -0,0 +1,167 @@
+import { useCallback, useState } from 'react';
+import cx from 'classnames';
+import { ArrowUpToLine, Menu, Plus, Undo2, X } from '@signozhq/icons';
+import { Skeleton } from '@signozhq/ui/skeleton';
+import { toast } from '@signozhq/ui/sonner';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	MY_VIEW_NAME,
+	SAVED_VIEW_FORBIDDEN_NAME,
+	SAVED_VIEW_LOAD_FAILED_NAME,
+	SAVED_VIEW_TOAST_POSITION,
+} from './constants';
+import {
+	SavedViewCreatePermission,
+	SavedViewListPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+
+import { useActiveSavedView } from './hooks/useActiveSavedView';
+import { useRestoreLastUsedView } from './hooks/useRestoreLastUsedView';
+import { useSaveNewView } from './hooks/useSaveNewView';
+import { useSavedViewActions } from './hooks/useSavedViewActions';
+import SaveChangesMenu from './SaveChangesMenu';
+import SavedViewsIconButton from './SavedViewsIconButton';
+import SaveViewModal from './SaveViewModal';
+import { SaveViewModalMode } from './types';
+
+import styles from './SavedViewsHeader.module.scss';
+
+function SavedViewsHeader({
+	source,
+	onOpenViews,
+	onCollapse,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent while the list is on screen.
+	onOpenViews?: () => void;
+	onCollapse?: () => void;
+}): JSX.Element {
+	const { view, isLoading, isError, isForbidden, hasUnsavedChanges } =
+		useActiveSavedView(source);
+	const { selectView, revertView, clearView, createView, updateView, isSaving } =
+		useSavedViewActions(source);
+	useRestoreLastUsedView({ source, selectView });
+
+	const [modalMode, setModalMode] = useState<SaveViewModalMode | null>(null);
+
+	const handleSave = useSaveNewView(createView);
+
+	const handleUpdate = useCallback(async (): Promise<void> => {
+		if (view && (await updateView(view))) {
+			toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
+		}
+	}, [view, updateView]);
+
+	const openSaveAsNew = useCallback((): void => setModalMode('saveAsNew'), []);
+	const closeModal = useCallback((): void => setModalMode(null), []);
+
+	const errorName = isForbidden
+		? SAVED_VIEW_FORBIDDEN_NAME
+		: SAVED_VIEW_LOAD_FAILED_NAME;
+	const name = isError ? errorName : (view?.spec.displayName ?? MY_VIEW_NAME);
+	const isDirty = !isError && !!view && hasUnsavedChanges;
+
+	return (
+		<div
+			className={cx(styles.header, {
+				[styles.isDirty]: isDirty,
+				[styles.isError]: isError,
+			})}
+			data-testid="saved-views-header"
+			data-source={source}
+		>
+			{isLoading ? (
+				<Skeleton.Input
+					active
+					size="small"
+					className={styles.skeleton}
+					testId="saved-views-loading"
+				/>
+			) : (
+				<TooltipSimple title={name}>
+					<span
+						className={cx(styles.name, {
+							[styles.isDirty]: isDirty,
+							[styles.isError]: isError,
+						})}
+						data-testid="saved-views-name"
+					>
+						{isDirty && <span className={styles.dot} />}
+						<span className={styles.nameText}>{name}</span>
+					</span>
+				</TooltipSimple>
+			)}
+
+			<div className={styles.actions}>
+				{!view && !isError && (
+					<SavedViewsIconButton
+						title="Create new view"
+						icon={<Plus size={14} />}
+						disabled={isLoading}
+						checks={[SavedViewCreatePermission]}
+						onClick={(): void => setModalMode('create')}
+						testId="saved-views-create"
+					/>
+				)}
+				{view && !isDirty && !isError && (
+					<SavedViewsIconButton
+						title="Clear view"
+						icon={<Undo2 size={14} />}
+						onClick={clearView}
+						testId="saved-views-clear"
+					/>
+				)}
+				{view && isDirty && (
+					<>
+						<SaveChangesMenu
+							viewId={view.id}
+							disabled={isSaving}
+							onSaveAsNew={openSaveAsNew}
+							onUpdate={(): void => {
+								void handleUpdate();
+							}}
+						/>
+						<SavedViewsIconButton
+							title="Discard changes"
+							icon={<X size={14} />}
+							color="warning"
+							disabled={isSaving}
+							onClick={(): void => revertView(view)}
+							testId="saved-views-discard"
+						/>
+					</>
+				)}
+				{!isDirty && onOpenViews && (
+					<SavedViewsIconButton
+						title="All views"
+						icon={<Menu size={14} />}
+						checks={[SavedViewListPermission]}
+						onClick={onOpenViews}
+						testId="saved-views-open"
+					/>
+				)}
+				{onCollapse && (
+					<SavedViewsIconButton
+						title="Collapse Filters"
+						icon={<ArrowUpToLine size={14} className={styles.collapseIcon} />}
+						onClick={onCollapse}
+						testId="saved-views-collapse"
+					/>
+				)}
+			</div>
+
+			{modalMode && (
+				<SaveViewModal
+					mode={modalMode}
+					isSaving={isSaving}
+					onClose={closeModal}
+					onSave={handleSave}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsHeader;

frontend/src/container/SavedViews/SavedViewsIconButton.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+import { SavedViewsIconButtonProps } from './types';
+
+// forwardRef and rest props so a menu can use it as its trigger.
+const SavedViewsIconButton = forwardRef<
+	HTMLButtonElement,
+	SavedViewsIconButtonProps
+>(function SavedViewsIconButton(
+	{
+		title,
+		icon,
+		testId,
+		color = 'secondary',
+		disabled,
+		checks,
+		onClick,
+		...triggerProps
+	},
+	ref,
+): JSX.Element {
+	const { deniedPermissions } = useAuthZ(checks ?? [], {
+		enabled: !!checks?.length,
+	});
+
+	const button = (
+		<Button
+			ref={ref}
+			variant="ghost"
+			color={color}
+			size="icon"
+			aria-label={title}
+			prefix={icon}
+			disabled={disabled}
+			onClick={onClick}
+			{...triggerProps}
+			data-testid={testId}
+		/>
+	);
+
+	if (checks && deniedPermissions.length > 0) {
+		return <AuthZTooltip checks={checks}>{button}</AuthZTooltip>;
+	}
+	return <TooltipSimple title={title}>{button}</TooltipSimple>;
+});
+
+export default SavedViewsIconButton;

frontend/src/container/SavedViews/SavedViewsList.module.scss

@@ -0,0 +1,131 @@
+.list {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	margin-bottom: var(--spacing-6);
+
+	&:first-child:not(:last-child) {
+		max-height: 40%;
+	}
+
+	&:last-child {
+		flex: 1;
+	}
+}
+
+.sectionList {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.sectionTitle {
+	padding: var(--spacing-4) var(--spacing-6);
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-18);
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: var(--spacing-16);
+	padding-right: var(--spacing-4);
+	border-radius: var(--radius-2);
+	transition: background-color 0.2s ease-in-out;
+
+	&:hover {
+		background-color: var(--l2-background);
+	}
+
+	&.isActive {
+		background-color: var(--l3-background);
+
+		.rowName {
+			--button-variant-ghost-color: var(--l1-foreground);
+			--button-variant-ghost-hover-color: var(--l1-foreground);
+		}
+	}
+}
+
+.rowMenu {
+	display: flex;
+	width: 0;
+	overflow: hidden;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.row:hover .rowMenu,
+.row:focus-within .rowMenu,
+.rowMenu:has([data-state='open']) {
+	width: auto;
+	opacity: 1;
+}
+
+.rowButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: var(--spacing-12);
+	height: var(--spacing-12);
+	padding: var(--spacing-1);
+}
+
+.rowName {
+	--button-height: 100%;
+	--button-padding: 0 var(--spacing-6);
+	--button-justify-content: flex-start;
+	--button-font-size: var(--periscope-font-size-base);
+	--button-variant-ghost-color: var(--l2-foreground);
+	--button-variant-ghost-hover-color: var(--l2-foreground);
+	--button-variant-ghost-hover-background-color: transparent;
+
+	flex: 1;
+	min-width: 0;
+}
+
+.rowNameText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.loading {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-4) var(--spacing-6);
+}
+
+.state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-8) var(--spacing-6);
+	text-align: center;
+}
+
+.stateTitle {
+	color: var(--l1-foreground);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-medium);
+}
+
+.stateText {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+}