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

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

cmd/authz.go

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

docs/api/openapi.yml

@@ -184,6 +184,7 @@ components:
         headers:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         html:
           type: string
@@ -217,6 +218,7 @@ components:
         metadata:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -258,6 +260,7 @@ components:
           type: string
         customFields:
           additionalProperties: {}
+          nullable: true
           type: object
         description:
           type: string
@@ -268,6 +271,7 @@ components:
         labels:
           items:
             type: string
+          nullable: true
           type: array
         priority:
           type: string
@@ -346,6 +350,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         message:
           type: string
@@ -374,6 +379,7 @@ components:
         details:
           additionalProperties:
             type: string
+          nullable: true
           type: object
         group:
           type: string
@@ -451,6 +457,7 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
+          nullable: true
           type: array
         apiUrl:
           format: password
@@ -464,6 +471,7 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
+          nullable: true
           type: array
         footer:
           type: string
@@ -21140,9 +21148,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - role:read
+        - ADMIN
       - tokenizer:
-        - role:read
+        - ADMIN
       summary: Get users by role id
       tags:
       - users
@@ -25728,11 +25736,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user role
       tags:
       - users
@@ -25783,11 +25789,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:detach
-        - role:detach
+        - ADMIN
       - tokenizer:
-        - user:detach
-        - role:detach
+        - ADMIN
       summary: Delete user role
       tags:
       - users
@@ -25849,9 +25853,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user role
       tags:
       - users
@@ -25898,9 +25902,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:list
+        - ADMIN
       - tokenizer:
-        - user:list
+        - ADMIN
       summary: List users v2
       tags:
       - users
@@ -25961,13 +25965,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user
       tags:
       - users
@@ -26012,9 +26012,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:delete
+        - ADMIN
       - tokenizer:
-        - user:delete
+        - ADMIN
       summary: Delete user
       tags:
       - users
@@ -26070,9 +26070,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user by user id
       tags:
       - users
@@ -26127,9 +26127,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:update
+        - ADMIN
       - tokenizer:
-        - user:update
+        - ADMIN
       summary: Update user v2
       tags:
       - users
@@ -26186,9 +26186,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:list
+        - ADMIN
       - tokenizer:
-        - factor-password:list
+        - ADMIN
       summary: Get reset password token for a user
       tags:
       - users
@@ -26252,11 +26252,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       - tokenizer:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       summary: Create or regenerate reset password token for a user
       tags:
       - users
@@ -26315,9 +26313,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user roles
       tags:
       - users

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyField(func(req *T) string)` / `BodyFields(func(req *T) []string)` reading the request body the resource middleware decoded into the route's `OpenAPIDef.Request` type `T`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`). A handler on such a route reads the same decoded value with `coretypes.BodyFromContext[T](r.Context())`.
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). If the target list is optional in the payload (e.g. `userRoles` at user creation), set `OptionalTargets`: when no target ids resolve, the attach is vacuous and the def is skipped entirely — without it, the empty-id contract would check collection-level access on the target. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

frontend/package.json

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

frontend/pnpm-lock.yaml

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

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

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
+	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -166,13 +166,19 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
+export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelEmailConfigDTOHeaders =
+	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
+
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -239,10 +245,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
+	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -265,7 +277,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -307,10 +319,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
+	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -326,7 +344,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -423,10 +441,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
 	[key: string]: unknown;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
+	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
+
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -434,7 +458,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -450,9 +474,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	labels?: string[];
+	labels?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -543,17 +567,23 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
+	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
+
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**

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

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

frontend/src/components/QuickFilters/QuickFilters.tsx

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

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

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

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

@@ -1,8 +1,13 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
+import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
 
 import styles from './QuickFiltersLayout.module.scss';
 
@@ -12,8 +17,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 +35,67 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
+	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
+
+	const isSliding = hasQuickFilters && isViewsListOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={
+				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
+			}
+		/>
+	) : undefined;
+
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
+			{showSidebar && (
 				<aside
-					className={styles.filters}
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
 					data-testid="quick-filters-layout-filters"
 				>
-					<QuickFilters {...quickFilterProps} />
+					<TooltipProvider delayDuration={SIDEBAR_TOOLTIP_DELAY_MS}>
+						<div
+							className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+							data-testid="quick-filters-layout-drawer"
+						>
+							{hasQuickFilters ? (
+								<QuickFilters
+									{...quickFilterProps}
+									savedViewsHeader={savedViewsHeader}
+								/>
+							) : (
+								savedViewsHeader
+							)}
+						</div>
+						<div className={styles.savedViews}>
+							{hasSavedViews && isViewsListVisible && (
+								<SavedViewsPanel
+									{...savedViewProps}
+									onClose={
+										isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+									}
+								/>
+							)}
+						</div>
+					</TooltipProvider>
 				</aside>
 			)}
 			<section
@@ -44,7 +103,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div>{children}</div>
+					<div className={styles.contentInner}>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

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

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

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

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

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

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

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

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

frontend/src/components/QuickFilters/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -61,6 +62,7 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
+	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

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

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

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

@@ -8,7 +8,7 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils';
+import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';

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

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
@@ -123,6 +124,7 @@ function Explorer(): JSX.Element {
 			<QuickFiltersLayout
 				className="meter-explorer-container"
 				showFilters={showQuickFilters}
+				savedViewProps={{ source: SavedviewtypesSourceDTO.meter }}
 				quickFilterProps={{
 					className: 'qf-meter-explorer',
 					source: QuickFiltersSource.METER_EXPLORER,

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,57 +349,62 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className="metrics-explorer-explore-container">
-				<div className="explore-header">
-					<div className="explore-header-left-actions">
-						<span>1 chart/query</span>
-						<Tooltip
-							open={disableOneChartPerQuery ? undefined : false}
-							title={oneChartPerQueryDisabledTooltip}
-						>
-							<Switch
-								value={showOneChartPerQuery}
-								onChange={handleToggleShowOneChartPerQuery}
-								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+			<QuickFiltersLayout
+				showFilters
+				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
+			>
+				<div className="metrics-explorer-explore-container">
+					<div className="explore-header">
+						<div className="explore-header-left-actions">
+							<span>1 chart/query</span>
+							<Tooltip
+								open={disableOneChartPerQuery ? undefined : false}
+								title={oneChartPerQueryDisabledTooltip}
+							>
+								<Switch
+									value={showOneChartPerQuery}
+									onChange={handleToggleShowOneChartPerQuery}
+									disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								/>
+							</Tooltip>
+						</div>
+						<div className="explore-header-right-actions">
+							{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+							<DateTimeSelector showAutoRefresh />
+							<RightToolbarActions
+								onStageRunQuery={(): void => handleRunQuery()}
+								isLoadingQueries={isLoadingQueries}
+								handleCancelQuery={handleCancelQuery}
 							/>
-						</Tooltip>
+						</div>
 					</div>
-					<div className="explore-header-right-actions">
-						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
-						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+					<QueryBuilderV2
+						config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+						panelType={PANEL_TYPES.TIME_SERIES}
+						showFunctions={false}
+						version="v3"
+					/>
+					<div className="explore-content">
+						<TimeSeries
+							onFetchingStateChange={setIsLoadingQueries}
+							showOneChartPerQuery={showOneChartPerQuery}
+							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
+							showYAxisUnitSelector={showYAxisUnitSelector}
+							isCancelled={isCancelled}
+							exportDefaultQuery={exportDefaultQuery}
 						/>
 					</div>
 				</div>
-				<QueryBuilderV2
-					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					showFunctions={false}
-					version="v3"
-				/>
-				<div className="explore-content">
-					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
-						showOneChartPerQuery={showOneChartPerQuery}
-						setWarning={setWarning}
-						areAllMetricUnitsSame={areAllMetricUnitsSame}
-						isMetricUnitsLoading={isMetricUnitsLoading}
-						isMetricUnitsError={isMetricUnitsError}
-						metricUnits={units}
-						metricNames={metricNames}
-						metrics={metrics}
-						handleOpenMetricDetails={handleOpenMetricDetails}
-						yAxisUnit={yAxisUnit}
-						setYAxisUnit={setYAxisUnit}
-						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
-						exportDefaultQuery={exportDefaultQuery}
-					/>
-				</div>
-			</div>
+			</QuickFiltersLayout>
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}

frontend/src/container/OptionsMenu/useOptionsMenu.ts

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

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

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

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

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

frontend/src/container/SavedViews/DeleteSavedViewDialog.tsx

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

frontend/src/container/SavedViews/SaveChangesMenu.tsx

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

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

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

frontend/src/container/SavedViews/SaveViewModal.tsx

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

frontend/src/container/SavedViews/SavedViewHighlightedExpression.tsx

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

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

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

frontend/src/container/SavedViews/SavedViewHoverCard.tsx

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

frontend/src/container/SavedViews/SavedViewsEmptyState.tsx

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

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

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

frontend/src/container/SavedViews/SavedViewsHeader.tsx

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

frontend/src/container/SavedViews/SavedViewsIconButton.tsx

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

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

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

frontend/src/container/SavedViews/SavedViewsList.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Skeleton } from '@signozhq/ui/skeleton';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { SavedViewReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+import { SAVED_VIEWS_LIST_LOADING_ROWS } from './constants';
+import DeleteSavedViewDialog from './DeleteSavedViewDialog';
+import { useSavedViewActions } from './hooks/useSavedViewActions';
+import { useSavedViewHoverCard } from './hooks/useSavedViewHoverCard';
+import { useSavedViewRowActions } from './hooks/useSavedViewRowActions';
+import { useSaveNewView } from './hooks/useSaveNewView';
+import { useSavedViewsList } from './hooks/useSavedViewsList';
+import SavedViewHoverCard from './SavedViewHoverCard';
+import SavedViewsEmptyState from './SavedViewsEmptyState';
+import SavedViewsListSection from './SavedViewsListSection';
+import SaveViewModal from './SaveViewModal';
+import {
+	PendingSavedViewAction,
+	SavedViewRowActionKey,
+	SavedViewsListRowHoverProps,
+} from './types';
+
+import styles from './SavedViewsList.module.scss';
+
+function SavedViewsList({
+	source,
+	search,
+}: {
+	source: SavedviewtypesSourceDTO;
+	search: string;
+}): JSX.Element {
+	const { viewKey } = useGetSavedViewParams();
+	const { selectView, clearView, createView, isSaving } =
+		useSavedViewActions(source);
+	const saveNewView = useSaveNewView(createView);
+	const { createdByMe, createdByOthers, isLoading, isError, refetch } =
+		useSavedViewsList(source, search);
+	const { copyViewLink, renameView, deleteView, isRenaming, isDeleting } =
+		useSavedViewRowActions(source);
+	const [pendingAction, setPendingAction] =
+		useState<PendingSavedViewAction | null>(null);
+	const listRef = useRef<HTMLDivElement>(null);
+	const { deniedPermissions: deniedReadPermissions } = useAuthZ([
+		SavedViewReadPermission,
+	]);
+	const isReadDenied = deniedReadPermissions.length > 0;
+	const hoverCard = useSavedViewHoverCard();
+	const {
+		onRowEnter: onHoverCardRowEnter,
+		onRowLeave: onHoverCardRowLeave,
+		close: closeHoverCard,
+	} = hoverCard;
+
+	useEffect(() => {
+		closeHoverCard();
+	}, [search, closeHoverCard]);
+
+	const rowHover = useMemo<SavedViewsListRowHoverProps>(
+		() => ({
+			onRowEnter: (view, row): void => {
+				const listTop = listRef.current?.getBoundingClientRect().top ?? 0;
+				const rowRect = row.getBoundingClientRect();
+				onHoverCardRowEnter({
+					view,
+					anchorTop: rowRect.top - listTop,
+					anchorHeight: rowRect.height,
+				});
+			},
+			onRowLeave: onHoverCardRowLeave,
+			onMenuOpen: closeHoverCard,
+		}),
+		[onHoverCardRowEnter, onHoverCardRowLeave, closeHoverCard],
+	);
+
+	const handleAction = useCallback(
+		(view: SavedviewtypesSavedViewDTO, key: SavedViewRowActionKey): void => {
+			if (key === 'copyLink') {
+				copyViewLink(view);
+				return;
+			}
+			closeHoverCard();
+			setPendingAction({ key, view });
+		},
+		[copyViewLink, closeHoverCard],
+	);
+
+	const closePendingAction = useCallback((): void => setPendingAction(null), []);
+
+	const handleDelete = useCallback(async (): Promise<void> => {
+		if (!pendingAction || !(await deleteView(pendingAction.view))) {
+			return;
+		}
+		if (pendingAction.view.id === viewKey) {
+			clearView();
+		}
+		setPendingAction(null);
+	}, [pendingAction, deleteView, viewKey, clearView]);
+
+	if (isLoading) {
+		return (
+			<div className={styles.loading} data-testid="saved-views-list-loading">
+				{Array.from({ length: SAVED_VIEWS_LIST_LOADING_ROWS }, (_, index) => (
+					<Skeleton.Input key={index} active size="small" block />
+				))}
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className={styles.state} data-testid="saved-views-list-error">
+				<Typography.Text className={styles.stateText}>
+					Could not load views
+				</Typography.Text>
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					onClick={refetch}
+					data-testid="saved-views-list-retry"
+				>
+					Retry
+				</Button>
+			</div>
+		);
+	}
+
+	if (createdByMe.length === 0 && createdByOthers.length === 0) {
+		return (
+			<SavedViewsEmptyState
+				isSearching={search.trim().length > 0}
+				isSaving={isSaving}
+				onSave={saveNewView}
+			/>
+		);
+	}
+
+	return (
+		<div
+			ref={listRef}
+			className={styles.list}
+			onScrollCapture={closeHoverCard}
+			data-testid="saved-views-list"
+		>
+			{createdByMe.length > 0 && (
+				<SavedViewsListSection
+					title="Created by me"
+					views={createdByMe}
+					activeViewId={viewKey}
+					onSelect={selectView}
+					onClear={clearView}
+					onAction={handleAction}
+					hover={rowHover}
+					isReadDenied={isReadDenied}
+					testId="saved-views-created-by-me"
+				/>
+			)}
+			{createdByOthers.length > 0 && (
+				<SavedViewsListSection
+					title="Created by others"
+					views={createdByOthers}
+					activeViewId={viewKey}
+					onSelect={selectView}
+					onClear={clearView}
+					onAction={handleAction}
+					hover={rowHover}
+					isReadDenied={isReadDenied}
+					testId="saved-views-created-by-others"
+				/>
+			)}
+			<SavedViewHoverCard
+				target={hoverCard.target}
+				onCardEnter={hoverCard.onCardEnter}
+				onCardLeave={hoverCard.onCardLeave}
+				onClose={closeHoverCard}
+			/>
+			{pendingAction?.key === 'editDetails' && (
+				<SaveViewModal
+					mode="edit"
+					initialName={pendingAction.view.spec.displayName}
+					isSaving={isRenaming}
+					onClose={closePendingAction}
+					onSave={(displayName): Promise<boolean> =>
+						renameView(pendingAction.view, displayName)
+					}
+				/>
+			)}
+			{pendingAction?.key === 'delete' && (
+				<DeleteSavedViewDialog
+					isDeleting={isDeleting}
+					onCancel={closePendingAction}
+					onConfirm={(): void => {
+						void handleDelete();
+					}}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsList;

frontend/src/container/SavedViews/SavedViewsListRow.tsx

@@ -0,0 +1,79 @@
+import cx from 'classnames';
+import { Undo2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SavedViewReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+
+import SavedViewsRowButton from './SavedViewsRowButton';
+import SavedViewsRowMenu from './SavedViewsRowMenu';
+import { SavedViewsListRowProps } from './types';
+
+import styles from './SavedViewsList.module.scss';
+
+function SavedViewsListRow({
+	view,
+	isActive,
+	onSelect,
+	onClear,
+	onAction,
+	hover,
+	isReadDenied,
+}: SavedViewsListRowProps): JSX.Element {
+	const name = view.spec.displayName;
+
+	const nameButton = (
+		<Button
+			variant="ghost"
+			color="secondary"
+			className={styles.rowName}
+			onClick={(): void => {
+				if (!isActive) {
+					onSelect(view);
+				}
+			}}
+			data-testid="saved-views-row-name"
+		>
+			<span className={styles.rowNameText}>{name}</span>
+		</Button>
+	);
+
+	return (
+		<div
+			className={cx(styles.row, { [styles.isActive]: isActive })}
+			data-testid="saved-views-row"
+			data-view-id={view.id}
+			onMouseEnter={(event): void => {
+				if (!isReadDenied) {
+					hover.onRowEnter(view, event.currentTarget);
+				}
+			}}
+			onMouseLeave={hover.onRowLeave}
+		>
+			{isReadDenied ? (
+				<AuthZTooltip checks={[SavedViewReadPermission]}>{nameButton}</AuthZTooltip>
+			) : (
+				nameButton
+			)}
+			{isActive && (
+				<SavedViewsRowButton
+					icon={<Undo2 size={14} />}
+					label="Clear view"
+					tooltip="Clear view"
+					onClick={onClear}
+					testId="saved-views-row-clear"
+				/>
+			)}
+			{!isReadDenied && (
+				<span className={styles.rowMenu}>
+					<SavedViewsRowMenu
+						viewId={view.id}
+						onAction={(key): void => onAction(view, key)}
+						onOpen={hover.onMenuOpen}
+					/>
+				</span>
+			)}
+		</div>
+	);
+}
+
+export default SavedViewsListRow;

frontend/src/container/SavedViews/SavedViewsListSection.tsx

@@ -0,0 +1,45 @@
+import { Typography } from '@signozhq/ui/typography';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import SavedViewsListRow from './SavedViewsListRow';
+import { SavedViewsListSectionProps } from './types';
+
+import styles from './SavedViewsList.module.scss';
+
+function SavedViewsListSection({
+	title,
+	views,
+	activeViewId,
+	onSelect,
+	onClear,
+	onAction,
+	hover,
+	isReadDenied,
+	testId,
+}: SavedViewsListSectionProps): JSX.Element {
+	return (
+		<section className={styles.section} data-testid={testId}>
+			<Typography.Text className={styles.sectionTitle}>{title}</Typography.Text>
+			<div className={styles.sectionList}>
+				<OverlayScrollbar>
+					<div>
+						{views.map((view) => (
+							<SavedViewsListRow
+								key={view.id}
+								view={view}
+								isActive={view.id === activeViewId}
+								onSelect={onSelect}
+								onClear={onClear}
+								onAction={onAction}
+								hover={hover}
+								isReadDenied={isReadDenied}
+							/>
+						))}
+					</div>
+				</OverlayScrollbar>
+			</div>
+		</section>
+	);
+}
+
+export default SavedViewsListSection;

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

@@ -0,0 +1,5 @@
+// A denied item stays disabled but keeps pointer events, so its reason shows on hover.
+.menu .deniedItem[data-disabled] {
+	pointer-events: auto;
+	cursor: not-allowed;
+}

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

@@ -0,0 +1,43 @@
+.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-5);
+	border-bottom: 1px solid var(--l1-border);
+	flex-shrink: 0;
+}
+
+.search {
+	--input-height: var(--spacing-20);
+	--input-border-radius: 0;
+	--input-border-color: transparent;
+	--input-hover-border-color: transparent;
+	--input-focus-border-color: transparent;
+	--input-focus-outline-width: 0;
+	--input-background: var(--l1-background);
+	--input-hover-background: var(--l1-background);
+	--input-focus-background: var(--l1-background);
+
+	border-bottom: 1px solid var(--l1-border);
+	flex-shrink: 0;
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+	color: var(--l2-foreground);
+}
+
+.titleText {
+	color: inherit;
+	font-size: var(--font-size-sm);
+}

frontend/src/container/SavedViews/SavedViewsPanel.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { TowerControl, X } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+import { SavedViewListPermission } from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+
+import SavedViewsIconButton from './SavedViewsIconButton';
+import SavedViewsList from './SavedViewsList';
+
+import styles from './SavedViewsPanel.module.scss';
+
+function SavedViewsPanel({
+	source,
+	onClose,
+}: {
+	source: SavedviewtypesSourceDTO;
+	// Absent when the list is always on screen.
+	onClose?: () => void;
+}): JSX.Element {
+	const [search, setSearch] = useState('');
+
+	return (
+		<div
+			className={styles.panel}
+			data-testid="saved-views-panel"
+			data-source={source}
+		>
+			<div className={styles.header}>
+				<div className={styles.title}>
+					<TowerControl size={16} />
+					<Typography.Text className={styles.titleText}>All views</Typography.Text>
+				</div>
+				{onClose && (
+					<SavedViewsIconButton
+						title="Close"
+						icon={<X size={14} />}
+						onClick={onClose}
+						testId="saved-views-close"
+					/>
+				)}
+			</div>
+			<AuthZGuardContent checks={[SavedViewListPermission]}>
+				<>
+					<div className={styles.search}>
+						<Input
+							value={search}
+							onChange={(event): void => setSearch(event.target.value)}
+							placeholder="Search..."
+							aria-label="Search views"
+							testId="saved-views-search"
+						/>
+					</div>
+					<SavedViewsList source={source} search={search} />
+				</>
+			</AuthZGuardContent>
+		</div>
+	);
+}
+
+export default SavedViewsPanel;

frontend/src/container/SavedViews/SavedViewsRowButton.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+
+import { SavedViewsRowButtonProps } from './types';
+
+import styles from './SavedViewsList.module.scss';
+
+// forwardRef and rest props so a menu can use it as its trigger.
+const SavedViewsRowButton = forwardRef<
+	HTMLButtonElement,
+	SavedViewsRowButtonProps
+>(function SavedViewsRowButton(
+	{ icon, label, tooltip, testId, onClick, ...triggerProps },
+	ref,
+): JSX.Element {
+	const button = (
+		<Button
+			ref={ref}
+			variant="link"
+			color="secondary"
+			size="sm"
+			className={styles.rowButton}
+			aria-label={label}
+			onClick={onClick}
+			{...triggerProps}
+			data-testid={testId}
+		>
+			{icon}
+		</Button>
+	);
+
+	return tooltip ? (
+		<TooltipSimple title={tooltip}>{button}</TooltipSimple>
+	) : (
+		button
+	);
+});
+
+export default SavedViewsRowButton;

frontend/src/container/SavedViews/SavedViewsRowMenu.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+import { SAVED_VIEW_ROW_ACTIONS } from './constants';
+import SavedViewsRowButton from './SavedViewsRowButton';
+import { SavedViewsRowMenuProps } from './types';
+
+import styles from './SavedViewsMenu.module.scss';
+
+function SavedViewsRowMenu({
+	viewId,
+	onAction,
+	onOpen,
+}: SavedViewsRowMenuProps): JSX.Element {
+	const permissions = useMemo(
+		() =>
+			SAVED_VIEW_ROW_ACTIONS.flatMap(({ buildPermission }) =>
+				buildPermission ? [buildPermission(viewId)] : [],
+			),
+		[viewId],
+	);
+	const { deniedPermissions } = useAuthZ(permissions);
+
+	const items = useMemo<MenuItem[]>(
+		() =>
+			SAVED_VIEW_ROW_ACTIONS.flatMap(
+				({
+					key,
+					label,
+					icon: Icon,
+					danger,
+					hasDividerBefore,
+					buildPermission,
+				}): MenuItem[] => {
+					const permission = buildPermission?.(viewId);
+					const isDenied = !!permission && deniedPermissions.includes(permission);
+					return [
+						...(hasDividerBefore ? [{ type: 'divider' as const }] : []),
+						{
+							key,
+							label: permission ? (
+								<AuthZTooltip checks={[permission]}>
+									<span>{label}</span>
+								</AuthZTooltip>
+							) : (
+								label
+							),
+							icon: <Icon size={14} />,
+							danger,
+							disabled: isDenied,
+							className: isDenied ? styles.deniedItem : undefined,
+							onClick: (): void => onAction(key),
+						},
+					];
+				},
+			),
+		[viewId, deniedPermissions, onAction],
+	);
+
+	return (
+		<DropdownMenuSimple
+			menu={{ items }}
+			side="right"
+			align="start"
+			className={styles.menu}
+		>
+			<SavedViewsRowButton
+				icon={<Ellipsis size={14} />}
+				label="More options"
+				tooltip="More options"
+				testId="saved-views-row-menu"
+				onPointerDown={onOpen}
+				onKeyDown={onOpen}
+			/>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SavedViewsRowMenu;

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

@@ -0,0 +1,263 @@
+import { act, fireEvent, screen, within } from '@testing-library/react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
+	SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS,
+} from '../constants';
+import SavedViewsPanel from '../SavedViewsPanel';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	explorerUrl,
+	makeView,
+	queryWith,
+	renderWithExplorerProviders,
+} from './savedViewsTestUtils';
+
+const mockCopy = jest.fn();
+
+// copy-to-clipboard falls back to window.prompt in jsdom.
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopy],
+}));
+
+function twoQueries(): Query {
+	const base = queryWith(DataSource.TRACES, 'has_error = true');
+	const [first] = base.builder.queryData;
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [
+				first,
+				{
+					...first,
+					queryName: 'B',
+					expression: 'B',
+					filter: { expression: 'duration_nano > 1000' },
+				},
+			],
+		},
+	};
+}
+
+function metricsQuery(): Query {
+	const base = initialQueriesMap[DataSource.METRICS];
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					filter: { expression: '' },
+					aggregations: [
+						{
+							metricName: 'app.requests',
+							temporality: '',
+							timeAggregation: 'rate',
+							spaceAggregation: 'sum',
+						},
+					],
+				},
+			],
+		},
+	} as Query;
+}
+
+const errors = makeView({
+	id: 'view-1',
+	displayName: 'Errors',
+	updatedBy: 'editor@signoz.io',
+	updatedAt: '2026-09-28T12:00:00Z',
+});
+const slow = makeView({
+	id: 'view-2',
+	displayName: 'Slow spans',
+	expression: 'duration_nano > 1000',
+});
+const unfiltered = makeView({
+	id: 'view-3',
+	displayName: 'Everything',
+	expression: '',
+});
+const combined = makeView({
+	id: 'view-4',
+	displayName: 'Errors and slow',
+	query: twoQueries(),
+});
+const requestsMetric = makeView({
+	id: 'view-5',
+	displayName: 'Request rate',
+	source: SavedviewtypesSourceDTO.metrics,
+	dataSource: DataSource.METRICS,
+	query: metricsQuery(),
+	panelType: PANEL_TYPES.TIME_SERIES,
+});
+
+async function renderPanel(
+	source: SavedviewtypesSourceDTO = SavedviewtypesSourceDTO.traces,
+	dataSource: DataSource = DataSource.TRACES,
+): Promise<void> {
+	renderWithExplorerProviders(
+		<SavedViewsPanel source={source} onClose={jest.fn()} />,
+		explorerUrl(ROUTES.TRACES_EXPLORER, {}),
+		dataSource,
+	);
+	await screen.findByTestId('saved-views-list');
+	jest.useFakeTimers();
+}
+
+const row = (name: string): HTMLElement =>
+	screen
+		.getAllByTestId('saved-views-row')
+		.find((element) => element.textContent?.includes(name)) as HTMLElement;
+
+const card = (): HTMLElement | null =>
+	screen.queryByTestId('saved-view-hover-card');
+
+function advance(ms: number): void {
+	act(() => {
+		jest.advanceTimersByTime(ms);
+	});
+}
+
+function openCard(name: string): void {
+	fireEvent.mouseEnter(row(name));
+	advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+}
+
+describe('SavedViewHoverCard', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		mockCopy.mockClear();
+		mockSavedViewsApi([errors, slow, unfiltered, combined, requestsMetric]);
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	describe('opening and closing', () => {
+		it('opens for a row after the delay, not before', async () => {
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS - 1);
+			expect(card()).toBeNull();
+
+			advance(1);
+			expect(card()).toHaveTextContent('Errors');
+		});
+
+		it('does not open when the pointer leaves before the delay', async () => {
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS / 2);
+			fireEvent.mouseLeave(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+
+			expect(card()).toBeNull();
+		});
+
+		it('stays open while the pointer moves into the card', async () => {
+			await renderPanel();
+			openCard('Errors');
+
+			fireEvent.mouseLeave(row('Errors'));
+			fireEvent.mouseEnter(card() as HTMLElement);
+			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS * 2);
+			expect(card()).toBeInTheDocument();
+
+			fireEvent.mouseLeave(card() as HTMLElement);
+			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS);
+			expect(card()).toBeNull();
+		});
+
+		it('closes on leaving the row and reopens for the next row after the delay', async () => {
+			await renderPanel();
+			openCard('Errors');
+
+			fireEvent.mouseLeave(row('Errors'));
+			fireEvent.mouseEnter(row('Slow spans'));
+			advance(SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS);
+			expect(card()).toBeNull();
+
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+			expect(card()).toHaveTextContent('Slow spans');
+		});
+
+		it('closes when the row menu is pressed', async () => {
+			await renderPanel();
+			openCard('Errors');
+
+			fireEvent.pointerDown(
+				within(row('Errors')).getByTestId('saved-views-row-menu'),
+			);
+
+			expect(card()).toBeNull();
+		});
+	});
+
+	describe('content', () => {
+		it('shows the filter, the updater and the update time', async () => {
+			await renderPanel();
+			openCard('Errors');
+
+			const content = card() as HTMLElement;
+			expect(
+				within(content).getByTestId('saved-view-hover-card-query'),
+			).toHaveTextContent('has_error = true');
+			expect(content).toHaveTextContent('editor@signoz.io');
+			expect(content).toHaveTextContent('Sep 28, 2026');
+		});
+
+		it('copies the filter expression', async () => {
+			await renderPanel();
+			openCard('Errors');
+
+			fireEvent.click(screen.getByTestId('saved-view-hover-card-copy'));
+
+			expect(mockCopy).toHaveBeenCalledWith('has_error = true');
+		});
+
+		it('names each query when there are several, and copies them per line', async () => {
+			await renderPanel();
+			openCard('Errors and slow');
+
+			const query = screen.getByTestId('saved-view-hover-card-query');
+			expect(query).toHaveTextContent('A');
+			expect(query).toHaveTextContent('B');
+			fireEvent.click(screen.getByTestId('saved-view-hover-card-copy'));
+
+			expect(mockCopy).toHaveBeenCalledWith(
+				'A: has_error = true\nB: duration_nano > 1000',
+			);
+		});
+
+		it('says there are no filters, with nothing to copy', async () => {
+			await renderPanel();
+			openCard('Everything');
+
+			expect(screen.getByTestId('saved-view-hover-card-query')).toHaveTextContent(
+				'No filters',
+			);
+			expect(screen.queryByTestId('saved-view-hover-card-copy')).toBeNull();
+		});
+
+		it('shows the metric of a metrics query', async () => {
+			await renderPanel(SavedviewtypesSourceDTO.metrics, DataSource.METRICS);
+			openCard('Request rate');
+
+			const query = screen.getByTestId('saved-view-hover-card-query');
+			expect(query).toHaveTextContent('app.requests · rate · sum');
+			expect(query).not.toHaveTextContent('No filters');
+		});
+	});
+});

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

