docs(openapi): name replacements for deprecated operations

#### Description

- Saving a rule, and cloning or renaming one from its details page, now
refreshes the v3 rules list instead of v2. The list page (#13322) and
`useListAllRules` (#13440) both read v3, so nothing reads the v2 list
anymore.

#### Issues closed by this PR

Closes https://github.com/SigNoz/pulse-pod/issues/718

.github/CODEOWNERS

@@ -209,6 +209,10 @@ go.mod @therealpandey
 /frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
 /frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
 /frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
+/frontend/src/container/PlannedDowntime/ @SigNoz/pulse-frontend
+/frontend/src/hooks/alerts/ @SigNoz/pulse-frontend
+/frontend/src/container/Home/AlertRules/ @SigNoz/pulse-frontend
+/frontend/src/container/Home/__tests__/AlertRules.test.tsx @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -217,6 +221,11 @@ go.mod @therealpandey
 /frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
+## List filter + views (dashboards and alerts lists)
+/frontend/src/components/ListFilter/ @SigNoz/pulse-frontend
+/frontend/src/components/ListViews/ @SigNoz/pulse-frontend
+/frontend/src/hooks/listViews/ @SigNoz/pulse-frontend
+
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
 /docs/api/openapi.yml @therealpandey @vikrantgupta25 @srikanthccv

.github/workflows/build-community.yaml

@@ -63,7 +63,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build

.github/workflows/build-enterprise.yaml

@@ -89,7 +89,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/build-staging.yaml

@@ -95,7 +95,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/goci.yaml

@@ -22,7 +22,7 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_TEST_CONTEXT: ./...
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
   fmt:
     if: |
       github.event_name == 'merge_group' ||
@@ -32,7 +32,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
   lint:
     if: |
       github.event_name == 'merge_group' ||
@@ -42,7 +42,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
   deps:
     if: |
       github.event_name == 'merge_group' ||
@@ -52,7 +52,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.25
   semconv-generated:
     if: |
       github.event_name == 'merge_group' ||
@@ -65,7 +65,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: check-semconv-generated-files
         run: make semconv-check
   build:
@@ -80,7 +80,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: qemu-install
         uses: docker/setup-qemu-action@v3
       - name: aarch64-install
@@ -116,7 +116,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: generate-openapi
         run: |
           go run cmd/enterprise/*.go generate openapi
@@ -133,7 +133,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: generate-authz
         run: |
           go run cmd/enterprise/*.go generate authz
@@ -150,7 +150,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: generate-web-settings
         run: |
           go run cmd/enterprise/*.go generate config web-settings
@@ -167,7 +167,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: generate-transaction-groups
         run: |
           go run cmd/enterprise/*.go generate config transaction-groups

.github/workflows/gor-signoz-community.yaml

@@ -66,7 +66,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -130,7 +130,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
 
       # copy the caches from build
       - name: get-sha

.github/workflows/gor-signoz.yaml

@@ -75,7 +75,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -138,7 +138,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.25"
 
       # copy the caches from build
       - name: get-sha

docs/api/openapi.yml

@@ -14283,8 +14283,9 @@ paths:
   /api/v1/cloud-integrations/{cloud_provider}/agent-check-in:
     post:
       deprecated: true
-      description: '[Deprecated] This endpoint is called by the deployed agent to
-        check in'
+      description: 'This endpoint is called by the deployed agent to check in. Deprecated:
+        use POST /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in instead.
+        Send cloudIntegrationId and providerAccountId instead of account_id and cloud_account_id.'
       operationId: AgentCheckInDeprecated
       parameters:
       - in: path
@@ -18952,7 +18953,7 @@ paths:
   /api/v1/testChannel:
     post:
       deprecated: true
-      description: 'Deprecated: use /api/v1/channels/test instead'
+      description: 'Deprecated: use POST /api/v1/channels/test instead.'
       operationId: TestChannelDeprecated
       requestBody:
         content:
@@ -21439,7 +21440,8 @@ paths:
       x-signoz-stability: alpha
     post:
       deprecated: true
-      description: This endpoint creates an ingestion key limit.
+      description: 'This endpoint creates an ingestion key limit. Deprecated: use
+        POST /api/v2/gateway/ingestion_limits instead. Send keyId in the request body.'
       operationId: CreateIngestionKeyLimit
       parameters:
       - in: path
@@ -21499,7 +21501,8 @@ paths:
   /api/v2/gateway/ingestion_keys/limits/{limitId}:
     delete:
       deprecated: true
-      description: This endpoint deletes an ingestion key limit
+      description: 'This endpoint deletes an ingestion key limit. Deprecated: use
+        DELETE /api/v2/gateway/ingestion_limits/{limitId} instead.'
       operationId: DeleteIngestionKeyLimit
       parameters:
       - in: path
@@ -21541,7 +21544,8 @@ paths:
       x-signoz-stability: alpha
     patch:
       deprecated: true
-      description: This endpoint updates an ingestion key limit.
+      description: 'This endpoint updates an ingestion key limit. Deprecated: use
+        PATCH /api/v2/gateway/ingestion_limits/{limitId} instead.'
       operationId: UpdateIngestionKeyLimit
       parameters:
       - in: path
@@ -25531,8 +25535,8 @@ paths:
     get:
       deprecated: true
       description: 'This endpoint lists all alert rules with their current evaluation
-        state. Deprecated: use ListRulesV3, which supports filtering, sorting and
-        pagination.'
+        state. Deprecated: use GET /api/v3/rules instead, which supports filtering,
+        sorting and pagination.'
       operationId: ListRules
       responses:
         "200":
@@ -31709,8 +31713,9 @@ paths:
   /api/v3/licenses:
     post:
       deprecated: true
-      description: This endpoint validates the license key with the upstream server
-        and activates the license for the organization.
+      description: 'This endpoint validates the license key with the upstream server
+        and activates the license for the organization. Deprecated: use POST /api/v4/licenses
+        instead. The v4 endpoint returns 201 with the license id.'
       operationId: ActivateLicenseDeprecated
       requestBody:
         content:
@@ -31767,8 +31772,9 @@ paths:
       x-signoz-stability: alpha
     put:
       deprecated: true
-      description: This endpoint refreshes the active license of the organization
-        from the upstream server.
+      description: 'This endpoint refreshes the active license of the organization
+        from the upstream server. Deprecated: use PUT /api/v4/licenses/{id} instead.
+        Pass the active license id in the path.'
       operationId: RefreshLicenseDeprecated
       responses:
         "204":
@@ -32307,8 +32313,8 @@ paths:
       x-signoz-stability: alpha
     put:
       deprecated: false
-      description: This endpoint refreshes the active license of the organization
-        from the upstream server.
+      description: This endpoint refreshes the license with the given id from the
+        upstream server. Only the active license can be refreshed.
       operationId: RefreshLicense
       parameters:
       - in: path

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

@@ -597,7 +597,7 @@ export const useTestChannel = <
 	return useMutation(getTestChannelMutationOptions(options));
 };
 /**
- * Deprecated: use /api/v1/channels/test instead
+ * Deprecated: use POST /api/v1/channels/test instead.
  * @deprecated
  * @summary Test notification channel (deprecated)
  */

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

@@ -72,7 +72,7 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * [Deprecated] This endpoint is called by the deployed agent to check in
+ * This endpoint is called by the deployed agent to check in. Deprecated: use POST /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in instead. Send cloudIntegrationId and providerAccountId instead of account_id and cloud_account_id.
  * @deprecated
  * @summary Agent check-in
  */

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

@@ -634,7 +634,7 @@ export const invalidateGetIngestionKeyLimits = async (
 };
 
 /**
- * This endpoint creates an ingestion key limit.
+ * This endpoint creates an ingestion key limit. Deprecated: use POST /api/v2/gateway/ingestion_limits instead. Send keyId in the request body.
  * @deprecated
  * @summary Create limit for the ingestion key
  */
@@ -736,7 +736,7 @@ export const useCreateIngestionKeyLimit = <
 	return useMutation(getCreateIngestionKeyLimitMutationOptions(options));
 };
 /**
- * This endpoint deletes an ingestion key limit
+ * This endpoint deletes an ingestion key limit. Deprecated: use DELETE /api/v2/gateway/ingestion_limits/{limitId} instead.
  * @deprecated
  * @summary Delete limit for the ingestion key
  */
@@ -818,7 +818,7 @@ export const useDeleteIngestionKeyLimit = <
 	return useMutation(getDeleteIngestionKeyLimitMutationOptions(options));
 };
 /**
- * This endpoint updates an ingestion key limit.
+ * This endpoint updates an ingestion key limit. Deprecated: use PATCH /api/v2/gateway/ingestion_limits/{limitId} instead.
  * @deprecated
  * @summary Update limit for the ingestion key
  */

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

@@ -53,7 +53,7 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint validates the license key with the upstream server and activates the license for the organization.
+ * This endpoint validates the license key with the upstream server and activates the license for the organization. Deprecated: use POST /api/v4/licenses instead. The v4 endpoint returns 201 with the license id.
  * @deprecated
  * @summary Activate a license.
  */
@@ -139,7 +139,7 @@ export const useActivateLicenseDeprecated = <
 	return useMutation(getActivateLicenseDeprecatedMutationOptions(options));
 };
 /**
- * This endpoint refreshes the active license of the organization from the upstream server.
+ * This endpoint refreshes the active license of the organization from the upstream server. Deprecated: use PUT /api/v4/licenses/{id} instead. Pass the active license id in the path.
  * @deprecated
  * @summary Refresh a license.
  */
@@ -559,7 +559,7 @@ export const invalidateGetLicense = async (
 };
 
 /**
- * This endpoint refreshes the active license of the organization from the upstream server.
+ * This endpoint refreshes the license with the given id from the upstream server. Only the active license can be refreshed.
  * @summary Refresh a license.
  */
 export const refreshLicense = (

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

@@ -428,7 +428,7 @@ export const useUpdateRuleView = <
 	return useMutation(getUpdateRuleViewMutationOptions(options));
 };
 /**
- * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use GET /api/v3/rules instead, which supports filtering, sorting and pagination.
  * @deprecated
  * @summary List alert rules
  */

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

@@ -21,14 +21,15 @@ import {
 	useListDashboardsForUserV2,
 } from 'api/generated/services/dashboard';
 import {
-	getListRulesQueryKey,
-	useListRules,
+	getListRulesV3QueryKey,
+	useListRulesV3,
 } from 'api/generated/services/rules';
 import type {
 	DashboardtypesListedDashboardForUserV2DTO,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
-	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 } from 'api/generated/services/sigNoz.schemas';
 import logEvent from 'api/common/logEvent';
 import { useQueryService } from 'hooks/useQueryService';
@@ -179,6 +180,9 @@ const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
  */
 const DASHBOARD_LIST_PARAMS: ListDashboardsForUserV2Params = { limit: 1000 };
 
