style(quick-filters): header matches the saved views header

Live logs end whenever the url moves off the list tab, so every path that
changes the tab gets it, not only the page's own view switch.

docs/api/openapi.yml

@@ -184,6 +184,7 @@ components:
         headers:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         html:
           type: string
@@ -217,6 +218,7 @@ components:
         metadata:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -258,6 +260,7 @@ components:
           type: string
         customFields:
           additionalProperties: {}
+          nullable: true
           type: object
         description:
           type: string
@@ -268,6 +271,7 @@ components:
         labels:
           items:
             type: string
+          nullable: true
           type: array
         priority:
           type: string
@@ -346,6 +350,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         message:
           type: string
@@ -374,6 +379,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         group:
           type: string
@@ -451,6 +457,7 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
+          nullable: true
           type: array
         apiUrl:
           format: password
@@ -464,6 +471,7 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
+          nullable: true
           type: array
         footer:
           type: string

docs/contributing/go/authz.md

@@ -118,7 +118,7 @@ router.Handle("/api/v1/service_accounts", handler.New(
 The pieces:
 
 - **`CheckResources(handlerFn, roles...)`** — the resource-aware authorization wrapper from [pkg/http/middleware/authz.go](/pkg/http/middleware/authz.go). The role list is the community-edition fallback: which managed roles may call this route when per-resource checks are unavailable.
-- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
+- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyField(func(req *T) string)` / `BodyFields(func(req *T) []string)` reading the request body the resource middleware decoded into the route's `OpenAPIDef.Request` type `T`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`). A handler on such a route reads the same decoded value with `coretypes.BodyFromContext[T](r.Context())`.
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
 For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).

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/index.tsx

@@ -12,14 +12,13 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -59,6 +58,7 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
+		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,8 +66,6 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isSavedViewEnabled = useSavedViewEnabled();
-	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -255,9 +253,7 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
-		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
-			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -267,32 +263,71 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname, isSavedViewEnabled]);
+	}, [pathname]);
 
-	// Identity for the Pylon widget. Whether this user gets Pylon at all is
-	// `useChatSupport`'s call — this only fills in who they are.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		if (chatSupport !== ChatSupportState.Pylon) {
-			return;
+		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
+		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
+		// to something went wrong which would ideally need a reload.
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			const showAddCreditCardModal =
+				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
+
+			if (
+				isLoggedInState &&
+				isChatSupportEnabled &&
+				!showAddCreditCardModal &&
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				window.signozBootData?.settings?.pylon?.enabled
+			) {
+				const email = user.email || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+				let emailHash = '';
+
+				if (email && secret) {
+					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+				}
+
+				window.pylon = {
+					chat_settings: {
+						app_id: window.signozBootData?.settings?.pylon?.appId,
+						email: user.email,
+						name: user.displayName || user.email,
+						email_hash: emailHash,
+					},
+				};
+			}
 		}
-
-		const email = user.email || '';
-		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-		let emailHash = '';
-
-		if (email && secret) {
-			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-		}
-
-		window.pylon = {
-			chat_settings: {
-				app_id: window.signozBootData?.settings?.pylon?.appId,
-				email: user.email,
-				name: user.displayName || user.email,
-				email_hash: emailHash,
-			},
-		};
-	}, [chatSupport, user]);
+	}, [
+		isLoggedInState,
+		user,
+		pathname,
+		trialInfo?.trialConvertedToSubscription,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		activeLicense,
+		trialInfo,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

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

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
+	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -166,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;
 	/**
@@ -239,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
@@ -265,7 +277,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -307,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
@@ -326,7 +344,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -423,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
@@ -434,7 +458,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -450,9 +474,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	labels?: string[];
+	labels?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -543,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;
 	/**

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -1,103 +0,0 @@
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-
-interface AddCreditCardModalProps {
-	open: boolean;
-	onClose: () => void;
-	onAddCreditCard?: () => void;
-}
-
-/**
- * Shown to trial users who have not added a card, in place of chat support.
- * Submitting creates the subscription and opens the returned billing URL.
- */
-function AddCreditCardModal({
-	open,
-	onClose,
-	onAddCreditCard,
-}: AddCreditCardModalProps): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
-	);
-
-	const handleAddCreditCard = (): void => {
-		onAddCreditCard?.();
-		updateCreditCard({ url: getBaseUrl() });
-	};
-
-	return (
-		<Modal
-			className="add-credit-card-modal"
-			title={<span className="title">Add Credit Card for Chat Support</span>}
-			open={open}
-			closable
-			onCancel={onClose}
-			destroyOnClose
-			footer={[
-				<Button
-					key="cancel"
-					onClick={onClose}
-					className="cancel-btn"
-					icon={<X size={16} />}
-				>
-					Cancel
-				</Button>,
-				<AuthZTooltip
-					key="submit"
-					checks={[SubscriptionCreatePermission]}
-					withPortal={false}
-				>
-					<Button
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>
-				</AuthZTooltip>,
-			]}
-		>
-			<Typography.Text className="add-credit-card-text">
-				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
-				Add a credit card to access SigNoz chat support to your workspace.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
-
-export default AddCreditCardModal;

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.mocks.tsx

@@ -1,9 +0,0 @@
-import { rest } from 'msw';
-
-const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
-
-export const createSubscriptionHandlers = [
-	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
-		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
-	),
-];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '@signozhq/ui/button';
-import { screen, userEvent, within } from 'storybook/test';
-
-import { withCanvas } from '@/storybook/decorators/withCanvas';
-
-import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
-
-import AddCreditCardModal from '../AddCreditCardModal';
-
-/** Stands in for the surfaces that open it: the strip's Support button, and
- * `LaunchChatSupport` in the custom domain and onboarding flows. */
-function ModalFixture(): JSX.Element {
-	const [open, setOpen] = useState(false);
-
-	return (
-		<>
-			<Button
-				data-testid="open-add-credit-card"
-				onClick={(): void => setOpen(true)}
-			>
-				Contact support
-			</Button>
-			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
-		</>
-	);
-}
-
-const meta = {
-	title: 'Components/Add Credit Card Modal',
-	component: ModalFixture,
-	tags: ['play'],
-	decorators: [withCanvas({ maxWidth: 400 })],
-	parameters: {
-		msw: { handlers: createSubscriptionHandlers },
-	},
-} satisfies Meta<typeof ModalFixture>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** What a trial user without a card sees in place of chat support. */
-export const Default: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.click(
-			within(canvasElement).getByTestId('open-add-credit-card'),
-		);
-		await screen.findByRole('dialog', {
-			name: /Add Credit Card for Chat Support/i,
-		});
-	},
-};

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,15 +1,63 @@
 import { useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { MessageSquareText } from '@signozhq/icons';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
+	const { notifications } = useNotifications();
+
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
 	const { pathname } = useLocation();
 
+	const handleAddCreditCard = (): void => {
+		logEvent('Add Credit card modal: Clicked', {
+			source: `chat support icon`,
+			page: pathname,
+		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
+	};
+
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -28,16 +76,47 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={(): void => {
-					logEvent('Add Credit card modal: Clicked', {
-						source: `chat support icon`,
-						page: pathname,
-					});
-				}}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</>
 	);
 }

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/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,14 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp } from '@signozhq/icons';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -33,6 +41,7 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -110,12 +119,43 @@ function LaunchChatSupport({
 		}
 	};
 
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -135,11 +175,47 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={handleAddCreditCard}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</div>
 	) : null;
 }

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>
+			</TooltipSimple>
 			{showFilterCollapse && (
-				<Tooltip title="Collapse Filters">
+				<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,6 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
 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';
 
@@ -12,8 +15,15 @@ type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
 	ComponentProps<typeof QuickFilters>
 >;
 
+// 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;
 	className?: string;
 	contentClassName?: string;
@@ -23,20 +33,65 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	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)
+			}
+		/>
+	) : 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} />
+					<div
+						className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+						data-testid="quick-filters-layout-drawer"
+					>
+						{hasQuickFilters ? (
+							<QuickFilters
+								{...quickFilterProps}
+								savedViewsHeader={savedViewsHeader}
+							/>
+						) : (
+							savedViewsHeader
+						)}
+					</div>
+					<div className={styles.savedViews}>
+						{hasSavedViews && isViewsListVisible && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={
+									isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+								}
+							/>
+						)}
+					</div>
 				</aside>
 			)}
 			<section