@@ -0,0 +1,177 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import {
+	buildSavedViewDeletePermission,
+	buildSavedViewUpdatePermission,
+	SavedViewCreatePermission,
+	SavedViewListPermission,
+	SavedViewReadPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+import { setupAuthzDeny } from 'lib/authz/utils/authz-test-utils';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SavedViewsHeader from '../SavedViewsHeader';
+import SavedViewsPanel from '../SavedViewsPanel';
+import { API, mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	explorerUrl,
+	makeView,
+	queryWith,
+	renderWithExplorerProviders,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+
+function renderPanel(url = explorerUrl(PATH, {})): void {
+	renderWithExplorerProviders(
+		<SavedViewsPanel
+			source={SavedviewtypesSourceDTO.traces}
+			onClose={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+function renderHeader(
+	url: string,
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<SavedViewsHeader
+			source={SavedviewtypesSourceDTO.traces}
+			onOpenViews={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+async function openRowMenu(): Promise<void> {
+	const row = await screen.findByTestId('saved-views-row');
+	await userEvent.click(within(row).getByTestId('saved-views-row-menu'));
+}
+
+const menuItem = (name: string): Promise<HTMLElement> =>
+	screen.findByRole('menuitem', { name });
+
+describe('SavedViews - AuthZ', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('shows the denied callout instead of the list without list', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(SavedViewListPermission));
+		renderPanel();
+
+		await expect(
+			screen.findByText(/not authorized/i),
+		).resolves.toBeInTheDocument();
+		expect(screen.queryByTestId('saved-views-list')).toBeNull();
+		expect(screen.queryByTestId('saved-views-search')).toBeNull();
+	});
+
+	it('lists views it cannot read but disables them, with no row menu', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(SavedViewReadPermission));
+		renderPanel();
+
+		const row = await screen.findByTestId('saved-views-row');
+		await waitFor(() =>
+			expect(within(row).getByTestId('saved-views-row-name')).toBeDisabled(),
+		);
+		expect(within(row).queryByTestId('saved-views-row-menu')).toBeNull();
+	});
+
+	it('disables creating without create', async () => {
+		mockSavedViewsApi([]);
+		server.use(setupAuthzDeny(SavedViewCreatePermission));
+		renderPanel();
+		renderHeader(explorerUrl(PATH, {}));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-list-create')).toBeDisabled(),
+		);
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-create')).toBeDisabled(),
+		);
+	});
+
+	it('disables edit details without update and delete without delete', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(
+			setupAuthzDeny(
+				buildSavedViewUpdatePermission(errors.id),
+				buildSavedViewDeletePermission(errors.id),
+			),
+		);
+		renderPanel();
+
+		await openRowMenu();
+
+		await waitFor(
+			async () =>
+				await expect(menuItem('Edit details')).resolves.toHaveAttribute(
+					'data-disabled',
+				),
+		);
+		await expect(menuItem('Delete')).resolves.toHaveAttribute('data-disabled');
+		await expect(menuItem('Copy link')).resolves.not.toHaveAttribute(
+			'data-disabled',
+		);
+	});
+
+	it('disables updating the open view without update, keeping save as new', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(buildSavedViewUpdatePermission(errors.id)));
+		const { history } = renderHeader(viewUrl(PATH, errors));
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-name')).toHaveTextContent('Errors'),
+		);
+
+		history.push(
+			explorerUrl(PATH, {
+				query: queryWith(DataSource.TRACES, 'has_error = false'),
+				panelType: PANEL_TYPES.LIST,
+				viewKey: errors.id,
+			}),
+		);
+		await userEvent.click(await screen.findByTestId('saved-views-save-changes'));
+
+		await waitFor(
+			async () =>
+				await expect(menuItem('Update selected view')).resolves.toHaveAttribute(
+					'data-disabled',
+				),
+		);
+		await expect(menuItem('Save as new view')).resolves.not.toHaveAttribute(
+			'data-disabled',
+		);
+	});
+
+	it('says so when the open view cannot be read', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(
+			rest.get(`${API}/:id`, (_req, res, ctx) =>
+				res(ctx.status(403), ctx.json({ status: 'error' })),
+			),
+		);
+		renderHeader(viewUrl(PATH, errors));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
+				'No access to this view',
+			),
+		);
+	});
+});

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

@@ -0,0 +1,74 @@
+import { act, screen, waitFor } from '@testing-library/react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SavedViewsHeader from '../SavedViewsHeader';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	explorerUrl,
+	makeView,
+	queryWith,
+	renderWithExplorerProviders,
+	urlParam,
+} from './savedViewsTestUtils';
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+
+function renderHeader(
+	url: string,
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<SavedViewsHeader
+			source={SavedviewtypesSourceDTO.traces}
+			onOpenViews={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
+
+async function waitForView(name: string): Promise<void> {
+	await waitFor(() => expect(chip()).toHaveTextContent(name));
+	await waitFor(() =>
+		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
+	);
+}
+
+describe('SavedViewsHeader last used view', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		localStorage.setItem(
+			LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+			JSON.stringify({ traces: { key: errors.id, value: 'Errors' } }),
+		);
+	});
+
+	it('reopens on a bare explorer', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(explorerUrl(PATH, {}));
+
+		await waitForView('Errors');
+		expect(urlParam(history, QueryParams.viewKey)).toBe(
+			JSON.stringify(errors.id),
+		);
+	});
+
+	it('leaves a url with its own query alone', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(
+			explorerUrl(PATH, {
+				query: queryWith(DataSource.TRACES, 'service.name = "cart"'),
+			}),
+		);
+
+		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+		expect(chip()).toHaveTextContent('My view');
+		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+	});
+});

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