+/** Same as dashboards. 200 is the most the rules list returns per call. */
+const ALERT_RULE_LIST_PARAMS: ListRulesV3Params = { limit: 200 };
+
 function dashboardTitle(
 	dashboard: DashboardtypesListedDashboardForUserV2DTO,
 ): string {
@@ -755,7 +759,7 @@ export default function ChatInput({
 		data: alertsResponse,
 		isLoading: isAlertsLoading,
 		isError: isAlertsError,
-	} = useListRules({
+	} = useListRulesV3(ALERT_RULE_LIST_PARAMS, {
 		query: {
 			enabled: isContextPickerOpen && activeContextCategory === 'Alerts',
 			staleTime: Infinity,
@@ -804,10 +808,10 @@ export default function ChatInput({
 				}
 			}
 			if (ctx.type === 'alert' && ctx.resourceId) {
-				const cached = queryClient.getQueryData<ListRules200>(
-					getListRulesQueryKey(),
+				const cached = queryClient.getQueryData<ListRulesV3200>(
+					getListRulesV3QueryKey(ALERT_RULE_LIST_PARAMS),
 				);
-				const rule = cached?.data?.find((r) => r.id === ctx.resourceId);
+				const rule = cached?.data.rules.find((r) => r.id === ctx.resourceId);
 				if (rule?.alert) {
 					return rule.alert;
 				}
@@ -835,8 +839,8 @@ export default function ChatInput({
 					value: dashboardTitle(dashboard),
 				})) ?? [],
 			Alerts:
-				alertsResponse?.data
-					?.filter((alertRule) => Boolean(alertRule.alert))
+				alertsResponse?.data.rules
+					.filter((alertRule) => Boolean(alertRule.alert))
 					.map((alertRule) => ({
 						id: alertRule.id,
 						value: alertRule.alert,
@@ -1059,6 +1063,7 @@ export default function ChatInput({
 												color="secondary"
 												size="sm"
 												id={`ai-context-tab-${category}`}
+												testId={`ai-context-tab-${category}`}
 												// Single stable panel id shared by every tab: only the
 												// active category's tabpanel is rendered, so per-category
 												// `aria-controls` ids would point at nonexistent nodes

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.alertsPicker.test.tsx

@@ -0,0 +1,70 @@
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+jest.mock('api/generated/services/dashboard', () => ({
+	useListDashboardsForUserV2: (): unknown => ({
+		data: undefined,
+		isLoading: false,
+		isError: false,
+	}),
+	getListDashboardsForUserV2QueryKey: (): string[] => ['dashboards'],
+}));
+
+jest.mock('hooks/useQueryService', () => ({
+	useQueryService: (): unknown => ({
+		data: [],
+		isLoading: false,
+		isFetching: false,
+		isError: false,
+	}),
+}));
+
+jest.mock('../../../hooks/useSpeechRecognition', () => ({
+	useSpeechRecognition: (): unknown => ({
+		isListening: false,
+		isSupported: false,
+		permission: 'prompt',
+		start: jest.fn(),
+		discard: jest.fn(),
+	}),
+}));
+
+jest.mock('../../../hooks/useAIAssistantAnalyticsContext', () => ({
+	useAIAssistantAnalyticsContext: (): unknown => ({
+		threadId: undefined,
+		page: '/',
+		mode: 'sidepane',
+	}),
+}));
+
+// eslint-disable-next-line import/first
+import ChatInput from '../ChatInput';
+
+describe('ChatInput — alerts context picker', () => {
+	it('lists the rules from one v3 rules request', async () => {
+		const [first, second] = alertRulesFixture;
+		const requests: string[] = [];
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				requests.push(req.url.search);
+				return res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response([first, second], req.url.searchParams)),
+				);
+			}),
+		);
+
+		render(<ChatInput onSend={jest.fn()} />);
+
+		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
+		await userEvent.click(await screen.findByTestId('ai-context-tab-Alerts'));
+
+		await expect(screen.findByText(first.alert)).resolves.toBeInTheDocument();
+		expect(screen.getByText(second.alert)).toBeInTheDocument();
+		expect(requests).toStrictEqual(['?limit=200']);
+	});
+});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.prefill.test.tsx

@@ -12,8 +12,12 @@ jest.mock('api/generated/services/dashboard', () => ({
 }));
 
 jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): unknown => ({ data: [], isLoading: false, isError: false }),
-	getListRulesQueryKey: (): string[] => ['rules'],
+	useListRulesV3: (): unknown => ({
+		data: undefined,
+		isLoading: false,
+		isError: false,
+	}),
+	getListRulesV3QueryKey: (): string[] => ['rules'],
 }));
 
 jest.mock('hooks/useQueryService', () => ({

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -18,7 +18,7 @@ import { buildCreateAlertRulePayload, validateCreateAlertState } from './utils';
 import './styles.scss';
 import {
 	invalidateGetRuleByID,
-	invalidateListRules,
+	invalidateListRulesV3,
 } from 'api/generated/services/rules';
 import { useQueryClient } from 'react-query';
 
@@ -137,7 +137,7 @@ function Footer(): JSX.Element {
 				{
 					onSuccess: () => {
 						void invalidateGetRuleByID(queryClient, { id: ruleId });
-						void invalidateListRules(queryClient);
+						void invalidateListRulesV3(queryClient);
 
 						toast.success('Alert rule updated successfully');
 						safeNavigate('/alerts');

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -1,24 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Button, Skeleton } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
-import { useListRules } from 'api/generated/services/rules';
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RuletypesListableRuleDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AppLink } from 'lib/router/AppLink';
 import { navigate } from 'lib/router/navigation';
 import { useAppLocation } from 'lib/router/useAppLocation';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ArrowRight, ArrowUpRight, Plus } from '@signozhq/icons';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { toCompositeMetricQuery } from 'types/api/alerts/convert';
 import { USER_ROLES } from 'types/roles';
 
 import beaconUrl from '@/assets/Icons/beacon.svg';
 
 import { getItemIcon } from '../constants';
+import { useHomeAlertRules } from './useHomeAlertRules';
 
 export default function AlertRules({
 	onUpdateChecklistDoneItem,
@@ -28,49 +26,19 @@ export default function AlertRules({
 	loadingUserPreferences: boolean;
 }): JSX.Element {
 	const { user } = useAppContext();
-	const [rulesExist, setRulesExist] = useState(false);
-
-	const [sortedAlertRules, setSortedAlertRules] = useState<RuletypesRuleDTO[]>(
-		[],
-	);
 
 	const location = useAppLocation();
 	const params = new URLSearchParams(location.search);
 
 	// Fetch Alerts
-	const {
-		data: alerts,
-		isError,
-		isLoading,
-	} = useListRules({
-		query: { cacheTime: 0 },
-	});
+	const { rules: alertRules, isError, isLoading } = useHomeAlertRules();
+	const rulesExist = alertRules.length > 0;
 
 	useEffect(() => {
-		const rules = alerts?.data ?? [];
-		setRulesExist(rules.length > 0);
-
-		const sortedRules = [...rules].sort((a, b) => {
-			// First, prioritize firing alerts
-			if (a.state === 'firing' && b.state !== 'firing') {
-				return -1;
-			}
-			if (a.state !== 'firing' && b.state === 'firing') {
-				return 1;
-			}
-
-			// Then sort by updatedAt timestamp
-			return (
-				new Date(b.updatedAt ?? 0).getTime() - new Date(a.updatedAt ?? 0).getTime()
-			);
-		});
-
-		if (sortedRules.length > 0 && !loadingUserPreferences) {
+		if (rulesExist && !loadingUserPreferences) {
 			onUpdateChecklistDoneItem('SETUP_ALERTS');
 		}
-
-		setSortedAlertRules(sortedRules.slice(0, 5));
-	}, [alerts, onUpdateChecklistDoneItem, loadingUserPreferences]);
+	}, [rulesExist, onUpdateChecklistDoneItem, loadingUserPreferences]);
 
 	const emptyStateCard = (): JSX.Element => (
 		<div className="empty-state-container">
@@ -95,7 +63,7 @@ export default function AlertRules({
 								className="periscope-btn secondary"
 								icon={<Plus size={16} />}
 								onClick={(): void => {
-									logEvent('Homepage: Create alert rule clicked', {});
+									void logEvent('Homepage: Create alert rule clicked', {});
 								}}
 							>
 								Create Alert Rule
@@ -106,7 +74,7 @@ export default function AlertRules({
 							type="link"
 							className="learn-more-link"
 							onClick={(): void => {
-								logEvent('Homepage: Learn more clicked', {
+								void logEvent('Homepage: Learn more clicked', {
 									source: 'Alert Rules',
 								});
 
@@ -125,26 +93,13 @@ export default function AlertRules({
 		</div>
 	);
 
-	const onEditHandler = (record: RuletypesRuleDTO) => (): void => {
-		logEvent('Homepage: Alert clicked', {
+	const onEditHandler = (record: RuletypesListableRuleDTO) => (): void => {
+		void logEvent('Homepage: Alert clicked', {
 			ruleId: record.id,
 			ruleName: record.alert,
 			ruleState: record.state,
 		});
 
-		const compositeQuery = mapQueryDataFromApi(
-			toCompositeMetricQuery(record.condition.compositeQuery),
-		);
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(compositeQuery)),
-		);
-
-		const panelType = record.condition.compositeQuery.panelType;
-		if (panelType) {
-			params.set(QueryParams.panelTypes, panelType);
-		}
-
 		params.set(QueryParams.ruleId, record.id);
 
 		navigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
@@ -153,11 +108,12 @@ export default function AlertRules({
 	const renderAlertRules = (): JSX.Element => (
 		<div className="alert-rules-container home-data-item-container">
 			<div className="alert-rules-list">
-				{sortedAlertRules.map((rule) => (
+				{alertRules.map((rule) => (
 					<div
 						role="button"
 						tabIndex={0}
 						className="alert-rule-item home-data-item"
+						data-testid={`home-alert-rule-${rule.id}`}
 						key={rule.id}
 						onClick={onEditHandler(rule)}
 						onKeyDown={(e): void => {
@@ -239,7 +195,7 @@ export default function AlertRules({
 								type="link"
 								className="periscope-btn link learn-more-link"
 								onClick={(): void => {
-									logEvent('Homepage: All alert rules clicked', {});
+									void logEvent('Homepage: All alert rules clicked', {});
 								}}
 							>
 								All Alert Rules <ArrowRight size={12} />

frontend/src/container/Home/AlertRules/useHomeAlertRules.ts

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { useListRulesV3 } from 'api/generated/services/rules';
+import {
+	type ListRulesV3200,
+	type ListRulesV3Params,
+	RuletypesAlertStateDTO,
+	type RuletypesListableRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { GeneratedAPIInstance } from 'api/generatedAPIInstance';
+
+const HOME_ALERT_RULES_LIMIT = 5;
+
+const FIRING_RULES_PARAMS: ListRulesV3Params = {
+	states: [RuletypesAlertStateDTO.firing],
+	limit: HOME_ALERT_RULES_LIMIT,
+};
+
+interface HomeAlertRules {
+	rules: RuletypesListableRuleDTO[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+export function useHomeAlertRules(): HomeAlertRules {
+	const firing = useListRulesV3(FIRING_RULES_PARAMS, {
+		query: {
+			cacheTime: 0,
+			// The backend binds repeated `states=` keys; axios' default sends `states[]=`.
+			queryFn: ({ signal }) =>
+				GeneratedAPIInstance<ListRulesV3200>({
+					url: '/api/v3/rules',
+					method: 'GET',
+					params: FIRING_RULES_PARAMS,
+					paramsSerializer: { indexes: null },
+					signal,
+				}),
+		},
+	});
+	const firingRules = firing.data?.data.rules;
+	const latest = useListRulesV3(
+		{ limit: HOME_ALERT_RULES_LIMIT },
+		{
+			query: {
+				cacheTime: 0,
+				enabled:
+					firingRules !== undefined && firingRules.length < HOME_ALERT_RULES_LIMIT,
+			},
+		},
+	);
+
+	const rules = useMemo(() => {
+		const firingIds = new Set(firingRules?.map(({ id }) => id));
+		const others = (latest.data?.data.rules ?? []).filter(
+			({ id }) => !firingIds.has(id),
+		);
+		return [...(firingRules ?? []), ...others].slice(0, HOME_ALERT_RULES_LIMIT);
+	}, [firingRules, latest.data]);
+
+	return {
+		rules,
+		isLoading: firing.isLoading || latest.isLoading,
+		isError: firing.isError || latest.isError,
+	};
+}

frontend/src/container/Home/__tests__/AlertRules.test.tsx

@@ -0,0 +1,119 @@
+import {
+	RuletypesAlertStateDTO,
+	type RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { navigate } from 'lib/router/navigation';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import AlertRules from '../AlertRules/AlertRules';
+
+jest.mock('lib/router/navigation', () => ({
+	...jest.requireActual('lib/router/navigation'),
+	navigate: jest.fn(),
+}));
+
+const rule = (id: string, state: RuletypesAlertStateDTO): RuletypesRuleDTO => ({
+	...alertRulesFixture[0],
+	id,
+	alert: `${id} rule`,
+	state,
+});
+
+const burning = rule('burning', RuletypesAlertStateDTO.firing);
+const quiet = rule('quiet', RuletypesAlertStateDTO.inactive);
+const waiting = rule('waiting', RuletypesAlertStateDTO.pending);
+
+const serveRules = (
+	rules: RuletypesRuleDTO[],
+	rulesForLatest = rules,
+): string[] => {
+	const requestedStates: string[] = [];
+	server.use(
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+			const states = req.url.searchParams.getAll('states').join();
+			requestedStates.push(states);
+			return res(
+				ctx.status(200),
+				ctx.json(
+					listRulesV3Response(
+						states === 'firing' ? rules : rulesForLatest,
+						req.url.searchParams,
+					),
+				),
+			);
+		}),
+	);
+	return requestedStates;
+};
+
+const renderAlertRules = (): void => {
+	render(
+		<AlertRules
+			onUpdateChecklistDoneItem={jest.fn()}
+			loadingUserPreferences={false}
+		/>,
+	);
+};
+
+const renderedRuleIds = (): (string | undefined)[] =>
+	screen.getAllByTestId(/^home-alert-rule-/).map((row) => row.dataset.testid);
+
+describe('Home alert rules', () => {
+	it('lists firing rules first, then the latest others, and opens the clicked rule', async () => {
+		const requestedStates = serveRules([quiet, burning, waiting]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-waiting'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual([
+			'home-alert-rule-burning',
+			'home-alert-rule-quiet',
+			'home-alert-rule-waiting',
+		]);
+		expect(requestedStates).toStrictEqual(['firing', '']);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByTestId('home-alert-rule-burning'));
+		expect(navigate).toHaveBeenCalledWith(
+			`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=burning`,
+		);
+	});
+
+	it('skips the latest rules request when 5 rules are firing', async () => {
+		const firing = Array.from({ length: 5 }, (_, index) =>
+			rule(`firing-${index}`, RuletypesAlertStateDTO.firing),
+		);
+		const requestedStates = serveRules([quiet, ...firing]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-firing-4'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual(
+			firing.map(({ id }) => `home-alert-rule-${id}`),
+		);
+		expect(requestedStates).toStrictEqual(['firing']);
+	});
+
+	it('shows a rule once when it stops firing between the two requests', async () => {
+		const settled = { ...burning, state: RuletypesAlertStateDTO.inactive };
+		serveRules([burning], [settled, quiet]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-quiet'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual([
+			'home-alert-rule-burning',
+			'home-alert-rule-quiet',
+		]);
+	});
+});

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -16,11 +16,11 @@ import {
 	useDeleteDowntimeScheduleByID,
 	useListDowntimeSchedules,
 } from 'api/generated/services/downtimeschedules';
-import { useListRules } from 'api/generated/services/rules';
 import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
 import { ColumnSelector } from 'components/TanStackTableView';
 import TextToolTip from 'components/TextToolTip';
 import dayjs from 'dayjs';
+import { useListAllRules } from 'hooks/alerts/useListAllRules';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -55,9 +55,7 @@ export function PlannedDowntime(): JSX.Element {
 		isError,
 		isLoading,
 		isFetching: isFetchingAlerts,
-	} = useListRules({
-		query: { cacheTime: 0 },
-	});
+	} = useListAllRules({ cacheTime: 0 });
 	const [isOpen, setIsOpen] = React.useState(false);
 	const [form] = Form.useForm();
 	const { user } = useAppContext();
@@ -73,7 +71,7 @@ export function PlannedDowntime(): JSX.Element {
 	const downtimeSchedules = useListDowntimeSchedules();
 	const alertOptions = React.useMemo(
 		() =>
-			alertsData?.data?.map((i) => ({
+			alertsData?.map((i) => ({
 				label: i.alert,
 				value: i.id,
 			})),
@@ -181,7 +179,7 @@ export function PlannedDowntime(): JSX.Element {
 	};
 
 	const refetchAllSchedules = (): void => {
-		downtimeSchedules.refetch();
+		void downtimeSchedules.refetch();
 	};
 
 	const {

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -4,6 +4,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import type {
 	ListDowntimeSchedules200,
 	RenderErrorResponseDTO,
+	RuletypesListableRuleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	AlertmanagertypesRepeatOnDTO,
@@ -126,19 +127,19 @@ jest.mock('api/generated/services/downtimeschedules', () => ({
 }));
 
 let mockRulesState: {
-	data?: { data: Array<{ id: number | string; alert: string }> };
+	data?: Pick<RuletypesListableRuleDTO, 'id' | 'alert'>[];
 	isError: boolean;
 	isLoading: boolean;
 	isFetching: boolean;
 } = {
-	data: { data: [] },
+	data: [],
 	isError: false,
 	isLoading: false,
 	isFetching: false,
 };
 
-jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): typeof mockRulesState => mockRulesState,
+jest.mock('hooks/alerts/useListAllRules', () => ({
+	useListAllRules: (): typeof mockRulesState => mockRulesState,
 }));
 
 describe('PlannedDowntime Component', () => {
@@ -151,7 +152,7 @@ describe('PlannedDowntime Component', () => {
 		});
 		mockDowntimeQueryResult.data = MOCK_DOWNTIME_RESPONSE;
 		mockRulesState = {
-			data: { data: [] },
+			data: [],
 			isError: false,
 			isLoading: false,
 			isFetching: false,
@@ -362,7 +363,7 @@ describe('PlannedDowntime Component', () => {
 
 	it('shows "Unknown rule" when scoped rule IDs cannot be resolved (Bug 56)', async () => {
 		mockRulesState = {
-			data: { data: [] },
+			data: [],
 			isError: false,
 			isLoading: false,
 			isFetching: false,
@@ -387,14 +388,7 @@ describe('PlannedDowntime Component', () => {
 
 	it('shows resolved alert rule name when scoped rule ID exists', async () => {
 		mockRulesState = {
-			data: {
-				data: [
-					{
-						id: 'rule-42',
-						alert: 'Disk Space High',
-					} as any,
-				],
-			},
+			data: [{ id: 'rule-42', alert: 'Disk Space High' }],
 			isError: false,
 			isLoading: false,
 			isFetching: false,

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

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { tags } from '@lezer/highlight';
+import { copilotDarkStyle } from '@uiw/codemirror-theme-copilot';
+import { githubLightStyle } from '@uiw/codemirror-theme-github';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { act, render, screen } from 'tests/test-utils';
+
+import SavedViewHighlightedExpression from '../SavedViewHighlightedExpression';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
+}));
+
+const mockUseIsDarkMode = useIsDarkMode as jest.MockedFunction<
+	typeof useIsDarkMode
+>;
+
+const EXPRESSION = "service.name = 'frontend'";
+
+function stringColor(styles: typeof copilotDarkStyle): string {
+	return (styles ?? []).find(({ tag }) =>
+		(Array.isArray(tag) ? tag : [tag]).includes(tags.string),
+	)?.color as string;
+}
+
+describe('SavedViewHighlightedExpression', () => {
+	it.each([
+		['dark', true, copilotDarkStyle],
+		['light', false, githubLightStyle],
+	])('colours a string value with the %s theme', (_, isDarkMode, styles) => {
+		mockUseIsDarkMode.mockReturnValue(isDarkMode);
+
+		render(<SavedViewHighlightedExpression expression={EXPRESSION} />);
+
+		expect(screen.getByText("'frontend'")).toHaveStyle({
+			color: stringColor(styles),
+		});
+	});
+
+	it('takes the new theme colours when the theme changes', () => {
+		let setIsDarkMode: (isDarkMode: boolean) => void = () => {};
+		function useSwitchableDarkMode(): boolean {
+			const [isDarkMode, setter] = useState(true);
+			setIsDarkMode = setter;
+			return isDarkMode;
+		}
+		mockUseIsDarkMode.mockImplementation(useSwitchableDarkMode);
+		render(<SavedViewHighlightedExpression expression={EXPRESSION} />);
+
+		act(() => setIsDarkMode(false));
+
+		expect(screen.getByText("'frontend'")).toHaveStyle({
+			color: stringColor(githubLightStyle),
+		});
+	});
+});

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

@@ -5,11 +5,19 @@ import {
 	waitFor,
 	within,
 } from '@testing-library/react';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	AuthtypesTransactionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { userEvent } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -222,6 +230,31 @@ describe('SavedViewHoverCard', () => {
 
 			expect(card()).toBeNull();
 		});
+
+		it('does not open when the row menu is pressed before the delay', async () => {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS / 2);
+			await user.click(within(row('Errors')).getByTestId('saved-views-row-menu'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+
+			expect(card()).toBeNull();
+		});
+
+		it('closes on escape, leaving nothing of the popover behind', async () => {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			await renderPanel();
+			await openCard('Errors');
+
+			await user.keyboard('{Escape}');
+
+			expect(card()).toBeNull();
+			expect(
+				document.querySelector('[data-radix-popper-content-wrapper]'),
+			).toBeNull();
+		});
 	});
 
 	describe('content', () => {
@@ -312,6 +345,78 @@ describe('SavedViewHoverCard', () => {
 			await waitFor(() => expect(fetches).toBe(2));
 		});
 
+		it('shows a skeleton, not the failure, while the view loads', async () => {
+			let requested = false;
+			let release: () => void = () => undefined;
+			const gate = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			server.use(
+				rest.get(`${API}/:id`, async (_req, res, ctx) => {
+					requested = true;
+					await gate;
+					return res(ctx.json({ status: 'success', data: errors }));
+				}),
+			);
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+			await waitFor(() => expect(requested).toBe(true));
+
+			expect(
+				screen.getByTestId('saved-view-hover-card-loading'),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-view-hover-card-error')).toBeNull();
+
+			release();
+			await screen.findByTestId('saved-view-hover-card-query');
+		});
+
+		it('shows a skeleton while the read check is pending', async () => {
+			let release: () => void = () => undefined;
+			const gate = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			const isRead = (transaction: AuthtypesTransactionDTO): boolean =>
+				transaction.relation === 'read';
+			const isReadAll = (transaction: AuthtypesTransactionDTO): boolean =>
+				isRead(transaction) && transaction.object.selector === '*';
+			// Read on every view would skip the per-view check, so it is denied.
+			server.use(
+				rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+					const payload = (await req.json()) as AuthtypesTransactionDTO[];
+					if (
+						payload.some(
+							(transaction) => isRead(transaction) && !isReadAll(transaction),
+						)
+					) {
+						await gate;
+					}
+					return res(
+						ctx.json(
+							authzMockResponse(
+								payload,
+								payload.map((transaction) => !isReadAll(transaction)),
+							),
+						),
+					);
+				}),
+			);
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+
+			await expect(
+				screen.findByTestId('saved-view-hover-card-loading'),
+			).resolves.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-view-hover-card-query')).toBeNull();
+
+			release();
+			await screen.findByTestId('saved-view-hover-card-query');
+		});
+
 		it('says the view failed to load when its fetch fails', async () => {
 			server.use(
 				rest.get(`${API}/:id`, (_req, res, ctx) =>

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

@@ -339,6 +339,45 @@ describe('SavedViews - AuthZ', () => {
 		).resolves.not.toHaveAttribute('data-disabled');
 	});
 
+	it('disables save as new without create, keeping update', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(SavedViewCreatePermission));
+		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 expect(
+			settledRow('saved-views-save-changes-item-save-as-new'),
+		).resolves.toHaveAttribute('data-disabled');
+		await expect(
+			settledRow('saved-views-save-changes-item-update'),
+		).resolves.not.toHaveAttribute('data-disabled');
+	});
+
+	it('offers clear on a view it cannot read', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(buildSavedViewReadPermission(errors.id)));
+		renderHeader(viewUrl(PATH, errors));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
+				'No view access',
+			),
+		);
+
+		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument();
+	});
+
 	it('says no access when the check denies read, even if the server returns the view', async () => {
 		mockSavedViewsApi([errors]);
 		server.use(setupAuthzDeny(buildSavedViewReadPermission(errors.id)));

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

@@ -3,6 +3,7 @@ import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { userEvent } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsHeader from '../SavedViewsHeader';
@@ -75,4 +76,39 @@ describe('SavedViewsHeader last used view', () => {
 		expect(chip()).toHaveTextContent('My view');
 		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
 	});
+
+	it('does not bring the view back once it is cleared', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(explorerUrl(PATH, {}));
+		await waitForView('Errors');
+
+		await userEvent.click(screen.getByTestId('saved-views-clear'));
+		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+
+		expect(chip()).toHaveTextContent('My view');
+		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+	});
+
+	it('forgets a last used view that no longer loads', async () => {
+		mockSavedViewsApi([]);
+		renderHeader(explorerUrl(PATH, {}));
+
+		await waitFor(() =>
+			expect(
+				JSON.parse(
+					localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}',
+				),
+			).toStrictEqual({}),
+		);
+		expect(chip()).toHaveTextContent('My view');
+	});
+
+	it('starts on a bare explorer when the stored last used views are unreadable', async () => {
+		localStorage.setItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, '{not json');
+		mockSavedViewsApi([errors]);
+		renderHeader(explorerUrl(PATH, {}));
+
+		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+		expect(chip()).toHaveTextContent('My view');
+	});
 });

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

@@ -1,10 +1,14 @@
 import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Button } from '@signozhq/ui/button';
 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 { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsHeader from '../SavedViewsHeader';
@@ -19,7 +23,7 @@ import {
 	urlParam,
 	viewUrl,
 } from './savedViewsTestUtils';
-import { mockSavedViewsApi } from './savedViewsApiMock';
+import { API, mockSavedViewsApi } from './savedViewsApiMock';
 
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
@@ -43,6 +47,27 @@ function renderHeader(
 	);
 }
 
+// Edits the current query without running it, so it is not the staged one.
+function EditCurrentQuery(): JSX.Element {
+	const { currentQuery, handleSetQueryData } = useQueryBuilder();
+	return (
+		<Button
+			size="md"
+			variant="solid"
+			color="primary"
+			testId="edit-current-query"
+			onClick={(): void =>
+				handleSetQueryData(0, {
+					...currentQuery.builder.queryData[0],
+					filter: { expression: 'unstaged = true' },
+				})
+			}
+		>
+			Edit query
+		</Button>
+	);
+}
+
 const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
 const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
 
@@ -160,6 +185,76 @@ describe('SavedViewsHeader saving', () => {
 			expect(toast.success).not.toHaveBeenCalled();
 		});
 
+		it('does not create a view from a blank name submitted with Enter', async () => {
+			const requests = mockSavedViewsApi([]);
+			renderHeader(explorerUrl(PATH, {}));
+
+			await clickCreate();
+			await userEvent.type(screen.getByTestId('save-view-name'), '   {enter}');
+			await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+
+			expect(requests.created).toHaveLength(0);
+			expect(isModalOpen()).toBe(true);
+		});
+
+		it('ignores Enter while the view is being saved', async () => {
+			let creates = 0;
+			mockSavedViewsApi([]);
+			server.use(
+				rest.post(API, (_req, res, ctx) => {
+					creates += 1;
+					return res(
+						ctx.delay(400),
+						ctx.status(201),
+						ctx.json({ status: 'success', data: { id: 'view-new' } }),
+					);
+				}),
+			);
+			renderHeader(explorerUrl(PATH, {}));
+
+			await clickCreate();
+			await submitName('Slow checkout');
+			await waitFor(() => expect(creates).toBe(1));
+			await userEvent.type(screen.getByTestId('save-view-name'), '{enter}');
+
+			await waitFor(() => expect(isModalOpen()).toBe(false));
+			expect(creates).toBe(1);
+		});
+
+		it('saves the query that was run, not edits made since', async () => {
+			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
+			const { history } = renderWithExplorerProviders(
+				<>
+					<SavedViewsHeader
+						source={SavedviewtypesSourceDTO.traces}
+						onOpenViews={jest.fn()}
+					/>
+					<EditCurrentQuery />
+				</>,
+				explorerUrl(PATH, {}),
+			);
+
+			await userEvent.click(screen.getByTestId('edit-current-query'));
+			await clickCreate();
+			await submitName('Slow checkout');
+
+			await waitFor(() => expect(requests.created).toHaveLength(1));
+			const body = requests.created[0] as {
+				spec: { queries: { spec: { filter?: { expression?: string } } }[] };
+			};
+			expect(body.spec.queries[0].spec.filter?.expression ?? '').not.toContain(
+				'unstaged',
+			);
+			await waitFor(() =>
+				expect(urlParam(history, QueryParams.viewKey)).toBe(
+					JSON.stringify('view-new'),
+				),
+			);
+			expect(
+				decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
+			).not.toContain('unstaged');
+		});
+
 		it('cancel closes the modal without saving', async () => {
 			const requests = mockSavedViewsApi([]);
 			renderHeader(explorerUrl(PATH, {}));
@@ -231,6 +326,37 @@ describe('SavedViewsHeader saving', () => {
 		expect(requests.created).toHaveLength(0);
 	});
 
+	it('update that fails reports the error and never says the view was updated', async () => {
+		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+		const requests = mockSavedViewsApi([errors], { updateStatus: 500 });
+		await openDirtyView(errors);
+
+		await chooseFromSaveMenu('Update selected view');
+
+		await waitFor(() => expect(toast.error).toHaveBeenCalled());
+		await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
+		expect(requests.updated).toHaveLength(1);
+		expect(toast.success).not.toHaveBeenCalled();
+	});
+
+	it('update keeps the color of the open view', async () => {
+		const base = makeView({ id: 'view-1', displayName: 'Errors' });
+		const colored = {
+			...base,
+			spec: { ...base.spec, display: { color: '#e5484d' } },
+		};
+		const requests = mockSavedViewsApi([colored]);
+		await openDirtyView(colored);
+
+		await chooseFromSaveMenu('Update selected view');
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		const { body } = requests.updated[0] as {
+			body: { spec: { display?: { color?: string } } };
+		};
+		expect(body.spec.display?.color).toBe('#e5484d');
+	});
+
 	describe('view name toggle with unsaved changes', () => {
 		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
 

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

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import {
@@ -9,6 +10,7 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsPanel from '../SavedViewsPanel';
 import { mockSavedViewsApi } from './savedViewsApiMock';
@@ -219,6 +221,75 @@ describe('SavedViewsPanel list', () => {
 		});
 	});
 
+	it('lists only the views of its own source', async () => {
+		mockSavedViewsApi([
+			mine,
+			makeView({
+				id: 'view-9',
+				displayName: 'Noisy logs',
+				source: SavedviewtypesSourceDTO.logs,
+			}),
+		]);
+		renderPanel();
+
+		await screen.findByTestId('saved-views-list');
+		expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
+	});
+
+	describe('last used view', () => {
+		const lastUsedViews = (): unknown =>
+			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}');
+		const logsEntry = { logs: { key: 'logs-view', value: 'Noisy logs' } };
+
+		it('is remembered under the panel source, keeping the other sources', async () => {
+			localStorage.setItem(
+				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+				JSON.stringify(logsEntry),
+			);
+			mockSavedViewsApi([mine, alsoMine]);
+			renderPanel();
+			await screen.findByTestId('saved-views-list');
+			await waitFor(() => expectUsable(rowName('Slow spans')));
+
+			await userEvent.click(rowName('Slow spans'));
+
+			await waitFor(() =>
+				expect(lastUsedViews()).toStrictEqual({
+					...logsEntry,
+					traces: { key: alsoMine.id, value: 'Slow spans' },
+				}),
+			);
+		});
+
+		it('is filed under the source of the panel it was opened from', async () => {
+			const logsView = makeView({
+				id: 'view-9',
+				displayName: 'Noisy logs',
+				source: SavedviewtypesSourceDTO.logs,
+				dataSource: DataSource.LOGS,
+			});
+			mockSavedViewsApi([logsView]);
+			renderWithExplorerProviders(
+				<SavedViewsPanel
+					source={SavedviewtypesSourceDTO.logs}
+					onClose={jest.fn()}
+				/>,
+				explorerUrl(ROUTES.LOGS_EXPLORER, {}),
+				DataSource.LOGS,
+			);
+			await screen.findByTestId('saved-views-list');
+			await waitFor(() => expectUsable(rowName('Noisy logs')));
+
+			await userEvent.click(rowName('Noisy logs'));
+
+			await waitFor(() =>
+				expect(lastUsedViews()).toStrictEqual({
+					logs: { key: logsView.id, value: 'Noisy logs' },
+				}),
+			);
+		});
+	});
+
 	it('offers to create a view when there are none, and opens it', async () => {
 		const requests = mockSavedViewsApi([], { createdId: 'view-new' });
 		const { history } = renderPanel();

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

@@ -4,11 +4,13 @@ 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 { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime';
 
 import SavedViewsHeader from '../SavedViewsHeader';
 import SavedViewsPanel from '../SavedViewsPanel';
-import { mockSavedViewsApi } from './savedViewsApiMock';
+import { API, mockSavedViewsApi } from './savedViewsApiMock';
 import {
 	expectRowUsable,
 	explorerUrl,
@@ -181,6 +183,87 @@ describe('SavedViewsPanel row menu', () => {
 		await waitFor(() => expect(row('Slow checkout spans')).toBeInTheDocument());
 	});
 
+	it('renames from the stored view, not a stale list row', async () => {
+		const views = [errors, slow];
+		const requests = mockSavedViewsApi(views);
+		renderPanelWithHeader();
+		await screen.findByTestId('saved-views-list');
+		const stored = makeView({
+			id: slow.id,
+			displayName: 'Slow spans',
+			expression: 'duration_nano > 5000',
+		});
+		views[1] = stored;
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		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));
+		expect(requests.updated[0].body).toMatchObject({
+			spec: { ...stored.spec, displayName: 'Slow checkout spans' },
+		});
+	});
+
+	it('renames from the list row when the view cannot be read', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		server.use(
+			rest.get(`${API}/:id`, (_req, res, ctx) =>
+				res(ctx.status(403), ctx.json({ status: 'error' })),
+			),
+		);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		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));
+		expect(requests.updated[0].body).toMatchObject({
+			spec: { ...slow.spec, displayName: 'Slow checkout spans' },
+		});
+	});
+
+	it('does not rename when the stored view fails to load', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		server.use(
+			rest.get(`${API}/:id`, (_req, res, ctx) =>
+				res(ctx.status(500), ctx.json({ status: 'error' })),
+			),
+		);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.type(name, ' 2');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(toast.error).toHaveBeenCalled());
+		expect(requests.updated).toHaveLength(0);
+	});
+
+	it('ignores Enter while the stored view loads', async () => {
+		const requests = mockSavedViewsApi([errors, slow], { getDelay: 300 });
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.type(name, ' 2{enter}');
+		await userEvent.type(name, '{enter}');
+
+		await waitFor(() =>
+			expect(toast.success).toHaveBeenCalledWith(
+				'View updated',
+				expect.anything(),
+			),
+		);
+		expect(requests.updated).toHaveLength(1);
+	});
+
 	it('shows the new name in the header when the open view is renamed', async () => {
 		mockSavedViewsApi([errors]);
 		renderPanelWithHeader(viewUrl(PATH, errors));
@@ -236,4 +319,19 @@ describe('SavedViewsPanel row menu', () => {
 		);
 		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
 	});
+
+	it('keeps the open view when another view is deleted', async () => {
+		mockSavedViewsApi([errors, slow]);
+		const { history } = renderPanelWithHeader(viewUrl(PATH, errors));
+		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
+
+		await chooseFromRowMenu('Slow spans', 'Delete');
+		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
+
+		await waitFor(() => expect(row('Slow spans')).toBeUndefined());
+		expect(urlParam(history, QueryParams.viewKey)).toBe(
+			JSON.stringify(errors.id),
+		);
+		expect(chip()).toHaveTextContent('Errors');
+	});
 });

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

@@ -0,0 +1,111 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import store from 'store';
+import { act, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import SavedViewsPanel from '../SavedViewsPanel';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	expectRowUsable,
+	explorerUrl,
+	makeView,
+	MENU_CHECK_TIMEOUT,
+	renderWithExplorerProviders,
+} from './savedViewsTestUtils';
+
+const mockCopy: jest.MockedFunction<(text: string) => void> = jest.fn();
+
+// copy-to-clipboard falls back to window.prompt in jsdom.
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: (): [unknown, typeof mockCopy] => [null, mockCopy],
+}));
+
+const PATH = ROUTES.TRACES_EXPLORER;
+const slow = makeView({ id: 'view-2', displayName: 'Slow spans' });
+
+// A store whose global time can change while the panel stays mounted.
+function renderPanelWithTime(selectedTime: GlobalReducer['selectedTime']): {
+	setTime: (time: Partial<GlobalReducer>) => void;
+} {
+	let globalTime: GlobalReducer = {
+		...store.getState().globalTime,
+		selectedTime,
+	};
+	const timeStore = configureStore([thunk])(() => ({
+		...store.getState(),
+		globalTime,
+	}));
+
+	renderWithExplorerProviders(
+		<Provider store={timeStore}>
+			<SavedViewsPanel
+				source={SavedviewtypesSourceDTO.traces}
+				onClose={jest.fn()}
+			/>
+		</Provider>,
+		explorerUrl(PATH, {}),
+	);
+
+	return {
+		setTime: (time): void => {
+			globalTime = { ...globalTime, ...time };
+			act(() => {
+				timeStore.dispatch({ type: 'TEST_TIME_CHANGED' });
+			});
+		},
+	};
+}
+
+const row = (name: string): HTMLElement =>
+	screen
+		.getAllByTestId('saved-views-row')
+		.find((element) => element.textContent?.includes(name)) as HTMLElement;
+
+const relativeTimeOf = (link: string): string | null =>
+	new URL(link, window.location.origin).searchParams.get(
+		QueryParams.relativeTime,
+	);
+
+describe('SavedViewsPanel time range', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		mockCopy.mockClear();
+		mockSavedViewsApi([slow]);
+	});
+
+	it('moves the row link to the new time range when it changes', async () => {
+		const { setTime } = renderPanelWithTime('1h');
+		await screen.findByTestId('saved-views-list');
+		const name = within(row('Slow spans')).getByTestId('saved-views-row-name');
+		expect(relativeTimeOf(name.getAttribute('href') as string)).toBe('1h');
+
+		setTime({ selectedTime: '6h' });
+
+		expect(relativeTimeOf(name.getAttribute('href') as string)).toBe('6h');
+	});
+
+	it('copies a link in the time range that is selected when it is copied', async () => {
+		const { setTime } = renderPanelWithTime('1h');
+		await screen.findByTestId('saved-views-list');
+		setTime({ selectedTime: '6h' });
+
+		await userEvent.click(
+			within(row('Slow spans')).getByTestId('saved-views-row-menu'),
+		);
+		const copyLink = await screen.findByTestId(
+			'saved-views-row-menu-item-copyLink',
+		);
+		await waitFor(() => expectRowUsable(copyLink), MENU_CHECK_TIMEOUT);
+		await userEvent.click(copyLink);
+
+		expect(mockCopy).toHaveBeenCalledTimes(1);
+		expect(relativeTimeOf(mockCopy.mock.calls[0][0])).toBe('6h');
+	});
+});

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

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
 import {
+	getGetSavedViewQueryOptions,
+	updateSavedView,
 	useDeleteSavedView,
-	useUpdateSavedView,
 } from 'api/generated/services/saved-view';
 import {
 	RenderErrorResponseDTO,
@@ -45,8 +46,39 @@ export function useSavedViewRowActions(
 	const timeSearch = useTimeSearchParams();
 	const [, copyToClipboard] = useCopyToClipboard();
 	const logSavedViewEvent = useSavedViewLogEvent(source);
-	const { mutateAsync: updateSavedView, isLoading: isRenaming } =
-		useUpdateSavedView();
+	// The update replaces the whole spec, so it starts from the stored view, not
+	// the list row, which can be stale. Without read on the view, the list row is
+	// the only copy there is.
+	const { mutateAsync: renameSavedView, isLoading: isRenaming } = useMutation(
+		async ({
+			view,
+			displayName,
+		}: {
+			view: SavedviewtypesSavedViewDTO;
+			displayName: string;
+		}) => {
+			let { spec } = view;
+			try {
+				({
+					data: { spec },
+				} = await queryClient.fetchQuery(
+					getGetSavedViewQueryOptions({ id: view.id }),
+				));
+			} catch (error) {
+				if ((error as ErrorType<unknown>).response?.status !== 403) {
+					throw error;
+				}
+			}
+			await updateSavedView(
+				{ id: view.id },
+				{
+					source,
+					schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
+					spec: { ...spec, displayName },
+				},
+			);
+		},
+	);
 	const { mutateAsync: deleteSavedView, isLoading: isDeleting } =
 		useDeleteSavedView();
 
@@ -77,14 +109,7 @@ export function useSavedViewRowActions(
 			displayName: string,
 		): Promise<boolean> => {
 			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: { ...view.spec, displayName },
-					},
-				});
+				await renameSavedView({ view, displayName });
 				await invalidateSavedViews(queryClient, source, view.id);
 				toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
 				logSavedViewEvent(SavedViewEvents.ViewDetailsEdited, {
@@ -96,7 +121,7 @@ export function useSavedViewRowActions(
 				return false;
 			}
 		},
-		[updateSavedView, source, queryClient, logSavedViewEvent],
+		[renameSavedView, source, queryClient, logSavedViewEvent],
 	);
 
 	// The deleted view's own query is left alone: refetching it would fail

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

@@ -127,6 +127,48 @@ describe('hasUnsavedViewChanges', () => {
 		).toBe(true);
 	});
 
+	it('is clean while no query is staged', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: null,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options,
+			}),
+		).toBe(false);
+	});
+
+	it('is dirty when the columns are reordered', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options: { ...options, selectColumns: [columns[1], columns[0]] },
+			}),
+		).toBe(true);
+	});
+
+	it('is dirty when a column is swapped for another', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options: {
+					...options,
+					selectColumns: [
+						columns[0],
+						{ name: 'duration_nano', key: 'duration_nano' } as TelemetryFieldKey,
+					],
+				},
+			}),
+		).toBe(true);
+	});
+
 	it('reads a traces view without columns as the default columns', () => {
 		const bare = viewFrom(
 			toSavedViewSpec({
@@ -184,6 +226,21 @@ describe('hasUnsavedViewChanges', () => {
 			).toBe(true);
 		});
 
+		it.each([
+			['format', { format: 'table' as LogViewMode }],
+			['font size', { fontSize: FontSize.LARGE }],
+		])('is dirty when only the %s changes', (_, change) => {
+			expect(
+				hasUnsavedViewChanges({
+					view: logsView,
+					stagedQuery: logsStaged,
+					panelType: PANEL_TYPES.LIST,
+					sourcePage: SavedviewtypesSourceDTO.logs,
+					options: { selectColumns: shownColumns, ...formatting, ...change },
+				}),
+			).toBe(true);
+		});
+
 		it('reads a view without formatting as the default formatting', () => {
 			const bare = viewFrom(
 				toSavedViewSpec({
@@ -295,6 +352,137 @@ describe('hasUnsavedViewChanges', () => {
 		).toBe(false);
 	});
 
+	it.each([
+		['point', 'attribute'],
+		['spanfield', 'span'],
+		['logfield', 'log'],
+		['tracefield', 'trace'],
+	])(
+		'reads a group-by staged as %s and stored as %s as the same field',
+		(legacyContext, storedContext) => {
+			const base = viewFrom(
+				toSavedViewSpec({
+					query: query(DataSource.METRICS, ''),
+					panelType: PANEL_TYPES.TIME_SERIES,
+					displayName: 'By os',
+				}),
+			);
+			const [storedQuery] = base.spec.queries;
+			const storedView = {
+				...base,
+				spec: {
+					...base.spec,
+					queries: [
+						{
+							...storedQuery,
+							spec: {
+								...storedQuery.spec,
+								groupBy: [
+									{
+										name: 'os.type',
+										fieldContext: storedContext,
+										fieldDataType: 'string',
+									},
+								],
+							},
+						},
+					],
+				},
+			} as SavedviewtypesSavedViewDTO;
+			const opened = stagedFrom(storedView, DataSource.METRICS);
+			const stagedLegacy = {
+				...opened,
+				builder: {
+					...opened.builder,
+					queryData: opened.builder.queryData.map((queryData) => ({
+						...queryData,
+						groupBy: [{ key: 'os.type', dataType: 'string', type: legacyContext }],
+					})),
+				},
+			} as Query;
+
+			expect(
+				hasUnsavedViewChanges({
+					view: storedView,
+					stagedQuery: stagedLegacy,
+					panelType: PANEL_TYPES.TIME_SERIES,
+					sourcePage: SavedviewtypesSourceDTO.metrics,
+				}),
+			).toBe(false);
+		},
+	);
+
+	// The query still staged after a save keeps the builder's values, while
+	// the server returns the view without them.
+	describe('right after saving a query that carries builder defaults', () => {
+		const withPatch = (
+			dataSource: DataSource,
+			patch: Partial<Query['builder']['queryData'][number]>,
+		): Query => {
+			const base = query(dataSource, '');
+			return {
+				...base,
+				builder: {
+					...base.builder,
+					queryData: base.builder.queryData.map((queryData) => ({
+						...queryData,
+						...patch,
+					})),
+				},
+			} as Query;
+		};
+
+		it.each([
+			[
+				'a zero offset on a list',
+				DataSource.LOGS,
+				SavedviewtypesSourceDTO.logs,
+				PANEL_TYPES.LIST,
+				{ offset: 0 },
+			],
+			[
+				'an empty group-by description',
+				DataSource.TRACES,
+				SavedviewtypesSourceDTO.traces,
+				PANEL_TYPES.TIME_SERIES,
+				{
+					groupBy: [
+						{
+							key: 'service.name',
+							dataType: 'string',
+							type: 'resource',
+							description: '',
+						},
+					],
+				},
+			],
+			[
+				'a function without arguments',
+				DataSource.METRICS,
+				SavedviewtypesSourceDTO.metrics,
+				PANEL_TYPES.TIME_SERIES,
+				{ functions: [{ name: 'absolute', args: [], namedArgs: {} }] },
+			],
+		])('is clean with %s', (_, dataSource, sourcePage, panelType, patch) => {
+			const saved = withPatch(
+				dataSource,
+				patch as Partial<Query['builder']['queryData'][number]>,
+			);
+			const savedView = viewFrom(
+				toSavedViewSpec({ query: saved, panelType, displayName: 'Saved' }),
+			);
+
+			expect(
+				hasUnsavedViewChanges({
+					view: savedView,
+					stagedQuery: saved,
+					panelType,
+					sourcePage,
+				}),
+			).toBe(false);
+		});
+	});
+
 	describe('list order', () => {
 		const withOrderBy = (
 			staged: Query,

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

@@ -80,6 +80,66 @@ describe('toSavedViewSpec', () => {
 		});
 	});
 
+	it('keeps the description and unit of a column, naming it by name before key', () => {
+		const spec = toSavedViewSpec({
+			query: tracesQuery(),
+			panelType: PANEL_TYPES.LIST,
+			displayName: 'Errors',
+			options: {
+				selectColumns: [
+					{
+						name: 'duration_nano',
+						key: 'durationNano',
+						description: 'Span duration',
+						unit: 'ns',
+					},
+				] as unknown as TelemetryFieldKey[],
+				format: 'raw' as LogViewMode,
+				maxLines: 2,
+				fontSize: FontSize.SMALL,
+			},
+		});
+
+		expect(spec.selectedFields).toStrictEqual([
+			{ name: 'duration_nano', description: 'Span duration', unit: 'ns' },
+		]);
+	});
+
+	it.each([
+		[
+			PANEL_TYPES.LIST,
+			SavedviewtypesPanelTypeDTO.list,
+			Querybuildertypesv5RequestTypeDTO.raw,
+		],
+		[
+			PANEL_TYPES.TABLE,
+			SavedviewtypesPanelTypeDTO.table,
+			Querybuildertypesv5RequestTypeDTO.scalar,
+		],
+		[
+			PANEL_TYPES.TRACE,
+			SavedviewtypesPanelTypeDTO.trace,
+			Querybuildertypesv5RequestTypeDTO.trace,
+		],
+		[
+			PANEL_TYPES.PIE,
+			SavedviewtypesPanelTypeDTO.graph,
+			Querybuildertypesv5RequestTypeDTO.scalar,
+		],
+	])(
+		'stores the %s panel as panel type %s with request type %s',
+		(panelType, storedPanelType, requestType) => {
+			const spec = toSavedViewSpec({
+				query: tracesQuery(),
+				panelType,
+				displayName: 'Errors',
+			});
+
+			expect(spec.panelType).toBe(storedPanelType);
+			expect(spec.requestType).toBe(requestType);
+		},
+	);
+
 	it('keeps the colour in display', () => {
 		const spec = toSavedViewSpec({
 			query: tracesQuery(),

frontend/src/hooks/alerts/__tests__/useListAllRules.test.tsx

@@ -0,0 +1,40 @@
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { AllTheProviders, renderHook, waitFor } from 'tests/test-utils';
+
+import { useListAllRules } from '../useListAllRules';
+
+const TOTAL = 250;
+
+const rules = Array.from({ length: TOTAL }, (_, index) => ({
+	...alertRulesFixture[0],
+	id: `rule-${index}`,
+	alert: `Rule ${index}`,
+}));
+
+describe('useListAllRules', () => {
+	it('fetches every page past the 200-rule cap', async () => {
+		const offsets: string[] = [];
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				offsets.push(req.url.searchParams.get('offset') ?? '');
+				return res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response(rules, req.url.searchParams)),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useListAllRules(), {
+			wrapper: AllTheProviders,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data).toHaveLength(TOTAL);
+		expect(result.current.data?.[TOTAL - 1]?.id).toBe(`rule-${TOTAL - 1}`);
+		expect(offsets.sort()).toStrictEqual(['0', '200']);
+	});
+});

frontend/src/hooks/alerts/useListAllRules.ts

@@ -0,0 +1,40 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import {
+	getListRulesV3QueryKey,
+	listRulesV3,
+} from 'api/generated/services/rules';
+import type { RuletypesListableRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import { range } from 'lodash-es';
+
+// The list API clamps any larger limit to 200.
+const PAGE_SIZE = 200;
+
+export const LIST_ALL_RULES_QUERY_KEY = [...getListRulesV3QueryKey(), 'all'];
+
+function fetchPage(offset: number): ReturnType<typeof listRulesV3> {
+	return listRulesV3({ limit: PAGE_SIZE, offset });
+}
+
+// TODO(AshwinBhatkal): temporary. Replace with server-side search plus a lookup of saved rules by ID once
+// /api/v3/rules can filter by IDs: https://github.com/SigNoz/pulse-pod/issues/715
+async function fetchAllRules(): Promise<RuletypesListableRuleDTO[]> {
+	const first = await fetchPage(0);
+	const rest = await Promise.all(
+		range(PAGE_SIZE, first.data.total, PAGE_SIZE).map(fetchPage),
+	);
+
+	return [...first.data.rules, ...rest.flatMap((page) => page.data.rules)];
+}
+
+export function useListAllRules(
+	options?: Omit<
+		UseQueryOptions<RuletypesListableRuleDTO[], Error>,
+		'queryKey' | 'queryFn'
+	>,
+): UseQueryResult<RuletypesListableRuleDTO[], Error> {
+	return useQuery<RuletypesListableRuleDTO[], Error>({
+		queryKey: LIST_ALL_RULES_QUERY_KEY,
+		queryFn: fetchAllRules,
+		...options,
+	});
+}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -10,7 +10,7 @@ import {
 	getGetRuleByIDQueryKey,
 	getGetRuleHistoryTimelineQueryOptions,
 	invalidateGetRuleByID,
-	invalidateListRules,
+	invalidateListRulesV3,
 	updateRuleByID,
 	useGetRuleByID,
 	useGetRuleHistoryOverallStatus,
@@ -443,7 +443,7 @@ export const useAlertRuleClone = ({
 					message: `Success`,
 				});
 
-				await invalidateListRules(queryClient);
+				await invalidateListRulesV3(queryClient);
 
 				params.set(QueryParams.ruleId, response.data.id);
 				navigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
@@ -494,7 +494,7 @@ export const useAlertRuleUpdate = ({
 						data: { ...existingRule.data, alert: intermediateName },
 					});
 				}
-				void invalidateListRules(queryClient);
+				void invalidateListRulesV3(queryClient);
 				notifications.success({ message: 'Alert renamed successfully' });
 			},
 			onError: (error) => {

frontend/src/pages/AlertList/PlannedDowntime/stories/PlannedDowntime.stories.mocks.tsx

@@ -17,10 +17,8 @@ import {
 	FIRST_DOWNTIME_NAME,
 } from './__story_mockdata__/plannedDowntime';
 
-import {
-	alertRulesResponse,
-	RULE_MAX,
-} from '../../stories/__story_mockdata__/alerts';
+import { alertRulesPage } from '../../AlertRules/stories/__story_mockdata__/ruleViews';
+import { RULE_MAX } from '../../stories/__story_mockdata__/alerts';
 import { AlertListSubTabs, AlertListTabs } from '../../types';
 
 const LIST = 'Planned downtime · list';
@@ -86,18 +84,20 @@ export const plannedDowntimeMocks = defineStoryMocks({
 				res(ctx.status(200), ctx.json({ status: 'success', data: null })),
 		),
 
-		rest.get('http://localhost/api/v2/rules', (_req, res, ctx) =>
-			values.rulesState === 'error'
-				? res(ctx.status(500), ctx.json({ status: 'error' }))
-				: res(
-						ctx.json(
-							alertRulesResponse(values.silencedRules, {
-								severity: 'mixed',
-								state: 'mixed',
-							}),
-						),
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+			if (values.rulesState === 'error') {
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.json(
+					alertRulesPage(
+						values.silencedRules,
+						{ severity: 'mixed', state: 'mixed' },
+						req.url.searchParams,
 					),
-		),
+				),
+			);
+		}),
 	],
 	config: () => ({
 		route: `/alerts?tab=${AlertListTabs.CONFIGURATION}&subTab=${AlertListSubTabs.PLANNED_DOWNTIME}`,

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

@@ -3,6 +3,7 @@
  * Do not hand-edit: regenerate instead.
  */
 
+import { listRulesV3Response } from 'mocks-server/__mockdata__/alert_rules';
 import { rest } from 'msw';
 
 import {
@@ -156,11 +157,13 @@ export const homeMocks = defineStoryMocks({
 		),
 
 		rest.get(
-			'http://localhost/api/v2/rules',
-			response.json(() => ({
-				status: 'success',
-				data: buildAlertRules(values.alertRules),
-			})),
+			'http://localhost/api/v3/rules',
+			response.json((req) =>
+				listRulesV3Response(
+					buildAlertRules(values.alertRules),
+					req.url.searchParams,
+				),
+			),
 		),
 
 		rest.get(

frontend/src/utils/__tests__/buildExplorerNavigationUrl.test.ts

@@ -21,6 +21,20 @@ describe('buildExplorerNavigationUrl', () => {
 		expect(url).toContain(`${QueryParams.viewKey}=`);
 	});
 
+	it('encodes the composite query for a reader that decodes it, even with a percent sign', () => {
+		const query = {
+			queryType: 'builder',
+			filter: { expression: "body LIKE '%timeout%'" },
+		} as never;
+
+		const url = buildExplorerNavigationUrl(ROUTES.LOGS_EXPLORER, query, {});
+
+		const param = new URL(url, window.location.origin).searchParams.get(
+			QueryParams.compositeQuery,
+		) as string;
+		expect(JSON.parse(decodeURIComponent(param))).toStrictEqual(query);
+	});
+
 	it('JSON-encodes panelTypes so the explorer opens the right view', () => {
 		const url = buildExplorerNavigationUrl(
 			ROUTES.LOGS_EXPLORER,

pkg/alertmanager/alertmanagernotify/email/email_test.go

@@ -11,6 +11,7 @@ import (
 	"log/slog"
 	"net"
 	"net/http"
+	"net/textproto"
 	"net/url"
 	"os"
 	"strconv"
@@ -706,7 +707,9 @@ func TestEmailRejected(t *testing.T) {
 
 	// Send the alert to mock SMTP server.
 	retry, err := e.Notify(context.Background(), firingAlert)
-	require.ErrorContains(t, err, "501 5.5.4 Rejected!")
+	var smtpErr *textproto.Error
+	require.ErrorAs(t, err, &smtpErr)
+	assert.Equal(t, 501, smtpErr.Code)
 	assert.True(t, retry)
 	require.NoError(t, srv.Shutdown(ctx))
 

pkg/apiserver/signozapiserver/alertmanager.go

@@ -119,7 +119,7 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 		ID:                  "TestChannelDeprecated",
 		Tags:                []string{"channels"},
 		Summary:             "Test notification channel (deprecated)",
-		Description:         "Deprecated: use /api/v1/channels/test instead",
+		Description:         "Deprecated: use POST /api/v1/channels/test instead.",
 		Request:             new(alertmanagertypes.Receiver),
 		RequestContentType:  "application/json",
 		Response:            nil,

pkg/apiserver/signozapiserver/cloudintegration.go

@@ -336,7 +336,7 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			ID:                  "AgentCheckInDeprecated",
 			Tags:                []string{"cloudintegration"},
 			Summary:             "Agent check-in",
-			Description:         "[Deprecated] This endpoint is called by the deployed agent to check in",
+			Description:         "This endpoint is called by the deployed agent to check in. Deprecated: use POST /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in instead. Send cloudIntegrationId and providerAccountId instead of account_id and cloud_account_id.",
 			Request:             new(citypes.PostableAgentCheckIn),
 			RequestContentType:  "application/json",
 			Response:            new(citypes.GettableAgentCheckIn),

pkg/apiserver/signozapiserver/gateway.go

@@ -207,7 +207,7 @@ func (provider *provider) addGatewayRoutes(router *mux.Router) error {
 			ID:                  "CreateIngestionKeyLimit",
 			Tags:                []string{"gateway"},
 			Summary:             "Create limit for the ingestion key",
-			Description:         "This endpoint creates an ingestion key limit.",
+			Description:         "This endpoint creates an ingestion key limit. Deprecated: use POST /api/v2/gateway/ingestion_limits instead. Send keyId in the request body.",
 			Request:             new(gatewaytypes.DeprecatedPostableIngestionKeyLimit),
 			RequestContentType:  "application/json",
 			Response:            new(gatewaytypes.GettableCreatedIngestionKeyLimit),
@@ -245,7 +245,7 @@ func (provider *provider) addGatewayRoutes(router *mux.Router) error {
 			ID:                  "UpdateIngestionKeyLimit",
 			Tags:                []string{"gateway"},
 			Summary:             "Update limit for the ingestion key",
-			Description:         "This endpoint updates an ingestion key limit.",
+			Description:         "This endpoint updates an ingestion key limit. Deprecated: use PATCH /api/v2/gateway/ingestion_limits/{limitId} instead.",
 			Request:             new(gatewaytypes.UpdatableIngestionKeyLimit),
 			RequestContentType:  "application/json",
 			Response:            nil,
@@ -272,7 +272,7 @@ func (provider *provider) addGatewayRoutes(router *mux.Router) error {
 			ID:                  "DeleteIngestionKeyLimit",
 			Tags:                []string{"gateway"},
 			Summary:             "Delete limit for the ingestion key",
-			Description:         "This endpoint deletes an ingestion key limit",
+			Description:         "This endpoint deletes an ingestion key limit. Deprecated: use DELETE /api/v2/gateway/ingestion_limits/{limitId} instead.",
 			Request:             nil,
 			RequestContentType:  "application/json",
 			Response:            nil,

pkg/apiserver/signozapiserver/licensing.go

@@ -45,7 +45,7 @@ func (provider *provider) addLicensingRoutes(router *mux.Router) error {
 			ID:                  "ActivateLicenseDeprecated",
 			Tags:                []string{"licenses"},
 			Summary:             "Activate a license.",
-			Description:         "This endpoint validates the license key with the upstream server and activates the license for the organization.",
+			Description:         "This endpoint validates the license key with the upstream server and activates the license for the organization. Deprecated: use POST /api/v4/licenses instead. The v4 endpoint returns 201 with the license id.",
 			Request:             new(licensetypes.PostableLicense),
 			RequestContentType:  "application/json",
 			Response:            nil,
@@ -71,7 +71,7 @@ func (provider *provider) addLicensingRoutes(router *mux.Router) error {
 			ID:                  "RefreshLicenseDeprecated",
 			Tags:                []string{"licenses"},
 			Summary:             "Refresh a license.",
-			Description:         "This endpoint refreshes the active license of the organization from the upstream server.",
+			Description:         "This endpoint refreshes the active license of the organization from the upstream server. Deprecated: use PUT /api/v4/licenses/{id} instead. Pass the active license id in the path.",
 			Request:             nil,
 			RequestContentType:  "",
 			Response:            nil,
@@ -167,7 +167,7 @@ func (provider *provider) addLicensingRoutes(router *mux.Router) error {
 			ID:                  "RefreshLicense",
 			Tags:                []string{"licenses"},
 			Summary:             "Refresh a license.",
-			Description:         "This endpoint refreshes the active license of the organization from the upstream server.",
+			Description:         "This endpoint refreshes the license with the given id from the upstream server. Only the active license can be refreshed.",
 			Request:             nil,
 			RequestContentType:  "",
 			Response:            nil,

pkg/apiserver/signozapiserver/ruler.go

@@ -18,7 +18,7 @@ func (provider *provider) addRulerRoutes(router *mux.Router) error {
 		ID:                  "ListRules",
 		Tags:                []string{"rules"},
 		Summary:             "List alert rules",
-		Description:         "This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.",
+		Description:         "This endpoint lists all alert rules with their current evaluation state. Deprecated: use GET /api/v3/rules instead, which supports filtering, sorting and pagination.",
 		Response:            make([]*ruletypes.Rule, 0),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,

tests/e2e/drivers/saved-views.ts

@@ -0,0 +1,481 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import {
+	expect,
+	type Locator,
+	type Page,
+	type Request,
+	type Response,
+} from '@playwright/test';
+
+import { BASE_PATH } from './base-path';
+import { collectRequests } from './console';
+import { dismissQuickFiltersAnnouncement } from './logs/explorer';
+import {
+	filterExpressions,
+	isQueryRangeRequest,
+	queryRangeBody,
+} from './saved-views/query';
+import { SAVED_VIEWS_API, seededView } from './saved-views/spec';
+import type {
+	GettableSavedView,
+	PostableSavedView,
+	SavedViewSource,
+	SeededView,
+} from './saved-views/spec.types';
+
+import { driver, kit } from './kit';
+import {
+	createViaApi,
+	getViaApi,
+	removeTrackedSavedViews,
+	statusViaApi,
+	trackSavedView,
+} from './saved-views/api';
+
+// The saved views header and list on the explorers: the sliding list on logs,
+// traces and meter, the pinned one on metrics.
+
+export const MY_VIEW = 'My view';
+
+const EXPLORER_PATH: Record<SavedViewSource, string> = {
+	logs: '/logs/logs-explorer',
+	traces: '/traces-explorer',
+	metrics: '/metrics-explorer/explorer',
+	meter: '/meter/explorer',
+};
+
+export function explorerPathname(source: SavedViewSource): string {
+	return `${BASE_PATH}${EXPLORER_PATH[source]}`;
+}
+
+/** Row-menu items by the suffix of their `saved-views-row-menu-item-<key>` test id. */
+export type RowAction = 'copyLink' | 'copyId' | 'editDetails' | 'delete';
+
+/** Save-menu items by the suffix of their `saved-views-save-changes-item-<key>` test id. */
+export type SaveAction = 'update' | 'save-as-new';
+
+export type LinkGesture = 'modifier' | 'middle';
+
+export interface OpenedTab {
+	page: Page;
+	savedViews: SavedViews;
+}
+
+export type ExplorerTab = 'list' | 'timeseries' | 'table';
+
+export interface SavedViews {
+	/** Created over the page's own session; deleted when the test ends. */
+	seed(view: PostableSavedView): Promise<SeededView>;
+	/** The stored view, read straight from the API. */
+	get(id: string): Promise<GettableSavedView>;
+	/** The status of `GET /api/v2/saved_views/<id>`, for asserting a view is gone. */
+	status(id: string): Promise<number>;
+
+	/** On a bare url by default, which is `relativeTime=1h` and nothing else. */
+	openExplorer(
+		source?: SavedViewSource,
+		params?: Record<string, string>,
+	): Promise<void>;
+	/** Reloads and waits for the explorer to send the filter's query. */
+	reload(filter?: string, requestType?: string): Promise<void>;
+	/** The explorer's next query that carries `filter`, of `requestType` when given. */
+	queryRan(filter: string, requestType?: string): Promise<Response>;
+	/** The current url. */
+	url(): URL;
+	/** A query param of the current url, where the open view and time range live. */
+	param(name: string): string | null;
+	/** The id in the `viewKey` param, or null while no view is open. */
+	activeViewId(): string | null;
+
+	header(): Locator;
+	name(): Locator;
+	createButton(): Locator;
+	clearButton(): Locator;
+	discardButton(): Locator;
+	saveChangesButton(): Locator;
+	saveAction(action: SaveAction): Locator;
+	/** The view is open and nothing differs from what is stored. */
+	expectClean(displayName: string): Promise<void>;
+	/** The view is open and the explorer holds changes to it. */
+	expectDirty(displayName: string): Promise<void>;
+	/** No view is open. */
+	expectNoView(): Promise<void>;
+	toast(text: string): Locator;
+
+	openListButton(): Locator;
+	panel(): Locator;
+	searchInput(): Locator;
+	openList(): Promise<void>;
+	/** Narrows the list, and waits for exactly `rows` rows when given. */
+	search(text: string, rows?: number): Promise<void>;
+	rows(): Locator;
+	row(id: string): Locator;
+	rowLink(id: string): Locator;
+	/** The row link's href, resolved against the current page. */
+	rowHref(id: string): Promise<URL>;
+	/**
+	 * Searches for the view, opens it from its row and waits for the explorer's
+	 * query for it. Resolves with that query's response.
+	 */
+	open(view: SeededView): Promise<Response>;
+
+	rowMenuButton(id: string): Locator;
+	rowAction(action: RowAction): Locator;
+	openRowMenu(id: string): Promise<void>;
+	/** Opens the row's menu and picks an action once its permission check settles. */
+	chooseRowAction(id: string, action: RowAction): Promise<void>;
+	/** Opens the row's menu and picks Copy link, returning the copied text. */
+	copyLink(id: string): Promise<string>;
+	/**
+	 * Ctrl or Cmd click, or a middle click, on the row link. Resolves once the
+	 * tab exists, not once it has loaded; the driver is bound to the new tab.
+	 */
+	openInNewTab(id: string, gesture?: LinkGesture): Promise<OpenedTab>;
+	/**
+	 * Opens `url` in a new tab of the same browser context and waits for the
+	 * explorer's query for `view`.
+	 */
+	openLink(url: URL | string, view: SeededView): Promise<OpenedTab>;
+	/** Tabs the browser context has opened since this driver was built. */
+	newTabCount(): number;
+	rename(id: string, displayName: string): Promise<void>;
+	/** Confirms the delete dialog and waits for the DELETE. */
+	deleteView(id: string): Promise<void>;
+
+	modal(): Locator;
+	modalNameInput(): Locator;
+	modalSubmit(): Locator;
+	deleteConfirm(): Locator;
+	/** Create from the header: names the view, saves it and returns its id. */
+	createFromHeader(displayName: string): Promise<string>;
+	/** Types into the query bar, runs it and waits for the query to carry it. */
+	applyFilter(filter: string): Promise<void>;
+	queryBar(): Locator;
+	/** Header cells of the logs table with a title: the state indicator has none. */
+	logsColumnHeaders(): Locator;
+	openLogsFormatMenu(): Promise<void>;
+	closeLogsFormatMenu(): Promise<void>;
+	/** The checked format in the open menu: Raw, Default or Column. */
+	selectedLogsFormat(): Locator;
+	logsMaxLines(): Locator;
+	logsFontSize(): Locator;
+	explorerTab(tab: ExplorerTab): Locator;
+	/** Changes when the document reloads and not when the app navigates in place. */
+	documentId(): Promise<number>;
+	/** Update selected view, waiting for the PUT and the toast. */
+	update(): Promise<void>;
+	discard(): Promise<void>;
+
+	/** `GET /api/v2/saved_views/<id>` requests the page has made so far. */
+	viewGets(id: string): Request[];
+}
+
+/** The driver on any page of the same context, such as a tab a link opened. */
+export function savedViewsFor(page: Page): SavedViews {
+	const requests = collectRequests(page);
+	let newTabs = 0;
+	page.context().on('page', () => {
+		newTabs += 1;
+	});
+	const tid = (id: string): Locator => page.getByTestId(id);
+	const formatMenu = (): Locator => page.locator('.format-options-popover');
+	const viewPath = (id: string): string =>
+		`${BASE_PATH}${SAVED_VIEWS_API}/${id}`;
+
+	// A menu row, like a header button, ignores clicks until its permission
+	// check settles, and stays enabled-looking meanwhile.
+	const settle = async (control: Locator): Promise<void> => {
+		await expect(control).toBeVisible();
+		await expect(control).not.toHaveAttribute('aria-busy');
+		await expect(control).not.toHaveAttribute('data-loading');
+		await expect(control).not.toHaveAttribute('data-disabled');
+	};
+	const press = async (control: Locator): Promise<void> => {
+		await settle(control);
+		await control.click();
+	};
+
+	const savedViews: SavedViews = {
+		async seed(view) {
+			const id = await createViaApi(page, view);
+			trackSavedView(page, id);
+			return seededView(id, view);
+		},
+		get: (id) => getViaApi(page, id),
+		status: (id) => statusViaApi(page, id),
+
+		async openExplorer(source = 'logs', params = { relativeTime: '1h' }) {
+			await dismissQuickFiltersAnnouncement(page);
+			const search = new URLSearchParams(params).toString();
+			await page.goto(`${EXPLORER_PATH[source]}${search ? `?${search}` : ''}`);
+			await expect(savedViews.header()).toBeVisible();
+		},
+		async reload(filter, requestType) {
+			await Promise.all([
+				filter === undefined ? undefined : savedViews.queryRan(filter, requestType),
+				page.reload(),
+			]);
+			await expect(savedViews.header()).toBeVisible();
+		},
+		queryRan: (filter, requestType) =>
+			page.waitForResponse((res) => {
+				const request = res.request();
+				return (
+					isQueryRangeRequest(request) &&
+					filterExpressions(request).includes(filter) &&
+					(requestType === undefined ||
+						queryRangeBody(request).requestType === requestType)
+				);
+			}),
+		url: () => new URL(page.url()),
+		param: (name) => new URL(page.url()).searchParams.get(name),
+		activeViewId() {
+			const raw = savedViews.param('viewKey');
+			return raw === null ? null : (JSON.parse(raw) as string);
+		},
+
+		header: () => tid('saved-views-header'),
+		name: () => tid('saved-views-name'),
+		createButton: () => tid('saved-views-create'),
+		clearButton: () => tid('saved-views-clear'),
+		discardButton: () => tid('saved-views-discard'),
+		saveChangesButton: () => tid('saved-views-save-changes'),
+		saveAction: (action) => tid(`saved-views-save-changes-item-${action}`),
+		async expectClean(displayName) {
+			await expect(savedViews.name()).toHaveText(displayName);
+			await expect(savedViews.clearButton()).toBeVisible();
+			await expect(savedViews.discardButton()).toBeHidden();
+			await expect(savedViews.saveChangesButton()).toBeHidden();
+		},
+		async expectDirty(displayName) {
+			await expect(savedViews.name()).toHaveText(displayName);
+			await expect(savedViews.discardButton()).toBeVisible();
+			await expect(savedViews.saveChangesButton()).toBeVisible();
+			await expect(savedViews.clearButton()).toBeHidden();
+		},
+		async expectNoView() {
+			await expect(savedViews.name()).toHaveText(MY_VIEW);
+			await expect(savedViews.createButton()).toBeVisible();
+			await expect(savedViews.clearButton()).toBeHidden();
+			await expect.poll(() => savedViews.param('viewKey')).toBeNull();
+		},
+		toast: (text) =>
+			page.locator('[data-sonner-toast]').filter({ hasText: text }),
+
+		openListButton: () => tid('saved-views-open'),
+		panel: () => tid('saved-views-panel'),
+		searchInput: () => tid('saved-views-search'),
+		async openList() {
+			await expect(
+				savedViews.openListButton().or(savedViews.panel()),
+			).toBeVisible();
+			if (!(await savedViews.panel().isVisible())) {
+				await press(savedViews.openListButton());
+			}
+			await expect(savedViews.panel()).toBeVisible();
+		},
+		async search(text, rows) {
+			await savedViews.searchInput().fill(text);
+			if (rows !== undefined) {
+				await expect(savedViews.rows()).toHaveCount(rows);
+			}
+		},
+		rows: () => tid('saved-views-row'),
+		row: (id) =>
+			page.locator(`[data-testid="saved-views-row"][data-view-id="${id}"]`),
+		rowLink: (id) => savedViews.row(id).getByTestId('saved-views-row-name'),
+		async rowHref(id) {
+			const href = await savedViews.rowLink(id).getAttribute('href');
+			expect(href, `row ${id} has no href`).not.toBeNull();
+			return new URL(href as string, page.url());
+		},
+		async open(view) {
+			await savedViews.openList();
+			await savedViews.search(view.displayName);
+			const [response] = await Promise.all([
+				savedViews.queryRan(view.filter, view.requestType),
+				savedViews.rowLink(view.id).click(),
+			]);
+			await expect.poll(() => savedViews.activeViewId()).toBe(view.id);
+			await expect(savedViews.name()).toHaveText(view.displayName);
+			return response;
+		},
+
+		rowMenuButton: (id) => savedViews.row(id).getByTestId('saved-views-row-menu'),
+		rowAction: (action) => tid(`saved-views-row-menu-item-${action}`),
+		async openRowMenu(id) {
+			// The menu button has no width until the row is hovered.
+			await savedViews.row(id).hover();
+			await savedViews.rowMenuButton(id).click();
+		},
+		async chooseRowAction(id, action) {
+			await savedViews.openRowMenu(id);
+			await press(savedViews.rowAction(action));
+		},
+		async copyLink(id) {
+			// Clipboard permissions are Chromium-only, so the copy is caught in the
+			// page: react-use copies through a selection and execCommand, whose
+			// `copy` event a capture listener sees first.
+			await page.evaluate(() => {
+				const w = window as unknown as { __copied?: string };
+				delete w.__copied;
+				document.addEventListener(
+					'copy',
+					() => {
+						w.__copied = document.getSelection()?.toString() ?? '';
+					},
+					{ capture: true, once: true },
+				);
+			});
+			await savedViews.chooseRowAction(id, 'copyLink');
+			const copied = (): Promise<string | undefined> =>
+				page.evaluate(() => (window as unknown as { __copied?: string }).__copied);
+			await expect.poll(copied).toBeTruthy();
+			return (await copied()) as string;
+		},
+		async openInNewTab(id, gesture = 'modifier') {
+			const [tab] = await Promise.all([
+				page.context().waitForEvent('page'),
+				savedViews
+					.rowLink(id)
+					.click(
+						gesture === 'modifier'
+							? { modifiers: ['ControlOrMeta'] }
+							: { button: 'middle' },
+					),
+			]);
+			return { page: tab, savedViews: savedViewsFor(tab) };
+		},
+		async openLink(url, view) {
+			const tab = await page.context().newPage();
+			const opened = savedViewsFor(tab);
+			await Promise.all([
+				opened.queryRan(view.filter, view.requestType),
+				tab.goto(url.toString()),
+			]);
+			return { page: tab, savedViews: opened };
+		},
+		newTabCount: () => newTabs,
+		async rename(id, displayName) {
+			await savedViews.chooseRowAction(id, 'editDetails');
+			await expect(savedViews.modalNameInput()).toBeVisible();
+			await savedViews.modalNameInput().fill(displayName);
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'PUT' &&
+						new URL(res.url()).pathname === viewPath(id),
+				),
+				savedViews.modalSubmit().click(),
+			]);
+			expect(response.ok(), `PUT ${SAVED_VIEWS_API}/${id}`).toBe(true);
+			await expect(savedViews.modal()).toBeHidden();
+		},
+		async deleteView(id) {
+			await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'DELETE' &&
+						new URL(res.url()).pathname === viewPath(id),
+				),
+				press(savedViews.deleteConfirm()),
+			]);
+			await expect(savedViews.deleteConfirm()).toBeHidden();
+		},
+
+		modal: () => tid('save-view-modal'),
+		modalNameInput: () => tid('save-view-name'),
+		modalSubmit: () => tid('save-view-submit'),
+		deleteConfirm: () => tid('delete-saved-view-confirm'),
+		async createFromHeader(displayName) {
+			await press(savedViews.createButton());
+			await savedViews.modalNameInput().fill(displayName);
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'POST' &&
+						new URL(res.url()).pathname === `${BASE_PATH}${SAVED_VIEWS_API}`,
+				),
+				savedViews.modalSubmit().click(),
+			]);
+			expect(response.status(), `POST ${SAVED_VIEWS_API}`).toBe(201);
+			const { id } = ((await response.json()) as { data: { id: string } }).data;
+			trackSavedView(page, id);
+			await expect(savedViews.modal()).toBeHidden();
+			return id;
+		},
+		logsColumnHeaders: () => page.locator('thead th').filter({ hasText: /\S/ }),
+		async openLogsFormatMenu() {
+			await tid('periscope-btn-format-options').click();
+			await expect(formatMenu()).toBeVisible();
+		},
+		async closeLogsFormatMenu() {
+			await tid('periscope-btn-format-options').click();
+			await expect(formatMenu()).toBeHidden();
+		},
+		selectedLogsFormat: () =>
+			formatMenu()
+				.locator('.menu-items .item')
+				.filter({ has: page.locator('svg') }),
+		logsMaxLines: () => formatMenu().getByTestId('max-lines-per-row'),
+		logsFontSize: () => formatMenu().getByTestId('font-size-select'),
+		explorerTab: (tab) => page.locator(`.${tab}-view-tab`),
+		documentId: () => page.evaluate(() => performance.timeOrigin),
+		queryBar: () =>
+			page.locator('.query-where-clause-editor .cm-content').first(),
+		async applyFilter(filter) {
+			await Promise.all([
+				savedViews.queryRan(filter),
+				(async (): Promise<void> => {
+					await savedViews.queryBar().click();
+					await page.keyboard.press('ControlOrMeta+a');
+					await page.keyboard.insertText(filter);
+					await expect(savedViews.queryBar()).toHaveText(filter);
+					await page.locator('[data-run-query-btn]').click();
+				})(),
+			]);
+		},
+		async update() {
+			const id = savedViews.activeViewId();
+			await savedViews.saveChangesButton().click();
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'PUT' &&
+						new URL(res.url()).pathname === viewPath(id as string),
+				),
+				press(savedViews.saveAction('update')),
+			]);
+			expect(response.ok(), `PUT ${SAVED_VIEWS_API}/${id}`).toBe(true);
+			await expect(savedViews.toast('View updated')).toBeVisible();
+		},
+		async discard() {
+			await press(savedViews.discardButton());
+		},
+
+		viewGets: (id) =>
+			requests.filter(
+				(request) =>
+					request.method() === 'GET' &&
+					new URL(request.url()).pathname === viewPath(id),
+			),
+	};
+
+	return savedViews;
+}
+
+const withSavedViews = driver(
+	'savedViews',
+	({ page }) => savedViewsFor(page),
+	(_, { page }) => removeTrackedSavedViews(page),
+);
+
+export const test = withSavedViews(kit);
+
+export { expect } from './kit';
+export * from './saved-views/spec';
+export type * from './saved-views/spec.types';
+export { queryRangeBody } from './saved-views/query';

tests/e2e/drivers/saved-views/api.ts

@@ -0,0 +1,78 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import type { Page } from '@playwright/test';
+
+import { authToken } from '../api';
+import { SAVED_VIEWS_API } from './spec';
+import type { GettableSavedView, PostableSavedView } from './spec.types';
+
+async function bearer(page: Page): Promise<{ Authorization: string }> {
+	return { Authorization: `Bearer ${await authToken(page)}` };
+}
+
+export async function createViaApi(
+	page: Page,
+	view: PostableSavedView,
+): Promise<string> {
+	const res = await page.request.post(SAVED_VIEWS_API, {
+		data: view,
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST ${SAVED_VIEWS_API} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: { id: string } }).data.id;
+}
+
+export async function getViaApi(
+	page: Page,
+	id: string,
+): Promise<GettableSavedView> {
+	const res = await page.request.get(`${SAVED_VIEWS_API}/${id}`, {
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET ${SAVED_VIEWS_API}/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: GettableSavedView }).data;
+}
+
+/** The status alone, for asserting a view is gone. */
+export async function statusViaApi(page: Page, id: string): Promise<number> {
+	const res = await page.request.get(`${SAVED_VIEWS_API}/${id}`, {
+		headers: await bearer(page),
+	});
+	return res.status();
+}
+
+/** Not asserted: a test that deleted its own view must not fail on cleanup. */
+export async function deleteViaApi(page: Page, id: string): Promise<void> {
+	try {
+		await page.request.delete(`${SAVED_VIEWS_API}/${id}`, {
+			headers: await bearer(page),
+		});
+	} catch {
+		/* the view outlives the run rather than hiding why it failed */
+	}
+}
+
+const trackedByPage = new WeakMap<Page, string[]>();
+
+/** Registers a view for deletion when the test owning `page` ends. */
+export function trackSavedView(page: Page, id: string): void {
+	trackedByPage.set(page, [...(trackedByPage.get(page) ?? []), id]);
+}
+
+export async function removeTrackedSavedViews(page: Page): Promise<void> {
+	const ids = trackedByPage.get(page) ?? [];
+	trackedByPage.delete(page);
+	for (const id of ids) {
+		await deleteViaApi(page, id);
+	}
+}

tests/e2e/drivers/saved-views/query.ts

@@ -0,0 +1,40 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import type { Request } from '@playwright/test';
+
+import { isQueryRange } from '../query-range-mock';
+
+interface QueryEnvelope {
+	type: string;
+	spec: {
+		name?: string;
+		signal?: string;
+		filter?: { expression?: string };
+		aggregations?: { expression?: string }[];
+		groupBy?: { name: string }[];
+	};
+}
+
+export interface QueryRangeRequest {
+	start: number;
+	end: number;
+	requestType: string;
+	compositeQuery: { queries: QueryEnvelope[] };
+}
+
+export function isQueryRangeRequest(request: Request): boolean {
+	return request.method() === 'POST' && isQueryRange(request.url());
+}
+
+export function queryRangeBody(request: Request): QueryRangeRequest {
+	return request.postDataJSON() as QueryRangeRequest;
+}
+
+/** The filter of every query in the request, in order. */
+export function filterExpressions(request: Request): string[] {
+	return queryRangeBody(request).compositeQuery.queries.map(
+		(query) => query.spec.filter?.expression ?? '',
+	);
+}

tests/e2e/drivers/saved-views/spec.ts

@@ -0,0 +1,121 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+// Typed builders for the saved view spec: pure data, no Playwright. The types
+// live in `spec.types.ts`.
+//
+// `/api/v2/saved_views`: create and update take the whole spec, and an update
+// replaces it, so a field left out is reset.
+
+import { randomBytes } from 'crypto';
+
+import type {
+	LogsViewOptions,
+	PostableSavedView,
+	SavedViewColumn,
+	SavedViewPanelType,
+	SavedViewRequestType,
+	SeededView,
+} from './spec.types';
+
+export const SAVED_VIEWS_API = '/api/v2/saved_views';
+
+const REQUEST_TYPE: Record<SavedViewPanelType, SavedViewRequestType> = {
+	list: 'raw',
+	graph: 'time_series',
+	table: 'scalar',
+};
+
+/** Workers and browser projects share one org, so every view name is unique. */
+export function uniqueViewName(label: string): string {
+	return `e2e sv ${label} ${randomBytes(4).toString('hex')}`;
+}
+
+export const LOG_COLUMNS: Record<string, SavedViewColumn> = {
+	timestamp: {
+		name: 'timestamp',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: '',
+	},
+	body: {
+		name: 'body',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: '',
+	},
+	serviceName: {
+		name: 'service.name',
+		signal: 'logs',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+	},
+	severityText: {
+		name: 'severity_text',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: 'string',
+	},
+};
+
+export function logsView({
+	displayName,
+	filter = '',
+	panelType = 'list',
+	groupBy = [],
+	columns = [LOG_COLUMNS.timestamp, LOG_COLUMNS.body],
+	display,
+}: LogsViewOptions): PostableSavedView {
+	const isList = panelType === 'list';
+	return {
+		generateName: true,
+		source: 'logs',
+		schemaVersion: 'v2',
+		spec: {
+			displayName,
+			panelType,
+			requestType: REQUEST_TYPE[panelType],
+			queries: [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: 'logs',
+						disabled: false,
+						filter: { expression: filter },
+						...(isList
+							? {
+									order: [
+										{ key: { name: 'timestamp' }, direction: 'desc' },
+										{ key: { name: 'id' }, direction: 'desc' },
+									],
+								}
+							: {
+									aggregations: [{ expression: 'count()' }],
+									groupBy: groupBy.map((name) => ({
+										name,
+										fieldContext: 'resource',
+										fieldDataType: 'string',
+									})),
+								}),
+					},
+				},
+			],
+			selectedFields: isList ? columns : [],
+			...(display && { display }),
+		},
+	};
+}
+
+export function seededView(id: string, view: PostableSavedView): SeededView {
+	const [query] = view.spec.queries as {
+		spec?: { filter?: { expression?: string } };
+	}[];
+	return {
+		id,
+		displayName: view.spec.displayName,
+		filter: query?.spec?.filter?.expression ?? '',
+		requestType: view.spec.requestType,
+	};
+}

tests/e2e/drivers/saved-views/spec.types.ts

@@ -0,0 +1,69 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+// The saved view spec of `/api/v2/saved_views`.
+
+export type SavedViewSource = 'logs' | 'traces' | 'metrics' | 'meter';
+export type SavedViewPanelType = 'list' | 'graph' | 'table';
+
+export type SavedViewRequestType = 'raw' | 'time_series' | 'scalar';
+
+export interface SavedViewColumn {
+	name: string;
+	signal?: string;
+	fieldContext?: string;
+	fieldDataType?: string;
+}
+
+export interface SavedViewDisplay {
+	format?: string;
+	maxLines?: number;
+	fontSize?: string;
+	color?: string;
+}
+
+export interface SavedViewSpec {
+	displayName: string;
+	panelType: SavedViewPanelType;
+	requestType: SavedViewRequestType;
+	queries: Record<string, unknown>[];
+	selectedFields?: SavedViewColumn[];
+	display?: SavedViewDisplay;
+}
+
+export interface PostableSavedView {
+	generateName: true;
+	source: SavedViewSource;
+	schemaVersion: 'v2';
+	spec: SavedViewSpec;
+}
+
+export interface GettableSavedView {
+	id: string;
+	name: string;
+	source: SavedViewSource;
+	createdBy: string;
+	updatedBy?: string;
+	spec: SavedViewSpec;
+}
+
+export interface LogsViewOptions {
+	displayName: string;
+	filter?: string;
+	panelType?: SavedViewPanelType;
+	/** Group by attributes of a graph or table view, as resource attributes. */
+	groupBy?: string[];
+	/** Defaults to timestamp and body, which a list view always shows. */
+	columns?: SavedViewColumn[];
+	display?: SavedViewDisplay;
+}
+
+export interface SeededView {
+	id: string;
+	displayName: string;
+	/** The first query's filter, which the explorer sends once the view is open. */
+	filter: string;
+	/** What the explorer's own query for the view asks for: raw, time_series or scalar. */
+	requestType: string;
+}

tests/e2e/tests/saved-views/lifecycle.spec.ts

@@ -0,0 +1,176 @@
+import {
+	expect,
+	LOG_COLUMNS,
+	logsView,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const SAVED_FILTER = "service.name = 'frontend'";
+const EDITED_FILTER = "service.name = 'cartservice'";
+
+test.describe('Saved views: lifecycle on the logs explorer', () => {
+	test('TC-01 a view created from the header survives a reload clean', async ({
+		savedViews,
+	}) => {
+		const displayName = uniqueViewName('create');
+		await savedViews.openExplorer();
+		await savedViews.expectNoView();
+		await savedViews.applyFilter(SAVED_FILTER);
+
+		const id = await savedViews.createFromHeader(displayName);
+		await expect(savedViews.toast('View created')).toBeVisible();
+		await expect.poll(() => savedViews.activeViewId()).toBe(id);
+		await savedViews.expectClean(displayName);
+
+		const stored = await savedViews.get(id);
+		expect(stored.source).toBe('logs');
+		expect(stored.spec.displayName).toBe(displayName);
+		expect(stored.spec.panelType).toBe('list');
+		expect(JSON.stringify(stored.spec.queries)).toContain(SAVED_FILTER);
+
+		await savedViews.reload(SAVED_FILTER);
+		await savedViews.expectClean(displayName);
+		await expect(savedViews.queryBar()).toHaveText(SAVED_FILTER);
+
+		await savedViews.openList();
+		await savedViews.search(displayName);
+		await expect(savedViews.row(id)).toBeVisible();
+		await expect(savedViews.rowLink(id)).toHaveAttribute('aria-current', 'page');
+	});
+
+	test('TC-02 an edited view turns dirty, updates, and opens with the new filter after a reload', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('update'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+		await savedViews.expectClean(view.displayName);
+
+		await savedViews.applyFilter(EDITED_FILTER);
+		await savedViews.expectDirty(view.displayName);
+
+		await savedViews.update();
+		await savedViews.expectClean(view.displayName);
+
+		const stored = await savedViews.get(view.id);
+		expect(JSON.stringify(stored.spec.queries)).toContain(EDITED_FILTER);
+		expect(JSON.stringify(stored.spec.queries)).not.toContain(SAVED_FILTER);
+
+		await savedViews.reload(EDITED_FILTER);
+		await savedViews.expectClean(view.displayName);
+		await expect(savedViews.queryBar()).toHaveText(EDITED_FILTER);
+	});
+
+	test('TC-03 discarding changes brings back the stored filter and tab', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('discard'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+		await expect(savedViews.explorerTab('list')).toHaveClass(/active-tab/);
+
+		await savedViews.applyFilter(EDITED_FILTER);
+		await savedViews.explorerTab('timeseries').click();
+		await expect(savedViews.explorerTab('timeseries')).toHaveClass(/active-tab/);
+		await savedViews.expectDirty(view.displayName);
+
+		await savedViews.discard();
+		await savedViews.expectClean(view.displayName);
+		await expect(savedViews.queryBar()).toHaveText(SAVED_FILTER);
+		await expect(savedViews.explorerTab('list')).toHaveClass(/active-tab/);
+		expect(savedViews.param('panelTypes')).toBe('"list"');
+
+		const stored = await savedViews.get(view.id);
+		expect(JSON.stringify(stored.spec.queries)).toContain(SAVED_FILTER);
+	});
+
+	test('TC-04 deleting the open view clears it without trying to load it again', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('delete'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+
+		await savedViews.chooseRowAction(view.id, 'delete');
+		const getsBeforeDelete = savedViews.viewGets(view.id).length;
+		expect(getsBeforeDelete).toBeGreaterThan(0);
+		await savedViews.deleteView(view.id);
+
+		await expect(savedViews.toast('View deleted')).toBeVisible();
+		await expect(savedViews.row(view.id)).toHaveCount(0);
+		await savedViews.expectNoView();
+		await expect.poll(() => savedViews.param('panelTypes')).toBeNull();
+		expect(savedViews.param('viewName')).toBeNull();
+		expect(savedViews.param('compositeQuery') ?? '').not.toContain('frontend');
+		expect(savedViews.viewGets(view.id)).toHaveLength(getsBeforeDelete);
+		expect(await savedViews.status(view.id)).toBe(404);
+	});
+
+	test('TC-05 renaming a view keeps its columns and display settings', async ({
+		savedViews,
+	}) => {
+		const columns = [
+			LOG_COLUMNS.timestamp,
+			LOG_COLUMNS.body,
+			LOG_COLUMNS.serviceName,
+			LOG_COLUMNS.severityText,
+		];
+		const headers = ['Timestamp', 'Body', 'service.name', 'severity_text'];
+		const display = { format: 'table', maxLines: 3, fontSize: 'medium' };
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('rename'),
+				filter: SAVED_FILTER,
+				columns,
+				display,
+			}),
+		);
+		const renamed = uniqueViewName('renamed');
+
+		const expectDisplay = async (): Promise<void> => {
+			await expect(savedViews.logsColumnHeaders()).toHaveText(headers);
+			await savedViews.openLogsFormatMenu();
+			await expect(savedViews.selectedLogsFormat()).toHaveText('Column');
+			await expect(savedViews.logsMaxLines()).toHaveValue('3');
+			await expect(savedViews.logsFontSize()).toHaveText('medium');
+			await savedViews.closeLogsFormatMenu();
+		};
+
+		await savedViews.openExplorer('logs', { relativeTime: '1d' });
+		await savedViews.open(view);
+		await expectDisplay();
+
+		await savedViews.openList();
+		await savedViews.search(view.displayName);
+		await savedViews.rename(view.id, renamed);
+		await expect(savedViews.toast('View updated')).toBeVisible();
+		await expect(savedViews.name()).toHaveText(renamed);
+
+		const stored = await savedViews.get(view.id);
+		expect(stored.spec.displayName).toBe(renamed);
+		expect(stored.spec.selectedFields?.map((column) => column.name)).toEqual(
+			columns.map((column) => column.name),
+		);
+		expect(stored.spec.display).toMatchObject(display);
+
+		await savedViews.reload(SAVED_FILTER);
+		await savedViews.expectClean(renamed);
+		await expectDisplay();
+	});
+});

tests/e2e/tests/saved-views/open.spec.ts

@@ -0,0 +1,79 @@
+import {
+	type ExplorerTab,
+	expect,
+	logsView,
+	queryRangeBody,
+	type SavedViewPanelType,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const FILTER = "service.name = 'frontend'";
+
+const PANELS: {
+	panelType: SavedViewPanelType;
+	tab: ExplorerTab;
+	requestType: string;
+	aggregation: string | undefined;
+	groupBy: string[] | undefined;
+}[] = [
+	{
+		panelType: 'list',
+		tab: 'list',
+		requestType: 'raw',
+		aggregation: undefined,
+		groupBy: undefined,
+	},
+	{
+		panelType: 'graph',
+		tab: 'timeseries',
+		requestType: 'time_series',
+		aggregation: 'count()',
+		groupBy: ['service.name'],
+	},
+	{
+		panelType: 'table',
+		tab: 'table',
+		requestType: 'scalar',
+		aggregation: 'count()',
+		groupBy: ['service.name'],
+	},
+];
+
+test.describe('Saved views: opening from the list', () => {
+	for (const [
+		index,
+		{ panelType, tab, requestType, aggregation, groupBy },
+	] of PANELS.entries()) {
+		test(`TC-0${index + 1} a ${panelType} view opens with its query, tab and a clean header`, async ({
+			savedViews,
+		}) => {
+			const view = await savedViews.seed(
+				logsView({
+					displayName: uniqueViewName(`open ${panelType}`),
+					filter: FILTER,
+					panelType,
+					groupBy,
+				}),
+			);
+			await savedViews.openExplorer();
+			const response = await savedViews.open(view);
+
+			expect(savedViews.param('panelTypes')).toBe(JSON.stringify(panelType));
+			await expect(savedViews.explorerTab(tab)).toHaveClass(/active-tab/);
+			await expect(savedViews.queryBar()).toHaveText(FILTER);
+			await expect(savedViews.rowLink(view.id)).toHaveAttribute(
+				'aria-current',
+				'page',
+			);
+			await savedViews.expectClean(view.displayName);
+
+			const body = queryRangeBody(response.request());
+			expect(body.requestType).toBe(requestType);
+			const [query] = body.compositeQuery.queries;
+			expect(query.spec.filter?.expression).toBe(FILTER);
+			expect(query.spec.aggregations?.[0]?.expression).toBe(aggregation);
+			expect(query.spec.groupBy?.map((group) => group.name)).toEqual(groupBy);
+		});
+	}
+});

tests/e2e/tests/saved-views/row-link.spec.ts

@@ -0,0 +1,169 @@
+import {
+	expect,
+	explorerPathname,
+	logsView,
+	type SavedViews,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const LOGS_PATH = explorerPathname('logs');
+const FRONTEND_FILTER = "service.name = 'frontend'";
+const CART_FILTER = "service.name = 'cartservice'";
+
+const HOUR_MS = 3_600_000;
+
+/** Whole milliseconds, as the links carry them. */
+function customRange(): { startTime: string; endTime: string } {
+	const end = Math.floor(Date.now() / 60_000) * 60_000;
+	return {
+		startTime: String(end - 2 * HOUR_MS),
+		endTime: String(end - HOUR_MS),
+	};
+}
+
+async function seedTwoViews(savedViews: SavedViews) {
+	const target = await savedViews.seed(
+		logsView({ displayName: uniqueViewName('link'), filter: FRONTEND_FILTER }),
+	);
+	const other = await savedViews.seed(
+		logsView({ displayName: uniqueViewName('other'), filter: CART_FILTER }),
+	);
+	return { target, other };
+}
+
+test.describe('Saved views: row links', () => {
+	test('TC-01 a row links to its view in the selected relative time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const href = await savedViews.rowHref(target.id);
+		expect(href.pathname).toBe(LOGS_PATH);
+		expect(href.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+		expect(href.searchParams.get('panelTypes')).toBe('"list"');
+		expect(href.searchParams.get('relativeTime')).toBe('1h');
+		expect(href.searchParams.has('startTime')).toBe(false);
+		expect(href.searchParams.has('endTime')).toBe(false);
+		expect(href.searchParams.get('compositeQuery')).toContain(
+			encodeURIComponent(FRONTEND_FILTER),
+		);
+	});
+
+	test('TC-02 a row links to its view in a custom time range, to the millisecond', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		const range = customRange();
+		await savedViews.openExplorer('logs', range);
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const href = await savedViews.rowHref(target.id);
+		expect(href.searchParams.get('startTime')).toBe(range.startTime);
+		expect(href.searchParams.get('endTime')).toBe(range.endTime);
+		expect(href.searchParams.has('relativeTime')).toBe(false);
+		expect(href.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+	});
+
+	test('TC-03 a plain click opens the view in place and marks its row', async ({
+		savedViews,
+	}) => {
+		const { target, other } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		const documentId = await savedViews.documentId();
+
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+		await savedViews.open(target);
+
+		await savedViews.expectClean(target.displayName);
+		await expect(savedViews.rowLink(target.id)).toHaveAttribute(
+			'aria-current',
+			'page',
+		);
+		expect(savedViews.param('relativeTime')).toBe('1h');
+		expect(await savedViews.documentId()).toBe(documentId);
+		expect(savedViews.newTabCount()).toBe(0);
+
+		await savedViews.search(other.displayName);
+		await expect(savedViews.rowLink(other.id)).not.toHaveAttribute(
+			'aria-current',
+			'page',
+		);
+	});
+
+	for (const gesture of ['modifier', 'middle'] as const) {
+		test(`TC-04 a ${gesture} click opens the view in a new tab and leaves this one alone`, async ({
+			savedViews,
+		}) => {
+			const { target } = await seedTwoViews(savedViews);
+			await savedViews.openExplorer('logs', { relativeTime: '1h' });
+			await savedViews.openList();
+			await savedViews.search(target.displayName);
+			const urlBefore = savedViews.url().href;
+
+			const { savedViews: opened } = await savedViews.openInNewTab(
+				target.id,
+				gesture,
+			);
+			await opened.queryRan(target.filter);
+
+			await opened.expectClean(target.displayName);
+			expect(opened.activeViewId()).toBe(target.id);
+			expect(opened.param('relativeTime')).toBe('1h');
+			await expect(opened.queryBar()).toHaveText(target.filter);
+			expect(savedViews.url().href).toBe(urlBefore);
+			await expect(savedViews.name()).toHaveText('My view');
+		});
+	}
+});
+
+test.describe('Saved views: copied links', () => {
+	test('TC-05 a copied link reopens the view in the same relative time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const copied = new URL(await savedViews.copyLink(target.id));
+		await expect(savedViews.toast('Link copied')).toBeVisible();
+		expect(copied.origin).toBe(savedViews.url().origin);
+		expect(copied.pathname).toBe(LOGS_PATH);
+		expect(copied.searchParams.get('relativeTime')).toBe('1h');
+		expect(copied.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+
+		const { savedViews: reopened } = await savedViews.openLink(copied, target);
+
+		await reopened.expectClean(target.displayName);
+		expect(reopened.activeViewId()).toBe(target.id);
+		expect(reopened.param('relativeTime')).toBe('1h');
+		await expect(reopened.queryBar()).toHaveText(target.filter);
+	});
+
+	test('TC-06 a copied link reopens the view in the same custom time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		const range = customRange();
+		await savedViews.openExplorer('logs', range);
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const copied = new URL(await savedViews.copyLink(target.id));
+		expect(copied.searchParams.get('startTime')).toBe(range.startTime);
+		expect(copied.searchParams.get('endTime')).toBe(range.endTime);
+		expect(copied.searchParams.has('relativeTime')).toBe(false);
+
+		const { savedViews: reopened } = await savedViews.openLink(copied, target);
+
+		await reopened.expectClean(target.displayName);
+		expect(reopened.param('startTime')).toBe(range.startTime);
+		expect(reopened.param('endTime')).toBe(range.endTime);
+	});
+});