feat(saved-views): read saved views from the v2 api on home, noz and column sync (#12970)

#### Description
- moved the home saved views widget, noz open saved view and the saved
view column/format sync (`usePreferenceSync`) from
`/api/v1/explorer/views` to `/api/v2/saved_views`.. generated client and
DTOs used as is, no adapter. labels read `spec.displayName`, columns
`spec.selectedFields`, formatting `spec.display`.
- small `container/SavedViews/utils.ts` for the two things every v2
consumer needs.. shaping the v2 spec for the existing v5 reverse mapper,
and the `DataSource` → api source map. rest of the saved views hooks
come with the sidebar work.
- explorer bottom bar, the `/saved-views` pages and `ExplorerCard` stay
on v1 on purpose.. they get deleted with the bottom strip work, no point
migrating something with a death date. v1 and v2 run in parallel till
then.
- home widget drops the tags badges (nothing ever wrote tags) and the
extra lookup on click. functionalities kept same.

#### Issues closed by this PR

Closes https://github.com/SigNoz/engineering-pod/issues/6095
Part of https://github.com/SigNoz/engineering-pod/issues/5918

#### Additional Information
- traces view with no saved columns now falls back to the typed
`defaultTraceSelectedColumns` (what the loader uses) instead of the
string list from `ListView/configs`.. old one was strings in a
`TelemetryFieldKey[]` hidden by `JSON.parse`.
- `viewName` is still written to the url on open so the old bar shows
the view as selected.. goes away when the bar does.
- noz open view could not be tested locally, covered by unit tests only.
- home storybook mocks regenerated for the v2 endpoint.

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).toHaveAccessibleName('Download');
+		expect(button).toHaveClass('periscope-btn', 'ghost');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

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

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