@@ -0,0 +1,65 @@
+import { screen, waitFor } from '@testing-library/react';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import ROUTES from 'constants/routes';
+
+import SavedViewsHeader from '../SavedViewsHeader';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	makeView,
+	renderWithExplorerProviders,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const baseView = makeView({ id: 'view-1', displayName: 'Errors' });
+const withColumns = {
+	...baseView,
+	spec: {
+		...baseView.spec,
+		selectedFields: [{ name: 'service.name' }, { name: 'duration_nano' }],
+	},
+};
+
+function renderHeader(url: string): void {
+	renderWithExplorerProviders(
+		<SavedViewsHeader
+			source={SavedviewtypesSourceDTO.traces}
+			onOpenViews={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
+const isDirty = (): boolean => !!screen.queryByTestId('saved-views-discard');
+
+describe('SavedViewsHeader when loading fails', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	it('shows the load failed state when the view in the url does not load', async () => {
+		mockSavedViewsApi([]);
+		renderHeader(viewUrl(PATH, withColumns));
+
+		await waitFor(() =>
+			expect(chip()).toHaveTextContent('Saved view failed to load'),
+		);
+		expect(isDirty()).toBe(false);
+		expect(screen.queryByTestId('saved-views-create')).toBeNull();
+		expect(screen.queryByTestId('saved-views-clear')).toBeNull();
+		expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
+	});
+
+	it('keeps the view clean when only the views list fails', async () => {
+		mockSavedViewsApi([withColumns], { listFailures: Number.POSITIVE_INFINITY });
+		renderHeader(viewUrl(PATH, withColumns));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument(),
+		);
+		expect(chip()).toHaveTextContent('Errors');
+		expect(isDirty()).toBe(false);
+	});
+});

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

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

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

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

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.list.test.tsx

@@ -0,0 +1,192 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+
+import SavedViewsPanel from '../SavedViewsPanel';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	explorerUrl,
+	makeView,
+	renderWithExplorerProviders,
+	urlParam,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const mine = makeView({ id: 'view-1', displayName: 'Errors' });
+const alsoMine = makeView({ id: 'view-2', displayName: 'Slow spans' });
+const theirs = makeView({
+	id: 'view-3',
+	displayName: 'Checkout errors',
+	createdBy: 'someone@signoz.io',
+});
+
+function renderPanel(
+	url = explorerUrl(PATH, {}),
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<SavedViewsPanel
+			source={SavedviewtypesSourceDTO.traces}
+			onClose={jest.fn()}
+		/>,
+		url,
+	);
+}
+
+const rowNames = (sectionTestId: string): string[] =>
+	within(screen.getByTestId(sectionTestId))
+		.getAllByTestId('saved-views-row-name')
+		.map((row) => row.textContent ?? '');
+
+const row = (name: string): HTMLElement =>
+	screen
+		.getAllByTestId('saved-views-row')
+		.find((element) => element.textContent?.includes(name)) as HTMLElement;
+
+describe('SavedViewsPanel list', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	it('splits the views into created by me and created by others', async () => {
+		mockSavedViewsApi([mine, alsoMine, theirs]);
+		renderPanel();
+
+		await screen.findByTestId('saved-views-list');
+		expect(rowNames('saved-views-created-by-me')).toStrictEqual([
+			'Errors',
+			'Slow spans',
+		]);
+		expect(rowNames('saved-views-created-by-others')).toStrictEqual([
+			'Checkout errors',
+		]);
+	});
+
+	it('hides a section with no views', async () => {
+		mockSavedViewsApi([mine]);
+		renderPanel();
+
+		await screen.findByTestId('saved-views-created-by-me');
+		expect(screen.queryByTestId('saved-views-created-by-others')).toBeNull();
+	});
+
+	it('opens a view from its row', async () => {
+		mockSavedViewsApi([mine, alsoMine]);
+		const { history } = renderPanel();
+
+		await screen.findByTestId('saved-views-list');
+		await userEvent.click(
+			within(row('Slow spans')).getByTestId('saved-views-row-name'),
+		);
+
+		await waitFor(() =>
+			expect(urlParam(history, QueryParams.viewKey)).toBe(
+				JSON.stringify(alsoMine.id),
+			),
+		);
+	});
+
+	it('marks the open view and clears it from its row', async () => {
+		mockSavedViewsApi([mine, alsoMine]);
+		const { history } = renderPanel(viewUrl(PATH, mine));
+
+		await screen.findByTestId('saved-views-list');
+		const activeRow = row('Errors');
+		expect(within(activeRow).getByTestId('saved-views-row-clear')).toBeVisible();
+		expect(
+			within(row('Slow spans')).queryByTestId('saved-views-row-clear'),
+		).toBeNull();
+
+		await userEvent.click(within(activeRow).getByTestId('saved-views-row-clear'));
+
+		await waitFor(() =>
+			expect(urlParam(history, QueryParams.viewKey)).toBeNull(),
+		);
+	});
+
+	it('leaves the url alone when the open view is clicked again', async () => {
+		mockSavedViewsApi([mine]);
+		const { history } = renderPanel(viewUrl(PATH, mine));
+		await screen.findByTestId('saved-views-list');
+		const before = history.location.search;
+
+		await userEvent.click(
+			within(row('Errors')).getByTestId('saved-views-row-name'),
+		);
+
+		expect(history.location.search).toBe(before);
+	});
+
+	describe('search', () => {
+		it('filters both sections by name, ignoring case', async () => {
+			mockSavedViewsApi([mine, alsoMine, theirs]);
+			renderPanel();
+			await screen.findByTestId('saved-views-list');
+
+			await userEvent.type(screen.getByTestId('saved-views-search'), 'ERRORS');
+
+			expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
+			expect(rowNames('saved-views-created-by-others')).toStrictEqual([
+				'Checkout errors',
+			]);
+		});
+
+		it('says so when nothing matches, and recovers when cleared', async () => {
+			mockSavedViewsApi([mine]);
+			renderPanel();
+			await screen.findByTestId('saved-views-list');
+			const search = screen.getByTestId('saved-views-search');
+
+			await userEvent.type(search, 'nothing like this');
+			expect(
+				screen.getByTestId('saved-views-list-no-results'),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-list-create')).toBeNull();
+
+			await userEvent.clear(search);
+			expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
+		});
+	});
+
+	it('offers to create a view when there are none, and opens it', async () => {
+		const requests = mockSavedViewsApi([], { createdId: 'view-new' });
+		const { history } = renderPanel();
+
+		const create = await screen.findByTestId('saved-views-list-create');
+		await waitFor(() => expect(create).toBeEnabled());
+		await userEvent.click(create);
+		await userEvent.type(screen.getByTestId('save-view-name'), 'First view');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(requests.created).toHaveLength(1));
+		expect(toast.success).toHaveBeenCalledWith('View created', expect.anything());
+		await waitFor(() =>
+			expect(urlParam(history, QueryParams.viewKey)).toBe(
+				JSON.stringify('view-new'),
+			),
+		);
+		await expect(
+			screen.findByTestId('saved-views-created-by-me'),
+		).resolves.toHaveTextContent('First view');
+	});
+
+	it('shows the list error and loads the list on retry', async () => {
+		mockSavedViewsApi([mine], { listFailures: 1 });
+		renderPanel();
+
+		await userEvent.click(await screen.findByTestId('saved-views-list-retry'));
+
+		await expect(
+			screen.findByTestId('saved-views-created-by-me'),
+		).resolves.toHaveTextContent('Errors');
+	});
+});

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.rowMenu.test.tsx

@@ -0,0 +1,195 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+
+import SavedViewsHeader from '../SavedViewsHeader';
+import SavedViewsPanel from '../SavedViewsPanel';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	explorerUrl,
+	makeView,
+	renderWithExplorerProviders,
+	urlParam,
+	viewUrl,
+} from './savedViewsTestUtils';
+
+const mockCopy = jest.fn();
+
+// copy-to-clipboard falls back to window.prompt in jsdom.
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopy],
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const PATH = ROUTES.TRACES_EXPLORER;
+
+const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+const slow = makeView({
+	id: 'view-2',
+	displayName: 'Slow spans',
+	expression: 'duration_nano > 1000',
+});
+
+function renderPanelWithHeader(
+	url = explorerUrl(PATH, {}),
+): ReturnType<typeof renderWithExplorerProviders> {
+	return renderWithExplorerProviders(
+		<>
+			<SavedViewsHeader source={SavedviewtypesSourceDTO.traces} />
+			<SavedViewsPanel
+				source={SavedviewtypesSourceDTO.traces}
+				onClose={jest.fn()}
+			/>
+		</>,
+		url,
+	);
+}
+
+const row = (name: string): HTMLElement =>
+	screen
+		.getAllByTestId('saved-views-row')
+		.find((element) => element.textContent?.includes(name)) as HTMLElement;
+
+async function chooseFromRowMenu(
+	viewName: string,
+	item: string,
+): Promise<void> {
+	await screen.findByTestId('saved-views-list');
+	await userEvent.click(
+		within(row(viewName)).getByTestId('saved-views-row-menu'),
+	);
+	await userEvent.click(await screen.findByRole('menuitem', { name: item }));
+}
+
+const chip = (): HTMLElement => screen.getByTestId('saved-views-name');
+
+describe('SavedViewsPanel row menu', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		mockCopy.mockClear();
+		jest.mocked(toast.success).mockClear();
+	});
+
+	it('offers copy link, edit details and delete', async () => {
+		mockSavedViewsApi([errors]);
+		renderPanelWithHeader();
+		await screen.findByTestId('saved-views-list');
+
+		await userEvent.click(
+			within(row('Errors')).getByTestId('saved-views-row-menu'),
+		);
+
+		const items = await screen.findAllByRole('menuitem');
+		expect(items.map((item) => item.textContent)).toStrictEqual([
+			'Copy link',
+			'Edit details',
+			'Delete',
+		]);
+	});
+
+	it('copies a link that opens the view with its query and tab', async () => {
+		mockSavedViewsApi([errors, slow]);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Copy link');
+
+		expect(mockCopy).toHaveBeenCalledTimes(1);
+		const link = new URL(mockCopy.mock.calls[0][0]);
+		expect(link.pathname).toBe(PATH);
+		expect(link.searchParams.get(QueryParams.viewKey)).toBe(
+			JSON.stringify(slow.id),
+		);
+		expect(link.searchParams.get(QueryParams.panelTypes)).toBe(
+			JSON.stringify(slow.spec.panelType),
+		);
+		expect(
+			decodeURIComponent(link.searchParams.get(QueryParams.compositeQuery) ?? ''),
+		).toContain('duration_nano > 1000');
+		expect(toast.success).toHaveBeenCalledWith('Link copied', expect.anything());
+	});
+
+	it('renames a view without touching its query', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		expect(name).toHaveValue('Slow spans');
+		await userEvent.clear(name);
+		await userEvent.type(name, 'Slow checkout spans');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		const [update] = requests.updated;
+		expect(update.id).toBe(slow.id);
+		expect(update.body).toMatchObject({
+			spec: { ...slow.spec, displayName: 'Slow checkout spans' },
+		});
+		expect(toast.success).toHaveBeenCalledWith('View updated', expect.anything());
+		await waitFor(() => expect(row('Slow checkout spans')).toBeInTheDocument());
+	});
+
+	it('shows the new name in the header when the open view is renamed', async () => {
+		mockSavedViewsApi([errors]);
+		renderPanelWithHeader(viewUrl(PATH, errors));
+		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
+
+		await chooseFromRowMenu('Errors', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.clear(name);
+		await userEvent.type(name, 'All errors');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(chip()).toHaveTextContent('All errors'));
+	});
+
+	it('asks before deleting and keeps the view on cancel', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Delete');
+
+		expect(screen.getByText('Delete this view')).toBeInTheDocument();
+		expect(
+			screen.getByText('Deleting this view is irreversible and cannot be undone.'),
+		).toBeInTheDocument();
+		await userEvent.click(screen.getByTestId('delete-saved-view-cancel'));
+
+		expect(requests.deleted).toHaveLength(0);
+		expect(row('Slow spans')).toBeInTheDocument();
+	});
+
+	it('deletes a view on confirm', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Delete');
+		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
+
+		await waitFor(() => expect(requests.deleted).toStrictEqual([slow.id]));
+		expect(toast.success).toHaveBeenCalledWith('View deleted', expect.anything());
+		await waitFor(() => expect(row('Slow spans')).toBeUndefined());
+	});
+
+	it('clears the open view when it is deleted', async () => {
+		mockSavedViewsApi([errors, slow]);
+		const { history } = renderPanelWithHeader(viewUrl(PATH, errors));
+		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
+
+		await chooseFromRowMenu('Errors', 'Delete');
+		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
+
+		await waitFor(() =>
+			expect(urlParam(history, QueryParams.viewKey)).toBeNull(),
+		);
+		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
+	});
+});

frontend/src/container/SavedViews/__tests__/savedViewsApiMock.ts

@@ -0,0 +1,102 @@
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+
+export const API = 'http://localhost/api/v2/saved_views';
+
+export const TEST_USER_EMAIL = 'test@signoz.io';
+
+export interface Requests {
+	created: unknown[];
+	updated: { id: string; body: unknown }[];
+	deleted: string[];
+}
+
+// Mutates `views` on create, update and delete, so a refetch sees the change.
+export function mockSavedViewsApi(
+	views: SavedviewtypesSavedViewDTO[],
+	{
+		createStatus = 201,
+		createdId = 'view-new',
+		getDelay = 0,
+		listFailures = 0,
+	}: {
+		createStatus?: number;
+		createdId?: string;
+		getDelay?: number;
+		listFailures?: number;
+	} = {},
+): Requests {
+	const requests: Requests = { created: [], updated: [], deleted: [] };
+	let failedLists = 0;
+	server.use(
+		rest.get(API, (req, res, ctx) => {
+			if (failedLists < listFailures) {
+				failedLists += 1;
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}
+			const source = req.url.searchParams.get('source');
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: views.filter((view) => !source || view.source === source),
+				}),
+			);
+		}),
+		rest.get(`${API}/:id`, (req, res, ctx) => {
+			const view = views.find((v) => v.id === req.params.id);
+			if (!view) {
+				return res(ctx.status(404), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.delay(getDelay),
+				ctx.status(200),
+				ctx.json({ status: 'success', data: view }),
+			);
+		}),
+		rest.post(API, async (req, res, ctx) => {
+			const body = await req.json();
+			requests.created.push(body);
+			if (createStatus >= 400) {
+				return res(
+					ctx.status(createStatus),
+					ctx.json({
+						status: 'error',
+						error: { code: 'internal', message: 'boom' },
+					}),
+				);
+			}
+			views.push({
+				...body,
+				id: createdId,
+				createdBy: TEST_USER_EMAIL,
+				updatedBy: TEST_USER_EMAIL,
+			} as SavedviewtypesSavedViewDTO);
+			return res(
+				ctx.status(createStatus),
+				ctx.json({ status: 'success', data: { id: createdId } }),
+			);
+		}),
+		rest.put(`${API}/:id`, async (req, res, ctx) => {
+			const body = await req.json();
+			const id = String(req.params.id);
+			requests.updated.push({ id, body });
+			const index = views.findIndex((v) => v.id === id);
+			if (index >= 0) {
+				views[index] = { ...views[index], spec: body.spec };
+			}
+			return res(ctx.status(204));
+		}),
+		rest.delete(`${API}/:id`, (req, res, ctx) => {
+			const id = String(req.params.id);
+			requests.deleted.push(id);
+			const index = views.findIndex((v) => v.id === id);
+			if (index >= 0) {
+				views.splice(index, 1);
+			}
+			return res(ctx.status(204));
+		}),
+	);
+	return requests;
+}

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

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

frontend/src/container/SavedViews/constants.ts

