feat(explorers): saved views source on traces and metrics

Metrics has no quick filters, so it gets the layout with only the saved
views side.

.github/workflows/integrationci.yaml

@@ -38,7 +38,6 @@ jobs:
       fail-fast: false
       matrix:
         suite:
-          - alerts
           - alertmanager
           - alertmanagerrotation
           - basepath
@@ -64,6 +63,7 @@ jobs:
           - querierauthz
           - role
           - rootuser
+          - ruler
           - savedview
           - semconvfamilies
           - serviceaccount

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);
 	}
 }
 

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -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();
@@ -379,6 +380,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,60 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
+
+	const isSliding = hasQuickFilters && isViewsOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(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 && (isPanelPinned || isViewsOpen) && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
+							/>
+						)}
+					</div>
 				</aside>
 			)}
 			<section
@@ -44,7 +94,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,138 @@ 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);
+
+			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);
+		});
+
+		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/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

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/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -43,6 +43,7 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,6 +52,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -402,6 +404,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -868,6 +871,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
+
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (

frontend/src/container/AppLayout/styles.ts

@@ -12,8 +12,12 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
+// Takes the height left in `.app-content` after the bottom strip.
+// `min-height: 0` is not needed right now, overlayscrollbars already sets
+// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

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

@@ -0,0 +1,36 @@
+.strip {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+
+	flex-shrink: 0;
+	height: var(--bottom-strip-height);
+	padding: 0 var(--spacing-6);
+
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	font-family: var(--font-family-sf-mono, monospace);
+
+	// Above page content, below the body-portalled overlays that are meant to
+	// cover the strip.
+	position: relative;
+	z-index: 1;
+}
+
+.left,
+.right {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+	min-width: 0;
+}
+
+// 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/__tests__/BottomStrip.test.tsx

@@ -0,0 +1,49 @@
+import { render } from 'tests/test-utils';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+
+describe('BottomStrip', () => {
+	it('publishes the body class and height property while mounted', () => {
+		const { unmount } = render(<BottomStrip />);
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		unmount();
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			'',
+		);
+	});
+
+	// The string is whatever the Go build injected, so it is rendered untouched —
+	// same as SideNav. Release tags carry the "v", local builds do not.
+	it.each([['v0.134.67'], ['main-64f1c2a']])(
+		'renders the build version %p exactly as given',
+		(version) => {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,42 @@
+import { useLayoutEffect } from 'react';
+import { useAppContext } from 'providers/App/App';
+
+import styles from './BottomStrip.module.scss';
+
+export const BOTTOM_STRIP_HEIGHT = 24;
+
+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(
+			BOTTOM_STRIP_HEIGHT_VAR,
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		return (): void => {
+			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
+			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
+		};
+	}, []);
+
+	return (
+		<div className={styles.strip} data-testid="bottom-strip">
+			<div className={styles.left}>
+				{version && (
+					<span className={styles.version} data-testid="bottom-strip-version">
+						{version}
+					</span>
+				)}
+			</div>
+			<div className={styles.right} />
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,6 +1,8 @@
 .create-alert-v2-footer {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,6 +1,8 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 0px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,6 +1,8 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/Home/Home.styles.scss

@@ -1,7 +1,6 @@
 .home-container {
 	display: flex;
 	flex-direction: column;
-	min-height: 100vh;
 	overflow-y: auto;
 	height: 100%;
 	width: 100%;

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/Licenses/Licenses.styles.scss

@@ -1,7 +1,4 @@
 .licenses-page {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.licenses-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
@@ -32,7 +29,6 @@
 
 		.licenses-page-content {
 			flex: 1;
-			height: calc(100vh - 48px);
 			background: var(--l1-background);
 			padding: 10px 8px;
 			overflow-y: auto;

frontend/src/container/ListAlertRules/ListAlertRules.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	height: calc(100vh - 62px);
+	flex: 1;
 	min-height: 400px;
 }
 

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,61 @@ 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}
 						/>
 					</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/Summary/Summary.styles.scss

@@ -181,7 +181,9 @@
 
 		.ant-pagination {
 			position: fixed;
-			bottom: 0;
+			// Lifted above the bottom strip. Don't extend this pattern — new
+			// fixed-bottom UI belongs in the bounded layout, not in another offset here.
+			bottom: var(--bottom-strip-height, 0px);
 			width: calc(100% - 54px);
 			background: var(--l1-background);
 			padding: 16px;

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

@@ -0,0 +1,19 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+	padding: var(--spacing-2) var(--spacing-3);
+	border-bottom: 1px solid var(--l1-border);
+	color: var(--l1-foreground);
+	flex-shrink: 0;
+}
+
+.name {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+}

frontend/src/container/SavedViews/SavedViewsHeader.tsx

@@ -0,0 +1,43 @@
+import { Menu } 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 './SavedViewsHeader.module.scss';
+
+// Temp Placeholder data till main functionality is plugged in
+const PLACEHOLDER_VIEW_NAME = 'My view';
+
+function SavedViewsHeader({
+	source,
+	onOpenViews,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent when the list is always on screen.
+	onOpenViews?: () => void;
+}): JSX.Element {
+	return (
+		<div
+			className={styles.header}
+			data-testid="saved-views-header"
+			data-source={source}
+		>
+			<Typography.Text className={styles.name}>
+				{PLACEHOLDER_VIEW_NAME}
+			</Typography.Text>
+			{onOpenViews && (
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label="All views"
+					prefix={<Menu size={14} />}
+					onClick={onOpenViews}
+					data-testid="saved-views-open"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsHeader;

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__/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/TriggeredAlerts/TriggeredAlerts.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	height: calc(100vh - 62px);
+	flex: 1;
 	min-height: 400px;
 	padding-top: var(--spacing-8);
 }

frontend/src/container/Version/Version.styles.scss

@@ -1,7 +1,4 @@
 .version-container {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.version-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);

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/hooks/useSavedViewEnabled.ts

@@ -0,0 +1,11 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useState } from 'react';
+
+export function useSavedViewEnabled(): boolean {
+	const [isEnabled] = useState(
+		() => getLocalStorageKey(LOCALSTORAGE.SAVED_VIEW_ENABLED) === 'true',
+	);
+
+	return isEnabled;
+}

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -1,4 +1,29 @@
 .alerts-container {
+	// Hands the page height down to the active tab so its content can bound itself
+	// instead of guessing with 100vh. Child combinators only, nested Tabs
+	// (Configuration) must not be caught.
+	flex: 1;
+	min-height: 0;
+
+	> .ant-tabs-content-holder {
+		display: flex;
+		flex-direction: column;
+
+		> .ant-tabs-content {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			> .ant-tabs-tabpane-active {
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.top-level-tab.periscope-tab {
 		padding: 2px 0;
 	}
@@ -40,5 +65,9 @@
 
 	.alert-rules-container {
 		margin-top: 10px;
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
 	}
 }

frontend/src/pages/DashboardPage/DashboardContainer/components/LockedIndicator/LockedIndicator.module.scss

@@ -2,7 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 0;
 	width: 100%;
 	z-index: 100;

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/LogsExplorer/LogsExplorer.styles.scss

@@ -4,15 +4,10 @@
 	min-height: 0;
 	overflow: hidden;
 
-	.log-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
-	}
-
 	.log-module-right-section {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
+		height: 100%;
 		min-height: 0;
 
 		.log-explorer-query-container {
@@ -39,26 +34,4 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.log-quick-filter-left-section {
-			width: 260px;
-			height: 100%;
-			overflow: visible;
-			min-height: 0;
-			position: relative;
-			z-index: 2;
-			display: flex;
-			flex-direction: column;
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
-		}
-
-		.log-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }

frontend/src/pages/LogsExplorer/index.tsx

@@ -3,10 +3,10 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -225,21 +225,19 @@ function LogsExplorer(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<EventSourceProvider>
-				<div
-					className={cx('logs-module-page', showFilters ? 'filter-visible' : '')}
+				<QuickFiltersLayout
+					className="logs-module-page"
+					showFilters={showFilters}
+					savedViewProps={{ source: SavedviewtypesSourceDTO.logs }}
+					quickFilterProps={{
+						className: 'qf-logs-explorer',
+						signal: SignalType.LOGS,
+						source: QuickFiltersSource.LOGS_EXPLORER,
+						handleFilterVisibilityChange,
+						useFieldApis: quickFilterFieldApis,
+					}}
 				>
-					{showFilters && (
-						<section className={cx('log-quick-filter-left-section')}>
-							<QuickFilters
-								className="qf-logs-explorer"
-								signal={SignalType.LOGS}
-								source={QuickFiltersSource.LOGS_EXPLORER}
-								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								useFieldApis={quickFilterFieldApis}
-							/>
-						</section>
-					)}
-					<section className={cx('log-module-right-section')}>
+					<section className="log-module-right-section">
 						<Toolbar
 							showAutoRefresh={false}
 							leftActions={
@@ -292,7 +290,7 @@ function LogsExplorer(): JSX.Element {
 							</div>
 						</div>
 					</section>
-				</div>
+				</QuickFiltersLayout>
 			</EventSourceProvider>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/pages/Support/Support.styles.scss

@@ -1,7 +1,4 @@
 .support-page-container {
-	max-height: 100vh;
-	overflow: hidden;
-
 	.support-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -1,5 +1,6 @@
 .root {
-	height: calc(100vh);
+	flex: 1;
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -5,6 +5,7 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
@@ -262,6 +263,7 @@ function TracesExplorer(): JSX.Element {
 			<QuickFiltersLayout
 				className="trace-explorer-page"
 				showFilters={isOpen}
+				savedViewProps={{ source: SavedviewtypesSourceDTO.traces }}
 				quickFilterProps={{
 					className: 'qf-traces-explorer',
 					source: QuickFiltersSource.TRACES_EXPLORER,

frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.styles.scss

@@ -1,13 +1,24 @@
 .traces-funnel-details {
 	display: flex;
-	// 45px -> height of the tab bar
-	height: calc(100vh - 45px);
+	height: 100%;
 
 	&__steps-config {
 		flex-shrink: 0;
 		width: 600px;
 		border-right: 1px solid var(--l1-border);
+		// Positioning context for the absolute .steps-footer.
 		position: relative;
+		display: flex;
+		flex-direction: column;
+
+		// Scoped here so the modal usage of FunnelConfiguration on trace details
+		// stays in normal flow.
+		.funnel-configuration {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+		}
 	}
 	&__steps-results {
 		width: 100%;

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration.styles.scss

@@ -4,14 +4,17 @@
 		flex-direction: column;
 		justify-content: flex-start;
 		&.funnel-details-page {
-			height: calc(
-				100vh - 170px
-			); // 64px bottom bar + 61px configuration header + 45px page navbar
+			flex: 1;
+			min-height: 0;
+			// .steps-footer is absolute against the config column, so its 64px is
+			// reserved rather than laid out.
+			margin-bottom: 64px;
 			overflow: auto;
 		}
 	}
 
 	&__header {
+		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;

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]);

tests/fixtures/alerts.py

@@ -108,14 +108,23 @@ def delete_all_rules(signoz: types.SigNoz, token: str) -> None:
 def seed_alert_rules(
     signoz: types.SigNoz,
     get_token: Callable[[str, str], str],
+    notification_channel: types.TestContainerDocker,
     create_notification_channel: Callable[[dict], str],
     create_alert_rule: Callable[[dict], str],
-) -> Callable[[dict, list[dict]], None]:
+) -> Callable[[str, list[dict]], None]:
     admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
 
-    def _seed_alert_rules(channel_config: dict, rules: list[dict]) -> None:
+    # create_notification_channel rather than create_webhook_notification_channel:
+    # only the former deletes on teardown, and callers reuse one channel name
+    # across tests, so a leaked channel fails the next create as a duplicate.
+    def _seed_alert_rules(channel_name: str, rules: list[dict]) -> None:
         delete_all_rules(signoz, admin_token)
-        create_notification_channel(channel_config)
+        create_notification_channel(
+            {
+                "name": channel_name,
+                "webhook_configs": [{"url": notification_channel.container_configs["8080"].get(f"/alert/{channel_name}"), "send_resolved": False}],
+            }
+        )
         for rule in rules:
             create_alert_rule(rule)