@@ -3,15 +3,22 @@ import {
 	MessageActionKindDTO,
 	SavedViewEntityDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import {
+	GetSavedView200,
+	ListSavedViews200,
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
-import { AxiosResponse } from 'axios';
 import type { History } from 'history';
 
 import {
@@ -31,8 +38,7 @@ import {
 } from '../resolveOpenResource';
 import { resourceRoute, ResourceType } from '../resourceRoute';
 
-jest.mock('api/saveView/getAllViews');
-jest.mock('api/saveView/getViewById');
+jest.mock('api/generated/services/saved-view');
 
 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -48,43 +54,45 @@ jest.mock(
 	}),
 );
 
-const mockedGetAllViews = getAllViews as jest.MockedFunction<
-	typeof getAllViews
+const mockedListSavedViews = listSavedViews as jest.MockedFunction<
+	typeof listSavedViews
 >;
-const mockedGetViewById = getViewById as jest.MockedFunction<
-	typeof getViewById
+const mockedGetSavedView = getSavedView as jest.MockedFunction<
+	typeof getSavedView
 >;
 
-function makeView(id: string, sourcePage: DataSource): ViewProps {
+function makeView(
+	id: string,
+	source: SavedviewtypesSourceDTO,
+): SavedviewtypesSavedViewDTO {
 	return {
 		id,
-		name: `View ${id}`,
-		category: 'test',
+		name: `view-${id}`,
+		source,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
 		createdAt: '2021-07-07T06:31:00.000Z',
 		createdBy: 'user',
 		updatedAt: '2021-07-07T06:33:00.000Z',
 		updatedBy: 'user',
-		sourcePage,
-		tags: [],
-		extraData: '',
-		compositeQuery: {
-			panelType: PANEL_TYPES.LIST,
-		} as ICompositeMetricQuery,
-	};
+		spec: {
+			displayName: `View ${id}`,
+			panelType: SavedviewtypesPanelTypeDTO.list,
+			requestType: 'raw',
+			queries: [{ type: 'builder_query', spec: { name: 'A', signal: source } }],
+		},
+	} as unknown as SavedviewtypesSavedViewDTO;
 }
 
-function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
-	return {
-		data: { status: 'success', data: views },
-	} as AxiosResponse<AllViewsProps>;
+function mockViewsResponse(
+	views: SavedviewtypesSavedViewDTO[],
+): ListSavedViews200 {
+	return { status: 'success', data: views };
 }
 
 function mockViewByIdResponse(
-	view: ViewProps,
-): AxiosResponse<{ status: string; data: ViewProps }> {
-	return {
-		data: { status: 'success', data: view },
-	} as AxiosResponse<{ status: string; data: ViewProps }>;
+	view: SavedviewtypesSavedViewDTO,
+): GetSavedView200 {
+	return { status: 'success', data: view };
 }
 
 describe('resourceRoute', () => {
@@ -190,18 +198,33 @@ describe('resolveOpenResource', () => {
 
 describe('findSavedViewInLists', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
+		mockedListSavedViews.mockReset();
 	});
 
 	it('loads only the hinted source when entity is provided', async () => {
-		const tracesView = makeView('view-traces', DataSource.TRACES);
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
+		const tracesView = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
 
 		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);
 
 		expect(result).toStrictEqual(tracesView);
-		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(1);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
+	});
+
+	it('treats a null list as empty and probes the next source', async () => {
+		const metricsView = makeView('view-metrics', SavedviewtypesSourceDTO.metrics);
+		mockedListSavedViews
+			.mockResolvedValueOnce({ status: 'success', data: null })
+			.mockResolvedValueOnce(mockViewsResponse([]))
+			.mockResolvedValueOnce(mockViewsResponse([metricsView]));
+
+		const result = await findSavedViewInLists('view-metrics');
+
+		expect(result).toStrictEqual(metricsView);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(3);
 	});
 });
 
@@ -227,52 +250,75 @@ describe('openSavedView', () => {
 	it('navigates with history.push and view query params', () => {
 		const push = jest.fn();
 		const history = { push } as unknown as History;
-		const view = makeView('view-logs', DataSource.LOGS);
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 
 		openSavedView(view, history);
 
 		expect(push).toHaveBeenCalledTimes(1);
 		const pushedUrl = push.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
-		expect(pushedUrl).toContain(QueryParams.viewKey);
+		const params = new URLSearchParams(pushedUrl.split('?')[1]);
+		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
+		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
+		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
+	});
+
+	it('throws when the view has no source', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		delete view.source;
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Unsupported saved view source');
+	});
+
+	it('throws when the view has no queries', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		view.spec.queries = [];
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Saved view is missing query data');
 	});
 });
 
 describe('openSavedViewByKey', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
-		mockedGetViewById.mockReset();
+		mockedListSavedViews.mockReset();
+		mockedGetSavedView.mockReset();
 	});
 
 	it('prefers the direct view lookup endpoint', async () => {
-		const view = makeView('view-logs', DataSource.LOGS);
-		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		mockedGetSavedView.mockResolvedValueOnce(mockViewByIdResponse(view));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
 
-		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
-		expect(mockedGetAllViews).not.toHaveBeenCalled();
+		expect(mockedGetSavedView).toHaveBeenCalledWith({ id: 'view-logs' });
+		expect(mockedListSavedViews).not.toHaveBeenCalled();
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('falls back to list probing when direct lookup fails', async () => {
-		const view = makeView('view-traces', DataSource.TRACES);
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const view = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([view]));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
 
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('throws when the saved view does not exist', async () => {
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValue(mockViewsResponse([]));
 
 		await expect(
 			openSavedViewByKey('missing', DataSource.LOGS, {

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

@@ -1,15 +1,22 @@
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
-import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';
 
-type SavedViewSourceHint = DataSource | 'meter';
+type SavedViewSourceHint = SavedViewSourcePage;
 
 const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 	DataSource.LOGS,
@@ -20,13 +27,15 @@ const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 export async function findSavedViewInLists(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps | null> {
+): Promise<SavedviewtypesSavedViewDTO | null> {
 	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;
 
 	for (const source of sources) {
 		try {
-			const response = await getAllViews(source);
-			const match = response.data.data.find((view) => view.id === viewKey);
+			const response = await listSavedViews({
+				source: toSavedViewSource(source),
+			});
+			const match = findSavedView(response.data, viewKey);
 			if (match) {
 				return match;
 			}
@@ -41,11 +50,11 @@ export async function findSavedViewInLists(
 async function loadSavedView(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps> {
+): Promise<SavedviewtypesSavedViewDTO> {
 	try {
-		const response = await getViewById(viewKey);
-		if (response.data?.data) {
-			return response.data.data;
+		const response = await getSavedView({ id: viewKey });
+		if (response.data) {
+			return response.data;
 		}
 	} catch {
 		// Fall back to list probing when the direct lookup fails.
@@ -85,20 +94,23 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }
 
-export function openSavedView(view: ViewProps, history: History): void {
-	const route = explorerRouteForSourcePage(view.sourcePage);
+export function openSavedView(
+	view: SavedviewtypesSavedViewDTO,
+	history: History,
+): void {
+	const route = view.source ? explorerRouteForSourcePage(view.source) : null;
 	if (!route) {
 		throw new Error('Unsupported saved view source');
 	}
 
-	if (!view.compositeQuery) {
+	if (!view.spec.queries?.length) {
 		throw new Error('Saved view is missing query data');
 	}
 
-	const query = mapQueryDataFromApi(view.compositeQuery);
+	const query = getSavedViewQuery(view);
 	const url = buildExplorerNavigationUrl(route, query, {
-		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
-		[QueryParams.viewName]: view.name,
+		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
+		[QueryParams.viewName]: view.spec.displayName,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);
@@ -112,6 +124,3 @@ export async function openSavedViewByKey(
 	const view = await loadSavedView(viewKey, sourceHint);
 	openSavedView(view, history);
 }
-
-/** @deprecated Use findSavedViewInLists — kept for tests. */
-export const findSavedView = findSavedViewInLists;

frontend/src/container/ExplorerActions/AddToDashboardButton.tsx

@@ -1,96 +0,0 @@
-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, getExportPanelType } from './utils';
-
-function AddToDashboardButton({
-	query,
-	sourcepage,
-	panelType,
-}: {
-	query: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-}): 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.addToDashboard, {
-			sourcepage,
-			panelType: contextPanelType,
-		});
-		setQueryToExport(query);
-	};
-
-	const handleExport = (
-		dashboard: ExportDashboard | null,
-		isNewDashboard?: boolean,
-	): void => {
-		if (!dashboard || !queryToExport) {
-			return;
-		}
-		const exportPanelType = panelType ?? getExportPanelType(contextPanelType);
-
-		void logEvent(EXPLORER_ACTION_EVENTS.exported, {
-			sourcepage,
-			panelType: exportPanelType,
-			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

@@ -1,54 +0,0 @@
-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 } from './utils';
-
-function CreateAlertButton({
-	query,
-	sourcepage,
-	iconOnly = false,
-}: {
-	query: Query | null;
-	sourcepage: DataSource;
-	iconOnly?: boolean;
-}): JSX.Element {
-	const history = useHistory();
-	const { panelType } = useQueryBuilder();
-
-	const createAlert = (): void => {
-		if (!query) {
-			return;
-		}
-		void logEvent(EXPLORER_ACTION_EVENTS.createAlert, { sourcepage, panelType });
-		history.push(getCreateAlertLink({ query, panelType }));
-	};
-
-	const button = (
-		<Button
-			variant="ghost"
-			color="secondary"
-			size={iconOnly ? 'icon' : 'md'}
-			disabled={!query}
-			onClick={createAlert}
-			prefix={<ConciergeBell size={16} />}
-			aria-label="Create an alert"
-			data-testid="explorer-create-alert"
-		>
-			{!iconOnly && 'Create an alert'}
-		</Button>
-	);
-
-	return iconOnly ? (
-		<TooltipSimple title="Create an alert">{button}</TooltipSimple>
-	) : (
-		button
-	);
-}
-
-export default CreateAlertButton;

frontend/src/container/ExplorerActions/ExplorerActions.tsx

@@ -1,38 +0,0 @@
-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,
-	iconOnly,
-}: {
-	query: Query | null;
-	// When the dashboard export differs from the alert one (traces list injects columns).
-	dashboardQuery?: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-	iconOnly?: boolean;
-}): JSX.Element {
-	return (
-		<>
-			<CreateAlertButton
-				query={query}
-				sourcepage={sourcepage}
-				iconOnly={iconOnly}
-			/>
-			<AddToDashboardButton
-				query={dashboardQuery}
-				sourcepage={sourcepage}
-				panelType={panelType}
-			/>
-		</>
-	);
-}
-
-export default ExplorerActions;

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

@@ -1,317 +0,0 @@
-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 { EXPLORER_ACTION_EVENTS, 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 open and success with the source page', async () => {
-		const query = stagedQuery(DataSource.TRACES);
-
-		await exportTo(query, DataSource.TRACES, PANEL_TYPES.TABLE);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			EXPLORER_ACTION_EVENTS.addToDashboard,
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TABLE,
-			},
-		);
-		expect(mockedLogEvent).toHaveBeenCalledWith(EXPLORER_ACTION_EVENTS.exported, {
-			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

@@ -1,224 +0,0 @@
-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';
-import { EXPLORER_ACTION_EVENTS } from '../utils';
-
-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 one event with the source page', async () => {
-		const query = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
-
-		await clickCreateAlert(query, DataSource.TRACES, PANEL_TYPES.TIME_SERIES);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			EXPLORER_ACTION_EVENTS.createAlert,
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TIME_SERIES,
-			},
-		);
-	});
-
-	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

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

@@ -1,46 +0,0 @@
-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 { cloneDeep } from 'lodash-es';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { StringOperators } from 'types/common/queryBuilder';
-
-export const EXPLORER_ACTION_EVENTS = {
-	createAlert: 'Explorer: Create alert clicked',
-	addToDashboard: 'Explorer: Add to dashboard clicked',
-	exported: 'Explorer: Add to dashboard successful',
-} as const;
-
-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

@@ -1,17 +1,18 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
-import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
+import { useListSavedViews } from 'api/generated/services/saved-view';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { getSavedViewQuery } from 'container/SavedViews/utils';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { ViewProps } from 'types/api/saveViews/types';
-import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 
 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
@@ -35,38 +36,40 @@ export default function SavedViews({
 }): JSX.Element {
 	const { user } = useAppContext();
 	const [selectedEntity, setSelectedEntity] = useState<string>('logs');
-	const [selectedEntityViews, setSelectedEntityViews] = useState<any[]>([]);
+	const [selectedEntityViews, setSelectedEntityViews] = useState<
+		SavedviewtypesSavedViewDTO[]
+	>([]);
 
 	const {
 		data: logsViewsData,
 		isLoading: logsViewsLoading,
 		isError: logsViewsError,
-	} = useGetAllViews(DataSource.LOGS);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.logs });
 
 	const {
 		data: tracesViewsData,
 		isLoading: tracesViewsLoading,
 		isError: tracesViewsError,
-	} = useGetAllViews(DataSource.TRACES);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.traces });
 
 	const {
 		data: metricsViewsData,
 		isLoading: metricsViewsLoading,
 		isError: metricsViewsError,
-	} = useGetAllViews(DataSource.METRICS);
+	} = useListSavedViews({ source: SavedviewtypesSourceDTO.metrics });
 
 	const logsViews = useMemo(
-		() => [...(logsViewsData?.data.data || [])],
+		() => [...(logsViewsData?.data || [])],
 		[logsViewsData],
 	);
 
 	const tracesViews = useMemo(
-		() => [...(tracesViewsData?.data.data || [])],
+		() => [...(tracesViewsData?.data || [])],
 		[tracesViewsData],
 	);
 
 	const metricsViews = useMemo(
-		() => [...(metricsViewsData?.data.data || [])],
+		() => [...(metricsViewsData?.data || [])],
 		[metricsViewsData],
 	);
 
@@ -88,39 +91,22 @@ export default function SavedViews({
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
-	const handleRedirectQuery = (view: ViewProps): void => {
+	const handleRedirectQuery = (view: SavedviewtypesSavedViewDTO): void => {
 		logEvent('Homepage: Saved view clicked', {
 			viewId: view.id,
-			viewName: view.name,
+			viewName: view.spec.displayName,
 			entity: selectedEntity,
 		});
 
-		let currentViews: ViewProps[] = [];
-		if (selectedEntity === 'logs') {
-			currentViews = logsViews;
-		} else if (selectedEntity === 'traces') {
-			currentViews = tracesViews;
-		} else if (selectedEntity === 'metrics') {
-			currentViews = metricsViews;
-		}
-
-		const currentViewDetails = getViewDetailsUsingViewKey(view.id, currentViews);
-		if (!currentViewDetails) {
-			return;
-		}
-		const { query, name, id, panelType: currentPanelType } = currentViewDetails;
-
-		if (selectedEntity) {
-			handleExplorerTabChange(
-				currentPanelType,
-				{
-					query,
-					viewName: name,
-					viewKey: id,
-				},
-				SOURCEPAGE_VS_ROUTES[selectedEntity],
-			);
-		}
+		handleExplorerTabChange(
+			view.spec.panelType,
+			{
+				query: getSavedViewQuery(view),
+				viewName: view.spec.displayName,
+				viewKey: view.id,
+			},
+			SOURCEPAGE_VS_ROUTES[selectedEntity],
+		);
 	};
 
 	useEffect(() => {
@@ -239,24 +225,10 @@ export default function SavedViews({
 							/>
 
 							<div className="saved-view-item-name home-data-item-name">
-								{view.name}
+								{view.spec.displayName}
 							</div>
 						</div>
 
-						<div className="saved-view-item-description home-data-item-tag">
-							{view.tags?.map((tag: string) => {
-								if (tag === '') {
-									return null;
-								}
-
-								return (
-									<Badge color="sienna" key={tag}>
-										{tag}
-									</Badge>
-								);
-							})}
-						</div>
-
 						<Button
 							type="link"
 							size="small"
@@ -307,7 +279,7 @@ export default function SavedViews({
 		logEvent('Homepage: Saved views switched', {
 			tab,
 		});
-		let currentViews: ViewProps[] = [];
+		let currentViews: SavedviewtypesSavedViewDTO[] = [];
 		if (tab === 'logs') {
 			currentViews = logsViews;
 		} else if (tab === 'traces') {

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
@@ -6,6 +6,7 @@ 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';
@@ -13,18 +14,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,
@@ -59,43 +60,48 @@ function LogsActionsContainer({
 		<div className="logs-actions-container">
 			<div className="tab-options">
 				<div className="tab-options-left">
-					<div className="frequency-chart-view-controller">
-						<Typography>Frequency chart</Typography>
-						<Switch
-							value={showFrequencyChart}
-							defaultValue
-							onChange={handleToggleFrequencyChart}
-						/>
-					</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<div className="frequency-chart-view-controller">
+							<Typography>Frequency chart</Typography>
+							<Switch
+								value={showFrequencyChart}
+								defaultValue
+								onChange={handleToggleFrequencyChart}
+							/>
+						</div>
+					)}
 				</div>
 
 				<div className="tab-options-right">
-					{explorerActions}
-					<div className="order-by-container">
-						<div className="order-by-label">
-							Order by <Minus size={14} /> <ArrowUp10 size={14} />
-						</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<>
+							<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,7 +187,6 @@
 					display: flex;
 					justify-content: flex-end;
 					align-items: center;
-					gap: 8px;
 					padding: 12px;
 					flex-shrink: 0;
 				}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -37,7 +37,6 @@ 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';
@@ -141,10 +140,6 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
-	const explorerActions = (
-		<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
-	);
-
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -421,14 +416,14 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && selectedPanelType === PANEL_TYPES.LIST && (
+				{!showLiveLogs && (
 					<LogsActionsContainer
 						listQuery={listQuery}
+						selectedPanelType={selectedPanelType}
 						showFrequencyChart={showFrequencyChart}
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
-						explorerActions={explorerActions}
 					/>
 				)}
 
@@ -479,23 +474,21 @@ function LogsExplorerViewsContainer({
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
 								allowExport
-								headerActions={explorerActions}
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							<div className="table-view-container-header">
-								{explorerActions}
-								{data && !isError && (
+							{data && !isError && (
+								<div className="table-view-container-header">
 									<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

@@ -394,7 +394,6 @@ function Explorer(): JSX.Element {
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
 						isCancelled={isCancelled}
-						exportDefaultQuery={exportDefaultQuery}
 					/>
 				</div>
 			</div>

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

@@ -19,7 +19,6 @@ 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';
@@ -52,7 +51,6 @@ function TimeSeries({
 	showYAxisUnitSelector,
 	metrics,
 	isCancelled = false,
-	exportDefaultQuery,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -274,9 +272,6 @@ function TimeSeries({
 							metricName;
 
 						const currentYAxisUnit = yAxisUnit || metricUnit;
-						const exportQuery = changeLayoutForOneChartPerQuery
-							? queryPayloads[index]
-							: exportDefaultQuery;
 
 						return (
 							<div
@@ -317,14 +312,6 @@ 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}
-											iconOnly={changeLayoutForOneChartPerQuery}
-										/>
-									}
 								/>
 							</div>
 						);

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

@@ -4,7 +4,6 @@ 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,
@@ -147,11 +146,9 @@ function renderExplorer(): void {
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter>
 				<Provider store={store}>
-					<TooltipProvider>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</TooltipProvider>
+					<ErrorModalProvider>
+						<Explorer />
+					</ErrorModalProvider>
 				</Provider>
 			</MemoryRouter>
 		</QueryClientProvider>,

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

@@ -1,7 +1,6 @@
 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';
@@ -72,7 +71,6 @@ function renderTimeSeries(
 			yAxisUnit="count"
 			setYAxisUnit={mockSetYAxisUnit}
 			showYAxisUnitSelector={false}
-			exportDefaultQuery={initialQueriesMap.metrics}
 			{...overrides}
 		/>,
 	);

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

@@ -1,7 +1,6 @@
 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;
@@ -18,5 +17,4 @@ export interface TimeSeriesProps {
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
 	isCancelled?: boolean;
-	exportDefaultQuery: Query;
 }

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

@@ -0,0 +1,126 @@
+import {
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { findSavedView, getSavedViewQuery, toSavedViewSource } from '../utils';
+
+jest.mock('uuid', () => ({
+	v4: (): string => 'test-id',
+}));
+
+function makeView(): SavedviewtypesSavedViewDTO {
+	return {
+		id: 'view-1',
+		name: 'errors-by-service-abc123',
+		source: SavedviewtypesSourceDTO.traces,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
+		createdBy: 'a@b.c',
+		updatedBy: 'a@b.c',
+		spec: {
+			displayName: 'Errors by service',
+			panelType: SavedviewtypesPanelTypeDTO.list,
+			requestType: 'raw',
+			queries: [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: 'traces',
+						stepInterval: 60,
+						filter: { expression: 'has_error = true' },
+						// v2 reads back fully defaulted envelopes; nulls must not break the mapper
+						groupBy: null,
+						order: null,
+						selectFields: null,
+						functions: null,
+						legend: '',
+						disabled: false,
+					},
+				},
+			],
+			selectedFields: [{ name: 'service.name' }],
+			display: { color: 'red' },
+		},
+	} as SavedviewtypesSavedViewDTO;
+}
+
+describe('getSavedViewQuery', () => {
+	it('maps the v2 spec through the v5 branch of mapQueryDataFromApi', () => {
+		const query = getSavedViewQuery(makeView());
+
+		expect(query.queryType).toBe(EQueryType.QUERY_BUILDER);
+		expect(query.promql).toStrictEqual([]);
+		expect(query.clickhouse_sql).toStrictEqual([]);
+		expect(query.builder.queryData).toHaveLength(1);
+
+		const [queryData] = query.builder.queryData;
+		expect(queryData.queryName).toBe('A');
+		expect(queryData.dataSource).toBe(DataSource.TRACES);
+		expect(queryData.filter).toStrictEqual({ expression: 'has_error = true' });
+		expect(queryData.groupBy).toStrictEqual([]);
+		expect(queryData.orderBy).toStrictEqual([]);
+	});
+
+	it('keeps formulas alongside builder queries', () => {
+		const view = makeView();
+		view.spec.queries.push({
+			type: 'builder_formula',
+			spec: { name: 'F1', expression: 'A / 2' },
+		} as SavedviewtypesSavedViewDTO['spec']['queries'][number]);
+
+		const query = getSavedViewQuery(view);
+
+		expect(query.builder.queryData).toHaveLength(1);
+		expect(query.builder.queryFormulas).toHaveLength(1);
+		expect(query.builder.queryFormulas[0].queryName).toBe('F1');
+	});
+
+	it('does not read the panel type into the query', () => {
+		const view = makeView();
+		view.spec.panelType = SavedviewtypesPanelTypeDTO.graph;
+
+		const query = getSavedViewQuery(view);
+
+		// panelType travels separately (url param), the Query itself has no such field
+		expect(query).not.toHaveProperty('panelType', PANEL_TYPES.TIME_SERIES);
+	});
+});
+
+describe('toSavedViewSource', () => {
+	it('maps every explorer source page to the v2 source', () => {
+		expect(toSavedViewSource(DataSource.LOGS)).toBe(SavedviewtypesSourceDTO.logs);
+		expect(toSavedViewSource(DataSource.TRACES)).toBe(
+			SavedviewtypesSourceDTO.traces,
+		);
+		expect(toSavedViewSource(DataSource.METRICS)).toBe(
+			SavedviewtypesSourceDTO.metrics,
+		);
+		expect(toSavedViewSource('meter')).toBe(SavedviewtypesSourceDTO.meter);
+	});
+});
+
+describe('findSavedView', () => {
+	const views = [
+		{ ...makeView(), id: 'a' },
+		{ ...makeView(), id: 'b' },
+	];
+
+	it('returns the view with the matching id', () => {
+		expect(findSavedView(views, 'b')?.id).toBe('b');
+	});
+
+	it('returns undefined when the id is not in the list', () => {
+		expect(findSavedView(views, 'c')).toBeUndefined();
+	});
+
+	it('returns undefined for a null or not yet loaded list', () => {
+		expect(findSavedView(null, 'a')).toBeUndefined();
+		expect(findSavedView(undefined, 'a')).toBeUndefined();
+	});
+});

frontend/src/container/SavedViews/utils.ts

@@ -0,0 +1,49 @@
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryEnvelope } from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type SavedViewSourcePage = DataSource | 'meter';
+
+// Explorers and the preferences module are keyed by DataSource (the signal),
+// the api keys views by source page. Same values today, so this is the one
+// place they meet. AI observability views will come with their own source and
+// DataSource cannot tell them apart from traces, so preferences should move to
+// source page at that point and this map goes with it.
+const SAVED_VIEW_SOURCE: Record<SavedViewSourcePage, SavedviewtypesSourceDTO> =
+	{
+		[DataSource.LOGS]: SavedviewtypesSourceDTO.logs,
+		[DataSource.TRACES]: SavedviewtypesSourceDTO.traces,
+		[DataSource.METRICS]: SavedviewtypesSourceDTO.metrics,
+		meter: SavedviewtypesSourceDTO.meter,
+	};
+
+export function toSavedViewSource(
+	sourcePage: SavedViewSourcePage,
+): SavedviewtypesSourceDTO {
+	return SAVED_VIEW_SOURCE[sourcePage];
+}
+
+// Explorers only save builder queries; v2 carries no queryType, so it is fixed here.
+export function getSavedViewQuery(view: SavedviewtypesSavedViewDTO): Query {
+	const { queries, panelType } = view.spec;
+	return mapQueryDataFromApi({
+		queries: queries as QueryEnvelope[],
+		panelType: panelType as unknown as PANEL_TYPES,
+		queryType: EQueryType.QUERY_BUILDER,
+		unit: undefined,
+	});
+}
+
+export function findSavedView(
+	views: SavedviewtypesSavedViewDTO[] | null | undefined,
+	id: string,
+): SavedviewtypesSavedViewDTO | undefined {
+	return views?.find((view) => view.id === id);
+}

frontend/src/container/TimeSeriesView/TimeSeriesView.styles.scss

@@ -11,12 +11,6 @@
 		flex-shrink: 0;
 	}
 
-	&__header-actions {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
 	.ant-card-body {
 		height: 50vh;
 		min-height: 350px;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -1,6 +1,5 @@
 import {
 	Dispatch,
-	ReactNode,
 	SetStateAction,
 	useCallback,
 	useEffect,
@@ -67,7 +66,6 @@ function TimeSeriesView({
 	allowExport = false,
 	exportFileName,
 	onYAxisUnitChange,
-	headerActions,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -254,7 +252,7 @@ function TimeSeriesView({
 	);
 
 	const showExport = allowExport && !!data?.rawV5Response;
-	const showHeader = showExport || !!onYAxisUnitChange || !!headerActions;
+	const showHeader = showExport || !!onYAxisUnitChange;
 
 	return (
 		<div className="time-series-view">
@@ -267,18 +265,15 @@ function TimeSeriesView({
 							<BuilderUnitsFilter onChange={onYAxisUnitChange} yAxisUnit={yAxisUnit} />
 						)}
 					</div>
-					<div className="time-series-view__header-actions">
-						{headerActions}
-						{showExport && data?.rawV5Response && (
-							<ExportMenu
-								dataSource={dataSource}
-								yAxisUnit={yAxisUnit}
-								data={data}
-								query={currentQuery}
-								fileName={exportFileName ?? `${dataSource}-timeseries`}
-							/>
-						)}
-					</div>
+					{showExport && data?.rawV5Response && (
+						<ExportMenu
+							dataSource={dataSource}
+							yAxisUnit={yAxisUnit}
+							data={data}
+							query={currentQuery}
+							fileName={exportFileName ?? `${dataSource}-timeseries`}
+						/>
+					)}
 				</div>
 			)}
 
@@ -349,8 +344,6 @@ interface TimeSeriesViewProps {
 	// Opt-in: render the y-axis unit selector in the header (views without their
 	// own selector, e.g. Logs). Metrics keeps its separate YAxisUnitSelector.
 	onYAxisUnitChange?: (value: string) => void;
-	// Rendered in the header ahead of the export menu.
-	headerActions?: ReactNode;
 }
 
 TimeSeriesView.defaultProps = {

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -2,7 +2,6 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
-	ReactNode,
 	SetStateAction,
 	useCallback,
 	useEffect,
@@ -56,7 +55,6 @@ interface ListViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
-	headerActions?: ReactNode;
 }
 
 function ListView({
@@ -64,7 +62,6 @@ function ListView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
-	headerActions,
 }: ListViewProps): JSX.Element {
 	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
 		useQueryBuilder();
@@ -230,7 +227,6 @@ function ListView({
 	return (
 		<div className={styles.container}>
 			<div className="trace-explorer-controls">
-				{headerActions}
 				<div className="order-by-container">
 					<div className="order-by-label">
 						Order by <Minus size={14} /> <ArrowUp10 size={14} />
@@ -276,7 +272,6 @@ function ListView({
 
 ListView.defaultProps = {
 	queryKeyRef: undefined,
-	headerActions: undefined,
 };
 
 export default memo(ListView);

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

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

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -2,7 +2,6 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
-	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -31,12 +30,10 @@ function TableView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
-	headerActions,
 }: {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
-	headerActions?: ReactNode;
 }): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
@@ -104,17 +101,14 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
-			{!isError && (
+			{!isError && data && (
 				<div className="traces-table-view-header">
-					{headerActions}
-					{data && (
-						<ExportMenu
-							dataSource={DataSource.TRACES}
-							data={data}
-							query={stagedQuery || initialQueriesMap.traces}
-							fileName="traces-table"
-						/>
-					)}
+					<ExportMenu
+						dataSource={DataSource.TRACES}
+						data={data}
+						query={stagedQuery || initialQueriesMap.traces}
+						fileName="traces-table"
+					/>
 				</div>
 			)}
 			{!isError && (
@@ -131,7 +125,6 @@ function TableView({
 
 TableView.defaultProps = {
 	queryKeyRef: undefined,
-	headerActions: undefined,
 };
 
 export default memo(TableView);

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -2,7 +2,6 @@ import {
 	Dispatch,
 	memo,
 	MutableRefObject,
-	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -41,7 +40,6 @@ interface TracesViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
-	headerActions?: ReactNode;
 }
 
 function TracesView({
@@ -49,7 +47,6 @@ function TracesView({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
-	headerActions,
 }: TracesViewProps): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
@@ -158,7 +155,6 @@ function TracesView({
 				</Typography>
 
 				<div className="trace-explorer-controls">
-					{headerActions}
 					<DownloadOptionsMenu
 						dataSource={DataSource.TRACES}
 						panelType={PANEL_TYPES.TRACE}
@@ -191,7 +187,6 @@ function TracesView({
 
 TracesView.defaultProps = {
 	queryKeyRef: undefined,
-	headerActions: undefined,
 };
 
 export default memo(TracesView);

frontend/src/hooks/saveViews/useDeleteView.ts

@@ -1,11 +1,18 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { deleteView } from 'api/saveView/deleteView';
 import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
 
 export const useDeleteView = (
 	uuid: string,
-): UseMutationResult<DeleteViewPayloadProps, Error, string> =>
-	useMutation({
+): UseMutationResult<DeleteViewPayloadProps, Error, string> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [uuid],
 		mutationFn: () => deleteView(uuid),
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

frontend/src/hooks/saveViews/useSaveView.ts

@@ -1,4 +1,5 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { saveView } from 'api/saveView/saveView';
 import { AxiosResponse } from 'axios';
 import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
@@ -13,8 +14,14 @@ export const useSaveView = ({
 	Error,
 	SaveViewProps,
 	SaveViewPayloadProps
-> =>
-	useMutation({
+> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: saveView,
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

frontend/src/hooks/saveViews/useUpdateView.ts

@@ -1,4 +1,5 @@
-import { useMutation, UseMutationResult } from 'react-query';
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+import { invalidateListSavedViews } from 'api/generated/services/saved-view';
 import { updateView } from 'api/saveView/updateView';
 import {
 	UpdateViewPayloadProps,
@@ -16,8 +17,10 @@ export const useUpdateView = ({
 	Error,
 	UpdateViewProps,
 	UpdateViewPayloadProps
-> =>
-	useMutation({
+> => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
 		mutationKey: [viewName, sourcePage, compositeQuery, extraData],
 		mutationFn: () =>
 			updateView({
@@ -27,4 +30,8 @@ export const useUpdateView = ({
 				sourcePage,
 				viewKey,
 			}),
+		// v1 and v2 share storage; consumers already on v2 must see this write.
+		// Temporary till the v1 client is deleted with the explorer bar.
+		onSuccess: () => invalidateListSavedViews(queryClient),
 	});
+};

frontend/src/pages/HomePage/stories/HomePage.stories.mocks.tsx

@@ -164,10 +164,10 @@ export const homeMocks = defineStoryMocks({
 		),
 
 		rest.get(
-			'http://localhost/api/v1/explorer/views',
+			'http://localhost/api/v2/saved_views',
 			response.json((req) => {
-				const sourcePage = req.url.searchParams.get('sourcePage') ?? 'logs';
-				const signal = isSavedViewSignal(sourcePage) ? sourcePage : 'logs';
+				const source = req.url.searchParams.get('source') ?? 'logs';
+				const signal = isSavedViewSignal(source) ? source : 'logs';
 
 				return savedViewsResponse(
 					values.savedViewSignals.includes(signal) ? values.savedViews : 0,

frontend/src/pages/HomePage/stories/__story_mockdata__/home.ts

@@ -6,10 +6,21 @@
 import { FeatureKeys } from 'constants/features';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { checkListStepToPreferenceKeyMap } from 'container/Home/constants';
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	type ListSavedViews200,
+	Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal as LogsSignal,
+	Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregationDTOSignal as MetricsSignal,
+	Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTOSignal as TracesSignal,
+	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
+	type Querybuildertypesv5QueryEnvelopeDTO,
+	Querybuildertypesv5RequestTypeDTO,
+	type RuletypesRuleDTO,
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { ServiceDataProps } from 'api/metrics/getTopLevelOperations';
 import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
-import { explorerView } from 'mocks-server/__mockdata__/explorer_views';
 import { defaultFeatureFlags } from 'tests/fixtures/appContextMock';
 import type { FeatureFlagProps } from 'types/api/features/getFeaturesFlags';
 import type { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
@@ -165,20 +176,53 @@ const VIEW_NAMES: Record<SavedViewSignal, string[]> = {
 export const isSavedViewSignal = (value: string): value is SavedViewSignal =>
 	SAVED_VIEW_SIGNALS.includes(value as SavedViewSignal);
 
+const SAVED_VIEW_SOURCE: Record<SavedViewSignal, SavedviewtypesSourceDTO> = {
+	logs: SavedviewtypesSourceDTO.logs,
+	traces: SavedviewtypesSourceDTO.traces,
+	metrics: SavedviewtypesSourceDTO.metrics,
+};
+
+const SAVED_VIEW_QUERY: Record<
+	SavedViewSignal,
+	Querybuildertypesv5QueryEnvelopeDTO
+> = {
+	logs: {
+		type: Querybuildertypesv5QueryEnvelopeBuilderDTOType.builder_query,
+		spec: { name: 'A', signal: LogsSignal.logs },
+	},
+	traces: {
+		type: Querybuildertypesv5QueryEnvelopeBuilderDTOType.builder_query,
+		spec: { name: 'A', signal: TracesSignal.traces },
+	},
+	metrics: {
+		type: Querybuildertypesv5QueryEnvelopeBuilderDTOType.builder_query,
+		spec: { name: 'A', signal: MetricsSignal.metrics },
+	},
+};
+
 export const savedViewsResponse = (
 	count: number,
-	sourcePage: SavedViewSignal,
-): Record<string, unknown> => {
-	const names = VIEW_NAMES[sourcePage];
+	signal: SavedViewSignal,
+): ListSavedViews200 => {
+	const names = VIEW_NAMES[signal];
 
 	return {
 		status: 'success',
 		data: Array.from({ length: Math.min(count, names.length) }, (_, index) => ({
-			...explorerView.data[0],
-			id: `storybook-${sourcePage}-view-${index + 1}`,
-			name: names[index],
-			sourcePage,
-			tags: [sourcePage],
+			id: `storybook-${signal}-view-${index + 1}`,
+			name: `storybook-${signal}-view-${index + 1}`,
+			source: SAVED_VIEW_SOURCE[signal],
+			schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
+			createdAt: '2026-08-20T09:00:00Z',
+			createdBy: 'storybook@signoz.io',
+			updatedAt: '2026-08-20T09:00:00Z',
+			updatedBy: 'storybook@signoz.io',
+			spec: {
+				displayName: names[index],
+				panelType: SavedviewtypesPanelTypeDTO.list,
+				requestType: Querybuildertypesv5RequestTypeDTO.raw,
+				queries: [SAVED_VIEW_QUERY[signal]],
+			},
 		})),
 	};
 };

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -1,7 +1,6 @@
 import {
 	Dispatch,
 	MutableRefObject,
-	ReactNode,
 	SetStateAction,
 	useEffect,
 	useMemo,
@@ -30,7 +29,6 @@ function TimeSeriesViewContainer({
 	setWarning,
 	setIsLoadingQueries,
 	queryKeyRef,
-	headerActions,
 }: TimeSeriesViewProps): JSX.Element {
 	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
 
@@ -128,7 +126,6 @@ function TimeSeriesViewContainer({
 				dataSource={dataSource}
 				setWarning={setWarning}
 				allowExport
-				headerActions={headerActions}
 			/>
 		</div>
 	);
@@ -140,13 +137,11 @@ interface TimeSeriesViewProps {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 	queryKeyRef?: MutableRefObject<any>;
-	headerActions?: ReactNode;
 }
 
 TimeSeriesViewContainer.defaultProps = {
 	dataSource: DataSource.TRACES,
 	queryKeyRef: undefined,
-	headerActions: undefined,
 };
 
 export default TimeSeriesViewContainer;

frontend/src/pages/TracesExplorer/index.tsx

@@ -13,8 +13,6 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
-import { getExportPanelType } from 'container/ExplorerActions/utils';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
@@ -196,24 +194,6 @@ function TracesExplorer(): JSX.Element {
 		[stagedQuery, panelType],
 	);
 
-	const exportDashboardQuery = useMemo(
-		() =>
-			getExportQueryData(
-				exportDefaultQuery,
-				getExportPanelType(panelType),
-				options,
-			),
-		[exportDefaultQuery, panelType, options],
-	);
-
-	const explorerActions = (
-		<ExplorerActions
-			query={stagedQuery ? exportDefaultQuery : null}
-			dashboardQuery={stagedQuery ? exportDashboardQuery : null}
-			sourcepage={DataSource.TRACES}
-		/>
-	);
-
 	const handleExport = useCallback(
 		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
 			if (!dashboard || !panelType) {
@@ -338,7 +318,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -350,7 +329,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -363,7 +341,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -374,7 +351,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}

frontend/src/providers/preferences/__tests__/usePreferenceSync.test.tsx

@@ -0,0 +1,202 @@
+import { renderHook } from '@testing-library/react';
+import { useListSavedViews } from 'api/generated/services/saved-view';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
+	ensureLogsRequiredColumns,
+} from 'container/OptionsMenu/constants';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { usePreferenceSync } from '../sync/usePreferenceSync';
+import { PreferenceMode } from '../types';
+
+jest.mock('api/generated/services/saved-view');
+
+const loaderPreferences = { columns: [{ name: 'from-loader' }] };
+jest.mock('../loader/usePreferenceLoader', () => ({
+	usePreferenceLoader: jest.fn(() => ({
+		preferences: loaderPreferences,
+		loading: false,
+		error: null,
+	})),
+}));
+
+jest.mock('../updater/usePreferenceUpdater', () => ({
+	usePreferenceUpdater: jest.fn(() => ({
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	})),
+}));
+
+const mockedUseListSavedViews = useListSavedViews as jest.MockedFunction<
+	typeof useListSavedViews
+>;
+
+function makeView(
+	id: string,
+	source: SavedviewtypesSourceDTO,
+	spec: Partial<SavedviewtypesSavedViewDTO['spec']>,
+): SavedviewtypesSavedViewDTO {
+	return {
+		id,
+		source,
+		schemaVersion: 'v2',
+		spec: {
+			displayName: id,
+			panelType: 'list',
+			requestType: 'raw',
+			queries: [],
+			...spec,
+		},
+	} as unknown as SavedviewtypesSavedViewDTO;
+}
+
+function mockViews(views: SavedviewtypesSavedViewDTO[]): void {
+	mockedUseListSavedViews.mockReturnValue({
+		data: { status: 'success', data: views },
+	} as unknown as ReturnType<typeof useListSavedViews>);
+}
+
+describe('usePreferenceSync in saved view mode', () => {
+	beforeEach(() => {
+		mockedUseListSavedViews.mockReset();
+	});
+
+	it('fetches the list for the data source only in saved view mode', () => {
+		mockViews([]);
+
+		renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.DIRECT,
+				dataSource: DataSource.LOGS,
+				savedViewId: undefined,
+			}),
+		);
+
+		expect(mockedUseListSavedViews).toHaveBeenCalledWith(
+			{ source: 'logs' },
+			{ query: { enabled: false } },
+		);
+	});
+
+	it('returns loader preferences outside saved view mode', () => {
+		mockViews([]);
+
+		const { result } = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.DIRECT,
+				dataSource: DataSource.LOGS,
+				savedViewId: undefined,
+			}),
+		);
+
+		expect(result.current.preferences).toBe(loaderPreferences);
+	});
+
+	it('applies selectedFields and display of the active logs view', () => {
+		mockViews([
+			makeView('view-1', SavedviewtypesSourceDTO.logs, {
+				selectedFields: [{ name: 'service.name' }, { name: 'body' }],
+				display: { maxLines: 3, format: 'raw', fontSize: 'large', color: 'red' },
+			}),
+		]);
+
+		const { result } = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.SAVED_VIEW,
+				dataSource: DataSource.LOGS,
+				savedViewId: 'view-1',
+			}),
+		);
+
+		expect(result.current.preferences?.columns).toStrictEqual(
+			ensureLogsRequiredColumns([{ name: 'service.name' }, { name: 'body' }]),
+		);
+		expect(result.current.preferences?.formatting).toStrictEqual({
+			maxLines: 3,
+			format: 'raw',
+			fontSize: 'large',
+			version: 1,
+		});
+	});
+
+	it('falls back to defaults when the view has zero-valued display and no fields', () => {
+		mockViews([
+			makeView('view-1', SavedviewtypesSourceDTO.logs, {
+				selectedFields: undefined,
+				display: { maxLines: 0, format: '', fontSize: '', color: '' },
+			}),
+		]);
+
+		const { result } = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.SAVED_VIEW,
+				dataSource: DataSource.LOGS,
+				savedViewId: 'view-1',
+			}),
+		);
+
+		expect(result.current.preferences?.columns).toStrictEqual(
+			ensureLogsRequiredColumns(defaultLogsSelectedColumns),
+		);
+		expect(result.current.preferences?.formatting).toStrictEqual({
+			maxLines: 1,
+			format: 'table',
+			fontSize: 'small',
+			version: 1,
+		});
+	});
+
+	it('passes trace selectedFields through and defaults when absent', () => {
+		mockViews([
+			makeView('with-fields', SavedviewtypesSourceDTO.traces, {
+				selectedFields: [{ name: 'name' }, { name: 'durationNano' }],
+			}),
+			makeView('without-fields', SavedviewtypesSourceDTO.traces, {}),
+		]);
+
+		const withFields = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.SAVED_VIEW,
+				dataSource: DataSource.TRACES,
+				savedViewId: 'with-fields',
+			}),
+		);
+		const withoutFields = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.SAVED_VIEW,
+				dataSource: DataSource.TRACES,
+				savedViewId: 'without-fields',
+			}),
+		);
+
+		expect(withFields.result.current.preferences?.columns).toStrictEqual([
+			{ name: 'name' },
+			{ name: 'durationNano' },
+		]);
+		expect(withFields.result.current.preferences?.formatting).toBeUndefined();
+		expect(withoutFields.result.current.preferences?.columns).toBe(
+			defaultTraceSelectedColumns,
+		);
+	});
+
+	it('uses defaults when the saved view id is not in the list', () => {
+		mockViews([makeView('other', SavedviewtypesSourceDTO.logs, {})]);
+
+		const { result } = renderHook(() =>
+			usePreferenceSync({
+				mode: PreferenceMode.SAVED_VIEW,
+				dataSource: DataSource.LOGS,
+				savedViewId: 'missing',
+			}),
+		);
+
+		expect(result.current.preferences?.columns).toStrictEqual(
+			ensureLogsRequiredColumns(defaultLogsSelectedColumns),
+		);
+	});
+});

frontend/src/providers/preferences/sync/usePreferenceSync.ts

@@ -1,12 +1,14 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
+import { useListSavedViews } from 'api/generated/services/saved-view';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import {
 	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
 	ensureLogsRequiredColumns,
 } from 'container/OptionsMenu/constants';
-import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs';
-import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
+import { findSavedView, toSavedViewSource } from 'container/SavedViews/utils';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { usePreferenceLoader } from '../loader/usePreferenceLoader';
@@ -28,16 +30,16 @@ export function usePreferenceSync({
 	updateColumns: (newColumns: TelemetryFieldKey[]) => void;
 	updateFormatting: (newFormatting: FormattingOptions) => void;
 } {
-	const { data: viewsData } = useGetAllViews(
-		dataSource,
-		mode === PreferenceMode.SAVED_VIEW,
+	const { data: viewsData } = useListSavedViews(
+		{ source: toSavedViewSource(dataSource) },
+		{ query: { enabled: mode === PreferenceMode.SAVED_VIEW } },
 	);
 
 	const [savedViewPreferences, setSavedViewPreferences] =
 		useState<Preferences | null>(null);
 
-	const updateExtraDataSelectColumns = (
-		columns: TelemetryFieldKey[],
+	const withColumnNames = (
+		columns: TelemetryFieldKey[] | undefined,
 	): TelemetryFieldKey[] | null => {
 		if (!columns) {
 			return null;
@@ -49,27 +51,28 @@ export function usePreferenceSync({
 	};
 
 	useEffect(() => {
-		const extraData = viewsData?.data?.data?.find(
-			(view) => view.id === savedViewId,
-		)?.extraData;
+		const spec = savedViewId
+			? findSavedView(viewsData?.data, savedViewId)?.spec
+			: undefined;
+		const selectedFields = spec?.selectedFields as
+			| TelemetryFieldKey[]
+			| undefined;
 
-		const parsedExtraData = JSON.parse(extraData || '{}');
 		let columns: TelemetryFieldKey[] = [];
 		let formatting: FormattingOptions | undefined;
 		if (dataSource === DataSource.LOGS) {
 			columns = ensureLogsRequiredColumns(
-				updateExtraDataSelectColumns(parsedExtraData?.selectColumns) ||
-					defaultLogsSelectedColumns,
+				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
 			);
 			formatting = {
-				maxLines: parsedExtraData?.maxLines ?? 1,
-				format: parsedExtraData?.format ?? 'table',
-				fontSize: parsedExtraData?.fontSize ?? 'small',
-				version: parsedExtraData?.version ?? 1,
+				maxLines: spec?.display?.maxLines || 1,
+				format: (spec?.display?.format as LogViewMode) || 'table',
+				fontSize: (spec?.display?.fontSize as FontSize) || FontSize.SMALL,
+				version: 1,
 			};
 		}
 		if (dataSource === DataSource.TRACES) {
-			columns = parsedExtraData?.selectColumns || defaultTracesSelectedColumns;
+			columns = selectedFields || defaultTraceSelectedColumns;
 		}
 		setSavedViewPreferences({ columns, formatting });
 	}, [viewsData, dataSource, savedViewId, mode]);