@@ -0,0 +1,72 @@
+import { Link, PenLine, Trash2 } from '@signozhq/icons';
+import {
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import {
+	buildSavedViewDeletePermission,
+	buildSavedViewUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/saved-view.permissions';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { SavedViewRowActionConfig, SaveViewModalMode } from './types';
+
+export const SAVED_VIEW_SCHEMA_VERSION = SavedviewtypesSchemaVersionDTO.v2;
+
+// Only the logs and traces explorers have columns and formatting to save.
+export const SAVED_VIEW_OPTIONS_DATA_SOURCE: Partial<
+	Record<SavedviewtypesSourceDTO, DataSource>
+> = {
+	[SavedviewtypesSourceDTO.logs]: DataSource.LOGS,
+	[SavedviewtypesSourceDTO.traces]: DataSource.TRACES,
+};
+
+// What selecting a view writes to the url, so clearing it removes exactly these.
+export const SAVED_VIEW_URL_PARAMS = [
+	QueryParams.viewKey,
+	QueryParams.viewName,
+	QueryParams.compositeQuery,
+	QueryParams.panelTypes,
+];
+
+export const MY_VIEW_NAME = 'My view';
+
+export const SAVED_VIEW_LOAD_FAILED_NAME = 'Saved view failed to load';
+
+export const SAVED_VIEW_FORBIDDEN_NAME = 'No access to this view';
+
+export const SAVED_VIEWS_LIST_LOADING_ROWS = 4;
+
+export const SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS = 1000;
+
+// Long enough for the pointer to cross from the row into the card.
+export const SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS = 150;
+
+export const SAVED_VIEW_UPDATED_AT_FORMAT = 'HH:mm:ss — MMM D, YYYY';
+
+export const SAVE_VIEW_MODAL_TITLE: Record<SaveViewModalMode, string> = {
+	create: 'Create new view',
+	saveAsNew: 'Save as new view',
+	edit: 'Edit view details',
+};
+
+export const SAVED_VIEW_ROW_ACTIONS: SavedViewRowActionConfig[] = [
+	{ key: 'copyLink', label: 'Copy link', icon: Link },
+	{
+		key: 'editDetails',
+		label: 'Edit details',
+		icon: PenLine,
+		buildPermission: buildSavedViewUpdatePermission,
+	},
+	{
+		key: 'delete',
+		label: 'Delete',
+		icon: Trash2,
+		danger: true,
+		hasDividerBefore: true,
+		buildPermission: buildSavedViewDeletePermission,
+	},
+];
+
+export const SAVED_VIEW_TOAST_POSITION = 'top-right' as const;

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+
+import { SAVED_VIEW_TOAST_POSITION } from '../constants';
+import { UseSavedViewActionsResult } from '../types';
+
+export function useSaveNewView(
+	createView: UseSavedViewActionsResult['createView'],
+): (displayName: string) => Promise<boolean> {
+	return useCallback(
+		async (displayName: string): Promise<boolean> => {
+			if (!(await createView(displayName))) {
+				return false;
+			}
+			toast.success('View created', {
+				position: SAVED_VIEW_TOAST_POSITION,
+			});
+			return true;
+		},
+		[createView],
+	);
+}

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

@@ -0,0 +1,186 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { useLocation } from 'react-router-dom';
+import { toast } from '@signozhq/ui/sonner';
+import {
+	invalidateGetSavedView,
+	useCreateSavedView,
+	useUpdateSavedView,
+} from 'api/generated/services/saved-view';
+import {
+	RenderErrorResponseDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSavedViewSpecDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import useOptionsMenu from 'container/OptionsMenu/useOptionsMenu';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { DataSource } from 'types/common/queryBuilder';
+import { toAPIError } from 'utils/errorUtils';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
+
+import {
+	SAVED_VIEW_OPTIONS_DATA_SOURCE,
+	SAVED_VIEW_SCHEMA_VERSION,
+	SAVED_VIEW_TOAST_POSITION,
+	SAVED_VIEW_URL_PARAMS,
+} from '../constants';
+import { UseSavedViewActionsResult } from '../types';
+import { getSavedViewQuery } from '../utils/getSavedViewQuery';
+import { invalidateSavedViews } from '../utils/invalidateSavedViews';
+import { toSavedViewSpec } from '../utils/toSavedViewSpec';
+import { useLastUsedView } from './useLastUsedView';
+
+// Columns and formatting need no handling here: with a viewKey in the url the
+// preference provider reads them from the view, and without one it falls back
+// to the user's own.
+export function useSavedViewActions(
+	source: SavedviewtypesSourceDTO,
+): UseSavedViewActionsResult {
+	const queryClient = useQueryClient();
+	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+	const { currentQuery, stagedQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+	const { setLastUsedView, clearLastUsedView } = useLastUsedView(source);
+
+	const optionsDataSource = SAVED_VIEW_OPTIONS_DATA_SOURCE[source];
+	const { options } = useOptionsMenu({
+		dataSource: optionsDataSource ?? DataSource.LOGS,
+	});
+
+	const { mutateAsync: createSavedView, isLoading: isCreating } =
+		useCreateSavedView();
+	const { mutateAsync: updateSavedView, isLoading: isUpdating } =
+		useUpdateSavedView();
+
+	const invalidateViews = useCallback(
+		(id?: string): Promise<void> => invalidateSavedViews(queryClient, source, id),
+		[queryClient, source],
+	);
+
+	const toCurrentSpec = useCallback(
+		(displayName: string, color?: string): SavedviewtypesSavedViewSpecDTO =>
+			toSavedViewSpec({
+				query: stagedQuery ?? currentQuery,
+				panelType: panelType ?? PANEL_TYPES.LIST,
+				displayName,
+				options: optionsDataSource ? options : undefined,
+				color,
+			}),
+		[stagedQuery, currentQuery, panelType, optionsDataSource, options],
+	);
+
+	const selectView = useCallback(
+		(view: SavedviewtypesSavedViewDTO): void => {
+			handleExplorerTabChange(view.spec.panelType, {
+				query: getSavedViewQuery(view),
+				viewKey: view.id,
+			});
+			setLastUsedView(view.id, view.spec.displayName);
+		},
+		[handleExplorerTabChange, setLastUsedView],
+	);
+
+	// The preference provider re-reads a view's columns only when the view is
+	// fetched, so it is refetched as the view is applied again.
+	const revertView = useCallback(
+		(view: SavedviewtypesSavedViewDTO): void => {
+			void invalidateGetSavedView(queryClient, { id: view.id });
+			selectView(view);
+		},
+		[queryClient, selectView],
+	);
+
+	// The query builder redirects only ever add params, so the url is rebuilt
+	// here; the time range and everything else a view does not set stays.
+	const clearView = useCallback((): void => {
+		clearLastUsedView();
+
+		const params = getUnstableCurrentSearchParams();
+		SAVED_VIEW_URL_PARAMS.forEach((param) => params.delete(param));
+		safeNavigate(`${pathname}?${params.toString()}`);
+	}, [clearLastUsedView, pathname, safeNavigate]);
+
+	const createView = useCallback(
+		async (displayName: string): Promise<string | undefined> => {
+			try {
+				const { data } = await createSavedView({
+					data: {
+						generateName: true,
+						source,
+						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
+						spec: toCurrentSpec(displayName),
+					},
+				});
+				await invalidateViews();
+				redirectWithQueryBuilderData(stagedQuery ?? currentQuery, {
+					[QueryParams.viewKey]: data.id,
+				});
+				setLastUsedView(data.id, displayName);
+				return data.id;
+			} catch (error) {
+				toast.error(
+					toAPIError(
+						error as ErrorType<RenderErrorResponseDTO>,
+						'Could not save the view',
+					).getErrorMessage(),
+					{ position: SAVED_VIEW_TOAST_POSITION },
+				);
+				return undefined;
+			}
+		},
+		[
+			createSavedView,
+			source,
+			toCurrentSpec,
+			invalidateViews,
+			redirectWithQueryBuilderData,
+			stagedQuery,
+			currentQuery,
+			setLastUsedView,
+		],
+	);
+
+	const updateView = useCallback(
+		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
+			try {
+				await updateSavedView({
+					pathParams: { id: view.id },
+					data: {
+						source,
+						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
+						spec: toCurrentSpec(view.spec.displayName, view.spec.display?.color),
+					},
+				});
+				await invalidateViews(view.id);
+				return true;
+			} catch (error) {
+				toast.error(
+					toAPIError(
+						error as ErrorType<RenderErrorResponseDTO>,
+						'Could not update the view',
+					).getErrorMessage(),
+					{ position: SAVED_VIEW_TOAST_POSITION },
+				);
+				return false;
+			}
+		},
+		[updateSavedView, source, toCurrentSpec, invalidateViews],
+	);
+
+	return {
+		selectView,
+		revertView,
+		clearView,
+		createView,
+		updateView,
+		isSaving: isCreating || isUpdating,
+	};
+}

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

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+	SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
+	SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS,
+} from '../constants';
+import {
+	SavedViewHoverCardTarget,
+	UseSavedViewHoverCardResult,
+} from '../types';
+
+export function useSavedViewHoverCard(): UseSavedViewHoverCardResult {
+	const [target, setTarget] = useState<SavedViewHoverCardTarget | null>(null);
+	const openTimer = useRef<ReturnType<typeof setTimeout>>();
+	const closeTimer = useRef<ReturnType<typeof setTimeout>>();
+
+	const cancelOpen = useCallback(
+		(): void => clearTimeout(openTimer.current),
+		[],
+	);
+	const cancelClose = useCallback(
+		(): void => clearTimeout(closeTimer.current),
+		[],
+	);
+
+	const scheduleClose = useCallback((): void => {
+		cancelClose();
+		closeTimer.current = setTimeout(
+			() => setTarget(null),
+			SAVED_VIEW_HOVER_CARD_CLOSE_DELAY_MS,
+		);
+	}, [cancelClose]);
+
+	const onRowEnter = useCallback(
+		(next: SavedViewHoverCardTarget): void => {
+			cancelOpen();
+			openTimer.current = setTimeout(() => {
+				cancelClose();
+				setTarget(next);
+			}, SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+		},
+		[cancelOpen, cancelClose],
+	);
+
+	const onRowLeave = useCallback((): void => {
+		cancelOpen();
+		scheduleClose();
+	}, [cancelOpen, scheduleClose]);
+
+	const close = useCallback((): void => {
+		cancelOpen();
+		cancelClose();
+		setTarget(null);
+	}, [cancelOpen, cancelClose]);
+
+	useEffect(
+		() => (): void => {
+			cancelOpen();
+			cancelClose();
+		},
+		[cancelOpen, cancelClose],
+	);
+
+	return {
+		target,
+		onRowEnter,
+		onRowLeave,
+		onCardEnter: cancelClose,
+		onCardLeave: scheduleClose,
+		close,
+	};
+}

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

@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+import { toast } from '@signozhq/ui/sonner';
+import {
+	useDeleteSavedView,
+	useUpdateSavedView,
+} from 'api/generated/services/saved-view';
+import {
+	RenderErrorResponseDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
+import { QueryParams } from 'constants/query';
+import { buildExplorerNavigationUrl } from 'container/AIAssistant/components/ActionsSection/utils/openSavedView';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { toAPIError } from 'utils/errorUtils';
+
+import {
+	SAVED_VIEW_SCHEMA_VERSION,
+	SAVED_VIEW_TOAST_POSITION,
+} from '../constants';
+import { UseSavedViewRowActionsResult } from '../types';
+import { getSavedViewQuery } from '../utils/getSavedViewQuery';
+import { invalidateSavedViews } from '../utils/invalidateSavedViews';
+
+function showErrorToast(error: unknown, fallback: string): void {
+	toast.error(
+		toAPIError(
+			error as ErrorType<RenderErrorResponseDTO>,
+			fallback,
+		).getErrorMessage(),
+		{ position: SAVED_VIEW_TOAST_POSITION },
+	);
+}
+
+export function useSavedViewRowActions(
+	source: SavedviewtypesSourceDTO,
+): UseSavedViewRowActionsResult {
+	const queryClient = useQueryClient();
+	const { pathname } = useLocation();
+	const [, copyToClipboard] = useCopyToClipboard();
+	const { mutateAsync: updateSavedView, isLoading: isRenaming } =
+		useUpdateSavedView();
+	const { mutateAsync: deleteSavedView, isLoading: isDeleting } =
+		useDeleteSavedView();
+
+	const copyViewLink = useCallback(
+		(view: SavedviewtypesSavedViewDTO): void => {
+			const path = buildExplorerNavigationUrl(pathname, getSavedViewQuery(view), {
+				[QueryParams.panelTypes]: view.spec.panelType,
+				[QueryParams.viewKey]: view.id,
+			});
+			copyToClipboard(getAbsoluteUrl(path));
+			toast.success('Link copied', { position: SAVED_VIEW_TOAST_POSITION });
+		},
+		[pathname, copyToClipboard],
+	);
+
+	const renameView = useCallback(
+		async (
+			view: SavedviewtypesSavedViewDTO,
+			displayName: string,
+		): Promise<boolean> => {
+			try {
+				await updateSavedView({
+					pathParams: { id: view.id },
+					data: {
+						source,
+						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
+						spec: { ...view.spec, displayName },
+					},
+				});
+				await invalidateSavedViews(queryClient, source, view.id);
+				toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
+				return true;
+			} catch (error) {
+				showErrorToast(error, 'Could not update the view');
+				return false;
+			}
+		},
+		[updateSavedView, source, queryClient],
+	);
+
+	// The deleted view's own query is left alone: refetching it would fail
+	// while the header still has it selected.
+	const deleteView = useCallback(
+		async (view: SavedviewtypesSavedViewDTO): Promise<boolean> => {
+			try {
+				await deleteSavedView({ pathParams: { id: view.id } });
+				await invalidateSavedViews(queryClient, source);
+				toast.success('View deleted', { position: SAVED_VIEW_TOAST_POSITION });
+				return true;
+			} catch (error) {
+				showErrorToast(error, 'Could not delete the view');
+				return false;
+			}
+		},
+		[deleteSavedView, source, queryClient],
+	);
+
+	return { copyViewLink, renameView, deleteView, isRenaming, isDeleting };
+}

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

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useListSavedViews } from 'api/generated/services/saved-view';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useAppContext } from 'providers/App/App';
+
+import { UseSavedViewsListResult } from '../types';
+
+export function useSavedViewsList(
+	source: SavedviewtypesSourceDTO,
+	search: string,
+): UseSavedViewsListResult {
+	const { user } = useAppContext();
+	const { data, isLoading, isError, refetch } = useListSavedViews({ source });
+
+	const { createdByMe, createdByOthers } = useMemo(() => {
+		const term = search.trim().toLowerCase();
+		const views = (data?.data ?? []).filter((view) =>
+			view.spec.displayName.toLowerCase().includes(term),
+		);
+		return {
+			createdByMe: views.filter((view) => view.createdBy === user.email),
+			createdByOthers: views.filter((view) => view.createdBy !== user.email),
+		};
+	}, [data, search, user.email]);
+
+	return {
+		createdByMe,
+		createdByOthers,
+		isLoading,
+		isError,
+		refetch: (): void => {
+			void refetch();
+		},
+	};
+}

frontend/src/container/SavedViews/types.ts

@@ -0,0 +1,217 @@
+import { ReactElement } from 'react';
+import type { Link } from '@signozhq/icons';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type SavedViewSourcePage = DataSource | 'meter';
+
+export type SavedViewOptions = Pick<
+	OptionsQuery,
+	'selectColumns' | 'format' | 'maxLines' | 'fontSize'
+>;
+
+export interface ToSavedViewSpecArgs {
+	query: Query;
+	panelType: PANEL_TYPES;
+	displayName: string;
+	options?: SavedViewOptions;
+	color?: string;
+}
+
+export interface HasUnsavedViewChangesArgs {
+	view: SavedviewtypesSavedViewDTO;
+	stagedQuery: Query | null;
+	panelType: PANEL_TYPES;
+	options?: SavedViewOptions;
+}
+
+export interface UseLastUsedViewResult {
+	getLastUsedViewKey: () => string | undefined;
+	setLastUsedView: (id: string, displayName: string) => void;
+	clearLastUsedView: () => void;
+}
+
+export interface UseActiveSavedViewResult {
+	view: SavedviewtypesSavedViewDTO | undefined;
+	isLoading: boolean;
+	isError: boolean;
+	isForbidden: boolean;
+	hasUnsavedChanges: boolean;
+}
+
+export interface UseSavedViewActionsResult {
+	selectView: (view: SavedviewtypesSavedViewDTO) => void;
+	revertView: (view: SavedviewtypesSavedViewDTO) => void;
+	clearView: () => void;
+	createView: (displayName: string) => Promise<string | undefined>;
+	updateView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+export interface UseRestoreLastUsedViewArgs {
+	source: SavedviewtypesSourceDTO;
+	selectView: UseSavedViewActionsResult['selectView'];
+}
+
+export type SaveViewModalMode = 'create' | 'saveAsNew' | 'edit';
+
+export interface SaveViewModalProps {
+	mode: SaveViewModalMode;
+	initialName?: string;
+	isSaving: boolean;
+	onClose: () => void;
+	// Resolves true when saved; the modal stays open otherwise.
+	onSave: (displayName: string) => Promise<boolean>;
+}
+
+export interface SaveChangesMenuProps {
+	viewId: string;
+	disabled: boolean;
+	onSaveAsNew: () => void;
+	onUpdate: () => void;
+}
+
+export interface SavedViewsIconButtonProps {
+	title: string;
+	icon: ReactElement;
+	testId: string;
+	color?: 'secondary' | 'warning';
+	disabled?: boolean;
+	checks?: BrandedPermission[];
+	onClick?: () => void;
+}
+
+export interface UseSavedViewsListResult {
+	createdByMe: SavedviewtypesSavedViewDTO[];
+	createdByOthers: SavedviewtypesSavedViewDTO[];
+	isLoading: boolean;
+	isError: boolean;
+	refetch: () => void;
+}
+
+export interface SavedViewsListSectionProps {
+	title: string;
+	views: SavedviewtypesSavedViewDTO[];
+	activeViewId?: string;
+	onSelect: (view: SavedviewtypesSavedViewDTO) => void;
+	onClear: () => void;
+	onAction: SavedViewsListRowProps['onAction'];
+	hover: SavedViewsListRowHoverProps;
+	isReadDenied: boolean;
+	testId: string;
+}
+
+export interface SavedViewsListRowProps {
+	view: SavedviewtypesSavedViewDTO;
+	isActive: boolean;
+	onSelect: (view: SavedviewtypesSavedViewDTO) => void;
+	onClear: () => void;
+	onAction: (
+		view: SavedviewtypesSavedViewDTO,
+		key: SavedViewRowActionKey,
+	) => void;
+	hover: SavedViewsListRowHoverProps;
+	isReadDenied: boolean;
+}
+
+export type SavedViewRowActionKey = 'copyLink' | 'editDetails' | 'delete';
+
+export interface SavedViewRowActionConfig {
+	key: SavedViewRowActionKey;
+	label: string;
+	icon: typeof Link;
+	danger?: boolean;
+	hasDividerBefore?: boolean;
+	buildPermission?: (id: string) => BrandedPermission;
+}
+
+export interface PendingSavedViewAction {
+	key: Exclude<SavedViewRowActionKey, 'copyLink'>;
+	view: SavedviewtypesSavedViewDTO;
+}
+
+export interface SavedViewsRowButtonProps {
+	icon: ReactElement;
+	label: string;
+	tooltip?: string;
+	testId: string;
+	onClick?: () => void;
+	onPointerDown?: () => void;
+	onKeyDown?: () => void;
+}
+
+export interface SavedViewsRowMenuProps {
+	viewId: string;
+	onAction: (key: SavedViewRowActionKey) => void;
+	onOpen: () => void;
+}
+
+export interface DeleteSavedViewDialogProps {
+	isDeleting: boolean;
+	onCancel: () => void;
+	onConfirm: () => void;
+}
+
+export interface UseSavedViewRowActionsResult {
+	copyViewLink: (view: SavedviewtypesSavedViewDTO) => void;
+	renameView: (
+		view: SavedviewtypesSavedViewDTO,
+		displayName: string,
+	) => Promise<boolean>;
+	deleteView: (view: SavedviewtypesSavedViewDTO) => Promise<boolean>;
+	isRenaming: boolean;
+	isDeleting: boolean;
+}
+
+export interface SavedViewHoverCardTarget {
+	view: SavedviewtypesSavedViewDTO;
+	anchorTop: number;
+	anchorHeight: number;
+}
+
+export interface UseSavedViewHoverCardResult {
+	target: SavedViewHoverCardTarget | null;
+	onRowEnter: (target: SavedViewHoverCardTarget) => void;
+	onRowLeave: () => void;
+	onCardEnter: () => void;
+	onCardLeave: () => void;
+	close: () => void;
+}
+
+export interface SavedViewHoverCardProps {
+	target: SavedViewHoverCardTarget | null;
+	onCardEnter: () => void;
+	onCardLeave: () => void;
+	onClose: () => void;
+}
+
+export interface SavedViewsListRowHoverProps {
+	onRowEnter: (view: SavedviewtypesSavedViewDTO, row: HTMLElement) => void;
+	onRowLeave: () => void;
+	onMenuOpen: () => void;
+}
+
+export interface SavedViewQuerySummary {
+	queryName: string;
+	expression: string;
+	metric?: string;
+}
+
+export interface HighlightedQueryPart {
+	from: number;
+	text: string;
+	color?: string;
+}
+
+export interface SavedViewsEmptyStateProps {
+	isSearching: boolean;
+	isSaving: boolean;
+	onSave: (displayName: string) => Promise<boolean>;
+}

frontend/src/container/SavedViews/utils.ts

@@ -1,49 +0,0 @@
-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/SavedViews/utils/__tests__/findSavedView.test.ts

@@ -0,0 +1,20 @@
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { findSavedView } from '../findSavedView';
+
+describe('findSavedView', () => {
+	const views = [{ id: 'a' }, { id: 'b' }] as SavedviewtypesSavedViewDTO[];
+
+	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/__tests__/getSavedViewQuery.test.ts

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { findSavedView, getSavedViewQuery, toSavedViewSource } from '../utils';
+import { getSavedViewQuery } from '../getSavedViewQuery';
 
 jest.mock('uuid', () => ({
 	v4: (): string => 'test-id',
@@ -91,36 +91,3 @@ describe('getSavedViewQuery', () => {
 		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/__tests__/hasUnsavedViewChanges.test.ts

@@ -0,0 +1,253 @@
+import {
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSavedViewSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	initialQueriesMap,
+	initialQueryBuilderFormValuesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import {
+	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
+	ensureLogsRequiredColumns,
+} from 'container/OptionsMenu/constants';
+import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { getSavedViewQuery } from '../getSavedViewQuery';
+import { hasUnsavedViewChanges } from '../hasUnsavedViewChanges';
+import { toSavedViewSpec } from '../toSavedViewSpec';
+
+jest.mock('uuid', () => ({
+	v4: (): string => 'test-id',
+}));
+
+function query(dataSource: DataSource, expression = 'has_error = true'): Query {
+	const base = initialQueriesMap[dataSource];
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					filter: { expression },
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+// The server stores the queries through typed structs: nulls, empty strings,
+// zeros and empty lists do not come back.
+function asStoredByServer(value: unknown): unknown {
+	if (Array.isArray(value)) {
+		const items = value.map(asStoredByServer).filter((v) => v !== undefined);
+		return items.length > 0 ? items : undefined;
+	}
+	if (value !== null && typeof value === 'object') {
+		const entries = Object.entries(value)
+			.map(([key, v]) => [key, asStoredByServer(v)] as const)
+			.filter(([, v]) => v !== undefined);
+		return Object.fromEntries(entries);
+	}
+	return value === null || value === '' || value === 0 ? undefined : value;
+}
+
+function viewFrom(
+	spec: SavedviewtypesSavedViewSpecDTO,
+): SavedviewtypesSavedViewDTO {
+	return {
+		id: 'view-1',
+		spec: {
+			...spec,
+			queries: asStoredByServer(
+				JSON.parse(JSON.stringify(spec.queries)),
+			) as SavedviewtypesSavedViewSpecDTO['queries'],
+		},
+	} as SavedviewtypesSavedViewDTO;
+}
+
+// What the query builder stages after the view is opened: the stored query,
+// with its defaults filled in.
+function stagedFrom(
+	view: SavedviewtypesSavedViewDTO,
+	dataSource: DataSource,
+): Query {
+	const saved = getSavedViewQuery(view);
+	return {
+		...saved,
+		builder: {
+			...saved.builder,
+			queryData: saved.builder.queryData.map((queryData) => ({
+				...initialQueryBuilderFormValuesMap[dataSource],
+				...queryData,
+			})),
+		},
+	};
+}
+
+const columns = [
+	{ name: 'service.name', key: 'service.name' },
+	{ name: 'name', key: 'name' },
+] as TelemetryFieldKey[];
+
+const formatting = {
+	format: 'raw' as LogViewMode,
+	maxLines: 2,
+	fontSize: FontSize.SMALL,
+};
+
+describe('hasUnsavedViewChanges', () => {
+	const options = { selectColumns: columns, ...formatting };
+	const view = viewFrom(
+		toSavedViewSpec({
+			query: query(DataSource.TRACES),
+			panelType: PANEL_TYPES.LIST,
+			displayName: 'Errors',
+			options,
+		}),
+	);
+	const staged = stagedFrom(view, DataSource.TRACES);
+
+	it('is dirty when the columns change', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				options: { ...options, selectColumns: [columns[0]] },
+			}),
+		).toBe(true);
+	});
+
+	it('reads a traces view without columns as the default columns', () => {
+		const bare = viewFrom(
+			toSavedViewSpec({
+				query: query(DataSource.TRACES),
+				panelType: PANEL_TYPES.LIST,
+				displayName: 'Errors',
+			}),
+		);
+
+		expect(
+			hasUnsavedViewChanges({
+				view: bare,
+				stagedQuery: stagedFrom(bare, DataSource.TRACES),
+				panelType: PANEL_TYPES.LIST,
+				options: { ...options, selectColumns: defaultTraceSelectedColumns },
+			}),
+		).toBe(false);
+	});
+
+	describe('on logs', () => {
+		const logsView = viewFrom(
+			toSavedViewSpec({
+				query: query(DataSource.LOGS),
+				panelType: PANEL_TYPES.LIST,
+				displayName: 'Errors',
+				options: { selectColumns: columns, ...formatting },
+			}),
+		);
+		const logsStaged = stagedFrom(logsView, DataSource.LOGS);
+		// The explorer always adds the required logs columns.
+		const shownColumns = ensureLogsRequiredColumns(columns);
+
+		it('is clean with the required columns the explorer adds', () => {
+			expect(
+				hasUnsavedViewChanges({
+					view: logsView,
+					stagedQuery: logsStaged,
+					panelType: PANEL_TYPES.LIST,
+					options: { selectColumns: shownColumns, ...formatting },
+				}),
+			).toBe(false);
+		});
+
+		it('is dirty when the formatting changes', () => {
+			expect(
+				hasUnsavedViewChanges({
+					view: logsView,
+					stagedQuery: logsStaged,
+					panelType: PANEL_TYPES.LIST,
+					options: { selectColumns: shownColumns, ...formatting, maxLines: 5 },
+				}),
+			).toBe(true);
+		});
+
+		it('reads a view without formatting as the default formatting', () => {
+			const bare = viewFrom(
+				toSavedViewSpec({
+					query: query(DataSource.LOGS),
+					panelType: PANEL_TYPES.LIST,
+					displayName: 'Errors',
+				}),
+			);
+
+			expect(
+				hasUnsavedViewChanges({
+					view: bare,
+					stagedQuery: stagedFrom(bare, DataSource.LOGS),
+					panelType: PANEL_TYPES.LIST,
+					options: {
+						selectColumns: defaultLogsSelectedColumns,
+						format: 'table',
+						maxLines: 1,
+						fontSize: FontSize.SMALL,
+					},
+				}),
+			).toBe(false);
+		});
+	});
+
+	it('ignores fields the save path never writes, kept by older views', () => {
+		const metricsView = viewFrom(
+			toSavedViewSpec({
+				query: query(DataSource.METRICS, ''),
+				panelType: PANEL_TYPES.TIME_SERIES,
+				displayName: 'Old metrics view',
+			}),
+		);
+		const [storedQuery] = metricsView.spec.queries;
+		const olderView = {
+			...metricsView,
+			spec: {
+				...metricsView.spec,
+				queries: [
+					{
+						...storedQuery,
+						spec: {
+							...storedQuery.spec,
+							aggregations: [
+								{ metricName: 'erlang_vm_msacc_sleep_seconds_total', reduceTo: 'avg' },
+							],
+						},
+					},
+				],
+			},
+		} as SavedviewtypesSavedViewDTO;
+
+		expect(
+			hasUnsavedViewChanges({
+				view: olderView,
+				stagedQuery: stagedFrom(olderView, DataSource.METRICS),
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		).toBe(false);
+	});
+
+	it('ignores formatting on traces', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				options: { ...options, ...formatting, maxLines: 5 },
+			}),
+		).toBe(false);
+	});
+});

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

@@ -0,0 +1,43 @@
+import { tags } from '@lezer/highlight';
+import { copilotDarkStyle } from '@uiw/codemirror-theme-copilot';
+import { githubLightStyle } from '@uiw/codemirror-theme-github';
+
+import { highlightQueryExpression } from '../highlightQueryExpression';
+
+const EXPRESSION =
+	"service.name = 'frontend' AND duration_nano > 100 AND status IN ['ok', 'error']";
+
+function stringColor(styles: typeof copilotDarkStyle): string | undefined {
+	return (styles ?? []).find(({ tag }) =>
+		(Array.isArray(tag) ? tag : [tag]).includes(tags.string),
+	)?.color;
+}
+
+describe('highlightQueryExpression', () => {
+	it.each([
+		['dark', true],
+		['light', false],
+	])('keeps every character of the expression in %s mode', (_, isDarkMode) => {
+		const parts = highlightQueryExpression(EXPRESSION, isDarkMode);
+
+		expect(parts.map(({ text }) => text).join('')).toBe(EXPRESSION);
+	});
+
+	it.each([
+		['dark', true, copilotDarkStyle],
+		['light', false, githubLightStyle],
+	])(
+		'colours string values like the %s query search theme',
+		(_, isDarkMode, styles) => {
+			const parts = highlightQueryExpression(EXPRESSION, isDarkMode);
+
+			expect(parts.find(({ text }) => text === "'frontend'")?.color).toBe(
+				stringColor(styles),
+			);
+		},
+	);
+
+	it('returns nothing for an empty expression', () => {
+		expect(highlightQueryExpression('', true)).toStrictEqual([]);
+	});
+});

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

@@ -0,0 +1,17 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { toSavedViewSource } from '../toSavedViewSource';
+
+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);
+	});
+});

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

@@ -0,0 +1,95 @@
+import {
+	Querybuildertypesv5RequestTypeDTO,
+	SavedviewtypesPanelTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
+
+import { toSavedViewPanelType, toSavedViewSpec } from '../toSavedViewSpec';
+
+jest.mock('uuid', () => ({
+	v4: (): string => 'test-id',
+}));
+
+function tracesQuery(): Query {
+	const base = initialQueriesMap.traces;
+	return {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [
+				{
+					...base.builder.queryData[0],
+					filter: { expression: 'has_error = true' },
+					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
+				},
+			],
+		},
+	} as Query;
+}
+
+const columns = [
+	{
+		name: 'service.name',
+		key: 'service.name',
+		signal: 'traces',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+		isIndexed: true,
+	},
+	{ key: 'name' },
+] as unknown as TelemetryFieldKey[];
+
+describe('toSavedViewPanelType', () => {
+	it('folds a dashboard only panel type to graph', () => {
+		expect(toSavedViewPanelType(PANEL_TYPES.PIE)).toBe(
+			SavedviewtypesPanelTypeDTO.graph,
+		);
+	});
+});
+
+describe('toSavedViewSpec', () => {
+	it('stores only the field identity of the columns, naming key only ones', () => {
+		const spec = toSavedViewSpec({
+			query: tracesQuery(),
+			panelType: PANEL_TYPES.LIST,
+			displayName: 'Errors',
+			options: {
+				selectColumns: columns,
+				format: 'raw' as LogViewMode,
+				maxLines: 2,
+				fontSize: FontSize.SMALL,
+			},
+		});
+
+		expect(spec.selectedFields).toStrictEqual([
+			{
+				name: 'service.name',
+				signal: 'traces',
+				fieldContext: 'resource',
+				fieldDataType: 'string',
+			},
+			{ name: 'name' },
+		]);
+		expect(spec.display).toStrictEqual({
+			format: 'raw',
+			maxLines: 2,
+			fontSize: FontSize.SMALL,
+		});
+	});
+
+	it('keeps the colour in display', () => {
+		const spec = toSavedViewSpec({
+			query: tracesQuery(),
+			panelType: PANEL_TYPES.TIME_SERIES,
+			displayName: 'Errors',
+			color: 'red',
+		});
+
+		expect(spec.panelType).toBe(SavedviewtypesPanelTypeDTO.graph);
+		expect(spec.requestType).toBe(Querybuildertypesv5RequestTypeDTO.time_series);
+		expect(spec.display).toStrictEqual({ color: 'red' });
+	});
+});

frontend/src/container/SavedViews/utils/findSavedView.ts

@@ -0,0 +1,8 @@
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
+
+export function findSavedView(
+	views: SavedviewtypesSavedViewDTO[] | null | undefined,
+	id: string,
+): SavedviewtypesSavedViewDTO | undefined {
+	return views?.find((view) => view.id === id);
+}

frontend/src/container/SavedViews/utils/getSavedViewQuery.ts

@@ -0,0 +1,17 @@
+import { SavedviewtypesSavedViewDTO } 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';
+
+// 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,
+	});
+}