@@ -44,7 +99,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,15 +9,33 @@ 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,
+	}: {
+		source: string;
+		savedViewsHeader?: React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="quick-filters">
+			{savedViewsHeader}
+			{source}
+		</div>
 	),
 }));
 
@@ -23,8 +43,16 @@ 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 +68,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 +89,140 @@ 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-close')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+		});
+	});
 });

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

@@ -8,12 +8,20 @@
 	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;

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';
@@ -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/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/AppLayout/index.tsx

@@ -885,7 +885,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && !isSavedViewEnabled && <ChatSupportGateway />}
+				{showAddCreditCardModal && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -1,36 +0,0 @@
-.askNoz {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-}
-
-.badge {
-	flex-shrink: 0;
-	display: inline-flex;
-	line-height: 0;
-	color: var(--accent-primary);
-}
-
-.pulseDot {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 0;
-	animation: askNozDotPulse 1.5s ease-in-out infinite;
-	transform: scale(0.8);
-	margin-right: -12px;
-}
-
-@keyframes askNozDotPulse {
-	0%,
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	50% {
-		opacity: 0.35;
-		transform: scale(0.82);
-	}
-}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -1,76 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import Noz from 'components/Noz/Noz';
-import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
-import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
-import {
-	openAIAssistant,
-	useAIAssistantStore,
-} from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import ROUTES from 'constants/routes';
-import { Dot } from '@signozhq/icons';
-
-import styles from './AskNoz.module.scss';
-
-/**
- * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
- * modal instead; this is deliberately the drawer.
- *
- * Carries the header's pending badge: when Noz is blocked on the user
- * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
- * hiding the header button would remove a notification rather than move it.
- */
-function AskNoz(): JSX.Element | null {
-	const { pathname } = useLocation();
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
-	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
-	const pendingUserInputCount = useAIAssistantStore(
-		selectPendingUserInputStreamCount,
-	);
-
-	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
-	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
-
-	// The drawer does not render on the Noz full page, so the button would be inert.
-	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
-
-	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
-		return null;
-	}
-
-	return (
-		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
-			{showPendingBadge && (
-				<span className={styles.badge} aria-hidden>
-					<span className={styles.pulseDot}>
-						<Dot size={36} />
-					</span>
-				</span>
-			)}
-			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					className="noz-wave"
-					prefix={<Noz size={16} />}
-					onClick={(): void => openAIAssistant()}
-					aria-label={
-						showPendingBadge
-							? `Ask Noz, ${pendingUserInputCount} ${
-									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
-								} your response`
-							: 'Ask Noz'
-					}
-				>
-					Ask Noz
-				</Button>
-			</TooltipSimple>
-		</div>
-	);
-}
-
-export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -1,133 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { render } from 'tests/test-utils';
-
-import AskNoz from '../AskNoz';
-
-jest.mock('hooks/useIsAIAssistantEnabled');
-jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
-	openAIAssistant: jest.fn(),
-	useAIAssistantStore: jest.fn(),
-}));
-
-const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
-	typeof useIsAIAssistantEnabled
->;
-const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const { useAIAssistantStore } = jest.requireMock(
-	'container/AIAssistant/store/useAIAssistantStore',
-) as { useAIAssistantStore: jest.Mock };
-
-/** The component reads the store through three separate selector calls. */
-function mockStore({
-	isDrawerOpen = false,
-	isModalOpen = false,
-	pendingCount = 0,
-}: {
-	isDrawerOpen?: boolean;
-	isModalOpen?: boolean;
-	pendingCount?: number;
-} = {}): void {
-	const state = { isDrawerOpen, isModalOpen, streams: {} };
-	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
-		const picked = selector(state);
-		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
-		// so stand in the count we want to assert against.
-		return typeof picked === 'number' ? pendingCount : picked;
-	});
-}
-
-// `TooltipSimple` replaces its trigger's props, so the testId lives on the
-// wrapper and the button itself is reached by role — there is only ever one.
-const SLOT = 'bottom-strip-ask-noz';
-
-describe('AskNoz', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockEnabled.mockReturnValue(true);
-		mockStore();
-	});
-
-	describe('visibility', () => {
-		it('renders when the assistant is enabled', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toBeInTheDocument();
-		});
-
-		it('renders nothing when the assistant is disabled', () => {
-			mockEnabled.mockReturnValue(false);
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing while the drawer is open', () => {
-			mockStore({ isDrawerOpen: true });
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
-			const { queryByTestId } = render(<AskNoz />, undefined, {
-				initialRoute: '/ai-assistant/some-conversation-id',
-			});
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('what it does', () => {
-		it('opens the drawer on click', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			fireEvent.click(getByRole('button'));
-
-			expect(mockOpen).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('pending badge', () => {
-		it('announces the count when Noz is waiting on the user', () => {
-			mockStore({ pendingCount: 2 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 2 actions need your response',
-			);
-		});
-
-		it('uses the singular for one pending action', () => {
-			mockStore({ pendingCount: 1 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 1 action needs your response',
-			);
-		});
-
-		it('stays quiet when nothing is pending', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-
-		it('stays quiet while the modal is open, Noz is already on screen', () => {
-			mockStore({ isModalOpen: true, pendingCount: 3 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-	});
-});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -11,8 +11,6 @@
 	background: var(--l2-background);
 	border-top: 1px solid var(--l2-border);
 
-	--button-font-size: 12px;
-
 	font-family: var(--font-family-sf-mono, monospace);
 
 	// Above page content, below the body-portalled overlays that are meant to
@@ -25,21 +23,14 @@
 .right {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-4);
+	gap: var(--spacing-6);
 	min-width: 0;
 }
 
-.left {
-	cursor: default;
-}
-
-// separator b/w strip entities
-.left > *:not(:last-child)::after,
-.right > *:not(:last-child)::after {
-	content: '';
-	flex-shrink: 0;
-	width: 1px;
-	height: 14px;
-	background: var(--l2-border);
-	margin-left: var(--spacing-4);
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -1,53 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { useAppContext } from 'providers/App/App';
-
-import StripKeyValue from '../components/StripKeyValue/StripKeyValue';
-import StripTypography from '../components/StripTypography/StripTypography';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { type StripItem, StripItemKind } from '../types';
-
-function renderItem(item: StripItem, index: number): JSX.Element {
-	if (item.kind === StripItemKind.KeyValue) {
-		return (
-			<StripKeyValue
-				key={index}
-				label={item.label}
-				value={item.value}
-				prefix={item.prefix}
-				tone={item.tone}
-			/>
-		);
-	}
-
-	return (
-		// eslint-disable-next-line react/no-array-index-key
-		<StripTypography key={index} prefix={item.prefix}>
-			{item.text}
-		</StripTypography>
-	);
-}
-
-function LeftSlot(): JSX.Element | null {
-	const { versionData } = useAppContext();
-	const left = useBottomStripStore((state) => state.left);
-	const ownerId = useBottomStripStore((state) => state.ownerId);
-
-	const version = versionData?.version?.trim();
-	const versionNode = version ? (
-		<StripTypography>{version}</StripTypography>
-	) : null;
-
-	if (!left?.length) {
-		return versionNode;
-	}
-
-	return (
-		// Keyed so a page whose items throw does not leave the boundary latched on
-		// the fallback for every page after it.
-		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
-			{left.map(renderItem)}
-		</Sentry.ErrorBoundary>
-	);
-}
-
-export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { MessageSquareText } from '@signozhq/icons';
-
-function SupportButton(): JSX.Element | null {
-	const chatSupport = useChatSupport();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
-
-	if (chatSupport === ChatSupportState.Unavailable) {
-		return null;
-	}
-
-	const handleClick = (): void => {
-		if (chatSupport === ChatSupportState.NeedsCard) {
-			setIsAddCreditCardModalOpen(true);
-			return;
-		}
-		window.Pylon?.('show');
-	};
-
-	return (
-		<>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<MessageSquareText size={16} />}
-				onClick={handleClick}
-				testId="bottom-strip-support"
-			>
-				Support
-			</Button>
-
-			<AddCreditCardModal
-				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-			/>
-		</>
-	);
-}
-
-export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -1,81 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { render } from 'tests/test-utils';
-
-import SupportButton from '../SupportButton';
-
-jest.mock('hooks/useChatSupport', () => ({
-	...jest.requireActual('hooks/useChatSupport'),
-	useChatSupport: jest.fn(),
-}));
-
-const mockChatSupport = useChatSupport as jest.MockedFunction<
-	typeof useChatSupport
->;
-
-const BUTTON = 'bottom-strip-support';
-const MODAL_TITLE = 'Add Credit Card for Chat Support';
-
-describe('SupportButton', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		window.Pylon = jest.fn() as never;
-	});
-
-	describe('when Pylon is available', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
-
-		it('shows the button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the Pylon widget on click', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(window.Pylon).toHaveBeenCalledWith('show');
-		});
-
-		it('does not open the credit card modal', () => {
-			const { getByTestId, queryByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('when the user needs a card', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
-
-		it('shows the same button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the credit card modal on click, not Pylon', () => {
-			const { getByTestId, getByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
-			expect(window.Pylon).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('when support is unavailable', () => {
-		beforeEach(() =>
-			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
-		);
-
-		it('renders nothing at all', () => {
-			const { queryByTestId } = render(<SupportButton />);
-
-			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,65 +1,12 @@
-import { useMemo, useState } from 'react';
-import { fireEvent } from '@testing-library/react';
 import { render } from 'tests/test-utils';
-import { Info } from 'types/api/v1/version/get';
 
 import BottomStrip, {
 	BOTTOM_STRIP_HEIGHT,
 	BOTTOM_STRIP_HEIGHT_VAR,
 	BOTTOM_STRIP_ON_CLASS,
 } from '..';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { useBottomStrip } from '../useBottomStrip';
-import { StripItemKind } from '../types';
-
-/** Stands in for a page that puts something on the left of the strip. */
-function Page({ text }: { text: string }): null {
-	useBottomStrip(useMemo(() => [{ kind: StripItemKind.Text, text }], [text]));
-	return null;
-}
-
-/**
- * A page whose icon throws when the strip renders it. `prefix` is the one place
- * the config still takes a node, so it is the only way a page can break it.
- */
-function BoomPage(): null {
-	useBottomStrip([{ kind: StripItemKind.Text, text: 'boom', prefix: <Boom /> }]);
-	return null;
-}
-
-/** A page whose value changes without needing `rerender`. */
-function ChangingPage(): JSX.Element {
-	const [count, setCount] = useState(600);
-
-	useBottomStrip(
-		useMemo(
-			() => [{ kind: StripItemKind.Text, text: `${count} traces` }],
-			[count],
-		),
-	);
-
-	return (
-		<button type="button" onClick={(): void => setCount(42)}>
-			change
-		</button>
-	);
-}
-
-/** A page node that blows up while the strip renders it. */
-function Boom(): JSX.Element {
-	throw new Error('bad left node');
-}
-
-const VERSION = 'v0.134.67';
-const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
-const withVersion = { appContextOverrides: { versionData } };
 
 describe('BottomStrip', () => {
-	// The store is module level, so it outlives each test.
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
 	it('publishes the body class and height property while mounted', () => {
 		const { unmount } = render(<BottomStrip />);
 
@@ -81,96 +28,22 @@ describe('BottomStrip', () => {
 	it.each([['v0.134.67'], ['main-64f1c2a']])(
 		'renders the build version %p exactly as given',
 		(version) => {
-			const { getByText } = render(<BottomStrip />, undefined, {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
 				appContextOverrides: {
 					versionData: { version, ee: 'Y', setupCompleted: true },
 				},
 			});
 
-			expect(getByText(version)).toBeInTheDocument();
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
 		},
 	);
 
 	it('renders the strip without a version when none is available', () => {
-		const { getByTestId } = render(<BottomStrip />, undefined, {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
 			appContextOverrides: { versionData: null },
 		});
 
-		const strip = getByTestId('bottom-strip');
-
-		expect(strip).toBeInTheDocument();
-		expect(strip).toHaveTextContent('');
-	});
-
-	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
-	// re-renders the original tree. These drive change through state and through
-	// separate trees instead, which the module-level store lets them share.
-	describe('left slot', () => {
-		it('shows what the page put there instead of the version', () => {
-			render(<Page text="600 traces" />);
-			const { getByText, queryByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-			expect(queryByText(VERSION)).not.toBeInTheDocument();
-		});
-
-		it('falls back to the version once the page is gone', () => {
-			const page = render(<Page text="600 traces" />);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			page.unmount();
-
-			expect(getByText(VERSION)).toBeInTheDocument();
-		});
-
-		it('updates when the page changes what it shows', () => {
-			render(<ChangingPage />);
-			const { getByText, getByRole } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-
-			fireEvent.click(getByRole('button', { name: 'change' }));
-
-			expect(getByText('42 traces')).toBeInTheDocument();
-		});
-
-		it('falls back to the version when the page node throws', () => {
-			// React logs the caught error, which is noise here.
-			const consoleError = jest
-				.spyOn(console, 'error')
-				.mockImplementation(() => {});
-
-			render(<BoomPage />);
-			const { getByTestId, getByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByTestId('bottom-strip')).toBeInTheDocument();
-			expect(getByText(VERSION)).toBeInTheDocument();
-
-			consoleError.mockRestore();
-		});
-
-		it('keeps the new page value when the old page unmounts after it', () => {
-			// Navigation order: the next page mounts before the last one unmounts,
-			// so without the owner guard the outgoing page wipes the incoming value.
-			const pageA = render(<Page text="page A" />);
-			render(<Page text="page B" />);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			pageA.unmount();
-
-			expect(getByText('page B')).toBeInTheDocument();
-		});
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
 	});
 });

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.module.scss

@@ -1,24 +0,0 @@
-// `:` is spaced like a word, per the Figma, so the gap here is a space width
-// rather than the wider gap between whole items.
-.keyValue {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-}
-
-.prefix {
-	display: inline-flex;
-	align-items: center;
-	margin-right: var(--spacing-1);
-}
-
-.warning {
-	color: var(--warning);
-}
-
-.error {
-	color: var(--destructive);
-}

frontend/src/container/BottomStrip/components/StripKeyValue/StripKeyValue.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import { StripTone } from '../../types';
-
-import styles from './StripKeyValue.module.scss';
-
-export interface StripKeyValueProps {
-	label: string;
-	value: string | number;
-	/** Leading icon. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-	/** Tints the icon; the text stays neutral at every tone. */
-	tone?: StripTone;
-}
-
-/** A labelled number, rendered `Spans : 31`. */
-function StripKeyValue({
-	label,
-	value,
-	prefix,
-	tone,
-}: StripKeyValueProps): JSX.Element {
-	return (
-		<span className={styles.keyValue}>
-			{prefix && (
-				<span className={cx(styles.prefix, tone && styles[tone])} data-tone={tone}>
-					{prefix}
-				</span>
-			)}
-			<Typography.Text as="span" className={styles.label}>
-				{label}
-			</Typography.Text>
-			<Typography.Text as="span" className={styles.colon}>
-				:
-			</Typography.Text>
-			<Typography.Text as="span" className={styles.value}>
-				{value}
-			</Typography.Text>
-		</span>
-	);
-}
-
-StripKeyValue.defaultProps = { prefix: undefined, tone: StripTone.Default };
-
-export default StripKeyValue;

frontend/src/container/BottomStrip/components/StripKeyValue/__tests__/StripKeyValue.test.tsx

@@ -1,46 +0,0 @@
-import { render } from 'tests/test-utils';
-
-import { StripTone } from '../../../types';
-
-import StripKeyValue from '../StripKeyValue';
-
-describe('StripKeyValue', () => {
-	it('renders the label and the value around a colon it owns', () => {
-		const { getByText, container } = render(
-			<StripKeyValue label="Spans" value={31} />,
-		);
-
-		expect(getByText('Spans')).toBeInTheDocument();
-		expect(getByText('31')).toBeInTheDocument();
-		// The consumer never builds the string, so the spacing cannot drift.
-		expect(container.textContent).toBe('Spans:31');
-	});
-
-	it('tints only the icon when the tone is set', () => {
-		const { container } = render(
-			<StripKeyValue
-				label="Errors"
-				value={4}
-				tone={StripTone.Error}
-				prefix={<svg data-testid="icon" />}
-			/>,
-		);
-
-		// The tone lands on the icon, never on the text.
-		expect(container.querySelector('[data-tone]')).toHaveAttribute(
-			'data-tone',
-			'error',
-		);
-	});
-
-	it('leaves the icon untinted by default', () => {
-		const { container } = render(
-			<StripKeyValue label="Errors" value={0} prefix={<svg />} />,
-		);
-
-		expect(container.querySelector('[data-tone]')).toHaveAttribute(
-			'data-tone',
-			'default',
-		);
-	});
-});

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -1,10 +0,0 @@
-.stripTypography {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './StripTypography.module.scss';
-
-interface StripTypographyProps {
-	children: ReactNode;
-	/** Leading icon. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-}
-
-/** A single phrase. A labelled number belongs in `StripKeyValue`. */
-function StripTypography({
-	children,
-	prefix,
-}: StripTypographyProps): JSX.Element {
-	return (
-		<span className={styles.stripTypography}>
-			{prefix}
-			<Typography.Text as="span">{children}</Typography.Text>
-		</span>
-	);
-}
-
-StripTypography.defaultProps = { prefix: undefined };
-
-export type { StripTypographyProps };
-export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,8 +1,5 @@
 import { useLayoutEffect } from 'react';
-
-import AskNoz from './AskNoz/AskNoz';
-import LeftSlot from './LeftSlot/LeftSlot';
-import SupportButton from './SupportButton/SupportButton';
+import { useAppContext } from 'providers/App/App';
 
 import styles from './BottomStrip.module.scss';
 
@@ -12,6 +9,9 @@ export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
 export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
 
 function BottomStrip(): JSX.Element {
+	const { versionData } = useAppContext();
+	const version = versionData?.version?.trim();
+
 	useLayoutEffect(() => {
 		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
 		document.body.style.setProperty(
@@ -28,12 +28,13 @@ function BottomStrip(): JSX.Element {
 	return (
 		<div className={styles.strip} data-testid="bottom-strip">
 			<div className={styles.left}>
-				<LeftSlot />
-			</div>
-			<div className={styles.right}>
-				<AskNoz />
-				<SupportButton />
+				{version && (
+					<span className={styles.version} data-testid="bottom-strip-version">
+						{version}
+					</span>
+				)}
 			</div>
+			<div className={styles.right} />
 		</div>
 	);
 }

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -1,27 +0,0 @@
-import { create } from 'zustand';
-
-import type { StripItem } from '../types';
-
-interface BottomStripState {
-	/** What the strip shows on the left, or null to fall back to the version. */
-	left: StripItem[] | null;
-	/** Which page owns the current value — see `clearLeft`. */
-	ownerId: string | null;
-	setLeft: (ownerId: string, left: StripItem[] | null) => void;
-	clearLeft: (ownerId: string) => void;
-}
-
-export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
-	left: null,
-	ownerId: null,
-	setLeft: (ownerId, left): void => set({ left, ownerId }),
-	// Only the current owner may clear. On a plain route swap React runs the old
-	// page's cleanup before the new page's effect, so this is moot, but two
-	// consumers can be mounted at once (a page under a drawer): the one that set
-	// last owns the slot, and the other unmounting must not wipe it.
-	clearLeft: (ownerId): void => {
-		if (get().ownerId === ownerId) {
-			set({ left: null, ownerId: null });
-		}
-	},
-}));

frontend/src/container/BottomStrip/types.ts

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-
-export enum StripTone {
-	Default = 'default',
-	Warning = 'warning',
-	Error = 'error',
-}
-
-export enum StripItemKind {
-	/** A phrase in the page's own words, e.g. "18 services". */
-	Text = 'text',
-	/** A labelled number, rendered `label : value`. */
-	KeyValue = 'keyValue',
-}
-
-/** What a page may put on the left of the strip. */
-export type StripItem =
-	| {
-			kind: StripItemKind.Text;
-			text: string;
-			prefix?: ReactNode;
-	  }
-	| {
-			kind: StripItemKind.KeyValue;
-			/** Without a colon; the strip renders the separator. */
-			label: string;
-			value: string | number;
-			prefix?: ReactNode;
-			/** Tints the icon; the text stays neutral at every tone. */
-			tone?: StripTone;
-	  };

frontend/src/container/BottomStrip/useBottomStrip.ts

@@ -1,25 +0,0 @@
-import { useEffect, useId } from 'react';
-
-import { useBottomStripStore } from './store/useBottomStripStore';
-import type { StripItem } from './types';
-
-/**
- * Puts `items` in the bottom strip for as long as the calling page is mounted.
- * Pass null to show nothing and let the version through. The left is the only
- * side a page contributes to; the right is the strip's own.
- *
- * There is no refresh API by design: a page that refetches re-renders, which
- * produces new items, which re-runs this effect. Memoise the array where it is
- * built, or the store is written on every render.
- */
-export function useBottomStrip(items: StripItem[] | null): void {
-	const ownerId = useId();
-	const setLeft = useBottomStripStore((state) => state.setLeft);
-	const clearLeft = useBottomStripStore((state) => state.clearLeft);
-
-	useEffect(() => {
-		setLeft(ownerId, items);
-
-		return (): void => clearLeft(ownerId);
-	}, [items, ownerId, setLeft, clearLeft]);
-}

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,7 +8,7 @@ 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';

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/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';
@@ -140,6 +141,13 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
+	const explorerActions = useMemo(
+		() => (
+			<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
+		),
+		[exportDefaultQuery],
+	);
+
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -416,14 +424,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 +482,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 ||

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

@@ -10,6 +10,8 @@ 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';
@@ -347,56 +349,62 @@ 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
+				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
+			>
+				<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}
+								/>
+							</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"
-				/>
-				<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>
+			</QuickFiltersLayout>
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}

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/SavedViews/SaveChangesMenu.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { Check } from '@signozhq/icons';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import SavedViewsIconButton from './SavedViewsIconButton';
+import { SaveChangesMenuProps } from './types';
+
+function SaveChangesMenu({
+	disabled,
+	onSaveAsNew,
+	onUpdate,
+}: SaveChangesMenuProps): JSX.Element {
+	const items = useMemo<MenuItem[]>(
+		() => [
+			{ key: 'save-as-new', label: 'Save as new view', onClick: onSaveAsNew },
+			{ key: 'update', label: 'Update selected view', onClick: onUpdate },
+		],
+		[onSaveAsNew, onUpdate],
+	);
+
+	return (
+		<DropdownMenuSimple menu={{ items }} align="end">
+			<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,94 @@
+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,
+	isSaving,
+	onClose,
+	onSave,
+}: SaveViewModalProps): JSX.Element {
+	const [name, setName] = useState('');
+	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/SavedViewsHeader.module.scss

@@ -0,0 +1,61 @@
+.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
+		);
+	}
+}
+
+.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);
+	}
+}
+
+.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);
+}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -0,0 +1,146 @@
+import { useCallback, useState } from 'react';
+import cx from 'classnames';
+import { 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_TOAST_POSITION } from './constants';
+import { useActiveSavedView } from './hooks/useActiveSavedView';
+import { useRestoreLastUsedView } from './hooks/useRestoreLastUsedView';
+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,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent while the list is on screen.
+	onOpenViews?: () => void;
+}): JSX.Element {
+	const { view, isLoading, hasUnsavedChanges } = useActiveSavedView(source);
+	const { selectView, revertView, clearView, createView, updateView, isSaving } =
+		useSavedViewActions(source);
+	useRestoreLastUsedView({ source, selectView });
+
+	const [modalMode, setModalMode] = useState<SaveViewModalMode | null>(null);
+
+	const handleSave = useCallback(
+		async (displayName: string): Promise<boolean> => {
+			const id = await createView(displayName);
+			if (!id) {
+				return false;
+			}
+			toast.success('You have created a new view.', {
+				position: SAVED_VIEW_TOAST_POSITION,
+				...(onOpenViews && { action: { label: 'View', onClick: onOpenViews } }),
+			});
+			return true;
+		},
+		[createView, onOpenViews],
+	);
+
+	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 name = view?.spec.displayName ?? MY_VIEW_NAME;
+	const isDirty = !!view && hasUnsavedChanges;
+
+	return (
+		<div
+			className={cx(styles.header, { [styles.isDirty]: isDirty })}
+			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 })}
+						data-testid="saved-views-name"
+					>
+						{isDirty && <span className={styles.dot} />}
+						<span className={styles.nameText}>{name}</span>
+					</span>
+				</TooltipSimple>
+			)}
+
+			<div className={styles.actions}>
+				{!view && (
+					<SavedViewsIconButton
+						title="Create new view"
+						icon={<Plus size={14} />}
+						disabled={isLoading}
+						onClick={(): void => setModalMode('create')}
+						testId="saved-views-create"
+					/>
+				)}
+				{view && !isDirty && (
+					<SavedViewsIconButton
+						title="Clear view"
+						icon={<Undo2 size={14} />}
+						onClick={clearView}
+						testId="saved-views-clear"
+					/>
+				)}
+				{view && isDirty && (
+					<>
+						<SaveChangesMenu
+							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} />}
+						onClick={onOpenViews}
+						testId="saved-views-open"
+					/>
+				)}
+			</div>
+
+			{modalMode && (
+				<SaveViewModal
+					mode={modalMode}
+					isSaving={isSaving}
+					onClose={closeModal}
+					onSave={handleSave}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsHeader;

frontend/src/container/SavedViews/SavedViewsIconButton.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+
+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,
+		onClick,
+		...triggerProps
+	},
+	ref,
+): JSX.Element {
+	return (
+		<TooltipSimple title={title}>
+			<Button
+				ref={ref}
+				variant="ghost"
+				color={color}
+				size="icon"
+				aria-label={title}
+				prefix={icon}
+				disabled={disabled}
+				onClick={onClick}
+				{...triggerProps}
+				data-testid={testId}
+			/>
+		</TooltipSimple>
+	);
+});
+
+export default SavedViewsIconButton;

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

@@ -0,0 +1,21 @@
+.panel {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	color: var(--l1-foreground);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-2) var(--spacing-3);
+	border-bottom: 1px solid var(--l1-border);
+	flex-shrink: 0;
+}
+
+.title {
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+}

frontend/src/container/SavedViews/SavedViewsPanel.tsx

@@ -0,0 +1,40 @@
+import { X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './SavedViewsPanel.module.scss';
+
+function SavedViewsPanel({
+	source,
+	onClose,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent when the list is always on screen.
+	onClose?: () => void;
+}): JSX.Element {
+	return (
+		<div
+			className={styles.panel}
+			data-testid="saved-views-panel"
+			data-source={source}
+		>
+			<div className={styles.header}>
+				<Typography.Text className={styles.title}>All views</Typography.Text>
+				{onClose && (
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Close"
+						prefix={<X size={14} />}
+						onClick={onClose}
+						data-testid="saved-views-close"
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default SavedViewsPanel;

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.save.test.tsx

@@ -0,0 +1,211 @@
+import { act, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SavedViewsHeader from '../SavedViewsHeader';
+import {
+	explorerUrl,
+	makeView,
+	mockSavedViewsApi,
+	queryWith,
+	renderWithExplorerProviders,
+	urlParam,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+function renderHeader(
+	url: string,
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<SavedViewsHeader
+			source={SavedviewtypesSourceDTO.traces}
+			onOpenViews={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
+const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
+
+async function openDirtyView(
+	view: ReturnType<typeof makeView>,
+): Promise<ReturnType<typeof renderWithExplorerProviders>> {
+	const rendered = renderHeader(viewUrl(PATH, view));
+	await waitFor(() =>
+		expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
+			view.spec.displayName,
+		),
+	);
+	await waitFor(() =>
+		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
+	);
+	act(() => {
+		rendered.history.push(
+			explorerUrl(PATH, {
+				query: queryWith(DataSource.TRACES, 'has_error = false'),
+				panelType: PANEL_TYPES.LIST,
+				viewKey: view.id,
+			}),
+		);
+	});
+	await waitFor(() =>
+		expect(screen.getByTestId('saved-views-discard')).toBeInTheDocument(),
+	);
+	return rendered;
+}
+
+async function chooseFromSaveMenu(item: string): Promise<void> {
+	await userEvent.click(screen.getByTestId('saved-views-save-changes'));
+	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
+}
+
+async function submitName(name: string): Promise<void> {
+	await userEvent.type(screen.getByTestId('save-view-name'), name);
+	await userEvent.click(screen.getByTestId('save-view-submit'));
+}
+
+describe('SavedViewsHeader saving', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	describe('create', () => {
+		it('saves the current state under a generated name and opens it', async () => {
+			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
+			const { history } = renderHeader(explorerUrl(PATH, {}));
+
+			await userEvent.click(screen.getByTestId('saved-views-create'));
+
+			expect(within(modal()).getByText('Create new view')).toBeInTheDocument();
+			expect(screen.getByTestId('save-view-submit')).toBeDisabled();
+
+			await submitName('Slow checkout');
+
+			await waitFor(() => expect(requests.created).toHaveLength(1));
+			expect(requests.created[0]).toStrictEqual(
+				expect.objectContaining({
+					generateName: true,
+					source: SavedviewtypesSourceDTO.traces,
+					schemaVersion: 'v2',
+					spec: expect.objectContaining({
+						displayName: 'Slow checkout',
+						panelType: 'list',
+					}),
+				}),
+			);
+			await waitFor(() =>
+				expect(urlParam(history, QueryParams.viewKey)).toBe(
+					JSON.stringify('view-new'),
+				),
+			);
+			expect(toast.success).toHaveBeenCalledWith(
+				'You have created a new view.',
+				expect.objectContaining({ position: 'top-right' }),
+			);
+			await waitFor(() => expect(isModalOpen()).toBe(false));
+			await waitFor(() =>
+				expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
+					'Slow checkout',
+				),
+			);
+		});
+
+		it('keeps the modal open and reports a failed save', async () => {
+			const requests = mockSavedViewsApi([], { createStatus: 500 });
+			const { history } = renderHeader(explorerUrl(PATH, {}));
+
+			await userEvent.click(screen.getByTestId('saved-views-create'));
+			await submitName('Slow checkout');
+
+			await waitFor(() => expect(toast.error).toHaveBeenCalled());
+			expect(requests.created).toHaveLength(1);
+			expect(isModalOpen()).toBe(true);
+			expect(screen.getByTestId('save-view-name')).toHaveValue('Slow checkout');
+			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+			expect(toast.success).not.toHaveBeenCalled();
+		});
+
+		it('cancel closes the modal without saving', async () => {
+			const requests = mockSavedViewsApi([]);
+			renderHeader(explorerUrl(PATH, {}));
+
+			await userEvent.click(screen.getByTestId('saved-views-create'));
+			await userEvent.type(screen.getByTestId('save-view-name'), 'Draft');
+			await userEvent.click(screen.getByTestId('save-view-cancel'));
+
+			await waitFor(() => expect(isModalOpen()).toBe(false));
+			expect(requests.created).toHaveLength(0);
+		});
+	});
+
+	it('save as new creates another view from the changed state', async () => {
+		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+		const requests = mockSavedViewsApi([errors], { createdId: 'view-copy' });
+		const { history } = await openDirtyView(errors);
+
+		await chooseFromSaveMenu('Save as new view');
+
+		expect(within(modal()).getByText('Save as new view')).toBeInTheDocument();
+		await submitName('Errors copy');
+
+		await waitFor(() => expect(requests.created).toHaveLength(1));
+		const body = requests.created[0] as {
+			spec: {
+				displayName: string;
+				queries: { spec: { filter: { expression: string } } }[];
+			};
+		};
+		expect(body.spec.displayName).toBe('Errors copy');
+		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
+		expect(requests.updated).toHaveLength(0);
+		await waitFor(() =>
+			expect(urlParam(history, QueryParams.viewKey)).toBe(
+				JSON.stringify('view-copy'),
+			),
+		);
+	});
+
+	it('update stores the changed state on the open view, keeping its name', async () => {
+		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+		const requests = mockSavedViewsApi([errors]);
+		await openDirtyView(errors);
+
+		await chooseFromSaveMenu('Update selected view');
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		const { id, body } = requests.updated[0] as {
+			id: string;
+			body: {
+				source: string;
+				spec: {
+					displayName: string;
+					queries: { spec: { filter: { expression: string } } }[];
+				};
+			};
+		};
+		expect(id).toBe('view-1');
+		expect(body.source).toBe(SavedviewtypesSourceDTO.traces);
+		expect(body.spec.displayName).toBe('Errors');
+		expect(body.spec.queries[0].spec.filter.expression).toBe('has_error = false');
+		await waitFor(() =>
+			expect(toast.success).toHaveBeenCalledWith(
+				'View updated',
+				expect.objectContaining({ position: 'top-right' }),
+			),
+		);
+		expect(requests.created).toHaveLength(0);
+	});
+});

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.test.tsx

@@ -0,0 +1,325 @@
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { useActiveSavedView } from '../hooks/useActiveSavedView';
+import SavedViewsHeader from '../SavedViewsHeader';
+import {
+	explorerUrl,
+	makeView,
+	mockSavedViewsApi,
+	queryWith,
+	renderWithExplorerProviders,
+	urlParam,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+const slow = makeView({
+	id: 'view-2',
+	displayName: 'Slow spans',
+	expression: 'duration_nano > 1000',
+	panelType: PANEL_TYPES.TIME_SERIES,
+});
+
+function renderHeader(
+	url: string,
+	onOpenViews: (() => void) | undefined = jest.fn(),
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<>
+			<SavedViewsHeader
+				source={SavedviewtypesSourceDTO.traces}
+				onOpenViews={onOpenViews}
+			/>
+			<RenderRecorder />
+		</>,
+		url,
+	);
+}
+
+const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
+const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
+const saveChanges = (): HTMLElement =>
+	screen.getByTestId('saved-views-save-changes');
+
+async function waitForView(name: string): Promise<void> {
+	await waitFor(() => expect(chip()).toHaveTextContent(name));
+	await waitFor(() =>
+		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
+	);
+}
+
+// Each render's answer from the hook the header reads, so a state that lasts a
+// single render is seen too.
+interface RenderRecord {
+	viewId?: string;
+	dirty: boolean;
+	// The staged query had not caught up with the url yet.
+	isStaging: boolean;
+}
+let renders: RenderRecord[] = [];
+function RenderRecorder(): null {
+	const { view, hasUnsavedChanges } = useActiveSavedView(
+		SavedviewtypesSourceDTO.traces,
+	);
+	const { stagedQuery } = useQueryBuilder();
+	const compositeQuery = useGetCompositeQueryParam();
+	renders.push({
+		viewId: view?.id,
+		dirty: hasUnsavedChanges,
+		isStaging: stagedQuery?.id !== compositeQuery?.id,
+	});
+	return null;
+}
+
+async function recordRenders(change: () => void): Promise<RenderRecord[]> {
+	renders = [];
+	act(change);
+	await waitFor(() =>
+		expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
+	);
+	await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
+	return renders;
+}
+
+describe('SavedViewsHeader', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	it('shows My view with create and all views when no view is open', async () => {
+		mockSavedViewsApi([errors]);
+		renderHeader(explorerUrl(PATH, {}));
+
+		expect(chip()).toHaveTextContent('My view');
+		expect(screen.getByTestId('saved-views-create')).toBeInTheDocument();
+		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
+		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
+		expect(screen.queryByTestId('saved-views-save-changes')).toBeNull();
+		expect(screen.queryByTestId('saved-views-discard')).toBeNull();
+	});
+
+	it('shows a skeleton while the view in the url loads', async () => {
+		mockSavedViewsApi([errors], { getDelay: 150 });
+		renderHeader(viewUrl(PATH, errors));
+
+		expect(screen.getByTestId('saved-views-loading')).toBeInTheDocument();
+		await waitForView('Errors');
+		expect(screen.queryByTestId('saved-views-loading')).toBeNull();
+	});
+
+	it('shows the open view clean, with clear and all views', async () => {
+		mockSavedViewsApi([errors]);
+		renderHeader(viewUrl(PATH, errors));
+
+		await waitForView('Errors');
+		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
+		expect(screen.queryByTestId('saved-views-create')).toBeNull();
+		expect(isDirty()).toBe(false);
+	});
+
+	it('falls back to My view when the view in the url does not load', async () => {
+		mockSavedViewsApi([]);
+		renderHeader(viewUrl(PATH, errors));
+
+		await waitFor(() =>
+			expect(screen.queryByTestId('saved-views-loading')).toBeNull(),
+		);
+		expect(chip()).toHaveTextContent('My view');
+	});
+
+	it('marks the view dirty once the query changes, swapping in save and discard', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(viewUrl(PATH, errors));
+		await waitForView('Errors');
+
+		act(() => {
+			history.push(
+				explorerUrl(PATH, {
+					query: queryWith(DataSource.TRACES, 'has_error = false'),
+					panelType: PANEL_TYPES.LIST,
+					viewKey: errors.id,
+				}),
+			);
+		});
+
+		await waitFor(() => expect(isDirty()).toBe(true));
+		expect(saveChanges()).toBeInTheDocument();
+		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
+		expect(screen.queryByTestId('saved-views-open')).toBeNull();
+	});
+
+	it('marks the view dirty when only the tab changes', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(viewUrl(PATH, errors));
+		await waitForView('Errors');
+
+		act(() => {
+			const params = new URLSearchParams(history.location.search);
+			params.set(QueryParams.panelTypes, JSON.stringify(PANEL_TYPES.TABLE));
+			history.push(`${PATH}?${params.toString()}`);
+		});
+
+		await waitFor(() => expect(isDirty()).toBe(true));
+	});
+
+	it('discard puts the saved query and tab back', async () => {
+		mockSavedViewsApi([slow]);
+		const { history } = renderHeader(viewUrl(PATH, slow));
+		await waitForView('Slow spans');
+
+		act(() => {
+			history.push(
+				explorerUrl(PATH, {
+					query: queryWith(DataSource.TRACES, 'has_error = true'),
+					panelType: PANEL_TYPES.LIST,
+					viewKey: slow.id,
+				}),
+			);
+		});
+		await waitFor(() => expect(isDirty()).toBe(true));
+
+		await userEvent.click(screen.getByTestId('saved-views-discard'));
+
+		await waitFor(() => expect(isDirty()).toBe(false));
+		expect(urlParam(history, QueryParams.panelTypes)).toBe(
+			JSON.stringify(PANEL_TYPES.TIME_SERIES),
+		);
+		expect(urlParam(history, QueryParams.viewKey)).toBe(JSON.stringify(slow.id));
+		expect(urlParam(history, QueryParams.viewName)).toBeNull();
+		const query = JSON.parse(
+			decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
+		);
+		expect(query.builder.queryData[0].filter.expression).toBe(
+			'duration_nano > 1000',
+		);
+	});
+
+	it('clear drops the view from the url but keeps the time range', async () => {
+		localStorage.setItem(
+			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
+		);
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(viewUrl(PATH, errors, '1h'));
+		await waitForView('Errors');
+
+		await userEvent.click(screen.getByTestId('saved-views-clear'));
+
+		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
+		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+		expect(urlParam(history, QueryParams.panelTypes)).toBeNull();
+		expect(urlParam(history, QueryParams.relativeTime)).toBe('1h');
+		expect(
+			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}'),
+		).toStrictEqual({});
+	});
+
+	describe('last used view', () => {
+		beforeEach(() => {
+			localStorage.setItem(
+				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+				JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
+			);
+		});
+
+		it('reopens on a bare explorer', async () => {
+			mockSavedViewsApi([errors]);
+			const { history } = renderHeader(explorerUrl(PATH, {}));
+
+			await waitForView('Errors');
+			expect(urlParam(history, QueryParams.viewKey)).toBe(
+				JSON.stringify(errors.id),
+			);
+		});
+
+		it('leaves a url with its own query alone', async () => {
+			mockSavedViewsApi([errors]);
+			const { history } = renderHeader(
+				explorerUrl(PATH, {
+					query: queryWith(DataSource.TRACES, 'service.name = "cart"'),
+				}),
+			);
+
+			await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+			expect(chip()).toHaveTextContent('My view');
+			expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+		});
+	});
+
+	describe('unsaved changes indicator', () => {
+		it('never flashes while switching between views already loaded', async () => {
+			mockSavedViewsApi([errors, slow]);
+			const { history } = renderHeader(viewUrl(PATH, slow));
+			await waitForView('Slow spans');
+			act(() => history.push(viewUrl(PATH, errors)));
+			await waitForView('Errors');
+
+			const states = await recordRenders(() => history.push(viewUrl(PATH, slow)));
+
+			expect(chip()).toHaveTextContent('Slow spans');
+			expect(states.some((render) => render.isStaging)).toBe(true);
+			expect(states.filter((render) => render.dirty)).toStrictEqual([]);
+		});
+
+		it('holds while the query keeps changing on a dirty view', async () => {
+			mockSavedViewsApi([errors]);
+			const { history } = renderHeader(viewUrl(PATH, errors));
+			await waitForView('Errors');
+			act(() => {
+				history.push(
+					explorerUrl(PATH, {
+						query: queryWith(DataSource.TRACES, 'has_error = false'),
+						panelType: PANEL_TYPES.LIST,
+						viewKey: errors.id,
+					}),
+				);
+			});
+			await waitFor(() => expect(isDirty()).toBe(true));
+
+			const states = await recordRenders(() =>
+				history.push(
+					explorerUrl(PATH, {
+						query: queryWith(DataSource.TRACES, 'duration_nano > 5'),
+						panelType: PANEL_TYPES.LIST,
+						viewKey: errors.id,
+					}),
+				),
+			);
+
+			expect(states.some((render) => render.isStaging)).toBe(true);
+			expect(states.filter((render) => !render.dirty)).toStrictEqual([]);
+		});
+	});
+
+	it('on metrics compares no columns and has no all views button', async () => {
+		const cpu = makeView({
+			id: 'view-3',
+			displayName: 'CPU',
+			source: SavedviewtypesSourceDTO.metrics,
+			dataSource: DataSource.METRICS,
+			expression: '',
+			panelType: PANEL_TYPES.TIME_SERIES,
+		});
+		mockSavedViewsApi([cpu]);
+		renderWithExplorerProviders(
+			<SavedViewsHeader source={SavedviewtypesSourceDTO.metrics} />,
+			viewUrl(ROUTES.METRICS_EXPLORER_EXPLORER, cpu),
+			DataSource.METRICS,
+		);
+
+		await waitForView('CPU');
+		expect(isDirty()).toBe(false);
+		expect(screen.queryByTestId('saved-views-open')).toBeNull();
+	});
+});

frontend/src/container/SavedViews/__tests__/savedViewsTestUtils.tsx

@@ -0,0 +1,304 @@
+import { ReactElement, useEffect, useMemo } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { render, RenderResult } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSavedViewSpecDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { createMemoryHistory, MemoryHistory } from 'history';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { NuqsAdapter } from 'nuqs/adapters/react';
+import { AppContext } from 'providers/App/App';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import store from 'store';
+import { getAppContextMock } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { __setSearchParamsGetterForTest } from 'utils/getUnstableCurrentSearchParams';
+
+import { getSavedViewQuery } from '../utils/getSavedViewQuery';
+import { toSavedViewSpec } from '../utils/toSavedViewSpec';
+
+export const API = 'http://localhost/api/v2/saved_views';
+
+// The server stores queries through typed structs: nulls, empty strings,
+// zeros and empty lists do not come back.
+function asStoredByServer(value: unknown): unknown {
+	if (Array.isArray(value)) {
+		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
+		return items.length > 0 ? items : undefined;
+	}
+	if (value !== null && typeof value === 'object') {
+		return Object.fromEntries(
+			Object.entries(value)
+				.map(([key, v]) => [key, asStoredByServer(v)] as const)
+				.filter(([, v]) => v !== undefined),
+		);
+	}
+	return value === null || value === '' || value === 0 ? undefined : value;
+}
+
+export function queryWith(dataSource: DataSource, expression: string): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					filter: { expression },
+					aggregations: [{ expression: 'count()' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+export function makeView({
+	id,
+	displayName,
+	source = SavedviewtypesSourceDTO.traces,
+	dataSource = DataSource.TRACES,
+	expression = 'has_error = true',
+	panelType = PANEL_TYPES.LIST,
+}: {
+	id: string;
+	displayName: string;
+	source?: SavedviewtypesSourceDTO;
+	dataSource?: DataSource;
+	expression?: string;
+	panelType?: PANEL_TYPES;
+}): SavedviewtypesSavedViewDTO {
+	const spec = toSavedViewSpec({
+		query: queryWith(dataSource, expression),
+		panelType,
+		displayName,
+	});
+	return {
+		id,
+		name: `${displayName.toLowerCase()}-abc`,
+		source,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
+		createdBy: 'test@signoz.io',
+		updatedBy: 'test@signoz.io',
+		spec: {
+			...spec,
+			queries: asStoredByServer(
+				JSON.parse(JSON.stringify(spec.queries)),
+			) as SavedviewtypesSavedViewSpecDTO['queries'],
+		},
+	} as SavedviewtypesSavedViewDTO;
+}
+
+// Params written the way the query builder redirect writes them.
+export function explorerUrl(
+	path: string,
+	{
+		query,
+		panelType,
+		viewKey,
+		relativeTime = '15m',
+	}: {
+		query?: Query;
+		panelType?: PANEL_TYPES;
+		viewKey?: string;
+		relativeTime?: string;
+	},
+): string {
+	const params = new URLSearchParams();
+	if (query) {
+		params.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify({ ...query, id: `url-${Math.random()}` })),
+		);
+	}
+	if (panelType) {
+		params.set(QueryParams.panelTypes, JSON.stringify(panelType));
+	}
+	if (viewKey) {
+		params.set(QueryParams.viewKey, JSON.stringify(viewKey));
+	}
+	params.set(QueryParams.relativeTime, relativeTime);
+	return `${path}?${params.toString()}`;
+}
+
+export function viewUrl(
+	path: string,
+	view: SavedviewtypesSavedViewDTO,
+	relativeTime?: string,
+): string {
+	return explorerUrl(path, {
+		query: getSavedViewQuery(view),
+		panelType: view.spec.panelType as unknown as PANEL_TYPES,
+		viewKey: view.id,
+		relativeTime,
+	});
+}
+
+export interface Requests {
+	created: unknown[];
+	updated: { id: string; body: unknown }[];
+}
+
+export function mockSavedViewsApi(
+	views: SavedviewtypesSavedViewDTO[],
+	{
+		createStatus = 201,
+		createdId = 'view-new',
+		getDelay = 0,
+	}: { createStatus?: number; createdId?: string; getDelay?: number } = {},
+): Requests {
+	const requests: Requests = { created: [], updated: [] };
+	server.use(
+		rest.get(API, (req, res, ctx) => {
+			const source = req.url.searchParams.get('source');
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: views.filter((view) => !source || view.source === source),
+				}),
+			);
+		}),
+		rest.get(`${API}/:id`, (req, res, ctx) => {
+			const view = views.find((v) => v.id === req.params.id);
+			if (!view) {
+				return res(ctx.status(404), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.delay(getDelay),
+				ctx.status(200),
+				ctx.json({ status: 'success', data: view }),
+			);
+		}),
+		rest.post(API, async (req, res, ctx) => {
+			const body = await req.json();
+			requests.created.push(body);
+			if (createStatus >= 400) {
+				return res(
+					ctx.status(createStatus),
+					ctx.json({
+						status: 'error',
+						error: { code: 'internal', message: 'boom' },
+					}),
+				);
+			}
+			views.push({ ...body, id: createdId } as SavedviewtypesSavedViewDTO);
+			return res(
+				ctx.status(createStatus),
+				ctx.json({ status: 'success', data: { id: createdId } }),
+			);
+		}),
+		rest.put(`${API}/:id`, async (req, res, ctx) => {
+			const body = await req.json();
+			requests.updated.push({ id: String(req.params.id), body });
+			return res(ctx.status(204));
+		}),
+	);
+	return requests;
+}
+
+const mockStore = configureStore([thunk]);
+
+// What the explorer page does around the header: writes its default query to a
+// bare url, and sets the provider's tab from the url (the provider alone seeds
+// it from the raw, still JSON-quoted param).
+function ExplorerShell({ dataSource }: { dataSource: DataSource }): null {
+	const panelType = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const { handleSetConfig, updateAllQueriesOperators } = useQueryBuilder();
+	const defaultQuery = useMemo(
+		() =>
+			updateAllQueriesOperators(
+				initialQueriesMap[dataSource],
+				PANEL_TYPES.LIST,
+				dataSource,
+			),
+		[updateAllQueriesOperators, dataSource],
+	);
+	useShareBuilderUrl({ defaultValue: defaultQuery });
+	useEffect(() => {
+		handleSetConfig(panelType, dataSource);
+	}, [panelType, dataSource, handleSetConfig]);
+	return null;
+}
+
+export function renderWithExplorerProviders(
+	ui: ReactElement,
+	initialUrl: string,
+	dataSource: DataSource = DataSource.TRACES,
+): RenderResult & { history: MemoryHistory } {
+	const history = createMemoryHistory({ initialEntries: [initialUrl] });
+	// Parts of the explorer read window.location directly, so it follows the
+	// router's history.
+	const syncWindowLocation = (): void =>
+		window.history.replaceState(
+			null,
+			'',
+			`${history.location.pathname}${history.location.search}`,
+		);
+	syncWindowLocation();
+	history.listen(syncWindowLocation);
+	__setSearchParamsGetterForTest(
+		() => new URLSearchParams(history.location.search),
+	);
+	safeNavigateMock.mockImplementation((to) => {
+		history.push(
+			typeof to === 'string'
+				? to
+				: `${to.pathname ?? history.location.pathname}${to.search ?? ''}`,
+		);
+	});
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { refetchOnWindowFocus: false, retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+	const result = render(
+		<Router history={history}>
+			<CompatRouter>
+				<NuqsAdapter>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={mockStore(store.getState())}>
+							<AppContext.Provider value={getAppContextMock('ADMIN')}>
+								<TooltipProvider>
+									<PreferenceContextProvider>
+										<QueryBuilderProvider>
+											<ExplorerShell dataSource={dataSource} />
+											{ui}
+										</QueryBuilderProvider>
+									</PreferenceContextProvider>
+								</TooltipProvider>
+							</AppContext.Provider>
+						</Provider>
+					</QueryClientProvider>
+				</NuqsAdapter>
+			</CompatRouter>
+		</Router>,
+	);
+	return { ...result, history };
+}
+
+export function urlParam(history: MemoryHistory, key: string): string | null {
+	return new URLSearchParams(history.location.search).get(key);
+}

frontend/src/container/SavedViews/constants.ts

@@ -0,0 +1,35 @@
+import {
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { SaveViewModalMode } from './types';
+
+export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
+
+// Only the logs and traces explorers have columns and formatting to save.
+export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
+	Record<SavedviewtypesSourceDTO, DataSource>
+> = {
+	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
+	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
+};
+
+// What selecting a view writes to the url, so clearing it removes exactly these.
+export const SAVED_VIEW_URL_PARAMS = [
+	QueryParams.viewKey,
+	QueryParams.viewName,
+	QueryParams.compositeQuery,
+	QueryParams.panelTypes,
+];
+
+export const MY_VIEW_NAME = 'My view';
+
+export const SAVE_VIEW_MODAL_TITLE: Record<SaveViewModalMode, string> = {
+	create: 'Create new view',
+	saveAsNew: 'Save as new view',
+};
+
+export const SAVED_VIEW_TOAST_POSITION = 'top-right' as const;

frontend/src/container/SavedViews/hooks/useActiveSavedView.ts

@@ -0,0 +1,76 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useGetSavedView } from 'api/generated/services/saved-view';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { SAVED_VIEW_OPTIONS_DATA_SOURCE } from '../constants';
+import { UseActiveSavedViewResult } from '../types';
+import { hasUnsavedViewChanges } from '../utils/hasUnsavedViewChanges';
+
+export function useActiveSavedView(
+	source: SavedviewtypesSourceDTO,
+): UseActiveSavedViewResult {
+	const { viewKey } = useGetSavedViewParams();
+	const { stagedQuery, panelType } = useQueryBuilder();
+
+	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
+	const { options } = useOptionsMenu({
+		dataSource: optionsDataSource ?? DataSource.LOGS,
+	});
+
+	const { data, isLoading, isError } = useGetSavedView(
+		{ id: viewKey },
+		{ query: { enabled: !!viewKey } },
+	);
+	const view = viewKey ? data?.data : undefined;
+
+	// The query builder stages the url query a render later. Until the ids
+	// match, keep the last answer for this view; another view starts clean.
+	const compositeQuery = useGetCompositeQueryParam();
+	const isStagedQueryCurrent =
+		!!stagedQuery && stagedQuery.id === compositeQuery?.id;
+	const lastResult = useRef<{ viewId?: string; hasUnsavedChanges: boolean }>({
+		hasUnsavedChanges: false,
+	});
+
+	const hasUnsavedChanges = useMemo((): boolean => {
+		if (!view) {
+			return false;
+		}
+		if (!isStagedQueryCurrent) {
+			return (
+				lastResult.current.viewId === view.id &&
+				lastResult.current.hasUnsavedChanges
+			);
+		}
+		return hasUnsavedViewChanges({
+			view,
+			stagedQuery,
+			panelType: panelType ?? PANEL_TYPES.LIST,
+			options: optionsDataSource ? options : undefined,
+		});
+	}, [
+		view,
+		isStagedQueryCurrent,
+		stagedQuery,
+		panelType,
+		optionsDataSource,
+		options,
+	]);
+
+	useEffect(() => {
+		lastResult.current = { viewId: view?.id, hasUnsavedChanges };
+	}, [view?.id, hasUnsavedChanges]);
+
+	return {
+		view,
+		isLoading: !!viewKey && isLoading,
+		isError: !!viewKey && isError,
+		hasUnsavedChanges,
+	};
+}

frontend/src/container/SavedViews/hooks/useLastUsedView.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import {
+	PreservedViewsInLocalStorage,
+	PreservedViewType,
+} from 'container/ExplorerOptions/types';
+
+import { UseLastUsedViewResult } from '../types';
+
+function readLastUsedViews(): PreservedViewsInLocalStorage {
+	try {
+		return JSON.parse(
+			getLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) || '{}',
+		) as PreservedViewsInLocalStorage;
+	} catch {
+		return {};
+	}
+}
+
+// Read at call time, not held in state: the hook is used from more than one
+// place and a cached copy would bring back a view another caller just cleared.
+export function useLastUsedView(
+	savedViewSource: SavedviewtypesSourceDTO,
+): UseLastUsedViewResult {
+	// The bar's enum carries the same four values as the v2 source.
+	const source = savedViewSource as unknown as PreservedViewType;
+
+	const getLastUsedViewKey = useCallback(
+		(): string | undefined => readLastUsedViews()[source]?.key,
+		[source],
+	);
+
+	const setLastUsedView = useCallback(
+		(id: string, displayName: string): void => {
+			setLocalStorageKey(
+				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+				JSON.stringify({
+					...readLastUsedViews(),
+					[source]: { key: id, value: displayName },
+				}),
+			);
+		},
+		[source],
+	);
+
+	const clearLastUsedView = useCallback((): void => {
+		const { [source]: _removed, ...rest } = readLastUsedViews();
+		setLocalStorageKey(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, JSON.stringify(rest));
+	}, [source]);
+
+	return { getLastUsedViewKey, setLastUsedView, clearLastUsedView };
+}

frontend/src/container/SavedViews/hooks/useRestoreLastUsedView.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react';
+import { useGetSavedView } from 'api/generated/services/saved-view';
+import { QueryParams } from 'constants/query';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
+
+import { UseRestoreLastUsedViewArgs } from '../types';
+import { useLastUsedView } from './useLastUsedView';
+
+export function useRestoreLastUsedView({
+	source,
+	selectView,
+}: UseRestoreLastUsedViewArgs): void {
+	const { viewKey } = useGetSavedViewParams();
+	const { getLastUsedViewKey, clearLastUsedView } = useLastUsedView(source);
+
+	// Decided on the first render, before the explorer writes its default query
+	// to the url; later an empty url means the view was cleared.
+	const [lastUsedViewKey] = useState(() => {
+		const params = getUnstableCurrentSearchParams();
+		const isBare =
+			!params.get(QueryParams.viewKey) && !params.get(QueryParams.compositeQuery);
+		return isBare ? getLastUsedViewKey() : undefined;
+	});
+	const hasRestored = useRef(false);
+
+	const shouldRestore = !!lastUsedViewKey && !viewKey && !hasRestored.current;
+
+	const { data, isError } = useGetSavedView(
+		{ id: lastUsedViewKey ?? '' },
+		{ query: { enabled: shouldRestore } },
+	);
+	const view = data?.data;
+
+	useEffect(() => {
+		if (!shouldRestore) {
+			return undefined;
+		}
+		if (isError) {
+			hasRestored.current = true;
+			clearLastUsedView();
+			return undefined;
+		}
+		if (!view) {
+			return undefined;
+		}
+
+		// Deferred like the bar's restore, so it lands after the explorer has
+		// written its default query to the url.
+		const timeoutId = setTimeout(() => {
+			hasRestored.current = true;
+			selectView(view);
+		}, 0);
+		return (): void => clearTimeout(timeoutId);
+	}, [shouldRestore, isError, view, clearLastUsedView, selectView]);
+}