frontend/src/container/SavedViews/utils/getSavedViewQuerySummaries.ts

@@ -0,0 +1,34 @@
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
+import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
+import { MetricAggregation } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { SavedViewQuerySummary } from '../types';
+import { getSavedViewQuery } from './getSavedViewQuery';
+
+export function getSavedViewQuerySummaries(
+	view: SavedviewtypesSavedViewDTO,
+): SavedViewQuerySummary[] {
+	return getSavedViewQuery(view)
+		.builder.queryData.map((query): SavedViewQuerySummary => {
+			const aggregation = query.aggregations?.[0] as MetricAggregation | undefined;
+			return {
+				queryName: query.queryName,
+				expression: convertFiltersToExpressionWithExistingQuery(
+					query.filters ?? { items: [], op: 'AND' },
+					query.filter?.expression,
+				).filter.expression.trim(),
+				metric:
+					query.dataSource === DataSource.METRICS && aggregation?.metricName
+						? [
+								aggregation.metricName,
+								aggregation.timeAggregation,
+								aggregation.spaceAggregation,
+							]
+								.filter(Boolean)
+								.join(' · ')
+						: undefined,
+			};
+		})
+		.filter(({ expression, metric }) => expression.length > 0 || !!metric);
+}

frontend/src/container/SavedViews/utils/getViewColumnsAndFormatting.ts

@@ -0,0 +1,49 @@
+import { SavedviewtypesSavedViewSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { TelemetryFieldKey } from 'api/v5/v5';
+import {
+	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
+	ensureLogsRequiredColumns,
+} from 'container/OptionsMenu/constants';
+import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
+import { Preferences } from 'providers/preferences/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+function withColumnNames(
+	columns: TelemetryFieldKey[] | undefined,
+): TelemetryFieldKey[] | null {
+	if (!columns) {
+		return null;
+	}
+	return columns.map((column) => ({
+		...column,
+		name: column.name ?? column.key,
+	}));
+}
+
+// The columns and formatting the explorer shows for a saved view, with the
+// defaults filled in where the view has none.
+export function getViewColumnsAndFormatting(
+	spec: SavedviewtypesSavedViewSpecDTO | undefined,
+	dataSource: DataSource,
+): Preferences {
+	const selectedFields = spec?.selectedFields as TelemetryFieldKey[] | undefined;
+
+	if (dataSource === DataSource.LOGS) {
+		return {
+			columns: ensureLogsRequiredColumns(
+				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
+			),
+			formatting: {
+				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) {
+		return { columns: selectedFields || defaultTraceSelectedColumns };
+	}
+	return { columns: [] };
+}

frontend/src/container/SavedViews/utils/hasUnsavedViewChanges.ts

@@ -0,0 +1,83 @@
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import isEqual from 'lodash-es/isEqual';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { HasUnsavedViewChangesArgs } from '../types';
+import { getSavedViewQuery } from './getSavedViewQuery';
+import { toSavedViewPanelType } from './toSavedViewSpec';
+import { getViewColumnsAndFormatting } from './getViewColumnsAndFormatting';
+
+// The server drops empty values when it stores a query, while the query
+// builder fills them with defaults, so both sides lose them before comparing.
+function withoutEmptyValues(value: unknown): unknown {
+	if (Array.isArray(value)) {
+		const items = value
+			.map(withoutEmptyValues)
+			.filter((item) => item !== undefined);
+		return items.length > 0 ? items : undefined;
+	}
+	if (value !== null && typeof value === 'object') {
+		const entries = Object.entries(value)
+			.map(([key, item]) => [key, withoutEmptyValues(item)] as const)
+			.filter(([, item]) => item !== undefined);
+		return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+	}
+	if (value === null || value === '' || value === 0) {
+		return undefined;
+	}
+	return value;
+}
+
+// Both sides go through the v5 mapper, so fields it never writes (reduceTo on
+// a graph in older views) drop out; the builder's shape gets different defaults.
+export function hasUnsavedViewChanges({
+	view,
+	stagedQuery,
+	panelType,
+	options,
+}: HasUnsavedViewChangesArgs): boolean {
+	if (!stagedQuery) {
+		return false;
+	}
+	if (view.spec.panelType !== toSavedViewPanelType(panelType)) {
+		return true;
+	}
+
+	const { queries: storedQueries } = mapCompositeQueryFromQuery(
+		getSavedViewQuery(view),
+		panelType,
+	);
+	const { queries: stagedQueries } = mapCompositeQueryFromQuery(
+		stagedQuery,
+		panelType,
+	);
+	if (
+		!isEqual(withoutEmptyValues(storedQueries), withoutEmptyValues(stagedQueries))
+	) {
+		return true;
+	}
+
+	if (!options) {
+		return false;
+	}
+
+	const dataSource = stagedQuery.builder.queryData[0]?.dataSource;
+	const { columns, formatting } = getViewColumnsAndFormatting(
+		view.spec,
+		dataSource,
+	);
+	const toNames = (fields: { name?: string; key?: string }[]): unknown[] =>
+		fields.map((field) => field.name ?? field.key);
+	if (!isEqual(toNames(columns), toNames(options.selectColumns ?? []))) {
+		return true;
+	}
+
+	if (dataSource !== DataSource.LOGS || !formatting) {
+		return false;
+	}
+	return (
+		formatting.format !== options.format ||
+		formatting.maxLines !== options.maxLines ||
+		formatting.fontSize !== options.fontSize
+	);
+}

frontend/src/container/SavedViews/utils/highlightQueryExpression.ts

@@ -0,0 +1,58 @@
+import { javascriptLanguage } from '@codemirror/lang-javascript';
+import { Highlighter, highlightTree, Tag } from '@lezer/highlight';
+import { copilotDarkStyle } from '@uiw/codemirror-theme-copilot';
+import { githubLightStyle } from '@uiw/codemirror-theme-github';
+
+import { HighlightedQueryPart } from '../types';
+
+function createThemeHighlighter(styles: typeof copilotDarkStyle): Highlighter {
+	const colorByTag = new Map<Tag, string>();
+	(styles ?? []).forEach(({ tag, color }) => {
+		if (typeof color !== 'string') {
+			return;
+		}
+		(Array.isArray(tag) ? tag : [tag]).forEach((themeTag: Tag) => {
+			if (!colorByTag.has(themeTag)) {
+				colorByTag.set(themeTag, color);
+			}
+		});
+	});
+
+	return {
+		style: (tags): string | null => {
+			const match = tags
+				.flatMap((tag) => tag.set)
+				.find((candidate) => colorByTag.has(candidate));
+			return match ? (colorByTag.get(match) ?? null) : null;
+		},
+	};
+}
+
+const DARK_HIGHLIGHTER = createThemeHighlighter(copilotDarkStyle);
+const LIGHT_HIGHLIGHTER = createThemeHighlighter(githubLightStyle);
+
+export function highlightQueryExpression(
+	expression: string,
+	isDarkMode: boolean,
+): HighlightedQueryPart[] {
+	const tree = javascriptLanguage.parser.parse(expression);
+	const parts: HighlightedQueryPart[] = [];
+	let position = 0;
+
+	highlightTree(
+		tree,
+		isDarkMode ? DARK_HIGHLIGHTER : LIGHT_HIGHLIGHTER,
+		(from, to, color) => {
+			if (from > position) {
+				parts.push({ from: position, text: expression.slice(position, from) });
+			}
+			parts.push({ from, text: expression.slice(from, to), color });
+			position = to;
+		},
+	);
+
+	if (position < expression.length) {
+		parts.push({ from: position, text: expression.slice(position) });
+	}
+	return parts;
+}

frontend/src/container/SavedViews/utils/invalidateSavedViews.ts

@@ -0,0 +1,19 @@
+import { QueryClient } from 'react-query';
+import {
+	invalidateGetSavedView,
+	invalidateListSavedViews,
+} from 'api/generated/services/saved-view';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+
+export async function invalidateSavedViews(
+	queryClient: QueryClient,
+	source: SavedviewtypesSourceDTO,
+	id?: string,
+): Promise<void> {
+	await Promise.all([
+		invalidateListSavedViews(queryClient),
+		id ? invalidateGetSavedView(queryClient, { id }) : undefined,
+		// The saved views bar still lists through v1.
+		queryClient.invalidateQueries([{ sourcepage: source }]),
+	]);
+}

frontend/src/container/SavedViews/utils/toSavedViewSource.ts

@@ -0,0 +1,23 @@
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { SavedViewSourcePage } from '../types';
+
+// 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];
+}

frontend/src/container/SavedViews/utils/toSavedViewSpec.ts

@@ -0,0 +1,80 @@
+import {
+	Querybuildertypesv5QueryEnvelopeDTO,
+	SavedviewtypesDisplayDTO,
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewSpecDTO,
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+	TelemetrytypesSignalDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { panelTypeToRequestType } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import { ToSavedViewSpecArgs } from '../types';
+
+const SAVED_VIEW_PANEL_TYPES = new Set<string>(
+	Object.values(SavedviewtypesPanelTypeDTO),
+);
+
+// Explorers only produce list / trace / graph / table; anything else a caller
+// hands over (a dashboard panel type) is stored as a time series view.
+export function toSavedViewPanelType(
+	panelType: PANEL_TYPES,
+): SavedviewtypesPanelTypeDTO {
+	return SAVED_VIEW_PANEL_TYPES.has(panelType)
+		? (panelType as unknown as SavedviewtypesPanelTypeDTO)
+		: SavedviewtypesPanelTypeDTO.graph;
+}
+
+// The api stores the field identity only; `key` and the column flags are ui state.
+function toFieldKey(
+	column: TelemetryFieldKey,
+): TelemetrytypesTelemetryFieldKeyDTO {
+	return {
+		name: column.name ?? column.key ?? '',
+		...(column.signal && {
+			signal: column.signal as unknown as TelemetrytypesSignalDTO,
+		}),
+		...(column.fieldContext && {
+			fieldContext:
+				column.fieldContext as unknown as TelemetrytypesFieldContextDTO,
+		}),
+		...(column.fieldDataType && {
+			fieldDataType:
+				column.fieldDataType as unknown as TelemetrytypesFieldDataTypeDTO,
+		}),
+		...(column.description && { description: column.description }),
+		...(column.unit && { unit: column.unit }),
+	};
+}
+
+export function toSavedViewSpec({
+	query,
+	panelType,
+	displayName,
+	options,
+	color,
+}: ToSavedViewSpecArgs): SavedviewtypesSavedViewSpecDTO {
+	const { queries } = mapCompositeQueryFromQuery(query, panelType);
+
+	const display: SavedviewtypesDisplayDTO = {
+		...(color && { color }),
+		...(options?.format && { format: options.format }),
+		...(options?.maxLines && { maxLines: options.maxLines }),
+		...(options?.fontSize && { fontSize: options.fontSize }),
+	};
+
+	return {
+		displayName,
+		panelType: toSavedViewPanelType(panelType),
+		requestType: panelTypeToRequestType(panelType),
+		queries: (queries ?? []) as unknown as Querybuildertypesv5QueryEnvelopeDTO[],
+		...(options?.selectColumns?.length && {
+			selectedFields: options.selectColumns.map(toFieldKey),
+		}),
+		...(Object.keys(display).length > 0 && { display }),
+	};
+}

frontend/src/hooks/useHandleExplorerTabChange.ts

@@ -73,32 +73,20 @@ export const useHandleExplorerTabChange = (): {
 			}
 
 			const query = currentQueryData?.query || getUpdateQuery(newPanelType);
+			const nextViewKey = currentQueryData?.viewKey || viewKey;
+			const nextViewName = currentQueryData?.viewName || viewName;
 
-			if (redirectToUrl) {
-				redirectWithQueryBuilderData(
-					query,
-					{
-						[QueryParams.panelTypes]: newPanelType,
-						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
-						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
-					},
-					redirectToUrl,
-					undefined,
-					newTab,
-				);
-			} else {
-				redirectWithQueryBuilderData(
-					query,
-					{
-						[QueryParams.panelTypes]: newPanelType,
-						[QueryParams.viewName]: currentQueryData?.viewName || viewName,
-						[QueryParams.viewKey]: currentQueryData?.viewKey || viewKey,
-					},
-					undefined,
-					undefined,
-					newTab,
-				);
-			}
+			redirectWithQueryBuilderData(
+				query,
+				{
+					[QueryParams.panelTypes]: newPanelType,
+					...(nextViewKey ? { [QueryParams.viewKey]: nextViewKey } : {}),
+					...(nextViewName ? { [QueryParams.viewName]: nextViewName } : {}),
+				},
+				redirectToUrl,
+				undefined,
+				newTab,
+			);
 		},
 		[panelType, getUpdateQuery, redirectWithQueryBuilderData, viewName, viewKey],
 	);

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -23,6 +23,11 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['list', 'read', 'update'],
 			},
+			{
+				kind: 'saved-view',
+				type: 'metaresource',
+				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
+			},
 			{
 				kind: 'subscription',
 				type: 'metaresource',

frontend/src/lib/authz/hooks/useAuthZ/permissions/saved-view.permissions.ts

@@ -0,0 +1,14 @@
+import type { BrandedPermission } from '../types';
+import { buildPermission } from '../utils';
+
+export const SavedViewListPermission = buildPermission('list', 'saved-view:*');
+export const SavedViewReadPermission = buildPermission('read', 'saved-view:*');
+export const SavedViewCreatePermission = buildPermission(
+	'create',
+	'saved-view:*',
+);
+
+export const buildSavedViewUpdatePermission = (id: string): BrandedPermission =>
+	buildPermission('update', `saved-view:${id}`);
+export const buildSavedViewDeletePermission = (id: string): BrandedPermission =>
+	buildPermission('delete', `saved-view:${id}`);

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/__tests__/LogsExplorer.liveLogs.test.tsx

@@ -0,0 +1,130 @@
+import { MemoryRouter } from 'react-router-dom-v5-compat';
+import * as panelTypesQueryParamHooks from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import LogsExplorer from '../index';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${ROUTES.LOGS_EXPLORER}`,
+	}),
+}));
+
+jest.mock(
+	'container/Toolbar/Toolbar',
+	() =>
+		function Toolbar({
+			showLiveLogs,
+			onGoLive,
+		}: {
+			showLiveLogs?: boolean;
+			onGoLive?: () => void;
+		}): JSX.Element {
+			return (
+				<div>
+					<button type="button" data-testid="go-live" onClick={onGoLive}>
+						Live
+					</button>
+					<span data-testid="live-state">{showLiveLogs ? 'live' : 'not-live'}</span>
+				</div>
+			);
+		},
+);
+
+jest.mock(
+	'container/TimeSeriesView/TimeSeriesView',
+	() =>
+		function TimeSeriesView(): JSX.Element {
+			return <div>Time Series Chart</div>;
+		},
+);
+
+jest.mock(
+	'container/LogsExplorerChart',
+	() =>
+		function LogsExplorerChart(): JSX.Element {
+			return <div>Frequency chart content</div>;
+		},
+);
+
+jest.mock('container/LiveLogs/LiveLogsContainer', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div>Live logs</div>,
+}));
+
+jest.mock('constants/panelTypes', () => ({
+	AVAILABLE_EXPORT_PANEL_TYPES: ['graph', 'table'],
+}));
+
+jest.mock('d3-interpolate', () => ({
+	interpolate: jest.fn(),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): unknown => ({
+		preferences: {
+			columns: [],
+			formatting: { maxLines: 1, format: 'table', fontSize: 'small', version: 1 },
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
+function page(): JSX.Element {
+	return (
+		<MemoryRouter initialEntries={[ROUTES.LOGS_EXPLORER]}>
+			<PreferenceContextProvider>
+				<LogsExplorer />
+			</PreferenceContextProvider>
+		</MemoryRouter>
+	);
+}
+
+describe('Logs Explorer live mode', () => {
+	// useLocation is mocked without a search string, so the tab is driven
+	// through the hook that reads it from the url.
+	const panelTypeSpy = jest.spyOn(
+		panelTypesQueryParamHooks,
+		'useGetPanelTypesQueryParam',
+	);
+
+	afterAll(() => {
+		panelTypeSpy.mockRestore();
+	});
+
+	it('ends when the url moves off the list tab, whatever moved it', () => {
+		panelTypeSpy.mockReturnValue(PANEL_TYPES.LIST);
+		const { rerender } = render(page());
+
+		fireEvent.click(screen.getByTestId('go-live'));
+		expect(screen.getByTestId('live-state')).toHaveTextContent('live');
+
+		panelTypeSpy.mockReturnValue(PANEL_TYPES.TIME_SERIES);
+		rerender(page());
+
+		expect(screen.getByTestId('live-state')).toHaveTextContent('not-live');
+	});
+
+	it('stays on while the url keeps the list tab', () => {
+		panelTypeSpy.mockReturnValue(PANEL_TYPES.LIST);
+		const { rerender } = render(page());
+
+		fireEvent.click(screen.getByTestId('go-live'));
+		rerender(page());
+
+		expect(screen.getByTestId('live-state')).toHaveTextContent('live');
+	});
+});

frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx

@@ -1,4 +1,5 @@
 import { MemoryRouter } from 'react-router-dom-v5-compat';
+import * as panelTypesQueryParamHooks from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 // https://virtuoso.dev/mocking-in-tests/
 import { VirtuosoMockContext } from 'react-virtuoso';
 import {
@@ -130,6 +131,30 @@ describe('Logs Explorer Tests', () => {
 		// expect(oldLogsCTA).toBeInTheDocument();
 	});
 
+	it('renders the tab the url panelTypes param names', () => {
+		// useLocation is mocked without a search string in this file, so drive
+		// the param through the hook that reads it.
+		const panelTypeSpy = jest
+			.spyOn(panelTypesQueryParamHooks, 'useGetPanelTypesQueryParam')
+			.mockReturnValue(PANEL_TYPES.TIME_SERIES);
+
+		const { container } = render(
+			<MemoryRouter initialEntries={['/logs-explorer/?panelTypes=%22graph%22']}>
+				<PreferenceContextProvider>
+					<LogsExplorer />
+				</PreferenceContextProvider>
+			</MemoryRouter>,
+		);
+
+		expect(container.querySelector('.timeseries-view-tab')).toHaveClass(
+			'active-tab',
+		);
+		expect(container.querySelector('.list-view-tab')).not.toHaveClass(
+			'active-tab',
+		);
+		panelTypeSpy.mockRestore();
+	});
+
 	// update this test properly
 	it.skip('Logs Explorer Page should render with data', async () => {
 		// mocking the query range API to return the logs

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';
@@ -51,9 +51,13 @@ function LogsExplorer(): JSX.Element {
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const [selectedView, setSelectedView] = useState<ExplorerViews>(
-		() => panelTypeToExplorerView[panelTypesFromUrl],
-	);
+	const selectedView = panelTypeToExplorerView[panelTypesFromUrl];
+
+	useEffect(() => {
+		if (selectedView !== ExplorerViews.LIST) {
+			setShowLiveLogs(false);
+		}
+	}, [selectedView]);
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -116,15 +120,10 @@ function LogsExplorer(): JSX.Element {
 			);
 
 			handleSetConfig(nextPanelType, DataSource.LOGS);
-			setSelectedView(view);
-
-			if (view !== ExplorerViews.LIST) {
-				setShowLiveLogs(false);
-			}
 
 			handleExplorerTabChange(nextPanelType, querySearchParameters);
 		},
-		[handleSetConfig, handleExplorerTabChange, setSelectedView],
+		[handleSetConfig, handleExplorerTabChange],
 	);
 
 	// ─── AI Assistant page actions (only when license feature is on) ───────────
@@ -225,21 +224,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 +289,7 @@ function LogsExplorer(): JSX.Element {
 							</div>
 						</div>
 					</section>
-				</div>
+				</QuickFiltersLayout>
 			</EventSourceProvider>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -12,6 +12,10 @@
 		padding: 16px;
 	}
 
+	&.is-explorer-tab .ant-tabs-content-holder {
+		padding: 0;
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-use';
+import cx from 'classnames';
 import RouteTab from 'components/RouteTab';
+import ROUTES from 'constants/routes';
 import { TabRoutes } from 'components/RouteTab/types';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { useVolumeControlFeatureGate } from 'hooks/metricsExplorer/useVolumeControlFeatureGate';
@@ -43,7 +45,9 @@ function MetricsExplorerPage(): JSX.Element {
 
 	return (
 		<RouteTab
-			className="metrics-explorer-page"
+			className={cx('metrics-explorer-page', {
+				'is-explorer-tab': pathname === ROUTES.METRICS_EXPLORER_EXPLORER,
+			})}
 			routes={routes}
 			activeKey={pathname}
 			history={history}

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';
@@ -111,8 +112,9 @@ function TracesExplorer(): JSX.Element {
 		setIsLoadingQueries(false);
 	}, [queryClient]);
 
-	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
-		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
+	const selectedView = useMemo(
+		() => getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
+		[searchParams, panelTypesFromUrl],
 	);
 
 	const [warning, setWarning] = useState<Warning | undefined>();
@@ -138,8 +140,6 @@ function TracesExplorer(): JSX.Element {
 		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
 			handleSetConfig(explorerViewToPanelType[view], DataSource.TRACES);
 
-			setSelectedView(view);
-
 			handleExplorerTabChange(
 				explorerViewToPanelType[view],
 				querySearchParameters,
@@ -285,6 +285,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/providers/preferences/__tests__/usePreferenceSync.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { useListSavedViews } from 'api/generated/services/saved-view';
+import { useGetSavedView } from 'api/generated/services/saved-view';
 import {
 	SavedviewtypesSavedViewDTO,
 	SavedviewtypesSourceDTO,
@@ -32,8 +32,8 @@ jest.mock('../updater/usePreferenceUpdater', () => ({
 	})),
 }));
 
-const mockedUseListSavedViews = useListSavedViews as jest.MockedFunction<
-	typeof useListSavedViews
+const mockedUseGetSavedView = useGetSavedView as jest.MockedFunction<
+	typeof useGetSavedView
 >;
 
 function makeView(
@@ -55,18 +55,30 @@ function makeView(
 	} as unknown as SavedviewtypesSavedViewDTO;
 }
 
+// Stable objects, like react-query's cache; a fresh one per render loops the
+// sync effect.
 function mockViews(views: SavedviewtypesSavedViewDTO[]): void {
-	mockedUseListSavedViews.mockReturnValue({
-		data: { status: 'success', data: views },
-	} as unknown as ReturnType<typeof useListSavedViews>);
+	const responses = new Map(
+		views.map((view) => [
+			view.id,
+			{ data: { status: 'success', data: view }, dataUpdatedAt: 0 },
+		]),
+	);
+	const notLoaded = { data: undefined, dataUpdatedAt: 0 };
+	mockedUseGetSavedView.mockImplementation(
+		({ id }) =>
+			(responses.get(id) ?? notLoaded) as unknown as ReturnType<
+				typeof useGetSavedView
+			>,
+	);
 }
 
 describe('usePreferenceSync in saved view mode', () => {
 	beforeEach(() => {
-		mockedUseListSavedViews.mockReset();
+		mockedUseGetSavedView.mockReset();
 	});
 
-	it('fetches the list for the data source only in saved view mode', () => {
+	it('fetches the view only in saved view mode with a view id', () => {
 		mockViews([]);
 
 		renderHook(() =>
@@ -77,8 +89,8 @@ describe('usePreferenceSync in saved view mode', () => {
 			}),
 		);
 
-		expect(mockedUseListSavedViews).toHaveBeenCalledWith(
-			{ source: 'logs' },
+		expect(mockedUseGetSavedView).toHaveBeenCalledWith(
+			{ id: '' },
 			{ query: { enabled: false } },
 		);
 	});
@@ -184,7 +196,7 @@ describe('usePreferenceSync in saved view mode', () => {
 		);
 	});
 
-	it('uses defaults when the saved view id is not in the list', () => {
+	it('uses defaults while the saved view is not loaded', () => {
 		mockViews([makeView('other', SavedviewtypesSourceDTO.logs, {})]);
 
 		const { result } = renderHook(() =>

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

@@ -1,14 +1,8 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
-import { useListSavedViews } from 'api/generated/services/saved-view';
+import { useGetSavedView } from 'api/generated/services/saved-view';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
-import { FontSize, LogViewMode } from 'container/OptionsMenu/types';
-import { findSavedView, toSavedViewSource } from 'container/SavedViews/utils';
+import { getViewColumnsAndFormatting } from 'container/SavedViews/utils/getViewColumnsAndFormatting';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { usePreferenceLoader } from '../loader/usePreferenceLoader';
@@ -30,52 +24,22 @@ export function usePreferenceSync({
 	updateColumns: (newColumns: TelemetryFieldKey[]) => void;
 	updateFormatting: (newFormatting: FormattingOptions) => void;
 } {
-	const { data: viewsData } = useListSavedViews(
-		{ source: toSavedViewSource(dataSource) },
-		{ query: { enabled: mode === PreferenceMode.SAVED_VIEW } },
+	const isSavedViewMode = mode === PreferenceMode.SAVED_VIEW && !!savedViewId;
+	const { data: viewData, dataUpdatedAt } = useGetSavedView(
+		{ id: savedViewId ?? '' },
+		{ query: { enabled: isSavedViewMode } },
 	);
 
 	const [savedViewPreferences, setSavedViewPreferences] =
 		useState<Preferences | null>(null);
 
-	const withColumnNames = (
-		columns: TelemetryFieldKey[] | undefined,
-	): TelemetryFieldKey[] | null => {
-		if (!columns) {
-			return null;
-		}
-		return columns.map((column) => ({
-			...column,
-			name: column.name ?? column.key,
-		}));
-	};
-
+	// dataUpdatedAt re-runs this on a refetch that returns the same view, so
+	// discarding restores columns edited in memory.
 	useEffect(() => {
-		const spec = savedViewId
-			? findSavedView(viewsData?.data, savedViewId)?.spec
-			: undefined;
-		const selectedFields = spec?.selectedFields as
-			| TelemetryFieldKey[]
-			| undefined;
-
-		let columns: TelemetryFieldKey[] = [];
-		let formatting: FormattingOptions | undefined;
-		if (dataSource === DataSource.LOGS) {
-			columns = ensureLogsRequiredColumns(
-				withColumnNames(selectedFields) || defaultLogsSelectedColumns,
-			);
-			formatting = {
-				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 = selectedFields || defaultTraceSelectedColumns;
-		}
-		setSavedViewPreferences({ columns, formatting });
-	}, [viewsData, dataSource, savedViewId, mode]);
+		const view = viewData?.data;
+		const spec = view && view.id === savedViewId ? view.spec : undefined;
+		setSavedViewPreferences(getViewColumnsAndFormatting(spec, dataSource));
+	}, [viewData, dataUpdatedAt, dataSource, savedViewId, mode]);
 
 	// We are using a reSync state because we have URL updates as well as local storage updates
 	// and we want to make sure we are always using the latest preferences

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/config.go

@@ -187,7 +187,7 @@ func (store *config) ListChannels(ctx context.Context, orgID string, params *ale
 	}
 
 	if !params.Kind.IsZero() {
-		q = q.Where("type = ?", params.Kind.ToStoredType())
+		q = q.Where("type = ?", params.Kind.StringValue())
 	}
 
 	q = q.

pkg/alertmanager/signozalertmanager/handler.go

@@ -98,11 +98,12 @@ func (handler *handler) ListChannels(rw http.ResponseWriter, req *http.Request)
 	}
 
 	// This ensures that the UI receives an empty array instead of null
-	if len(channels) == 0 {
-		channels = make([]*alertmanagertypes.Channel, 0)
+	v1Channels := make([]*alertmanagertypes.Channel, 0, len(channels))
+	for _, channel := range channels {
+		v1Channels = append(v1Channels, channel.ToV1Channel())
 	}
 
-	render.Success(rw, http.StatusOK, channels)
+	render.Success(rw, http.StatusOK, v1Channels)
 }
 
 func (handler *handler) ListAllChannels(rw http.ResponseWriter, req *http.Request) {
@@ -152,7 +153,7 @@ func (handler *handler) GetChannelByID(rw http.ResponseWriter, req *http.Request
 		return
 	}
 
-	render.Success(rw, http.StatusOK, channel)
+	render.Success(rw, http.StatusOK, channel.ToV1Channel())
 }
 
 func (handler *handler) UpdateChannelByID(rw http.ResponseWriter, req *http.Request) {
@@ -272,7 +273,7 @@ func (handler *handler) CreateChannel(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	render.Success(rw, http.StatusCreated, channel)
+	render.Success(rw, http.StatusCreated, channel.ToV1Channel())
 }
 
 func (handler *handler) CreateRoutePolicy(rw http.ResponseWriter, req *http.Request) {

pkg/alertmanager/signozalertmanager/provider.go

@@ -262,7 +262,7 @@ func (provider *provider) CreateChannel(ctx context.Context, orgID string, recei
 }
 
 func (provider *provider) CreateNotificationChannel(ctx context.Context, orgID string, postable alertmanagertypes.PostableNotificationChannel) (*alertmanagertypes.Channel, error) {
-	receiver, err := postable.ToReceiver()
+	channel, receiver, err := postable.ToChannel(orgID)
 	if err != nil {
 		return nil, err
 	}
@@ -280,11 +280,6 @@ func (provider *provider) CreateNotificationChannel(ctx context.Context, orgID s
 		return nil, err
 	}
 
-	channel, err := alertmanagertypes.NewChannelFromReceiverWithName(receiver, postable.Name, orgID)
-	if err != nil {
-		return nil, err
-	}
-
 	err = provider.configStore.CreateChannel(ctx, channel, alertmanagertypes.WithCb(func(ctx context.Context) error {
 		return provider.configStore.Set(ctx, config)
 	}))
@@ -304,15 +299,11 @@ func (provider *provider) UpdateNotificationChannel(ctx context.Context, orgID s
 		return nil, err
 	}
 
-	receiver, err := updatable.ToReceiver(channel.DisplayName)
+	receiver, err := channel.UpdateFromUpdatable(updatable)
 	if err != nil {
 		return nil, err
 	}
 
-	if err := channel.Update(receiver); err != nil {
-		return nil, err
-	}
-
 	config, err := provider.configStore.Get(ctx, orgID)
 	if err != nil {
 		return nil, err

pkg/apiserver/signozapiserver/provider.go

@@ -61,7 +61,6 @@ type provider struct {
 	authzService               authz.AuthZ
 	orgHandler                 organization.Handler
 	userHandler                user.Handler
-	userGetter                 user.Getter
 	sessionHandler             session.Handler
 	authDomainHandler          authdomain.Handler
 	authDomainModule           authdomain.Module
@@ -106,7 +105,6 @@ func NewFactory(
 	authzService authz.AuthZ,
 	orgHandler organization.Handler,
 	userHandler user.Handler,
-	userGetter user.Getter,
 	sessionHandler session.Handler,
 	authDomainHandler authdomain.Handler,
 	authDomainModule authdomain.Module,
@@ -159,7 +157,6 @@ func NewFactory(
 			authzService,
 			orgHandler,
 			userHandler,
-			userGetter,
 			sessionHandler,
 			authDomainHandler,
 			authDomainModule,
@@ -214,7 +211,6 @@ func newProvider(
 	authzService authz.AuthZ,
 	orgHandler organization.Handler,
 	userHandler user.Handler,
-	userGetter user.Getter,
 	sessionHandler session.Handler,
 	authDomainHandler authdomain.Handler,
 	authDomainModule authdomain.Module,
@@ -268,7 +264,6 @@ func newProvider(
 		healthyC:                   make(chan struct{}),
 		orgHandler:                 orgHandler,
 		userHandler:                userHandler,
-		userGetter:                 userGetter,
 		authzService:               authzService,
 		sessionHandler:             sessionHandler,
 		authDomainHandler:          authDomainHandler,

pkg/apiserver/signozapiserver/user.go

@@ -6,35 +6,24 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
 )
 
 func (provider *provider) addUserRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v2/users", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.ListUsers, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "ListUsers",
-			Tags:                []string{"users"},
-			Summary:             "List users v2",
-			Description:         "This endpoint lists all users for the organization",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            make([]*types.User, 0),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbList)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbList,
-			Category: coretypes.ActionCategoryAccessControl,
-			Selector: coretypes.WildcardSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.ListUsers), handler.OpenAPIDef{
+		ID:                  "ListUsers",
+		Tags:                []string{"users"},
+		Summary:             "List users v2",
+		Description:         "This endpoint lists all users for the organization",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            make([]*types.User, 0),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
@@ -72,49 +61,20 @@ func (provider *provider) addUserRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.CreateUser, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "CreateUser",
-			Tags:                []string{"users"},
-			Summary:             "Create user",
-			Description:         "This endpoint creates a user for the organization",
-			Request:             new(authtypes.PostableUser),
-			RequestContentType:  "application/json",
-			Response:            new(types.Identifiable),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusCreated,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbCreate), coretypes.ResourceUser.Scope(coretypes.VerbAttach), coretypes.ResourceRole.Scope(coretypes.VerbAttach)}),
-		},
-		handler.WithResourceDefs(
-			handler.BasicResourceDef{
-				Resource: coretypes.ResourceUser,
-				Verb:     coretypes.VerbCreate,
-				Category: coretypes.ActionCategoryAccessControl,
-				ID:       coretypes.ResponseJSONPath("data.id"),
-				Selector: coretypes.WildcardSelector,
-			},
-			handler.AttachDetachSiblingResourceDef{
-				Verb:           coretypes.VerbAttach,
-				Category:       coretypes.ActionCategoryAccessControl,
-				SourceResource: coretypes.ResourceUser,
-				SourceIDs:      coretypes.OneID(coretypes.ResponseJSONPath("data.id")),
-				SourceSelector: coretypes.WildcardSelector,
-				TargetResource: coretypes.ResourceRole,
-				TargetIDs: coretypes.BodyFields(func(req *authtypes.PostableUser) []string {
-					roleIDs := make([]string, 0, len(req.UserRoles))
-					for _, role := range req.UserRoles {
-						roleIDs = append(roleIDs, role.ID.StringValue())
-					}
-					return roleIDs
-				}),
-				TargetSelector:  provider.roleSelector,
-				OptionalTargets: true,
-			},
-		),
-	)).Methods(http.MethodPost).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.CreateUser), handler.OpenAPIDef{
+		ID:                  "CreateUser",
+		Tags:                []string{"users"},
+		Summary:             "Create user",
+		Description:         "This endpoint creates a user for the organization",
+		Request:             new(authtypes.PostableUser),
+		RequestContentType:  "application/json",
+		Response:            new(types.Identifiable),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusCreated,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
 
@@ -135,148 +95,88 @@ func (provider *provider) addUserRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.GetUser, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "GetUser",
-			Tags:                []string{"users"},
-			Summary:             "Get user by user id",
-			Description:         "This endpoint returns the user by id",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(authtypes.UserWithRoles),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbRead)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbRead,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       coretypes.PathParam("id"),
-			Selector: coretypes.IDSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.GetUser), handler.OpenAPIDef{
+		ID:                  "GetUser",
+		Tags:                []string{"users"},
+		Summary:             "Get user by user id",
+		Description:         "This endpoint returns the user by id",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(authtypes.UserWithRoles),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.UpdateUser, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "UpdateUser",
-			Tags:                []string{"users"},
-			Summary:             "Update user v2",
-			Description:         "This endpoint updates the user by id",
-			Request:             new(types.UpdatableUser),
-			RequestContentType:  "application/json",
-			Response:            nil,
-			ResponseContentType: "",
-			SuccessStatusCode:   http.StatusNoContent,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbUpdate)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbUpdate,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       coretypes.PathParam("id"),
-			Selector: coretypes.IDSelector,
-		}),
-	)).Methods(http.MethodPut).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.UpdateUser), handler.OpenAPIDef{
+		ID:                  "UpdateUser",
+		Tags:                []string{"users"},
+		Summary:             "Update user v2",
+		Description:         "This endpoint updates the user by id",
+		Request:             new(types.UpdatableUser),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.DeleteUser, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "DeleteUser",
-			Tags:                []string{"users"},
-			Summary:             "Delete user",
-			Description:         "This endpoint deletes the user by id",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            nil,
-			ResponseContentType: "",
-			SuccessStatusCode:   http.StatusNoContent,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbDelete)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbDelete,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       coretypes.PathParam("id"),
-			Selector: coretypes.IDSelector,
-		}),
-	)).Methods(http.MethodDelete).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.DeleteUser), handler.OpenAPIDef{
+		ID:                  "DeleteUser",
+		Tags:                []string{"users"},
+		Summary:             "Delete user",
+		Description:         "This endpoint deletes the user by id",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}/reset_password_tokens", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.GetResetPasswordToken, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "GetResetPasswordToken",
-			Tags:                []string{"users"},
-			Summary:             "Get reset password token for a user",
-			Description:         "This endpoint returns the existing reset password token for a user.",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(types.ResetPasswordToken),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceFactorPassword.Scope(coretypes.VerbList)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceMetaResourceFactorPassword,
-			Verb:     coretypes.VerbList,
-			Category: coretypes.ActionCategoryAccessControl,
-			Selector: coretypes.WildcardSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}/reset_password_tokens", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.GetResetPasswordToken), handler.OpenAPIDef{
+		ID:                  "GetResetPasswordToken",
+		Tags:                []string{"users"},
+		Summary:             "Get reset password token for a user",
+		Description:         "This endpoint returns the existing reset password token for a user.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(types.ResetPasswordToken),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}/reset_password_tokens", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.CreateResetPasswordToken, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "CreateResetPasswordToken",
-			Tags:                []string{"users"},
-			Summary:             "Create or regenerate reset password token for a user",
-			Description:         "This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(types.ResetPasswordToken),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusCreated,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceFactorPassword.Scope(coretypes.VerbCreate), coretypes.ResourceUser.Scope(coretypes.VerbAttach)}),
-		},
-		handler.WithResourceDefs(
-			handler.BasicResourceDef{
-				Resource: coretypes.ResourceMetaResourceFactorPassword,
-				Verb:     coretypes.VerbCreate,
-				Category: coretypes.ActionCategoryAccessControl,
-				ID:       coretypes.PathParam("id"),
-				Selector: coretypes.IDSelector,
-			},
-			handler.AttachDetachParentChildResourceDef{
-				Verb:           coretypes.VerbAttach,
-				Category:       coretypes.ActionCategoryAccessControl,
-				ParentResource: coretypes.ResourceUser,
-				ParentID:       coretypes.PathParam("id"),
-				ParentSelector: coretypes.IDSelector,
-				ChildResource:  coretypes.ResourceMetaResourceFactorPassword,
-				ChildIDs:       coretypes.OneID(coretypes.PathParam("id")),
-			},
-		),
-	)).Methods(http.MethodPut).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}/reset_password_tokens", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.CreateResetPasswordToken), handler.OpenAPIDef{
+		ID:                  "CreateResetPasswordToken",
+		Tags:                []string{"users"},
+		Summary:             "Create or regenerate reset password token for a user",
+		Description:         "This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(types.ResetPasswordToken),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusCreated,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
 		return err
 	}
 
@@ -348,196 +248,90 @@ func (provider *provider) addUserRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/users/{id}/roles", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.GetRolesByUserID, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "GetRolesByUserID",
-			Tags:                []string{"users"},
-			Summary:             "Get user roles",
-			Description:         "This endpoint returns the user roles by user id",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            make([]*authtypes.Role, 0),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbRead)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbRead,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       coretypes.PathParam("id"),
-			Selector: coretypes.IDSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/users/{id}/roles", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.GetRolesByUserID), handler.OpenAPIDef{
+		ID:                  "GetRolesByUserID",
+		Tags:                []string{"users"},
+		Summary:             "Get user roles",
+		Description:         "This endpoint returns the user roles by user id",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            make([]*authtypes.Role, 0),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/roles/{id}/users", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.GetUsersByRoleID, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "GetUsersByRoleID",
-			Tags:                []string{"users"},
-			Summary:             "Get users by role id",
-			Description:         "This endpoint returns the users having the role by role id",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            make([]*types.User, 0),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceRole.Scope(coretypes.VerbRead)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceRole,
-			Verb:     coretypes.VerbRead,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       coretypes.PathParam("id"),
-			Selector: provider.roleSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/roles/{id}/users", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.GetUsersByRoleID), handler.OpenAPIDef{
+		ID:                  "GetUsersByRoleID",
+		Tags:                []string{"users"},
+		Summary:             "Get users by role id",
+		Description:         "This endpoint returns the users having the role by role id",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            make([]*types.User, 0),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/user_roles", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.CreateUserRole, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "CreateUserRole",
-			Tags:                []string{"users"},
-			Summary:             "Create user role",
-			Description:         "This endpoint assigns a role to a user",
-			Request:             new(authtypes.PostableUserRole),
-			RequestContentType:  "",
-			Response:            new(types.Identifiable),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusCreated,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbAttach), coretypes.ResourceRole.Scope(coretypes.VerbAttach)}),
-		},
-		handler.WithResourceDefs(handler.AttachDetachSiblingResourceDef{
-			Verb:           coretypes.VerbAttach,
-			Category:       coretypes.ActionCategoryAccessControl,
-			SourceResource: coretypes.ResourceUser,
-			SourceIDs:      coretypes.OneID(coretypes.BodyField(func(req *authtypes.PostableUserRole) string { return req.UserID.StringValue() })),
-			SourceSelector: coretypes.IDSelector,
-			TargetResource: coretypes.ResourceRole,
-			TargetIDs:      coretypes.OneID(coretypes.BodyField(func(req *authtypes.PostableUserRole) string { return req.RoleID.StringValue() })),
-			TargetSelector: provider.roleSelector,
-		}),
-	)).Methods(http.MethodPost).GetError(); err != nil {
+	if err := router.Handle("/api/v2/user_roles", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.CreateUserRole), handler.OpenAPIDef{
+		ID:                  "CreateUserRole",
+		Tags:                []string{"users"},
+		Summary:             "Create user role",
+		Description:         "This endpoint assigns a role to a user",
+		Request:             new(authtypes.PostableUserRole),
+		RequestContentType:  "",
+		Response:            new(types.Identifiable),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusCreated,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/user_roles/{id}", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.GetUserRole, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "GetUserRole",
-			Tags:                []string{"users"},
-			Summary:             "Get user role",
-			Description:         "This endpoint gets an existing user role",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(authtypes.UserRole),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbRead)}),
-		},
-		handler.WithResourceDefs(handler.BasicResourceDef{
-			Resource: coretypes.ResourceUser,
-			Verb:     coretypes.VerbRead,
-			Category: coretypes.ActionCategoryAccessControl,
-			ID:       provider.userRoleUserIDExtractor(),
-			Selector: coretypes.IDSelector,
-		}),
-	)).Methods(http.MethodGet).GetError(); err != nil {
+	if err := router.Handle("/api/v2/user_roles/{id}", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.GetUserRole), handler.OpenAPIDef{
+		ID:                  "GetUserRole",
+		Tags:                []string{"users"},
+		Summary:             "Get user role",
+		Description:         "This endpoint gets an existing user role",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(authtypes.UserRole),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/user_roles/{id}", handler.New(
-		provider.authzMiddleware.CheckResources(provider.userHandler.DeleteUserRole, authtypes.SigNozAdminRoleName),
-		handler.OpenAPIDef{
-			ID:                  "DeleteUserRole",
-			Tags:                []string{"users"},
-			Summary:             "Delete user role",
-			Description:         "This endpoint revokes a role from a user",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            nil,
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusNoContent,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceUser.Scope(coretypes.VerbDetach), coretypes.ResourceRole.Scope(coretypes.VerbDetach)}),
-		},
-		handler.WithResourceDefs(handler.AttachDetachSiblingResourceDef{
-			Verb:           coretypes.VerbDetach,
-			Category:       coretypes.ActionCategoryAccessControl,
-			SourceResource: coretypes.ResourceUser,
-			SourceIDs:      coretypes.OneID(provider.userRoleUserIDExtractor()),
-			SourceSelector: coretypes.IDSelector,
-			TargetResource: coretypes.ResourceRole,
-			TargetIDs:      coretypes.OneID(provider.userRoleRoleIDExtractor()),
-			TargetSelector: provider.roleSelector,
-		}),
-	)).Methods(http.MethodDelete).GetError(); err != nil {
+	if err := router.Handle("/api/v2/user_roles/{id}", handler.New(provider.authzMiddleware.AdminAccess(provider.userHandler.DeleteUserRole), handler.OpenAPIDef{
+		ID:                  "DeleteUserRole",
+		Tags:                []string{"users"},
+		Summary:             "Delete user role",
+		Description:         "This endpoint revokes a role from a user",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
 		return err
 	}
 
 	return nil
 }
-
-func (provider *provider) userRoleUserIDExtractor() coretypes.ResourceIDExtractor {
-	return coretypes.NewResourceIDExtractor(coretypes.PhaseRequest, func(ec coretypes.ExtractorContext) (string, error) {
-		if ec.Request == nil {
-			return "", nil
-		}
-
-		claims, err := authtypes.ClaimsFromContext(ec.Request.Context())
-		if err != nil {
-			return "", err
-		}
-
-		userRoleID, err := valuer.NewUUID(mux.Vars(ec.Request)["id"])
-		if err != nil {
-			return "", err
-		}
-
-		userRole, err := provider.userGetter.GetUserRoleByOrgIDAndID(ec.Request.Context(), valuer.MustNewUUID(claims.OrgID), userRoleID)
-		if err != nil {
-			return "", err
-		}
-
-		return userRole.UserID.String(), nil
-	})
-}
-
-func (provider *provider) userRoleRoleIDExtractor() coretypes.ResourceIDExtractor {
-	return coretypes.NewResourceIDExtractor(coretypes.PhaseRequest, func(ec coretypes.ExtractorContext) (string, error) {
-		if ec.Request == nil {
-			return "", nil
-		}
-
-		claims, err := authtypes.ClaimsFromContext(ec.Request.Context())
-		if err != nil {
-			return "", err
-		}
-
-		userRoleID, err := valuer.NewUUID(mux.Vars(ec.Request)["id"])
-		if err != nil {
-			return "", err
-		}
-
-		userRole, err := provider.userGetter.GetUserRoleByOrgIDAndID(ec.Request.Context(), valuer.MustNewUUID(claims.OrgID), userRoleID)
-		if err != nil {
-			return "", err
-		}
-
-		return userRole.RoleID.String(), nil
-	})
-}

pkg/http/handler/resourcedef.go

@@ -69,20 +69,9 @@ type AttachDetachSiblingResourceDef struct {
 	TargetResource coretypes.Resource
 	TargetIDs      coretypes.ResourceIDsExtractor
 	TargetSelector coretypes.SelectorFunc
-	// OptionalTargets drops the def when no target ids resolve, for routes where
-	// the target list is legitimately optional in the payload.
-	OptionalTargets bool
 }
 
 func (def AttachDetachSiblingResourceDef) resolveRequest(ec coretypes.ExtractorContext) []coretypes.ResolvedResource {
-	if def.OptionalTargets && def.TargetIDs.IsPhase(coretypes.PhaseRequest) {
-		// extractors are pure; on error fall through and let fill record it
-		ids, err := def.TargetIDs.Fn(ec)
-		if err == nil && len(ids) == 0 {
-			return nil
-		}
-	}
-
 	return []coretypes.ResolvedResource{
 		coretypes.NewResolvedResourceWithTarget(
 			def.Verb,

pkg/http/handler/resourcedef_test.go

@@ -1,83 +0,0 @@
-package handler
-
-import (
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-)
-
-type testPostableUserRole struct {
-	ID string `json:"id"`
-}
-
-type testPostableUser struct {
-	Name      string                 `json:"name"`
-	UserRoles []testPostableUserRole `json:"userRoles"`
-}
-
-func userRoleAttachDef(optionalTargets bool) AttachDetachSiblingResourceDef {
-	return AttachDetachSiblingResourceDef{
-		Verb:           coretypes.VerbAttach,
-		Category:       coretypes.ActionCategoryAccessControl,
-		SourceResource: coretypes.ResourceUser,
-		SourceIDs:      coretypes.OneID(coretypes.ResponseJSONPath("data.id")),
-		SourceSelector: coretypes.WildcardSelector,
-		TargetResource: coretypes.NewResourceRole(),
-		TargetIDs: coretypes.BodyFields(func(req *testPostableUser) []string {
-			ids := make([]string, 0, len(req.UserRoles))
-			for _, role := range req.UserRoles {
-				ids = append(ids, role.ID)
-			}
-			return ids
-		}),
-		TargetSelector:  coretypes.WildcardSelector,
-		OptionalTargets: optionalTargets,
-	}
-}
-
-func TestAttachDetachSiblingResourceDefOptionalTargets(t *testing.T) {
-	t.Run("absent target list resolves to no checks", func(t *testing.T) {
-		ec := coretypes.ExtractorContext{RequestBody: &testPostableUser{Name: "jane"}}
-		resolved := ResolveRequest([]ResourceDef{userRoleAttachDef(true)}, ec)
-		assert.Empty(t, resolved)
-	})
-
-	t.Run("empty target list resolves to no checks", func(t *testing.T) {
-		ec := coretypes.ExtractorContext{RequestBody: &testPostableUser{Name: "jane", UserRoles: []testPostableUserRole{}}}
-		resolved := ResolveRequest([]ResourceDef{userRoleAttachDef(true)}, ec)
-		assert.Empty(t, resolved)
-	})
-
-	t.Run("present targets resolve the attach as usual", func(t *testing.T) {
-		ec := coretypes.ExtractorContext{RequestBody: &testPostableUser{UserRoles: []testPostableUserRole{{ID: "role-a"}, {ID: "role-b"}}}}
-		resolved := ResolveRequest([]ResourceDef{userRoleAttachDef(true)}, ec)
-		require.Len(t, resolved, 1)
-
-		withTarget, ok := resolved[0].(coretypes.ResolvedResourceWithTargetResource)
-		require.True(t, ok)
-		assert.NoError(t, resolved[0].Err())
-		assert.Equal(t, []string{"role-a", "role-b"}, withTarget.TargetIDs())
-	})
-
-	t.Run("malformed target entry still fails closed", func(t *testing.T) {
-		ec := coretypes.ExtractorContext{RequestBody: &testPostableUser{UserRoles: []testPostableUserRole{{ID: ""}}}}
-		resolved := ResolveRequest([]ResourceDef{userRoleAttachDef(true)}, ec)
-		require.Len(t, resolved, 1)
-
-		withTarget, ok := resolved[0].(coretypes.ResolvedResourceWithTargetResource)
-		require.True(t, ok)
-		assert.Equal(t, []string{""}, withTarget.TargetIDs())
-	})
-
-	t.Run("without the flag the empty-id contract is preserved", func(t *testing.T) {
-		ec := coretypes.ExtractorContext{RequestBody: &testPostableUser{Name: "jane"}}
-		resolved := ResolveRequest([]ResourceDef{userRoleAttachDef(false)}, ec)
-		require.Len(t, resolved, 1)
-
-		withTarget, ok := resolved[0].(coretypes.ResolvedResourceWithTargetResource)
-		require.True(t, ok)
-		assert.Equal(t, []string{""}, withTarget.TargetIDs())
-	})
-}

pkg/signoz/openapi.go

@@ -70,7 +70,6 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ authz.AuthZ }{},
 		struct{ organization.Handler }{},
 		struct{ user.Handler }{},
-		struct{ user.Getter }{},
 		struct{ session.Handler }{},
 		struct{ authdomain.Handler }{},
 		struct{ authdomain.Module }{},

pkg/signoz/provider.go

@@ -257,7 +257,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddCloudIntegrationTuplesFactory(sqlstore),
 		sqlmigration.NewAddNotificationChannelTuplesFactory(sqlstore),
 		sqlmigration.NewAddAIObservabilityQuickFiltersFactory(sqlstore),
-		sqlmigration.NewAddUserTuplesFactory(sqlstore),
+		sqlmigration.NewAddChannelSpecFactory(sqlschema),
 	)
 }
 
@@ -329,7 +329,6 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			authz,
 			implorganization.NewHandler(modules.OrgGetter, modules.OrgSetter),
 			impluser.NewHandler(modules.UserSetter, modules.UserGetter),
-			modules.UserGetter,
 			implsession.NewHandler(modules.Session, globalConfig),
 			implauthdomain.NewHandler(modules.AuthDomain),
 			modules.AuthDomain,

pkg/sqlmigration/131_add_channel_config.go

@@ -0,0 +1,737 @@
+package sqlmigration
+
+import (
+	"context"
+	"encoding/json"
+	"log/slog"
+	"maps"
+	"slices"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+var channelSpecBackfillKinds = []channelSpecBackfillKind{
+	{kind: "slack", configsKey: "slack_configs", convert: convertSlackNotifierJSON},
+	{kind: "email", configsKey: "email_configs", convert: convertEmailNotifierJSON},
+	{kind: "webhook", configsKey: "webhook_configs", convert: convertWebhookNotifierJSON},
+	{kind: "pagerduty", configsKey: "pagerduty_configs", convert: convertPagerdutyNotifierJSON},
+	{kind: "opsgenie", configsKey: "opsgenie_configs", convert: convertOpsgenieNotifierJSON},
+	{kind: "msteams", configsKey: "msteamsv2_configs", convert: convertMSTeamsNotifierJSON},
+	{kind: "googlechat", configsKey: "googlechat_configs", convert: convertGoogleChatNotifierJSON},
+	{kind: "jira", configsKey: "jira_configs", convert: convertJiraNotifierJSON},
+	{kind: "jsmops", configsKey: "jsmops_configs", convert: convertJSMOpsNotifierJSON},
+	{kind: "incidentio", configsKey: "incidentio_configs", convert: convertIncidentIONotifierJSON},
+}
+
+func NewAddChannelSpecFactory(sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("add_channel_spec"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &addChannelSpec{sqlschema: sqlschema, logger: ps.Logger}, nil
+		},
+	)
+}
+
+func (migration *addChannelSpec) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+// Up adds the column and fills it from each channel's receiver, as a write
+// through a receiver does, pinning type to the kind the spec came from because
+// a read decodes the spec under it. The msteams kind, which v1 stored as
+// msteamsv2 after upstream's configs list, is renamed on every row. A receiver
+// v2 cannot represent, such as one carrying several notifiers or a notifier
+// kind v2 does not model, stays NULL and is logged; the repair endpoint is the
+// remedy for those.
+func (migration *addChannelSpec) Up(ctx context.Context, db *bun.DB) error {
+	table, uniqueConstraints, err := migration.sqlschema.GetTable(ctx, sqlschema.TableName("notification_channel"))
+	if err != nil {
+		return err
+	}
+
+	sqls := migration.sqlschema.Operator().AddColumn(table, uniqueConstraints, &sqlschema.Column{
+		Name:     sqlschema.ColumnName("spec"),
+		DataType: sqlschema.DataTypeText,
+		Nullable: true,
+	}, nil)
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	if _, err := tx.NewUpdate().Model((*channelSpecBackfillRow)(nil)).Set("type = ?", "msteams").Where("type = ?", "msteamsv2").Exec(ctx); err != nil {
+		return err
+	}
+
+	rows := make([]*channelSpecBackfillRow, 0)
+	if err := tx.NewSelect().Model(&rows).Where("spec IS NULL").OrderExpr("org_id, id").Scan(ctx); err != nil {
+		return err
+	}
+
+	type orgStats struct{ total, filled, unrepresentable int }
+	statsByOrg := map[string]*orgStats{}
+	for _, row := range rows {
+		stats, ok := statsByOrg[row.OrgID]
+		if !ok {
+			stats = &orgStats{}
+			statsByOrg[row.OrgID] = stats
+		}
+		stats.total++
+
+		storedType, spec, err := channelSpecFromReceiverJSON(row.Data)
+		if err != nil {
+			stats.unrepresentable++
+			migration.logger.WarnContext(ctx, "leaving notification channel without a v2 spec", slog.String("org_id", row.OrgID), slog.String("channel_id", row.ID), errors.Attr(err))
+			continue
+		}
+
+		encoded, err := marshalUnescaped(spec)
+		if err != nil {
+			return err
+		}
+
+		if _, err := tx.NewUpdate().
+			Model((*channelSpecBackfillRow)(nil)).
+			Set("spec = ?", string(encoded)).
+			Set("type = ?", storedType).
+			Where("id = ?", row.ID).
+			Exec(ctx); err != nil {
+			return err
+		}
+		stats.filled++
+	}
+
+	for _, orgID := range slices.Sorted(maps.Keys(statsByOrg)) {
+		stats := statsByOrg[orgID]
+		migration.logger.InfoContext(ctx, "filled v2 spec on notification channels", slog.String("org_id", orgID), slog.Int("total", stats.total), slog.Int("filled", stats.filled), slog.Int("unrepresentable", stats.unrepresentable))
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addChannelSpec) Down(context.Context, *bun.DB) error {
+	return nil
+}
+
+type addChannelSpec struct {
+	sqlschema sqlschema.SQLSchema
+	logger    *slog.Logger
+}
+
+type channelSpecBackfillRow struct {
+	bun.BaseModel `bun:"table:notification_channel"`
+
+	ID    string `bun:"id,pk"`
+	OrgID string `bun:"org_id"`
+	Data  string `bun:"data"`
+}
+
+// notifierJSON is one entry of a receiver's *_configs list as stored in
+// notification_channel.data.
+type notifierJSON map[string]json.RawMessage
+
+type channelSpecBackfillKind struct {
+	kind       string
+	configsKey string
+	convert    func(notifierJSON) (map[string]any, error)
+}
+
+// channelSpecFromReceiverJSON mirrors the v2 read of a stored receiver: one
+// notifier of a modelled kind, with the receiver's field names renamed to the
+// spec's and its unset templates left out. The type alongside is what a read
+// decodes the spec under.
+func channelSpecFromReceiverJSON(data string) (string, map[string]any, error) {
+	receiver := map[string]json.RawMessage{}
+	if err := json.Unmarshal([]byte(data), &receiver); err != nil {
+		return "", nil, err
+	}
+
+	total := 0
+	var found *channelSpecBackfillKind
+	var notifier notifierJSON
+	for key, raw := range receiver {
+		if !strings.HasSuffix(key, "_configs") {
+			continue
+		}
+
+		var list []notifierJSON
+		if err := json.Unmarshal(raw, &list); err != nil {
+			return "", nil, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+		}
+		total += len(list)
+		if len(list) == 0 {
+			continue
+		}
+
+		for i := range channelSpecBackfillKinds {
+			if channelSpecBackfillKinds[i].configsKey == key {
+				found = &channelSpecBackfillKinds[i]
+				notifier = list[0]
+			}
+		}
+	}
+
+	if total > 1 {
+		return "", nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "carries %d notifier configurations; only one per channel is supported", total)
+	}
+	if found == nil {
+		return "", nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "carries no supported notifier configuration")
+	}
+
+	spec, err := found.convert(notifier)
+	if err != nil {
+		return "", nil, err
+	}
+
+	sendResolved, err := notifier.boolValue("send_resolved")
+	if err != nil {
+		return "", nil, err
+	}
+	spec["sendResolved"] = sendResolved
+
+	return found.kind, spec, nil
+}
+
+func convertSlackNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"api_url": "apiUrl", "channel": "channel"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"title": "title", "text": "text", "color": "color", "title_link": "titleLink", "pretext": "pretext", "fallback": "fallback", "footer": "footer"}); err != nil {
+		return nil, err
+	}
+	if spec["apiUrl"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "slack: api_url is required")
+	}
+
+	fields, err := notifier.objectList("fields")
+	if err != nil {
+		return nil, err
+	}
+	if len(fields) > 0 {
+		converted := make([]map[string]any, 0, len(fields))
+		for _, field := range fields {
+			item := map[string]any{}
+			if err := field.copyStrings(item, map[string]string{"title": "title", "value": "value"}); err != nil {
+				return nil, err
+			}
+			if field.has("short") {
+				short, err := field.boolValue("short")
+				if err != nil {
+					return nil, err
+				}
+				item["short"] = short
+			}
+			converted = append(converted, item)
+		}
+		spec["fields"] = converted
+	}
+
+	actions, err := notifier.objectList("actions")
+	if err != nil {
+		return nil, err
+	}
+	if len(actions) > 0 {
+		converted := make([]map[string]any, 0, len(actions))
+		for _, action := range actions {
+			item := map[string]any{}
+			if err := action.copyStrings(item, map[string]string{"type": "type", "text": "text", "url": "url", "style": "style", "name": "name", "value": "value"}); err != nil {
+				return nil, err
+			}
+			if action.has("confirm") {
+				confirm, err := action.object("confirm")
+				if err != nil {
+					return nil, err
+				}
+				confirmation := map[string]any{}
+				if err := confirm.copyStrings(confirmation, map[string]string{"text": "text", "title": "title", "ok_text": "okText", "dismiss_text": "dismissText"}); err != nil {
+					return nil, err
+				}
+				item["confirm"] = confirmation
+			}
+			converted = append(converted, item)
+		}
+		spec["actions"] = converted
+	}
+
+	return spec, nil
+}
+
+func convertEmailNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"to": "to"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"html": "html"}); err != nil {
+		return nil, err
+	}
+	if spec["to"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "email: to is required")
+	}
+	if err := notifier.copyNonEmptyObjects(spec, map[string]string{"headers": "headers"}); err != nil {
+		return nil, err
+	}
+
+	return spec, nil
+}
+
+func convertWebhookNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"url": "url"}); err != nil {
+		return nil, err
+	}
+	if spec["url"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "webhook: url is required")
+	}
+
+	if err := rejectUnsupportedHTTPConfigJSON(notifier); err != nil {
+		return nil, err
+	}
+	httpConfig, err := notifier.object("http_config")
+	if err != nil {
+		return nil, err
+	}
+
+	username, password, err := extractBasicAuthJSON(httpConfig)
+	if err != nil {
+		return nil, err
+	}
+	bearerToken, err := extractBearerTokenJSON(httpConfig)
+	if err != nil {
+		return nil, err
+	}
+	if (username != "" || password != "") && bearerToken != "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "webhook: basic auth and bearer token cannot be combined")
+	}
+	spec["username"], spec["password"], spec["bearerToken"] = username, password, bearerToken
+
+	return spec, nil
+}
+
+func convertPagerdutyNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"routing_key": "routingKey", "url": "url", "severity": "severity", "component": "component", "group": "group", "class": "class"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"source": "source", "client": "client", "client_url": "clientUrl", "description": "description"}); err != nil {
+		return nil, err
+	}
+	if spec["routingKey"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "pagerduty: routing_key is required")
+	}
+
+	details, err := notifier.object("details")
+	if err != nil {
+		return nil, err
+	}
+	if len(details) > 0 {
+		for key, raw := range details {
+			var value string
+			if err := json.Unmarshal(raw, &value); err != nil {
+				return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "pagerduty: details.%s is not a string", key)
+			}
+		}
+		spec["details"] = notifier["details"]
+	}
+
+	return spec, nil
+}
+
+func convertOpsgenieNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"api_key": "apiKey", "api_url": "apiUrl", "priority": "priority"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"message": "message", "description": "description", "source": "source"}); err != nil {
+		return nil, err
+	}
+	if spec["apiKey"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "opsgenie: api_key is required")
+	}
+	if err := notifier.copyNonEmptyObjects(spec, map[string]string{"details": "details"}); err != nil {
+		return nil, err
+	}
+
+	return spec, nil
+}
+
+func convertMSTeamsNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	return convertWebhookURLNotifierJSON("msteams", notifier)
+}
+
+func convertGoogleChatNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	return convertWebhookURLNotifierJSON("googlechat", notifier)
+}
+
+func convertWebhookURLNotifierJSON(name string, notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"webhook_url": "webhookUrl"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"title": "title", "text": "text"}); err != nil {
+		return nil, err
+	}
+	if spec["webhookUrl"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "%s: webhook_url is required", name)
+	}
+
+	return spec, nil
+}
+
+func convertJiraNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"site": "site", "project": "project", "issue_type": "issueType", "priority": "priority", "resolve_transition": "resolveTransition", "reopen_transition": "reopenTransition", "wont_fix_resolution": "wontFixResolution"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"summary": "summary", "description": "description", "reopen_duration": "reopenDuration"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyObjects(spec, map[string]string{"custom_fields": "customFields"}); err != nil {
+		return nil, err
+	}
+
+	labels, err := notifier.list("labels")
+	if err != nil {
+		return nil, err
+	}
+	if len(labels) > 0 {
+		spec["labels"] = notifier["labels"]
+	}
+
+	if err := rejectUnsupportedHTTPConfigJSON(notifier); err != nil {
+		return nil, err
+	}
+	httpConfig, err := notifier.object("http_config")
+	if err != nil {
+		return nil, err
+	}
+	if httpConfig.has("authorization") {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "jira: http_config.authorization is not supported")
+	}
+	email, apiToken, err := extractBasicAuthJSON(httpConfig)
+	if err != nil {
+		return nil, err
+	}
+	spec["email"], spec["apiToken"] = email, apiToken
+
+	for _, required := range []string{"site", "project", "issueType", "email", "apiToken"} {
+		if spec[required] == "" {
+			return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "jira: %s is required", required)
+		}
+	}
+
+	return spec, nil
+}
+
+func convertJSMOpsNotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"api_key": "apiKey", "priority": "priority"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"message": "message", "description": "description", "tags": "tags"}); err != nil {
+		return nil, err
+	}
+	if spec["apiKey"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "jsmops: api_key is required")
+	}
+
+	return spec, nil
+}
+
+func convertIncidentIONotifierJSON(notifier notifierJSON) (map[string]any, error) {
+	if err := rejectAnyHTTPAuthJSON(notifier); err != nil {
+		return nil, err
+	}
+
+	spec := map[string]any{}
+	if err := notifier.copyStrings(spec, map[string]string{"url": "url", "token": "token"}); err != nil {
+		return nil, err
+	}
+	if err := notifier.copyNonEmptyStrings(spec, map[string]string{"title": "title", "description": "description"}); err != nil {
+		return nil, err
+	}
+	if spec["url"] == "" || spec["token"] == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "incidentio: url and token are required")
+	}
+	if err := notifier.copyNonEmptyObjects(spec, map[string]string{"metadata": "metadata"}); err != nil {
+		return nil, err
+	}
+
+	return spec, nil
+}
+
+func rejectAnyHTTPAuthJSON(notifier notifierJSON) error {
+	httpConfig, err := notifier.object("http_config")
+	if err != nil {
+		return err
+	}
+	if httpConfig.has("basic_auth") {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.basic_auth is not supported")
+	}
+	if httpConfig.has("authorization") {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.authorization is not supported")
+	}
+
+	return rejectUnsupportedHTTPConfigJSON(notifier)
+}
+
+// rejectUnsupportedHTTPConfigJSON refuses every http_config setting the spec has
+// no field for, since a config that dropped it would unauthenticate or reroute
+// the channel on the next write. An absent follow_redirects or enable_http2 is
+// the upstream default, true; only an explicit false is refused.
+func rejectUnsupportedHTTPConfigJSON(notifier notifierJSON) error {
+	if !notifier.has("http_config") {
+		return nil
+	}
+	httpConfig, err := notifier.object("http_config")
+	if err != nil {
+		return err
+	}
+
+	for _, key := range []string{"oauth2", "http_headers"} {
+		if httpConfig.has(key) {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.%s is not supported", key)
+		}
+	}
+	for _, key := range []string{"bearer_token", "bearer_token_file", "proxy_url", "no_proxy"} {
+		value, err := httpConfig.stringValue(key)
+		if err != nil {
+			return err
+		}
+		if value != "" {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.%s is not supported", key)
+		}
+	}
+	if httpConfig.has("proxy_from_environment") {
+		fromEnvironment, err := httpConfig.boolValue("proxy_from_environment")
+		if err != nil {
+			return err
+		}
+		if fromEnvironment {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.proxy_from_environment is not supported")
+		}
+	}
+
+	tlsConfig, err := httpConfig.object("tls_config")
+	if err != nil {
+		return err
+	}
+	for key := range tlsConfig {
+		if key != "insecure_skip_verify" {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.tls_config is not supported")
+		}
+	}
+	if tlsConfig.has("insecure_skip_verify") {
+		insecure, err := tlsConfig.boolValue("insecure_skip_verify")
+		if err != nil {
+			return err
+		}
+		if insecure {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.tls_config is not supported")
+		}
+	}
+
+	for _, key := range []string{"follow_redirects", "enable_http2"} {
+		if !httpConfig.has(key) {
+			continue
+		}
+		enabled, err := httpConfig.boolValue(key)
+		if err != nil {
+			return err
+		}
+		if !enabled {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.%s cannot be disabled", key)
+		}
+	}
+
+	return nil
+}
+
+func extractBasicAuthJSON(httpConfig notifierJSON) (string, string, error) {
+	basicAuth, err := httpConfig.object("basic_auth")
+	if err != nil {
+		return "", "", err
+	}
+	if len(basicAuth) == 0 {
+		return "", "", nil
+	}
+
+	for key := range basicAuth {
+		if key != "username" && key != "password" {
+			return "", "", errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.basic_auth.%s is not supported", key)
+		}
+	}
+	username, err := basicAuth.stringValue("username")
+	if err != nil {
+		return "", "", err
+	}
+	password, err := basicAuth.stringValue("password")
+	if err != nil {
+		return "", "", err
+	}
+
+	return username, password, nil
+}
+
+func extractBearerTokenJSON(httpConfig notifierJSON) (string, error) {
+	if !httpConfig.has("authorization") {
+		return "", nil
+	}
+	authorization, err := httpConfig.object("authorization")
+	if err != nil {
+		return "", err
+	}
+
+	for key := range authorization {
+		if key != "type" && key != "credentials" {
+			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.authorization.%s is not supported", key)
+		}
+	}
+	scheme, err := authorization.stringValue("type")
+	if err != nil {
+		return "", err
+	}
+	if !strings.EqualFold(scheme, "Bearer") {
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "http_config.authorization.type %q is not supported", scheme)
+	}
+
+	return authorization.stringValue("credentials")
+}
+
+// has reports a key that is present and not null.
+func (n notifierJSON) has(key string) bool {
+	raw, ok := n[key]
+	return ok && string(raw) != "null"
+}
+
+func (n notifierJSON) stringValue(key string) (string, error) {
+	if !n.has(key) {
+		return "", nil
+	}
+	var value string
+	if err := json.Unmarshal(n[key], &value); err != nil {
+		return "", errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+	}
+	return value, nil
+}
+
+func (n notifierJSON) boolValue(key string) (bool, error) {
+	if !n.has(key) {
+		return false, nil
+	}
+	var value bool
+	if err := json.Unmarshal(n[key], &value); err != nil {
+		return false, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+	}
+	return value, nil
+}
+
+// object reads an absent key as an empty object; a caller that must tell the
+// two apart checks has first.
+func (n notifierJSON) object(key string) (notifierJSON, error) {
+	if !n.has(key) {
+		return notifierJSON{}, nil
+	}
+	value := notifierJSON{}
+	if err := json.Unmarshal(n[key], &value); err != nil {
+		return nil, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+	}
+	return value, nil
+}
+
+func (n notifierJSON) list(key string) ([]json.RawMessage, error) {
+	if !n.has(key) {
+		return nil, nil
+	}
+	var value []json.RawMessage
+	if err := json.Unmarshal(n[key], &value); err != nil {
+		return nil, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+	}
+	return value, nil
+}
+
+func (n notifierJSON) objectList(key string) ([]notifierJSON, error) {
+	if !n.has(key) {
+		return nil, nil
+	}
+	var value []notifierJSON
+	if err := json.Unmarshal(n[key], &value); err != nil {
+		return nil, errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "%s", key)
+	}
+	return value, nil
+}
+
+// copyStrings writes each field as the spec's plain string, "" when absent.
+func (n notifierJSON) copyStrings(spec map[string]any, keys map[string]string) error {
+	for from, to := range keys {
+		value, err := n.stringValue(from)
+		if err != nil {
+			return err
+		}
+		spec[to] = value
+	}
+	return nil
+}
+
+// copyNonEmptyStrings leaves an empty field out, which is how the spec spells
+// an unset template.
+func (n notifierJSON) copyNonEmptyStrings(spec map[string]any, keys map[string]string) error {
+	for from, to := range keys {
+		value, err := n.stringValue(from)
+		if err != nil {
+			return err
+		}
+		if value != "" {
+			spec[to] = value
+		}
+	}
+	return nil
+}
+
+func (n notifierJSON) copyNonEmptyObjects(spec map[string]any, keys map[string]string) error {
+	for from, to := range keys {
+		value, err := n.object(from)
+		if err != nil {
+			return err
+		}
+		if len(value) > 0 {
+			spec[to] = n[from]
+		}
+	}
+	return nil
+}