fix(notification-channels): match the relaxed channel checks and pick webhook auth with a radio (#13276)

#### Description

- Drops the Google Chat, Jira and incident.io URL checks the API removed
in #13008, so a proxy or relay in front of those vendors can be saved.
- Webhook auth is now a None / Basic auth / Bearer token radio. Only the
chosen credentials are shown and sent, so a username plus a bearer token
can no longer reach the API and fail.
- A webhook username without a password is now allowed, matching the
API.
- The form now catches what the API still rejects: a Slack field without
a value, a Slack button without a URL or name, and an incident.io token
with a `Bearer ` prefix or surrounding spaces.
- Form errors are now nested by field path, so a Slack row error shows
under its row.

#### Issues closed by this PR

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


#### Screenshots / Screen Recordings

Visual diff of every `Pages/Alerts/Channels` story, dark and light,
against the merge-base:
https://claude.ai/artifact/GBULJmZFpzhe5bRviSnBoY

- 4 pairs changed: the webhook form on the new and edit pages.
- 16 new pairs, from 8 new stories.
- 125 of 148 pairs are pixel-identical.
- 3 pairs moved for reasons outside this change: a focus ring present in
one run only.

.claude/skills/signoz-page-story/references/controls.md

@@ -46,9 +46,9 @@ One endpoint feeding several widgets stays one handler that reads the request. `
 
 ```ts
 rest.get(
-	'http://localhost/api/v2/saved_views',
+	'http://localhost/api/v1/explorer/views',
 	response.json((req) =>
-		savedViews(values.savedViews, req.url.searchParams.get('source') ?? 'logs'),
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
 	),
 ),
 ```

docs/api/openapi.yml

@@ -31970,6 +31970,132 @@ paths:
         content:
           application/json:
             examples:
+              ai_traces_raw:
+                summary: 'Raw: LLM, tool, and agent spans of one service''s AI traces
+                  with many tool calls'
+                value:
+                  compositeQuery:
+                    queries:
+                    - spec:
+                        filter:
+                          expression: service.name = 'ai-agent' AND trace.tool_call_count
+                            > 10
+                        limit: 100
+                        name: A
+                        order:
+                        - direction: desc
+                          key:
+                            fieldContext: span
+                            name: timestamp
+                        signal: traces
+                      type: builder_ai_query
+                  end: 1640998800000
+                  requestType: raw
+                  schemaVersion: v1
+                  start: 1640995200000
+              ai_traces_raw_select_fields:
+                summary: 'Raw: the same spans with the span name and gen_ai model,
+                  tool, and token fields selected'
+                value:
+                  compositeQuery:
+                    queries:
+                    - spec:
+                        filter:
+                          expression: service.name = 'ai-agent' AND trace.tool_call_count
+                            > 10
+                        limit: 100
+                        name: A
+                        order:
+                        - direction: desc
+                          key:
+                            fieldContext: span
+                            name: timestamp
+                        selectFields:
+                        - fieldContext: span
+                          name: name
+                        - fieldContext: attribute
+                          name: gen_ai.request.model
+                        - fieldContext: attribute
+                          name: gen_ai.tool.name
+                        - fieldContext: attribute
+                          name: gen_ai.usage.input_tokens
+                        - fieldContext: attribute
+                          name: gen_ai.usage.output_tokens
+                        signal: traces
+                      type: builder_ai_query
+                  end: 1640998800000
+                  requestType: raw
+                  schemaVersion: v1
+                  start: 1640995200000
+              ai_traces_scalar:
+                summary: 'Scalar: average per-trace AI cost by model'
+                value:
+                  compositeQuery:
+                    queries:
+                    - spec:
+                        aggregations:
+                        - expression: avg(trace.estimated_total_cost)
+                        groupBy:
+                        - fieldContext: attribute
+                          name: gen_ai.request.model
+                        limit: 10
+                        name: A
+                        order:
+                        - direction: desc
+                          key:
+                            name: avg(trace.estimated_total_cost)
+                        signal: traces
+                      type: builder_ai_query
+                  end: 1640998800000
+                  requestType: scalar
+                  schemaVersion: v1
+                  start: 1640995200000
+              ai_traces_time_series:
+                summary: 'Time series: per-trace AI cost by model'
+                value:
+                  compositeQuery:
+                    queries:
+                    - spec:
+                        aggregations:
+                        - expression: sum(trace.estimated_total_cost)
+                        groupBy:
+                        - fieldContext: attribute
+                          name: gen_ai.request.model
+                        limit: 10
+                        name: A
+                        order:
+                        - direction: desc
+                          key:
+                            name: sum(trace.estimated_total_cost)
+                        signal: traces
+                        stepInterval: 60s
+                      type: builder_ai_query
+                  end: 1640998800000
+                  requestType: time_series
+                  schemaVersion: v1
+                  start: 1640995200000
+              ai_traces_trace:
+                summary: 'Trace list: AI traces with many tool calls, most expensive
+                  first'
+                value:
+                  compositeQuery:
+                    queries:
+                    - spec:
+                        filter:
+                          expression: trace.tool_call_count > 10 AND trace.distinct_tool_count
+                            < 3
+                        limit: 10
+                        name: A
+                        order:
+                        - direction: desc
+                          key:
+                            name: trace.estimated_total_cost
+                        signal: traces
+                      type: builder_ai_query
+                  end: 1640998800000
+                  requestType: trace
+                  schemaVersion: v1
+                  start: 1640995200000
               clickhouse_sql_logs_raw:
                 summary: 'ClickHouse SQL: raw logs with resource filter'
                 value:

frontend/.storybook/preview.tsx

@@ -127,6 +127,7 @@ const preview: Preview = {
 							'Detail',
 							[
 								'Overview',
+								'Panels',
 								'Settings',
 								'Variables',
 								'New Variable',
@@ -140,7 +141,7 @@ const preview: Preview = {
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',
-						['Explorer', 'Live Tail', 'Pipelines', 'Settings'],
+						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
 						'Traces',
 						['Explorer', 'Trace Details', 'Funnel Details'],
 						'Metrics',

frontend/public/locales/en-GB/channels.json

@@ -17,11 +17,9 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to.",
   "field_jira_site": "Site URL",
-  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
-  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net, or a proxy in front of it.",
   "jira_required_fields": "Site URL, email, API token, project and issue type are required",
   "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
   "jira_service_account_tip_link": "Learn how",
@@ -82,7 +80,6 @@
   "field_incidentio_description": "Description",
   "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
   "incidentio_required_fields": "Alert source URL and token are required",
-  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
   "field_incidentio_metadata": "Additional metadata",
   "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
   "placeholder_incidentio_metadata_key": "Key",
@@ -92,8 +89,8 @@
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",
-  "field_webhook_username": "User Name (optional)",
-  "field_webhook_password": "Password (optional)",
+  "field_webhook_username": "Username",
+  "field_webhook_password": "Password",
   "field_pager_routing_key": "Routing Key",
   "field_pager_description": "Description",
   "field_pager_severity": "Severity",
@@ -112,13 +109,10 @@
   "help_pager_group": "A cluster or grouping of sources",
   "help_pager_component": "The part or component of the affected system that is broke",
   "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
-  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
-  "help_webhook_password": "Specify a password or bearer token",
   "help_pager_description": "Shows up as description in pagerduty",
   "channel_creation_done": "Successfully created the channel",
   "channel_edit_done": "Channels Edited Successfully",
   "selected_channel_invalid": "Channel type selected is invalid",
-  "username_no_password": "A Password must be provided with user name",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",

frontend/public/locales/en-GB/explorer.json

@@ -0,0 +1,3 @@
+{
+    "name_of_the_view": "Name of the view"
+}

frontend/public/locales/en-GB/titles.json

@@ -47,6 +47,7 @@
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/public/locales/en/channels.json

@@ -25,11 +25,9 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to.",
   "field_jira_site": "Site URL",
-  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
-  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net, or a proxy in front of it.",
   "jira_required_fields": "Site URL, email, API token, project and issue type are required",
   "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
   "jira_service_account_tip_link": "Learn how",
@@ -90,7 +88,8 @@
   "field_incidentio_description": "Description",
   "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
   "incidentio_required_fields": "Alert source URL and token are required",
-  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
+  "incidentio_token_bearer_prefix": "Paste the token only, without the Bearer prefix",
+  "incidentio_token_whitespace": "Remove the spaces around the token",
   "field_incidentio_metadata": "Additional metadata",
   "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
   "placeholder_incidentio_metadata_key": "Key",
@@ -116,6 +115,7 @@
   "field_slack_field_short": "Short",
   "add_slack_field": "Add field",
   "remove_slack_field": "Remove field",
+  "slack_field_value_required": "Enter a value for this field",
   "field_slack_actions": "Actions",
   "help_slack_actions": "Buttons rendered under the attachment. A button with a URL links out.",
   "label_slack_action_text": "Text",
@@ -133,6 +133,7 @@
   "placeholder_slack_action_style": "Style: default, primary or danger",
   "placeholder_slack_action_confirm": "Confirmation prompt (optional)",
   "add_slack_action": "Add action",
+  "slack_action_url_or_name_required": "Enter a URL or a name for this button",
   "remove_slack_action": "Remove action",
   "field_opsgenie_api_key": "API Key",
   "field_opsgenie_description": "Description",
@@ -143,9 +144,15 @@
   "help_email_html": "Send email in html format",
   "field_email_html": "Email body template",
   "placeholder_email_html": "Email body template",
-  "field_webhook_username": "User Name (optional)",
-  "field_webhook_password": "Password (optional)",
-  "field_webhook_bearer_token": "Bearer token (optional)",
+  "field_webhook_username": "Username",
+  "field_webhook_password": "Password",
+  "field_webhook_bearer_token": "Bearer token",
+  "field_webhook_auth": "Authentication",
+  "option_webhook_auth_none": "None",
+  "option_webhook_auth_basic": "Basic auth",
+  "option_webhook_auth_bearer": "Bearer token",
+  "webhook_basic_auth_required": "Enter a username or password",
+  "webhook_bearer_token_required": "Enter a bearer token",
   "field_pager_routing_key": "Routing Key",
   "field_pager_description": "Description",
   "field_pager_severity": "Severity",
@@ -168,9 +175,7 @@
   "help_pager_group": "A cluster or grouping of sources",
   "help_pager_component": "The part or component of the affected system that is broke",
   "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
-  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
-  "help_webhook_password": "Specify a password or bearer token",
-  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header. Leave the username and password empty when using it.",
+  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header.",
   "help_pager_description": "Shows up as description in pagerduty",
   "help_opsgenie_message": "Shows up as message in opsgenie",
   "help_opsgenie_priority": "Priority of the incident",
@@ -178,7 +183,6 @@
   "channel_creation_done": "Successfully created the channel",
   "channel_edit_done": "Channels Edited Successfully",
   "selected_channel_invalid": "Channel type selected is invalid",
-  "username_no_password": "A Password must be provided with user name",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",

frontend/public/locales/en/explorer.json

@@ -0,0 +1,4 @@
+{
+    "name_of_the_view": "Name of the view",
+    "delete_confirm_message": "Are you sure you want to delete {{viewName}} view? Deleting a view is irreversible and cannot be undone."
+}

frontend/public/locales/en/titles.json

@@ -50,6 +50,8 @@
 	"WORKSPACE_SUSPENDED": "SigNoz | Workspace Suspended",
 	"WORKSPACE_ACCESS_RESTRICTED": "SigNoz | Workspace Access Restricted",
 	"SUPPORT": "SigNoz | Support",
+	"LOGS_SAVE_VIEWS": "SigNoz | Logs Saved Views",
+	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"TRACES_FUNNELS": "SigNoz | Traces Funnels",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
@@ -64,8 +66,10 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -303,10 +303,10 @@ describe('PrivateRoute', () => {
 		it.each([
 			['/logs-save-views', ROUTES.LOGS_EXPLORER],
 			['/traces-save-views', ROUTES.TRACES_EXPLORER],
-			['/logs/saved-views', ROUTES.LOGS_EXPLORER],
-			['/traces/saved-views', ROUTES.TRACES_EXPLORER],
-			['/metrics-explorer/views', ROUTES.METRICS_EXPLORER_EXPLORER],
-			['/meter/explorer/views', ROUTES.METER_EXPLORER],
+			[ROUTES.LOGS_SAVE_VIEWS, ROUTES.LOGS_EXPLORER],
+			[ROUTES.TRACES_SAVE_VIEWS, ROUTES.TRACES_EXPLORER],
+			[ROUTES.METRICS_EXPLORER_VIEWS, ROUTES.METRICS_EXPLORER_EXPLORER],
+			[ROUTES.METER_EXPLORER_VIEWS, ROUTES.METER_EXPLORER],
 		])('should redirect the old views route %s to %s', (from, to) => {
 			renderPrivateRoute({ initialRoute: from });
 

frontend/src/AppRoutes/index.tsx

@@ -18,6 +18,7 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -65,6 +66,7 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
@@ -254,8 +256,18 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		// The bottom strip carries Support, so the floating bubble goes entirely.
-		window.Pylon?.('hideChatBubble');
-	}, [pathname]);
+		if (
+			isSavedViewEnabled ||
+			pathname === ROUTES.ONBOARDING ||
+			pathname.startsWith('/public/dashboard/') ||
+			pathname === '/ai-assistant' ||
+			pathname.startsWith('/ai-assistant/')
+		) {
+			window.Pylon?.('hideChatBubble');
+		} else {
+			window.Pylon?.('showChatBubble');
+		}
+	}, [pathname, isSavedViewEnabled]);
 
 	// Identity for the Pylon widget. Whether this user gets Pylon at all is
 	// `useChatSupport`'s call — this only fills in who they are.

frontend/src/AppRoutes/pageComponents.ts

@@ -26,6 +26,10 @@ export const ServiceMapPage = Loadable(
 	() => import(/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap'),
 );
 
+export const LogsSaveViews = Loadable(
+	() => import(/* webpackChunkName: "LogsSaveViews" */ 'pages/LogsModulePage'), // TODO: Add a wrapper so that the same component can be used in traces
+);
+
 export const TracesExplorer = Loadable(
 	() =>
 		import(
@@ -33,6 +37,11 @@ export const TracesExplorer = Loadable(
 		),
 );
 
+export const TracesSaveViews = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Save Views" */ 'pages/TracesModulePage'),
+);
+
 export const TracesFunnels = Loadable(
 	() =>
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),

frontend/src/AppRoutes/routes.ts

@@ -26,6 +26,7 @@ import {
 	Login,
 	Logs,
 	LogsIndexToFields,
+	LogsSaveViews,
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
@@ -47,6 +48,7 @@ import {
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
+	TracesSaveViews,
 	UnAuthorized,
 	UsageExplorerPage,
 	WorkspaceAccessRestricted,
@@ -118,6 +120,13 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'SERVICE_MAP',
 	},
+	{
+		path: ROUTES.LOGS_SAVE_VIEWS,
+		component: LogsSaveViews,
+		isPrivate: true,
+		exact: true,
+		key: 'LOGS_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -209,6 +218,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
+	{
+		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
+		component: TracesSaveViews,
+		isPrivate: true,
+		key: 'TRACES_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
 		exact: true,
@@ -398,6 +414,13 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 		exact: true,
@@ -420,6 +443,13 @@ const routes: AppRoutes[] = [
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
+		component: MeterExplorerPage,
+		key: 'METER_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.API_MONITORING,
 		exact: true,

frontend/src/api/saveView/deleteView.ts

@@ -0,0 +1,5 @@
+import axios from 'api';
+import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
+
+export const deleteView = (uuid: string): Promise<DeleteViewPayloadProps> =>
+	axios.delete(`/explorer/views/${uuid}`);

frontend/src/api/saveView/getAllViews.ts

@@ -0,0 +1,9 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { AllViewsProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const getAllViews = (
+	sourcepage: DataSource | 'meter',
+): Promise<AxiosResponse<AllViewsProps>> =>
+	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

frontend/src/api/saveView/getViewById.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { ViewProps } from 'types/api/saveViews/types';
+
+/**
+ * Fetches a single saved view by ID (`GET /api/v1/explorer/views/{viewId}`).
+ *
+ * Hand-maintained alongside the other `api/saveView/*` clients — explorer views
+ * are not in `docs/api/openapi.yml`, so Orval does not generate a hook here
+ * (unlike e.g. `useGetChannelByID` under `api/generated/services/channels`).
+ *
+ * Used by the AI assistant "Open view" action to load `compositeQuery` and
+ * navigate to the correct explorer without listing every view per source page.
+ * See `container/AIAssistant/components/ActionsSection/utils/openSavedView.ts`.
+ */
+export interface GetViewByIdProps {
+	status: string;
+	data: ViewProps;
+}
+
+export const getViewById = (
+	viewKey: string,
+): Promise<AxiosResponse<GetViewByIdProps>> =>
+	axios.get(`/explorer/views/${viewKey}`);

frontend/src/api/saveView/saveView.ts

@@ -0,0 +1,16 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
+
+export const saveView = ({
+	compositeQuery,
+	sourcePage,
+	viewName,
+	extraData,
+}: SaveViewProps): Promise<AxiosResponse<SaveViewPayloadProps>> =>
+	axios.post('/explorer/views', {
+		name: viewName,
+		sourcePage,
+		compositeQuery,
+		extraData,
+	});

frontend/src/api/saveView/updateView.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import {
+	UpdateViewPayloadProps,
+	UpdateViewProps,
+} from 'types/api/saveViews/types';
+
+export const updateView = ({
+	compositeQuery,
+	viewName,
+	extraData,
+	sourcePage,
+	viewKey,
+}: UpdateViewProps): Promise<UpdateViewPayloadProps> =>
+	axios.put(`/explorer/views/${viewKey}`, {
+		name: viewName,
+		compositeQuery,
+		extraData,
+		sourcePage,
+	});

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import logEvent from 'api/common/logEvent';
+import { MessageSquareText } from '@signozhq/icons';
+
+export default function ChatSupportGateway(): JSX.Element {
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+	const { pathname } = useLocation();
+
+	return (
+		<>
+			<div className="chat-support-gateway">
+				<Button
+					className="chat-support-gateway-btn"
+					onClick={(): void => {
+						logEvent('Disabled Chat Support: Clicked', {
+							source: `chat support icon`,
+							page: pathname,
+						});
+
+						setIsAddCreditCardModalOpen(true);
+					}}
+				>
+					<MessageSquareText size={24} />
+				</Button>
+			</div>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
+		</>
+	);
+}

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -0,0 +1,252 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { Typography } from '@signozhq/ui/typography';
+import axios from 'axios';
+import TextToolTip from 'components/TextToolTip';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { useUpdateView } from 'hooks/saveViews/useUpdateView';
+import useErrorNotification from 'hooks/useErrorNotification';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ExploreHeaderToolTip, SaveButtonText } from './constants';
+import MenuItemGenerator from './MenuItemGenerator';
+import SaveViewWithName from './SaveViewWithName';
+import {
+	DropDownOverlay,
+	ExplorerCardHeadContainer,
+	OffSetCol,
+} from './styles';
+import { ExplorerCardProps } from './types';
+import { deleteViewHandler } from './utils';
+import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
+
+function ExplorerCard({
+	sourcepage,
+	children,
+}: ExplorerCardProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [, setCopyUrl] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	const onCopyUrlHandler = (): void => {
+		setCopyUrl(window.location.href);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
+	const {
+		currentQuery,
+		panelType,
+		redirectWithQueryBuilderData,
+		updateAllQueriesOperators,
+		isStagedQueryUpdated,
+	} = useQueryBuilder();
+
+	const {
+		data: viewsData,
+		isLoading,
+		error,
+		isRefetching,
+		refetch: refetchAllView,
+	} = useGetAllViews(sourcepage);
+
+	useErrorNotification(error);
+
+	const handleOpenChange = (newOpen = false): void => {
+		setIsOpen(newOpen);
+	};
+
+	const { viewName, viewKey } = useGetSavedViewParams();
+
+	const { options } = useOptionsMenu({
+		storageKey:
+			sourcepage === DataSource.TRACES
+				? LOCALSTORAGE.TRACES_LIST_OPTIONS
+				: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: sourcepage,
+		aggregateOperator: StringOperators.NOOP,
+	});
+
+	const isQueryUpdated = isStagedQueryUpdated(
+		viewsData?.data?.data,
+		viewKey,
+		options,
+	);
+
+	const { mutateAsync: updateViewAsync } = useUpdateView({
+		compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+		viewKey,
+		extraData: '',
+		sourcePage: sourcepage,
+		viewName,
+	});
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(viewKey);
+
+	const showErrorNotification = (err: Error): void => {
+		notifications.error({
+			message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+		});
+	};
+
+	const onDeleteHandler = (): void =>
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: viewKey,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage: sourcepage,
+		});
+
+	const onUpdateQueryHandler = (): void => {
+		updateViewAsync(
+			{
+				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+				viewKey,
+				extraData: '',
+				sourcePage: sourcepage,
+				viewName,
+			},
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'View Updated Successfully',
+					});
+					refetchAllView();
+				},
+				onError: (err) => {
+					showErrorNotification(err);
+				},
+			},
+		);
+	};
+
+	const moreOptionItems: DropdownItemType[] = [
+		{
+			type: 'item',
+			value: 'delete',
+			label: <Typography.Text strong>Delete</Typography.Text>,
+			onClick: onDeleteHandler,
+			prefix: <Trash2 size="md" />,
+		},
+	];
+
+	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
+	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
+
+	const showSaveView = false;
+
+	return (
+		<>
+			{showSaveView && (
+				<ExplorerCardHeadContainer size="small">
+					<Row align="middle">
+						<Col span={6}>
+							<Space>
+								<Typography>Query Builder</Typography>
+								<TextToolTip
+									url={ExploreHeaderToolTip.url}
+									text={ExploreHeaderToolTip.text}
+									useFilledIcon={false}
+								/>
+							</Space>
+						</Col>
+						<OffSetCol span={18}>
+							<Space size="large">
+								{viewsData?.data.data && viewsData?.data.data.length && (
+									<Space>
+										<Select
+											getPopupContainer={popupContainer}
+											loading={isLoading || isRefetching}
+											showSearch
+											placeholder="Select a view"
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
+											value={viewName || undefined}
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.id} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.id}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
+									</Space>
+								)}
+								{isQueryUpdated && (
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
+										Save changes
+									</Button>
+								)}
+								<Popover
+									getPopupContainer={popupContainer}
+									placement="bottomLeft"
+									trigger="click"
+									content={
+										<SaveViewWithName
+											sourcePage={sourcepage}
+											handlePopOverClose={handleOpenChange}
+											refetchAllView={refetchAllView}
+										/>
+									}
+									showArrow={false}
+									open={isOpen}
+									onOpenChange={handleOpenChange}
+								>
+									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
+										data-testid="traces-save-view-action"
+									>
+										{isQueryUpdated
+											? SaveButtonText.SAVE_AS_NEW_VIEW
+											: SaveButtonText.SAVE_VIEW}
+									</Button>
+								</Popover>
+								<Share2 onClick={onCopyUrlHandler} size="md" />
+								{viewKey && (
+									<Dropdown
+										items={moreOptionItems}
+										nativeButton
+										align="end"
+										side="bottom"
+									>
+										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
+									</Dropdown>
+								)}
+							</Space>
+						</OffSetCol>
+					</Row>
+				</ExplorerCardHeadContainer>
+			)}
+
+			<div>{children}</div>
+		</>
+	);
+}
+
+export default ExplorerCard;

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -0,0 +1,103 @@
+import { MouseEvent, useCallback } from 'react';
+import { Trash2 } from '@signozhq/icons';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
+import { useNotifications } from 'hooks/useNotifications';
+
+import { MenuItemContainer } from './styles';
+import { MenuItemLabelGeneratorProps } from './types';
+import {
+	deleteViewHandler,
+	getViewDetailsUsingViewKey,
+	trimViewName,
+} from './utils';
+
+function MenuItemGenerator({
+	viewName,
+	viewKey,
+	createdBy,
+	uuid,
+	viewData,
+	refetchAllView,
+	sourcePage,
+}: MenuItemLabelGeneratorProps): JSX.Element {
+	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
+		useQueryBuilder();
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+	const { notifications } = useNotifications();
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(uuid);
+
+	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
+		event.stopPropagation();
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: uuid,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage,
+		});
+	};
+
+	const onMenuItemSelectHandler = useCallback(
+		({ key }: { key: string }): void => {
+			const currentViewDetails = getViewDetailsUsingViewKey(key, viewData);
+			if (!currentViewDetails) {
+				return;
+			}
+			const { query, name, id, panelType: currentPanelType } = currentViewDetails;
+
+			handleExplorerTabChange(currentPanelType, {
+				query,
+				viewName: name,
+				viewKey: id,
+			});
+		},
+		[viewData, handleExplorerTabChange],
+	);
+
+	const onLabelClickHandler = (): void => {
+		onMenuItemSelectHandler({
+			key: uuid,
+		});
+	};
+
+	const newViewName = trimViewName(viewName);
+
+	return (
+		<MenuItemContainer onClick={onLabelClickHandler}>
+			<Row justify="space-between">
+				<Col span={22}>
+					<Row>
+						<Tooltip title={viewName}>
+							<Typography.Text strong>{newViewName}</Typography.Text>
+						</Tooltip>
+					</Row>
+					<Row>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
+					</Row>
+				</Col>
+				<Col span={2}>
+					<Typography.Link>
+						<Trash2
+							role="img"
+							aria-label="Delete view"
+							onClick={onDeleteHandler}
+							size="md"
+						/>
+					</Typography.Link>
+				</Col>
+			</Row>
+		</MenuItemContainer>
+	);
+}
+
+export default MenuItemGenerator;

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSaveView } from 'hooks/saveViews/useSaveView';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+
+import { SaveButton } from './styles';
+import { SaveViewFormProps, SaveViewWithNameProps } from './types';
+import { saveViewHandler } from './utils';
+
+function SaveViewWithName({
+	sourcePage,
+	handlePopOverClose,
+	refetchAllView,
+}: SaveViewWithNameProps): JSX.Element {
+	const [form] = Form.useForm<SaveViewFormProps>();
+	const { t } = useTranslation(['explorer']);
+	const { currentQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
+	const { notifications } = useNotifications();
+	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
+
+	const { isLoading, mutateAsync: saveViewAsync } = useSaveView({
+		viewName: form.getFieldValue('viewName'),
+		compositeQuery,
+		sourcePage,
+		extraData: '',
+	});
+
+	const onSaveHandler = (): void => {
+		saveViewHandler({
+			compositeQuery,
+			handlePopOverClose,
+			extraData: '',
+			notifications,
+			panelType: panelType || PANEL_TYPES.LIST,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			saveViewAsync,
+			sourcePage,
+			viewName: form.getFieldValue('viewName'),
+			form,
+		});
+	};
+
+	return (
+		<Card>
+			<Typography>{t('name_of_the_view')}</Typography>
+			<Form form={form} onFinish={onSaveHandler} requiredMark>
+				<Form.Item
+					name={['viewName']}
+					required
+					rules={[
+						{
+							required: true,
+							message: 'Please enter view name',
+						},
+					]}
+				>
+					<Input placeholder="Enter Name" />
+				</Form.Item>
+				<SaveButton
+					htmlType="submit"
+					type="primary"
+					loading={isLoading}
+					data-testid="save-view-name-action-button"
+				>
+					Save
+				</SaveButton>
+			</Form>
+		</Card>
+	);
+}
+
+export default SaveViewWithName;

frontend/src/components/ExplorerCard/__mock__/viewData.ts

@@ -0,0 +1,32 @@
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const viewMockData: ViewProps[] = [
+	{
+		id: 'view1',
+		name: 'View 1',
+		createdBy: 'User 1',
+		category: 'category 1',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:31:00.000Z',
+		updatedAt: '2021-07-07T06:33:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 1',
+	},
+	{
+		id: 'view2',
+		name: 'View 2',
+		createdBy: 'User 2',
+		category: 'category 2',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:30:00.000Z',
+		updatedAt: '2021-07-07T06:30:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 2',
+	},
+];

frontend/src/components/ExplorerCard/constants.ts

@@ -0,0 +1,9 @@
+export const ExploreHeaderToolTip = {
+	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	text: 'More details on how to use query builder',
+};
+
+export const SaveButtonText = {
+	SAVE_AS_NEW_VIEW: 'Save as new view',
+	SAVE_VIEW: 'Save view',
+};

frontend/src/components/ExplorerCard/styles.ts

@@ -0,0 +1,29 @@
+import { Button, Card, Col } from 'antd';
+import styled, { CSSProperties } from 'styled-components';
+
+export const ExplorerCardHeadContainer = styled(Card)`
+	margin: 1rem 0;
+	padding: 0;
+`;
+
+export const OffSetCol = styled(Col)`
+	text-align: right;
+`;
+
+export const SaveButton = styled(Button)`
+	&&& {
+		margin: 1rem 0;
+		width: 5rem;
+	}
+`;
+
+export const DropDownOverlay: CSSProperties = {
+	maxHeight: '20rem',
+	overflowY: 'auto',
+	width: '20rem',
+	padding: 0,
+};
+
+export const MenuItemContainer = styled(Card)`
+	padding: 0;
+`;

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import ExplorerCard from '../ExplorerCard';
+
+const historyReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
+	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useGetAllViews', () => ({
+	useGetAllViews: jest.fn(() => ({
+		data: { data: { data: viewMockData } },
+		isLoading: false,
+		error: null,
+		isRefetching: false,
+		refetch: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useUpdateView', () => ({
+	useUpdateView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useDeleteView', () => ({
+	useDeleteView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+// Mock usePreferenceSync
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 1,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
+describe('ExplorerCard', () => {
+	it('renders a card with a title and a description', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Query Builder')).not.toBeInTheDocument();
+	});
+
+	it('renders a save view button', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Save view')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import MenuItemGenerator from '../MenuItemGenerator';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
+	useForm: jest.fn().mockReturnValue({
+		onFinish: jest.fn(),
+	}),
+}));
+
+describe('MenuItemGenerator', () => {
+	it('should render MenuItemGenerator component', () => {
+		const screen = render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		expect(screen.getByText(viewMockData[0].name)).toBeInTheDocument();
+	});
+
+	it('should call onMenuItemSelectHandler on click of MenuItemGenerator', () => {
+		render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		const spanElement = screen.getByRole('img', {
+			name: /delete view/i,
+		});
+
+		expect(spanElement).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -0,0 +1,63 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { fireEvent, render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SaveViewWithName from '../SaveViewWithName';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useSaveView', () => ({
+	useSaveView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+describe('SaveViewWithName', () => {
+	it('should render SaveViewWithName component', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+
+	it('should call saveViewAsync on click of Save button', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		fireEvent.click(screen.getByText('Save'));
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/types.ts

@@ -0,0 +1,92 @@
+import { UseMutateAsyncFunction } from 'react-query';
+import { FormInstance } from 'antd';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { AxiosResponse } from 'axios';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	DeleteViewPayloadProps,
+	SaveViewPayloadProps,
+	SaveViewProps,
+	ViewProps,
+} from 'types/api/saveViews/types';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
+
+export interface ExplorerCardProps {
+	sourcepage: DataSource;
+	children: React.ReactNode;
+}
+
+export type GetViewDetailsUsingViewKey = (
+	viewKey: string,
+	data: ViewProps[] | undefined,
+) =>
+	| {
+			query: Query;
+			name: string;
+			id: string;
+			panelType: PANEL_TYPES;
+			extraData?: string;
+	  }
+	| undefined;
+
+export interface IsQueryUpdatedInViewProps {
+	viewKey: string;
+	data: ViewProps[] | undefined;
+	stagedQuery: Query | null;
+	currentPanelType: PANEL_TYPES | null;
+	options: OptionsQuery;
+}
+
+export interface SaveViewWithNameProps {
+	sourcePage: ExplorerCardProps['sourcepage'];
+	handlePopOverClose: VoidFunction;
+	refetchAllView: VoidFunction;
+}
+
+export interface SaveViewFormProps {
+	viewName: string;
+}
+
+export interface MenuItemLabelGeneratorProps {
+	viewName: string;
+	viewKey: string;
+	createdBy: string;
+	uuid: string;
+	viewData: ViewProps[];
+	refetchAllView: VoidFunction;
+	sourcePage: ExplorerCardProps['sourcepage'];
+}
+
+export interface SaveViewHandlerProps {
+	viewName: string;
+	compositeQuery: ICompositeMetricQuery;
+	sourcePage: ExplorerCardProps['sourcepage'];
+	extraData: string;
+	panelType: PANEL_TYPES | null;
+	notifications: NotificationInstance;
+	refetchAllView: SaveViewWithNameProps['refetchAllView'];
+	saveViewAsync: UseMutateAsyncFunction<
+		AxiosResponse<SaveViewPayloadProps>,
+		Error,
+		SaveViewProps,
+		SaveViewPayloadProps
+	>;
+	handlePopOverClose: SaveViewWithNameProps['handlePopOverClose'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	form: FormInstance<SaveViewFormProps>;
+}
+
+export interface DeleteViewHandlerProps {
+	deleteViewAsync: UseMutateAsyncFunction<DeleteViewPayloadProps, Error, string>;
+	refetchAllView: MenuItemLabelGeneratorProps['refetchAllView'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	notifications: NotificationInstance;
+	panelType: PANEL_TYPES | null;
+	viewKey: string;
+	viewId: string;
+	updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'];
+	sourcePage: ExplorerCardProps['sourcepage'];
+}

frontend/src/components/ExplorerCard/utils.ts

@@ -0,0 +1,204 @@
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import axios from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import isEqual from 'lodash-es/isEqual';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	DeleteViewHandlerProps,
+	GetViewDetailsUsingViewKey,
+	IsQueryUpdatedInViewProps,
+	SaveViewHandlerProps,
+} from './types';
+
+export const showErrorNotification = (
+	notifications: NotificationInstance,
+	err: Error,
+): void => {
+	notifications.error({
+		message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+	});
+};
+
+export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
+	viewKey,
+	data,
+) => {
+	const selectedView = data?.find((view) => view.id === viewKey);
+	if (selectedView) {
+		const { compositeQuery, name, id, extraData } = selectedView;
+		const query = mapQueryDataFromApi(compositeQuery);
+		return { query, name, id, panelType: compositeQuery.panelType, extraData };
+	}
+	return undefined;
+};
+
+export const omitIdFromQuery = (query: Query | null): any => ({
+	...query,
+	builder: {
+		...query?.builder,
+		queryData: query?.builder.queryData.map((queryData) => {
+			const { id: _aggregateAttributeId, ...rest } =
+				queryData.aggregateAttribute || {};
+			const newAggregateAttribute = rest;
+			const newGroupByAttributes = queryData.groupBy.map((groupByAttribute) => {
+				const { id: _groupByAttributeId, ...rest } = groupByAttribute;
+				return rest;
+			});
+			const newItems = queryData.filters?.items?.map((item) => {
+				const { id: _itemId, ...newItem } = item;
+				if (item.key) {
+					const { id: _keyId, ...rest } = item.key;
+					return {
+						...newItem,
+						key: rest,
+					};
+				}
+				return newItem;
+			});
+			return {
+				...queryData,
+				aggregateAttribute: newAggregateAttribute,
+				groupBy: newGroupByAttributes,
+				filters: {
+					...queryData.filters,
+					items: newItems,
+				},
+				limit: queryData.limit ? queryData.limit : 0,
+				offset: queryData.offset ? queryData.offset : 0,
+				pageSize: queryData.pageSize ? queryData.pageSize : 0,
+			};
+		}),
+	},
+});
+
+export const isQueryUpdatedInView = ({
+	viewKey,
+	data,
+	stagedQuery,
+	currentPanelType,
+	options,
+}: IsQueryUpdatedInViewProps): boolean => {
+	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
+	if (!currentViewDetails) {
+		return false;
+	}
+	const { query, panelType, extraData } = currentViewDetails;
+
+	// Omitting id from aggregateAttribute and groupBy
+	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
+
+	if (
+		updatedCurrentQuery?.builder === undefined ||
+		updatedCurrentQuery.clickhouse_sql === undefined ||
+		updatedCurrentQuery.promql === undefined
+	) {
+		return false;
+	}
+	return (
+		panelType !== currentPanelType ||
+		!isEqual(query.builder, updatedCurrentQuery?.builder) ||
+		!isEqual(query.clickhouse_sql, updatedCurrentQuery?.clickhouse_sql) ||
+		!isEqual(query.promql, updatedCurrentQuery?.promql) ||
+		!isEqual(
+			options?.selectColumns,
+			extraData && JSON.parse(extraData)?.selectColumns,
+		) ||
+		(stagedQuery?.builder?.queryData?.[0]?.dataSource === DataSource.LOGS &&
+			(!isEqual(options?.format, extraData && JSON.parse(extraData)?.format) ||
+				!isEqual(options?.maxLines, extraData && JSON.parse(extraData)?.maxLines) ||
+				!isEqual(options?.fontSize, extraData && JSON.parse(extraData)?.fontSize)))
+	);
+};
+
+export const saveViewHandler = ({
+	saveViewAsync,
+	refetchAllView,
+	notifications,
+	handlePopOverClose,
+	viewName,
+	compositeQuery,
+	sourcePage,
+	extraData,
+	redirectWithQueryBuilderData,
+	panelType,
+	form,
+}: SaveViewHandlerProps): void => {
+	saveViewAsync(
+		{
+			viewName,
+			compositeQuery,
+			sourcePage,
+			extraData,
+		},
+		{
+			onSuccess: (data) => {
+				refetchAllView();
+				redirectWithQueryBuilderData(mapQueryDataFromApi(compositeQuery), {
+					[QueryParams.panelTypes]: panelType,
+					[QueryParams.viewName]: viewName,
+					[QueryParams.viewKey]: data.data.data,
+				});
+				notifications.success({
+					message: 'View Saved Successfully',
+				});
+			},
+			onError: (err) => {
+				showErrorNotification(notifications, err);
+			},
+			onSettled: () => {
+				handlePopOverClose();
+				form.resetFields();
+			},
+		},
+	);
+};
+
+export const deleteViewHandler = ({
+	deleteViewAsync,
+	refetchAllView,
+	redirectWithQueryBuilderData,
+	notifications,
+	panelType,
+	viewKey,
+	viewId,
+	updateAllQueriesOperators,
+	sourcePage,
+}: DeleteViewHandlerProps): void => {
+	deleteViewAsync(viewKey, {
+		onSuccess: () => {
+			if (viewId === viewKey) {
+				redirectWithQueryBuilderData(
+					updateAllQueriesOperators(
+						initialQueriesMap[sourcePage],
+						panelType || PANEL_TYPES.LIST,
+						sourcePage,
+					),
+					{
+						[QueryParams.viewName]: '',
+						[QueryParams.panelTypes]: panelType,
+						[QueryParams.viewKey]: '',
+					},
+				);
+			}
+			notifications.success({
+				message: 'View Deleted Successfully',
+			});
+			refetchAllView();
+		},
+		onError: (err) => {
+			showErrorNotification(notifications, err);
+		},
+	});
+};
+
+export const trimViewName = (viewName: string): string => {
+	if (viewName.length > 20) {
+		return `${viewName.substring(0, 20)}...`;
+	}
+	return viewName;
+};

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,5 +1,5 @@
 import { DrawerProps } from 'antd';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

frontend/src/components/Logs/ListLogView/index.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import {
 	getBodyDisplayString,
 	getSanitizedLogBody,

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,14 +1,9 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { getBuilderVariant } from 'lib/query/queryMode';
-import {
-	BuilderVariant,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { QueryBuilderField } from './queryBuilderFields.types';
@@ -64,20 +59,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[config],
 	);
 
-	const isAIQuery =
-		getBuilderVariant(currentQuery.builder) === BuilderVariant.AI;
-
 	useEffect(() => {
 		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
-			// AI queries are traces-only; BAR must not force metrics on them.
-			if (isAIQuery) {
-				handleSetConfig(newPanelType, DataSource.TRACES);
-				return;
-			}
-			if (newPanelType === PANEL_TYPES.BAR) {
-				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
-				return;
-			}
 			handleSetConfig(newPanelType, currentDataSource);
 		}
 	}, [
@@ -86,7 +69,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		initialDataSource,
 		currentDataSource,
 		newPanelType,
-		isAIQuery,
 	]);
 
 	useEffect(() => {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -130,6 +130,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			updateAllQueriesOperators,
 			updateQueriesData,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		} as unknown as QueryBuilderContextType;
 

frontend/src/components/QueryBuilderV2/__tests__/QueryBuilder.PrevQuery.test.tsx

@@ -136,6 +136,7 @@ describe('MetricsSelect - signal source switching (standalone)', () => {
 			updateAllQueriesOperators: ((q: any) => q) as any,
 			updateQueriesData: ((q: any) => q) as any,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		});
 	});
@@ -292,6 +293,7 @@ describe('DataSource change - Logs to Traces', () => {
 			updateAllQueriesOperators: ((q: any) => q) as any,
 			updateQueriesData: ((q: any) => q) as any,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		});
 	});

frontend/src/components/QueryBuilderV2/__tests__/QueryBuilderV2.config.test.tsx

@@ -0,0 +1,109 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { render } from 'tests/test-utils';
+import { QueryMode } from 'types/api/queryBuilder/queryBuilderData';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2 } from '../QueryBuilderV2';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+jest.mock('../QueryV2/QueryV2', () => ({ QueryV2: (): null => null }));
+jest.mock('../QueryV2/QueryFooter/QueryFooter', () => (): null => null);
+
+const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
+
+const aiQuery: Query = {
+	...initialQueriesMap.traces,
+	builder: {
+		...initialQueriesMap.traces.builder,
+		queryData: initialQueriesMap.traces.builder.queryData.map((query) => ({
+			...query,
+			builderQueryType: QueryMode.AI_QUERY_BUILDER,
+		})),
+	},
+};
+
+function mockContext({
+	panelType = null,
+	initialDataSource = null,
+	currentQuery = initialQueriesMap.metrics,
+}: {
+	panelType?: PANEL_TYPES | null;
+	initialDataSource?: DataSource | null;
+	currentQuery?: Query;
+}): jest.Mock {
+	const handleSetConfig = jest.fn();
+	mockedUseQueryBuilder.mockReturnValue({
+		currentQuery,
+		panelType,
+		initialDataSource,
+		handleSetConfig,
+		addNewBuilderQuery: jest.fn(),
+		addNewFormula: jest.fn(),
+		addTraceOperator: jest.fn(),
+		handleRunQuery: jest.fn(),
+	} as unknown as ReturnType<typeof useQueryBuilder>);
+	return handleSetConfig;
+}
+
+describe('QueryBuilderV2 provider config sync', () => {
+	it('leaves the data source unset for a bar panel without a static config', () => {
+		const handleSetConfig = mockContext({});
+
+		render(<QueryBuilderV2 panelType={PANEL_TYPES.BAR} version="v3" />);
+
+		expect(handleSetConfig).toHaveBeenCalledWith(PANEL_TYPES.BAR, null);
+	});
+
+	it('syncs the static data source', () => {
+		const handleSetConfig = mockContext({});
+
+		render(
+			<QueryBuilderV2
+				version="v3"
+				panelType={PANEL_TYPES.BAR}
+				config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
+			/>,
+		);
+
+		expect(handleSetConfig).toHaveBeenCalledWith(
+			PANEL_TYPES.BAR,
+			DataSource.LOGS,
+		);
+	});
+
+	it('keeps an AI query on traces for a bar panel', () => {
+		const handleSetConfig = mockContext({ currentQuery: aiQuery });
+
+		render(
+			<QueryBuilderV2
+				version="v3"
+				panelType={PANEL_TYPES.BAR}
+				config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			/>,
+		);
+
+		expect(handleSetConfig).toHaveBeenCalledWith(
+			PANEL_TYPES.BAR,
+			DataSource.TRACES,
+		);
+	});
+
+	it('does not reset the config when the provider already matches', () => {
+		const handleSetConfig = mockContext({
+			panelType: PANEL_TYPES.TIME_SERIES,
+			initialDataSource: DataSource.TRACES,
+		});
+
+		render(
+			<QueryBuilderV2
+				version="v3"
+				panelType={PANEL_TYPES.TIME_SERIES}
+				config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			/>,
+		);
+
+		expect(handleSetConfig).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.test.ts

@@ -97,7 +97,7 @@ interface ToggleAction {
 	isOnlyOrAllClicked?: boolean;
 	previousState?: CheckedState;
 	sectionType?: SectionType;
-	source?: QuickFiltersSource;
+	quickFilterSource?: QuickFiltersSource;
 	attributeValues?: string[];
 }
 
@@ -117,7 +117,8 @@ function runToggle(c: ToggleCase): { items: SimpleItem[]; expression: string } {
 		currentQuery: buildQuery(initialItems, initialExpression),
 		activeQueryIndex: 0,
 		filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
-		source: c.action.source ?? QuickFiltersSource.LOGS_EXPLORER,
+		quickFilterSource:
+			c.action.quickFilterSource ?? QuickFiltersSource.LOGS_EXPLORER,
 		attributeValues: c.action.attributeValues ?? ['a', 'b', 'c'],
 		value: c.action.value,
 		checked: c.action.checked,
@@ -162,7 +163,7 @@ const TOGGLE_CASES: ToggleCase[] = [
 		action: {
 			value: 'a',
 			checked: false,
-			source: QuickFiltersSource.INFRA_MONITORING,
+			quickFilterSource: QuickFiltersSource.INFRA_MONITORING,
 		},
 		// `nin` is what the source asks for, but re-deriving the expression
 		// normalises it. Nothing observes the difference: both infra pages send
@@ -313,7 +314,7 @@ const TOGGLE_CASES: ToggleCase[] = [
 		action: {
 			value: 'b',
 			checked: false,
-			source: QuickFiltersSource.INFRA_MONITORING,
+			quickFilterSource: QuickFiltersSource.INFRA_MONITORING,
 		},
 		expected: {
 			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -46,14 +46,18 @@ export function removeManagedClauses(expression: string, key: string): string {
 }
 
 // Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
-const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
+const SOURCES_WITH_SHORT_OPERATORS: QuickFiltersSource[] = [
+	QuickFiltersSource.INFRA_MONITORING,
+];
 
 /**
  * Returns the correct NOT_IN operator value based on source.
  * InfraMonitoring backend expects 'nin', others expect 'not in'.
  */
-export function getNotInOperator(source: QuickFiltersSource): string {
-	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
+export function getNotInOperator(
+	quickFilterSource: QuickFiltersSource,
+): string {
+	if (SOURCES_WITH_SHORT_OPERATORS.includes(quickFilterSource)) {
 		return 'nin';
 	}
 	return getOperatorValue('NOT_IN');
@@ -134,7 +138,7 @@ export function applyCheckboxToggle({
 	currentQuery,
 	activeQueryIndex,
 	filter,
-	source,
+	quickFilterSource,
 	attributeValues,
 	value,
 	checked,
@@ -145,7 +149,7 @@ export function applyCheckboxToggle({
 	currentQuery: Query;
 	activeQueryIndex: number;
 	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 	attributeValues: string[];
 	value: string;
 	checked: boolean;
@@ -240,7 +244,7 @@ export function applyCheckboxToggle({
 							if (sectionType === SectionType.RELATED) {
 								const newFilter: TagFilterItem = {
 									id: uuid(),
-									op: getNotInOperator(source),
+									op: getNotInOperator(quickFilterSource),
 									key: filter.attributeKey,
 									value,
 								};
@@ -380,7 +384,7 @@ export function applyCheckboxToggle({
 						if (!checked) {
 							const newFilter = {
 								...currentFilter,
-								op: getNotInOperator(source),
+								op: getNotInOperator(quickFilterSource),
 								value: [currentFilter.value as string, value],
 							};
 							query.filters.items = query.filters.items.map((item) => {
@@ -404,7 +408,9 @@ export function applyCheckboxToggle({
 			// checked=true → user wants to select (IN), checked=false → exclude (NOT IN)
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
-				op: checked ? getOperatorValue(OPERATORS.IN) : getNotInOperator(source),
+				op: checked
+					? getOperatorValue(OPERATORS.IN)
+					: getNotInOperator(quickFilterSource),
 				key: filter.attributeKey,
 				value,
 			};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -14,7 +14,7 @@ import { SectionType } from './v2/itemRules';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 	attributeValues: string[];
 	activeQueryIndex: number;
 	onFilterChange?: ((query: Query) => void) | null;
@@ -38,7 +38,7 @@ interface UseCheckboxFilterActionsReturn {
  */
 function useCheckboxFilterActions({
 	filter,
-	source,
+	quickFilterSource,
 	attributeValues,
 	activeQueryIndex,
 	onFilterChange,
@@ -65,7 +65,7 @@ function useCheckboxFilterActions({
 			currentQuery,
 			activeQueryIndex,
 			filter,
-			source,
+			quickFilterSource,
 			attributeValues,
 			value,
 			checked,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -1,7 +1,6 @@
 import { render, RenderResult } from 'tests/test-utils';
 import { server, rest } from 'mocks-server/server';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -21,7 +20,6 @@ export const DEFAULT_FILTER: IQuickFiltersConfig = {
 		dataType: DataTypes.String,
 		type: 'tag',
 	},
-	dataSource: DataSource.TRACES,
 	defaultOpen: true,
 };
 
@@ -158,7 +156,7 @@ export function renderWithFilter(
 	return render(
 		<CheckboxFilterV2
 			filter={DEFAULT_FILTER}
-			source={QuickFiltersSource.TRACES_EXPLORER}
+			quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 			useFieldApis={{
 				...DEFAULT_USE_FIELD_APIS,
 				existingQuery: 'service.name = "api"',

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -33,7 +33,7 @@ import styles from './CheckboxFilterV2.module.scss';
 
 interface CheckboxFilterV2Props {
 	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
 	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
 	useFieldApis: QuickFilterCheckboxUseFieldApis;
@@ -42,13 +42,18 @@ interface CheckboxFilterV2Props {
 export default function CheckboxFilterV2(
 	props: CheckboxFilterV2Props,
 ): JSX.Element {
-	const { source, filter, onFilterChange, onQuickFilterChange, useFieldApis } =
-		props;
+	const {
+		quickFilterSource,
+		filter,
+		onFilterChange,
+		onQuickFilterChange,
+		useFieldApis,
+	} = props;
 	const [searchText, setSearchText] = useState<string>('');
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 
 	const { currentQuery } = useQueryBuilder();
-	const activeQueryIndex = useActiveQueryIndex(source);
+	const activeQueryIndex = useActiveQueryIndex(quickFilterSource);
 
 	const {
 		isOpen,
@@ -75,7 +80,7 @@ export default function CheckboxFilterV2(
 		searchText,
 		existingQuery,
 		metricNamespace: useFieldApis.metricNamespace,
-		source,
+		quickFilterSource,
 		startUnixMilli: useFieldApis.startUnixMilli,
 		endUnixMilli: useFieldApis.endUnixMilli,
 		enabled: isOpen,
@@ -104,7 +109,7 @@ export default function CheckboxFilterV2(
 
 	const { onChange, onClear } = useCheckboxFilterActions({
 		filter,
-		source,
+		quickFilterSource,
 		attributeValues,
 		activeQueryIndex,
 		onFilterChange,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.aiObservability.test.tsx

@@ -25,7 +25,7 @@ describe('CheckboxFilterV2 - AI observability routing', () => {
 		render(
 			<CheckboxFilterV2
 				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.AI_OBSERVABILITY}
+				quickFilterSource={QuickFiltersSource.AI_OBSERVABILITY}
 				useFieldApis={DEFAULT_USE_FIELD_APIS}
 			/>,
 		);
@@ -44,7 +44,7 @@ describe('CheckboxFilterV2 - AI observability routing', () => {
 		render(
 			<CheckboxFilterV2
 				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.AI_OBSERVABILITY}
+				quickFilterSource={QuickFiltersSource.AI_OBSERVABILITY}
 				useFieldApis={DEFAULT_USE_FIELD_APIS}
 			/>,
 		);
@@ -59,6 +59,8 @@ describe('CheckboxFilterV2 - AI observability routing', () => {
 		expect(params.get('endUnixMilli')).toBe(
 			String(DEFAULT_USE_FIELD_APIS.endUnixMilli),
 		);
+		expect(params.get('signal')).toBeNull();
+		expect(params.get('source')).toBeNull();
 	});
 
 	it('keeps non-AI sources on the signal-wide endpoint', async () => {
@@ -70,7 +72,7 @@ describe('CheckboxFilterV2 - AI observability routing', () => {
 		render(
 			<CheckboxFilterV2
 				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.TRACES_EXPLORER}
+				quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 				useFieldApis={DEFAULT_USE_FIELD_APIS}
 			/>,
 		);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -50,7 +50,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'custom.query = "value"',
@@ -82,7 +82,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: null,
@@ -116,7 +116,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
 				/>,
 				undefined,
@@ -154,7 +154,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
 				/>,
 				undefined,
@@ -185,7 +185,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
 				/>,
 				undefined,
@@ -222,7 +222,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
 				/>,
 				undefined,
@@ -264,7 +264,7 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
 				/>,
 				undefined,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.fieldApis.test.tsx

@@ -0,0 +1,48 @@
+import { screen } from '@testing-library/react';
+import {
+	TelemetrytypesSignalDTO,
+	TelemetrytypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - field APIs', () => {
+	it('sends the signal and source of the quick filter source to the signal-wide endpoint', async () => {
+		const requests: URLSearchParams[] = [];
+		server.use(
+			rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+				requests.push(req.url.searchParams);
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: { values: { stringValues: ['ingest'] } },
+					}),
+				);
+			}),
+		);
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				quickFilterSource={QuickFiltersSource.METER_EXPLORER}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await expect(screen.findByText('ingest')).resolves.toBeInTheDocument();
+		expect(requests[0].get('signal')).toBe(TelemetrytypesSignalDTO.metrics);
+		expect(requests[0].get('source')).toBe(TelemetrytypesSourceDTO.meter);
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -72,7 +72,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -101,7 +101,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -119,7 +119,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -173,7 +173,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -240,7 +240,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -288,7 +288,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -330,7 +330,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -394,7 +394,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -440,7 +440,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -468,7 +468,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -490,7 +490,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -516,7 +516,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -568,7 +568,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -601,7 +601,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -627,7 +627,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -652,7 +652,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -691,7 +691,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -714,7 +714,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 					onFilterChange={onFilterChange}
 				/>,
@@ -761,7 +761,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 					onFilterChange={onFilterChange}
 				/>,
@@ -837,7 +837,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 					onFilterChange={onFilterChange}
 				/>,
@@ -971,7 +971,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			render(
 				<CheckboxFilterV2
 					filter={{ ...DEFAULT_FILTER, customRendererForValue: customRenderer }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -25,7 +25,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -55,7 +55,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -106,7 +106,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -140,7 +140,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -185,7 +185,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -221,7 +221,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -273,7 +273,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -321,7 +321,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 				undefined,
@@ -373,7 +373,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -424,7 +424,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -466,7 +466,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',
@@ -521,7 +521,7 @@ describe('CheckboxFilterV2 - item rules', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={{
 						...DEFAULT_USE_FIELD_APIS,
 						existingQuery: 'service.name = "api"',

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -25,7 +25,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -47,7 +47,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={closedFilter}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -104,7 +104,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -133,7 +133,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -152,7 +152,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -172,7 +172,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);
@@ -195,7 +195,7 @@ describe('CheckboxFilterV2 - states', () => {
 			render(
 				<CheckboxFilterV2
 					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
+					quickFilterSource={QuickFiltersSource.TRACES_EXPLORER}
 					useFieldApis={DEFAULT_USE_FIELD_APIS}
 				/>,
 			);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,20 +1,20 @@
 import { useMemo } from 'react';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { FieldValuesConfig } from 'api/querySuggestions/types';
+import { QUICK_FILTER_SOURCE_TO_SIGNAL } from 'components/QuickFilters/constants';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { useFieldValuesSuggestion } from 'hooks/querySuggestions/useFieldValuesSuggestion';
 import { BuilderQueryType } from 'types/api/v5/queryRange';
-import { DATA_SOURCE_TO_SIGNAL } from 'types/common/queryBuilder';
 
 interface UseFieldValuesProps {
 	filter: IQuickFiltersConfig;
 	searchText: string;
 	existingQuery?: string;
 	metricNamespace?: string;
-	source?: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 	startUnixMilli?: number;
 	endUnixMilli?: number;
 	enabled: boolean;
@@ -38,12 +38,13 @@ export function useFieldValues({
 	searchText,
 	existingQuery,
 	metricNamespace,
-	source,
+	quickFilterSource,
 	startUnixMilli,
 	endUnixMilli,
 	enabled,
 }: UseFieldValuesProps): UseFieldValuesReturn {
-	const isAIObservability = source === QuickFiltersSource.AI_OBSERVABILITY;
+	const isAIObservability =
+		quickFilterSource === QuickFiltersSource.AI_OBSERVABILITY;
 
 	const builderQueryType: BuilderQueryType | undefined = isAIObservability
 		? 'builder_ai_query'
@@ -59,14 +60,12 @@ export function useFieldValues({
 				endUnixMilli,
 			}
 		: {
-				signal: filter.dataSource
-					? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-					: undefined,
+				signal: QUICK_FILTER_SOURCE_TO_SIGNAL[quickFilterSource],
 				name: filter.attributeKey.key,
 				searchText,
 				existingQuery,
 				metricNamespace,
-				source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
+				source: QUICK_FILTERS_SOURCE_TO_SOURCE[quickFilterSource],
 				startUnixMilli,
 				// This field does not affect the backend but I wanted to keep it here
 				// in case we add the support in the future

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -31,11 +31,11 @@ export type { FilterType };
 function Duration({
 	filter,
 	onFilterChange,
-	source,
+	quickFilterSource,
 }: {
 	filter: IQuickFiltersConfig;
 	onFilterChange?: (query: Query) => void;
-	source: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 }): JSX.Element {
 	const [selectedFilters, setSelectedFilters] =
 		useState<
@@ -52,7 +52,7 @@ function Duration({
 
 	const compositeQuery = useGetCompositeQueryParam();
 
-	const activeQueryIndex = useActiveQueryIndex(source);
+	const activeQueryIndex = useActiveQueryIndex(quickFilterSource);
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const syncSelectedFilters = useMemo((): FilterType => {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -49,15 +49,18 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		className,
 		config,
 		handleFilterVisibilityChange,
-		source,
+		quickFilterSource,
 		onFilterChange,
 		onQuickFilterChange,
-		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
 		savedViewsHeader,
 	} = props;
+	const savedFiltersSource =
+		quickFilterSource === QuickFiltersSource.INFRA_MONITORING
+			? undefined
+			: quickFilterSource;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
 	const showIP = params.showIP ?? true;
@@ -68,7 +71,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		customFilters,
 		refetchCustomFilters,
 		isCustomFiltersLoading,
-	} = useFilterConfig({ signal, config });
+	} = useFilterConfig({ savedFiltersSource, config });
 	const {
 		deniedPermissions: deniedSettingsPermissions,
 		isLoading: isSettingsChecking,
@@ -112,15 +115,15 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	// Show dropdown in ListView only for TRACES_EXPLORER source
 	const shouldShowDropdownInListView =
-		isListView && source === QuickFiltersSource.TRACES_EXPLORER;
+		isListView && quickFilterSource === QuickFiltersSource.TRACES_EXPLORER;
 
 	// AI observability builds a single query in the row-level views, so there is
 	// no query for the selector to switch between.
 	const isAIObservabilityRowView =
-		source === QuickFiltersSource.AI_OBSERVABILITY &&
+		quickFilterSource === QuickFiltersSource.AI_OBSERVABILITY &&
 		(isListView || panelType === PANEL_TYPES.TRACE);
 
-	const activeQueryIndex = useActiveQueryIndex(source);
+	const activeQueryIndex = useActiveQueryIndex(quickFilterSource);
 
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
@@ -290,7 +293,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderContent = (): JSX.Element => (
 		<>
-			{source === QuickFiltersSource.API_MONITORING && (
+			{quickFilterSource === QuickFiltersSource.API_MONITORING && (
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
@@ -313,7 +316,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							return (
 								<Duration
 									key={filter.attributeKey.key}
-									source={source}
+									quickFilterSource={quickFilterSource}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
@@ -324,7 +327,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							return (
 								<CheckboxV2
 									key={filter.attributeKey.key}
-									source={source}
+									quickFilterSource={quickFilterSource}
 									filter={filter}
 									onFilterChange={onFilterChange}
 									onQuickFilterChange={onQuickFilterChange}
@@ -363,14 +366,14 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		<div className="quick-filters-container">
 			<div className="quick-filters">
 				{savedViewsHeader}
-				{source !== QuickFiltersSource.INFRA_MONITORING && (
+				{quickFilterSource !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}
 						{renderRightActions()}
 					</section>
 				)}
 
-				{signal ? (
+				{savedFiltersSource ? (
 					<AuthZGuardContent
 						checks={[QuickFilterReadPermission]}
 						fallbackOnLoading={filtersSkeleton}
@@ -391,9 +394,9 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 						className,
 					)}
 				>
-					{isSettingsOpen && (
+					{isSettingsOpen && savedFiltersSource && (
 						<QuickFiltersSettings
-							signal={signal}
+							savedFiltersSource={savedFiltersSource}
 							setIsSettingsOpen={setIsSettingsOpen}
 							customFilters={customFilters}
 							refetchCustomFilters={refetchCustomFilters}
@@ -407,7 +410,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 QuickFilters.defaultProps = {
 	onFilterChange: null,
-	signal: '',
 	config: [],
 	showFilterCollapse: true,
 	showQueryName: true,

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

@@ -5,6 +5,7 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
 import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
 import SavedViewsRestore from 'container/SavedViews/SavedViewsRestore';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
@@ -49,9 +50,10 @@ function QuickFiltersLayout({
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
 	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const hasQuickFilters = !!quickFilterProps;
-	const hasSavedViews = !!savedViewProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
 
 	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
 

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

@@ -1,5 +1,6 @@
 import { Button } from '@signozhq/ui/button';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
@@ -19,6 +20,10 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
 jest.mock('container/SavedViews/SavedViewsRestore', () => ({
 	__esModule: true,
 	default: ({ source }: { source: string }): JSX.Element => (
@@ -29,17 +34,17 @@ jest.mock('container/SavedViews/SavedViewsRestore', () => ({
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
 	default: ({
-		source,
+		quickFilterSource,
 		savedViewsHeader,
 		handleFilterVisibilityChange,
 	}: {
-		source: string;
+		quickFilterSource: string;
 		savedViewsHeader?: React.ReactNode;
 		handleFilterVisibilityChange?: () => void;
 	}): JSX.Element => (
 		<div data-testid="quick-filters">
 			{savedViewsHeader}
-			{source}
+			{quickFilterSource}
 			{handleFilterVisibilityChange && (
 				<Button
 					size="md"
@@ -57,7 +62,7 @@ jest.mock('../../QuickFilters', () => ({
 }));
 
 const quickFilterProps = {
-	source: QuickFiltersSource.TRACES_EXPLORER,
+	quickFilterSource: QuickFiltersSource.TRACES_EXPLORER,
 	useFieldApis: { startUnixMilli: 0, endUnixMilli: 0 },
 };
 const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
@@ -66,6 +71,10 @@ const drawer = (): HTMLElement =>
 	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -140,6 +149,35 @@ describe('QuickFiltersLayout', () => {
 	});
 
 	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-restore')).not.toBeInTheDocument();
+		});
+
 		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
 			render(
 				<QuickFiltersLayout

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

@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	QuickfiltertypesSourceDTO,
+	TelemetrytypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { FieldKeysConfig } from 'api/querySuggestions/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { SignalType } from 'components/QuickFilters/types';
+import { QUICK_FILTER_SOURCE_TO_SIGNAL } from 'components/QuickFilters/constants';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 import {
@@ -13,7 +15,6 @@ import {
 	FieldDataType,
 	TelemetryFieldKey,
 } from 'types/api/v5/queryRange';
-import { DATA_SOURCE_TO_SIGNAL } from 'types/common/queryBuilder';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -32,18 +33,20 @@ function OtherFiltersSkeleton(): JSX.Element {
 }
 
 function OtherFilters({
-	signal,
+	savedFiltersSource,
 	inputValue,
 	addedFilters,
 	setAddedFilters,
 }: {
-	signal: SignalType | undefined;
+	savedFiltersSource: QuickfiltertypesSourceDTO;
 	inputValue: string;
 	addedFilters: TelemetryFieldKey[];
 	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
-	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-	const isAIObservability = signal === SignalType.AI_OBSERVABILITY;
+	const isMeterDataSource =
+		savedFiltersSource === QuickfiltertypesSourceDTO.meter;
+	const isAIObservability =
+		savedFiltersSource === QuickfiltertypesSourceDTO.ai_observability;
 
 	const builderQueryType: BuilderQueryType | undefined = isAIObservability
 		? 'builder_ai_query'
@@ -53,9 +56,7 @@ function OtherFilters({
 		? { searchText: inputValue }
 		: {
 				searchText: inputValue,
-				signal: signal
-					? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-					: undefined,
+				signal: QUICK_FILTER_SOURCE_TO_SIGNAL[savedFiltersSource],
 				source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
 			};
 

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

@@ -2,9 +2,9 @@ import { Button as SignozButton } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
+import { QuickfiltertypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
-import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
 import useQuickFilterSettings from './hooks/useQuickFilterSettings';
 import OtherFilters from './OtherFilters';
@@ -12,12 +12,12 @@ import OtherFilters from './OtherFilters';
 import './QuickFiltersSettings.styles.scss';
 
 function QuickFiltersSettings({
-	signal,
+	savedFiltersSource,
 	setIsSettingsOpen,
 	customFilters,
 	refetchCustomFilters,
 }: {
-	signal: SignalType | undefined;
+	savedFiltersSource: QuickfiltertypesSourceDTO;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: TelemetryFieldKey[];
 	refetchCustomFilters: () => void;
@@ -37,7 +37,7 @@ function QuickFiltersSettings({
 		setIsSettingsOpen,
 		customFilters,
 		refetchCustomFilters,
-		signal,
+		savedFiltersSource,
 	});
 
 	return (
@@ -73,7 +73,7 @@ function QuickFiltersSettings({
 				setAddedFilters={setAddedFilters}
 			/>
 			<OtherFilters
-				signal={signal}
+				savedFiltersSource={savedFiltersSource}
 				inputValue={debouncedInputValue}
 				addedFilters={addedFilters}
 				setAddedFilters={setAddedFilters}

frontend/src/components/QuickFilters/QuickFiltersSettings/__tests__/OtherFilters.test.tsx

@@ -3,8 +3,8 @@ import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render } from 'tests/test-utils';
+import { QuickfiltertypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 
-import { SignalType } from '../../types';
 import OtherFilters from '../OtherFilters';
 
 const BASE_URL = ENVIRONMENT.baseURL;
@@ -43,10 +43,12 @@ describe('OtherFilters - AI observability keys', () => {
 		);
 	});
 
-	function renderOtherFilters(signal: SignalType): void {
+	function renderOtherFilters(
+		savedFiltersSource: QuickfiltertypesSourceDTO,
+	): void {
 		render(
 			<OtherFilters
-				signal={signal}
+				savedFiltersSource={savedFiltersSource}
 				inputValue=""
 				addedFilters={[]}
 				setAddedFilters={jest.fn()}
@@ -55,7 +57,7 @@ describe('OtherFilters - AI observability keys', () => {
 	}
 
 	it('reads AI observability keys from their own endpoint', async () => {
-		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+		renderOtherFilters(QuickfiltertypesSourceDTO.ai_observability);
 
 		await expect(
 			screen.findByText('gen_ai.request.model'),
@@ -64,7 +66,7 @@ describe('OtherFilters - AI observability keys', () => {
 	});
 
 	it('does not narrow the AI keys by fieldContext', async () => {
-		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+		renderOtherFilters(QuickfiltertypesSourceDTO.ai_observability);
 
 		// A `trace` context would return only the computed per-trace aggregates,
 		// which cannot be filtered on.
@@ -73,7 +75,7 @@ describe('OtherFilters - AI observability keys', () => {
 	});
 
 	it('keeps other signals on the signal-wide keys endpoint', async () => {
-		renderOtherFilters(SignalType.TRACES);
+		renderOtherFilters(QuickfiltertypesSourceDTO.traces);
 
 		await expect(screen.findByText('http.route')).resolves.toBeInTheDocument();
 		await waitFor(() => expect(aiKeysParams).toBeUndefined());

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

@@ -1,11 +0,0 @@
-import { SignalType } from 'components/QuickFilters/types';
-import { DataSource } from 'types/common/queryBuilder';
-
-export const SIGNAL_DATA_SOURCE_MAP = {
-	[SignalType.LOGS]: DataSource.LOGS,
-	[SignalType.TRACES]: DataSource.TRACES,
-	[SignalType.EXCEPTIONS]: DataSource.TRACES,
-	[SignalType.API_MONITORING]: DataSource.TRACES,
-	[SignalType.METER_EXPLORER]: DataSource.METRICS,
-	[SignalType.AI_OBSERVABILITY]: DataSource.TRACES,
-};

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

@@ -4,8 +4,8 @@ import logEvent from 'api/common/logEvent';
 import {
 	TelemetrytypesFieldContextDTO,
 	TelemetrytypesFieldDataTypeDTO,
+	QuickfiltertypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -16,7 +16,7 @@ interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: TelemetryFieldKey[];
 	refetchCustomFilters: () => void;
-	signal?: SignalType;
+	savedFiltersSource: QuickfiltertypesSourceDTO;
 }
 
 interface UseQuickFilterSettingsReturn {
@@ -37,7 +37,7 @@ const useQuickFilterSettings = ({
 	customFilters,
 	setIsSettingsOpen,
 	refetchCustomFilters,
-	signal,
+	savedFiltersSource,
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
@@ -113,21 +113,19 @@ const useQuickFilterSettings = ({
 	);
 
 	const handleSaveChanges = useCallback((): void => {
-		if (signal) {
-			updateCustomFilters({
-				pathParams: { source: signal },
-				data: {
-					// Send only the stored TelemetryFieldKey fields; the composite `key`
-					// is UI-only.
-					filters: addedFilters.map((filter) => ({
-						name: filter.name,
-						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
-						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
-					})),
-				},
-			});
-		}
-	}, [addedFilters, signal, updateCustomFilters]);
+		updateCustomFilters({
+			pathParams: { source: savedFiltersSource },
+			data: {
+				// Send only the stored TelemetryFieldKey fields; the composite `key`
+				// is UI-only.
+				filters: addedFilters.map((filter) => ({
+					name: filter.name,
+					fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
+					fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
+				})),
+			},
+		});
+	}, [addedFilters, savedFiltersSource, updateCustomFilters]);
 
 	return {
 		handleSettingsClose,

frontend/src/components/QuickFilters/constants.ts

@@ -0,0 +1,16 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { QuickFiltersSource } from './types';
+
+export const QUICK_FILTER_SOURCE_TO_SIGNAL: Record<
+	QuickFiltersSource,
+	TelemetrytypesSignalDTO
+> = {
+	[QuickFiltersSource.LOGS_EXPLORER]: TelemetrytypesSignalDTO.logs,
+	[QuickFiltersSource.TRACES_EXPLORER]: TelemetrytypesSignalDTO.traces,
+	[QuickFiltersSource.EXCEPTIONS]: TelemetrytypesSignalDTO.traces,
+	[QuickFiltersSource.API_MONITORING]: TelemetrytypesSignalDTO.traces,
+	[QuickFiltersSource.AI_OBSERVABILITY]: TelemetrytypesSignalDTO.traces,
+	[QuickFiltersSource.METER_EXPLORER]: TelemetrytypesSignalDTO.metrics,
+	[QuickFiltersSource.INFRA_MONITORING]: TelemetrytypesSignalDTO.metrics,
+};

frontend/src/components/QuickFilters/hooks/useActiveQueryIndex.ts

@@ -10,26 +10,26 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
  * In ListView most sources use index 0; TRACES_EXPLORER and every non-ListView
  * mode track the last focused query.
  */
-function useActiveQueryIndex(source: QuickFiltersSource): number {
+function useActiveQueryIndex(quickFilterSource: QuickFiltersSource): number {
 	const { lastUsedQuery, panelType } = useQueryBuilder();
 	const isListView = panelType === PANEL_TYPES.LIST;
 
 	return useMemo(() => {
 		// AI observability builds a single query in the row-level views, so its
 		// filters always drive the first one there.
-		if (source === QuickFiltersSource.AI_OBSERVABILITY) {
+		if (quickFilterSource === QuickFiltersSource.AI_OBSERVABILITY) {
 			return isListView || panelType === PANEL_TYPES.TRACE
 				? 0
 				: lastUsedQuery || 0;
 		}
 
 		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
+			return quickFilterSource === QuickFiltersSource.TRACES_EXPLORER
 				? lastUsedQuery || 0
 				: 0;
 		}
 		return lastUsedQuery || 0;
-	}, [isListView, panelType, source, lastUsedQuery]);
+	}, [isListView, panelType, quickFilterSource, lastUsedQuery]);
 }
 
 export default useActiveQueryIndex;

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import { useGetQuickFilters } from 'api/generated/services/quick-filter';
+import { QuickfiltertypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
-import { IQuickFiltersConfig, SignalType } from '../types';
+import { IQuickFiltersConfig } from '../types';
 import { getFilterConfig } from '../utils';
 
 interface UseFilterConfigProps {
-	signal?: SignalType;
+	savedFiltersSource?: QuickfiltertypesSourceDTO;
 	config: IQuickFiltersConfig[];
 }
 interface UseFilterConfigReturn {
@@ -18,7 +19,7 @@ interface UseFilterConfigReturn {
 }
 
 const useFilterConfig = ({
-	signal,
+	savedFiltersSource,
 	config,
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
@@ -26,8 +27,8 @@ const useFilterConfig = ({
 		data,
 		refetch,
 	} = useGetQuickFilters(
-		{ source: signal ?? '' },
-		{ query: { enabled: !!signal } },
+		{ source: savedFiltersSource ?? '' },
+		{ query: { enabled: !!savedFiltersSource } },
 	);
 
 	const customFilters = useMemo<TelemetryFieldKey[]>(
@@ -35,11 +36,11 @@ const useFilterConfig = ({
 		[data],
 	);
 
-	const isDynamicFilters = !!signal;
+	const isDynamicFilters = !!savedFiltersSource;
 
 	const filterConfig = useMemo(
-		() => getFilterConfig(signal, customFilters, config),
-		[config, customFilters, signal],
+		() => getFilterConfig(customFilters, config),
+		[config, customFilters],
 	);
 
 	return {

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

@@ -89,6 +89,15 @@ export const handlers = [
 	fieldValuesHandler(['checkout', 'frontend', 'payments']),
 ];
 
+export const noSavedFiltersHandler = rest.get(
+	'http://localhost/api/v2/quick_filters/logs',
+	(_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(quickFiltersResponse(QuickfiltertypesSourceDTO.logs, [])),
+		),
+);
+
 export const loadingFiltersHandlers = [
 	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
 		res(ctx.delay('infinite')),

frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx

@@ -15,8 +15,9 @@ import {
 	loadingFiltersHandlers,
 	queryBuilder,
 	selectedServiceQueryBuilder,
+	noSavedFiltersHandler,
 } from './QuickFilters.stories.mocks';
-import { QuickFiltersSource, SignalType } from '../types';
+import { QuickFiltersSource } from '../types';
 
 const meta = {
 	title: 'Components/Quick Filters',
@@ -33,8 +34,7 @@ const meta = {
 	args: {
 		config: checkboxConfig,
 		handleFilterVisibilityChange: (): void => undefined,
-		signal: SignalType.LOGS,
-		source: QuickFiltersSource.LOGS_EXPLORER,
+		quickFilterSource: QuickFiltersSource.LOGS_EXPLORER,
 		useFieldApis: fieldApis,
 	},
 	parameters: {
@@ -94,13 +94,16 @@ export const LoadingFilters: Story = {
 
 /** Empty: a loaded quick-filter configuration with no filters has no result rows. */
 export const NoResults: Story = {
-	args: { config: [], signal: undefined },
+	args: { config: [] },
+	parameters: {
+		msw: { handlers: [noSavedFiltersHandler, ...handlers] },
+	},
 };
 
 /** Selection: an expanded checkbox shows the actual selected service values. */
 export const SelectedExpandedCheckbox: Story = {
-	args: { signal: undefined },
 	parameters: {
+		msw: { handlers: [noSavedFiltersHandler, ...handlers] },
 		signoz: {
 			queryBuilder: selectedServiceQueryBuilder,
 		},
@@ -111,12 +114,18 @@ export const SelectedExpandedCheckbox: Story = {
  * Every tooltip the panel renders, held open: the reveal on each truncated
  * filter value. Nothing bounds those values, so the panel is answered with
  * service names long enough to be cut. The Service name filter carries them, so
- * the signal that would add the workspace's own dynamic filters is left off.
+ * the workspace's own saved filter list is answered empty.
  */
 export const Tooltips: TooltipsStory = {
-	args: { signal: undefined, tooltipsOpen: true },
+	args: { tooltipsOpen: true },
 	parameters: {
-		msw: { handlers: [fieldValuesHandler(LONG_FILTER_VALUES), ...handlers] },
+		msw: {
+			handlers: [
+				noSavedFiltersHandler,
+				fieldValuesHandler(LONG_FILTER_VALUES),
+				...handlers,
+			],
+		},
 	},
 };
 

frontend/src/components/QuickFilters/tests/QuickFilters.authz.test.tsx

@@ -24,7 +24,7 @@ import { rest } from 'msw';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import QuickFilters from '../QuickFilters';
-import { QuickFiltersSource, SignalType } from '../types';
+import { QuickFiltersSource } from '../types';
 import { QuickFiltersConfig, QuickFiltersFieldApis } from './constants';
 
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -35,8 +35,7 @@ jest.mock('container/ApiMonitoring/queryParams');
 const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
+const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/logs`;
 const fieldsKeysURL = `${BASE_URL}/api/v1/fields/keys`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -81,11 +80,10 @@ afterEach(() => {
 	jest.clearAllMocks();
 });
 
-function renderWithSignal(): void {
+function renderWithSavedList(): void {
 	render(
 		<QuickFilters
-			source={QuickFiltersSource.LOGS_EXPLORER}
-			signal={SIGNAL}
+			quickFilterSource={QuickFiltersSource.LOGS_EXPLORER}
 			handleFilterVisibilityChange={jest.fn()}
 			useFieldApis={QuickFiltersFieldApis}
 		/>,
@@ -95,7 +93,7 @@ function renderWithSignal(): void {
 function renderStaticConfig(): void {
 	render(
 		<QuickFilters
-			source={QuickFiltersSource.EXCEPTIONS}
+			quickFilterSource={QuickFiltersSource.INFRA_MONITORING}
 			config={QuickFiltersConfig}
 			handleFilterVisibilityChange={jest.fn()}
 			useFieldApis={QuickFiltersFieldApis}
@@ -108,7 +106,7 @@ describe('QuickFilters - AuthZ', () => {
 		it('shows the inline denial instead of the filters, header stays', async () => {
 			server.use(setupAuthzDeny(QuickFilterReadPermission));
 
-			renderWithSignal();
+			renderWithSavedList();
 
 			await expect(
 				screen.findByText(NOT_AUTHORIZED_TEXT),
@@ -133,7 +131,7 @@ describe('QuickFilters - AuthZ', () => {
 		it('renders the filters but disables the settings trigger', async () => {
 			server.use(setupAuthzDeny(QuickFilterUpdatePermission));
 
-			renderWithSignal();
+			renderWithSavedList();
 
 			await expect(
 				screen.findByText(FILTER_SERVICE_NAME),
@@ -158,7 +156,7 @@ describe('QuickFilters - AuthZ', () => {
 		it('renders the filters and opens settings from the trigger', async () => {
 			server.use(setupAuthzAdmin());
 
-			renderWithSignal();
+			renderWithSavedList();
 
 			await expect(
 				screen.findByText(FILTER_SERVICE_NAME),
@@ -176,7 +174,7 @@ describe('QuickFilters - AuthZ', () => {
 		});
 	});
 
-	describe('static config pages (no signal)', () => {
+	describe('static config pages (no saved list)', () => {
 		it('is not gated even when every permission is denied', async () => {
 			server.use(setupAuthzDenyAll());
 
@@ -195,7 +193,7 @@ describe('QuickFilters - AuthZ', () => {
 				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
 			);
 
-			renderWithSignal();
+			renderWithSavedList();
 
 			await waitFor(() =>
 				// eslint-disable-next-line testing-library/no-node-access

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,8 +1,11 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { ENVIRONMENT } from 'constants/env';
 import {
 	ApiMonitoringParams,
 	useApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
+import { getHostsQuickFiltersConfig } from 'container/InfraMonitoringHostsV2/utils';
+import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -16,7 +19,7 @@ import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 import '@testing-library/jest-dom';
 
 import QuickFilters from '../QuickFilters';
-import { IQuickFiltersConfig, QuickFiltersSource, SignalType } from '../types';
+import { IQuickFiltersConfig, QuickFiltersSource } from '../types';
 import { QuickFiltersConfig, QuickFiltersFieldApis } from './constants';
 
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -33,9 +36,9 @@ const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
 const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
+const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/logs`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/logs`;
+const anyQuickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/:source`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -54,6 +57,9 @@ const setupServer = (): void => {
 		rest.get(quickFiltersListURL, (_, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersListResponse)),
 		),
+		rest.get(anyQuickFiltersListURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: { filters: [] } })),
+		),
 		rest.get(quickFiltersSuggestionsURL, (_, res, ctx) =>
 			res(ctx.status(200), ctx.json(otherFiltersResponse)),
 		),
@@ -68,48 +74,24 @@ const setupServer = (): void => {
 };
 
 function TestQuickFilters({
-	signal = SignalType.LOGS,
+	quickFilterSource = QuickFiltersSource.EXCEPTIONS,
 	config = QuickFiltersConfig,
 }: {
-	signal?: SignalType;
+	quickFilterSource?: QuickFiltersSource;
 	config?: IQuickFiltersConfig[];
 }): JSX.Element {
 	return (
 		<QuickFilters
-			source={QuickFiltersSource.EXCEPTIONS}
+			quickFilterSource={quickFilterSource}
 			config={config}
 			handleFilterVisibilityChange={handleFilterVisibilityChange}
 			useFieldApis={QuickFiltersFieldApis}
-			signal={signal}
 		/>
 	);
 }
 
 TestQuickFilters.defaultProps = {
-	signal: '',
-	config: QuickFiltersConfig,
-};
-
-function TestQuickFiltersApiMonitoring({
-	signal = SignalType.LOGS,
-	config = QuickFiltersConfig,
-}: {
-	signal?: SignalType;
-	config?: IQuickFiltersConfig[];
-}): JSX.Element {
-	return (
-		<QuickFilters
-			source={QuickFiltersSource.API_MONITORING}
-			config={config}
-			handleFilterVisibilityChange={handleFilterVisibilityChange}
-			useFieldApis={QuickFiltersFieldApis}
-			signal={signal}
-		/>
-	);
-}
-
-TestQuickFiltersApiMonitoring.defaultProps = {
-	signal: '',
+	quickFilterSource: QuickFiltersSource.EXCEPTIONS,
 	config: QuickFiltersConfig,
 };
 
@@ -287,10 +269,14 @@ describe('Quick Filters', () => {
 	it('toggles Show IP addresses and updates API Monitoring params', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFiltersApiMonitoring />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.API_MONITORING} />,
+		);
 
 		// Switch should be rendered and initially checked
-		expect(screen.getByText('Show IP addresses')).toBeInTheDocument();
+		await expect(
+			screen.findByText('Show IP addresses'),
+		).resolves.toBeInTheDocument();
 		const toggle = screen.getByRole('switch');
 		expect(toggle).toHaveAttribute('aria-checked', 'true');
 
@@ -308,7 +294,9 @@ describe('Quick Filters with custom filters', () => {
 	it('loads the custom filters correctly', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 
 		expect(screen.getByText('Filters for')).toBeInTheDocument();
 		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
@@ -368,7 +356,9 @@ describe('Quick Filters with custom filters', () => {
 			),
 		);
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
@@ -396,7 +386,9 @@ describe('Quick Filters with custom filters', () => {
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
@@ -417,7 +409,9 @@ describe('Quick Filters with custom filters', () => {
 	it('removes a filter from ADDED FILTERS and moves it to OTHER FILTERS', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
@@ -446,7 +440,9 @@ describe('Quick Filters with custom filters', () => {
 	it('restores original filter state on Discard', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
@@ -488,7 +484,9 @@ describe('Quick Filters with custom filters', () => {
 	it('saves the updated filters by calling PUT with correct payload', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
@@ -525,7 +523,9 @@ describe('Quick Filters with custom filters', () => {
 			pointerEventsCheck: 0,
 		});
 
-		const { getByTestId } = render(<TestQuickFilters signal={SIGNAL} />);
+		const { getByTestId } = render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await screen.findByText(FILTER_SERVICE_NAME);
 		expect(screen.getByText('Duration')).toBeInTheDocument();
 
@@ -579,7 +579,7 @@ describe('Quick Filters with custom filters', () => {
 });
 
 describe('Quick Filters refetch behavior', () => {
-	it('fetches custom filters on every mount when signal is provided', async () => {
+	it('fetches custom filters on every mount for a page with a saved list', async () => {
 		let getCalls = 0;
 
 		server.use(
@@ -589,14 +589,18 @@ describe('Quick Filters refetch behavior', () => {
 			}),
 		);
 
-		const { unmount } = render(<TestQuickFilters signal={SIGNAL} />);
+		const { unmount } = render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await expect(
 			screen.findByText(FILTER_SERVICE_NAME),
 		).resolves.toBeInTheDocument();
 
 		unmount();
 
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 		await expect(
 			screen.findByText(FILTER_SERVICE_NAME),
 		).resolves.toBeInTheDocument();
@@ -604,19 +608,24 @@ describe('Quick Filters refetch behavior', () => {
 		expect(getCalls).toBe(2);
 	});
 
-	it('does not fetch custom filters when signal is undefined', async () => {
+	it('does not fetch custom filters for a page without a saved list', async () => {
 		let getCalls = 0;
 
 		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) => {
+			rest.get(anyQuickFiltersListURL, (_req, res, ctx) => {
 				getCalls += 1;
 				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
 			}),
 		);
 
-		render(<TestQuickFilters signal={undefined} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.INFRA_MONITORING} />,
+		);
 
-		await waitFor(() => expect(getCalls).toBe(0));
+		await expect(
+			screen.findByText(FILTER_SERVICE_NAME),
+		).resolves.toBeInTheDocument();
+		expect(getCalls).toBe(0);
 	});
 
 	it('refetches custom filters after saving settings', async () => {
@@ -635,7 +644,9 @@ describe('Quick Filters refetch behavior', () => {
 		);
 
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 
 		await expect(
 			screen.findByText(FILTER_SERVICE_NAME),
@@ -687,7 +698,9 @@ describe('Quick Filters refetch behavior', () => {
 		);
 
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<TestQuickFilters signal={SIGNAL} />);
+		render(
+			<TestQuickFilters quickFilterSource={QuickFiltersSource.LOGS_EXPLORER} />,
+		);
 
 		await expect(
 			screen.findByText(FILTER_SERVICE_NAME),
@@ -718,10 +731,47 @@ describe('Quick Filters refetch behavior', () => {
 			),
 		);
 
-		render(<TestQuickFilters signal={SIGNAL} config={[]} />);
+		render(
+			<TestQuickFilters
+				quickFilterSource={QuickFiltersSource.LOGS_EXPLORER}
+				config={[]}
+			/>,
+		);
 
 		await expect(
 			screen.findByText('No filters found'),
 		).resolves.toBeInTheDocument();
 	});
 });
+
+describe('Quick Filters field APIs', () => {
+	it('sends the page signal for every filter, the infra Environment filter included', async () => {
+		const requests: URLSearchParams[] = [];
+		server.use(
+			rest.get(fieldsValuesURL, (req, res, ctx) => {
+				requests.push(req.url.searchParams);
+				return res(ctx.status(200), ctx.json(quickFiltersFieldValuesResponse));
+			}),
+		);
+
+		render(
+			<QuickFilters
+				quickFilterSource={QuickFiltersSource.INFRA_MONITORING}
+				config={getHostsQuickFiltersConfig()}
+				handleFilterVisibilityChange={handleFilterVisibilityChange}
+				useFieldApis={QuickFiltersFieldApis}
+			/>,
+		);
+
+		await waitFor(() =>
+			expect(requests.map((params) => params.get('name'))).toContain(
+				INFRA_MONITORING_ATTR_KEYS.DEPLOYMENT_ENVIRONMENT,
+			),
+		);
+		const environment = requests.find(
+			(params) =>
+				params.get('name') === INFRA_MONITORING_ATTR_KEYS.DEPLOYMENT_ENVIRONMENT,
+		);
+		expect(environment?.get('signal')).toBe(TelemetrytypesSignalDTO.metrics);
+	});
+});

frontend/src/components/QuickFilters/types.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
+import { QuickfiltertypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
 
 export enum FiltersType {
 	SLIDER = 'SLIDER',
@@ -19,15 +19,6 @@ export enum SpecficFilterOperations {
 	ONLY = 'ONLY',
 }
 
-export enum SignalType {
-	TRACES = 'traces',
-	LOGS = 'logs',
-	API_MONITORING = 'api_monitoring',
-	EXCEPTIONS = 'exceptions',
-	METER_EXPLORER = 'meter',
-	AI_OBSERVABILITY = 'ai_observability',
-}
-
 /**
  * Missing export from signozhq/ui/checkbox, TODO(H4ad): Add and remove this type definition
  */
@@ -39,7 +30,6 @@ export interface IQuickFiltersConfig {
 	attributeKey: BaseAutocompleteData;
 	aggregateOperator?: string;
 	aggregateAttribute?: string;
-	dataSource?: DataSource;
 	customRendererForValue?: (value: string) => JSX.Element;
 	defaultOpen: boolean;
 }
@@ -53,11 +43,9 @@ export interface QuickFilterChangeEventData {
 export interface IQuickFiltersProps {
 	config: IQuickFiltersConfig[];
 	handleFilterVisibilityChange?: () => void;
-	source: QuickFiltersSource;
+	quickFilterSource: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
 	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
-	/** Pass to fetch quick filters for this signal; omit to use `config` as-is */
-	signal?: SignalType;
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
@@ -65,15 +53,19 @@ export interface IQuickFiltersProps {
 	savedViewsHeader?: ReactNode;
 }
 
-export enum QuickFiltersSource {
-	LOGS_EXPLORER = 'logs-explorer',
-	INFRA_MONITORING = 'infra-monitoring',
-	TRACES_EXPLORER = 'traces-explorer',
-	API_MONITORING = 'api-monitoring',
-	EXCEPTIONS = 'exceptions',
-	METER_EXPLORER = 'meter',
-	AI_OBSERVABILITY = 'ai-observability',
-}
+export const QuickFiltersSource = {
+	LOGS_EXPLORER: QuickfiltertypesSourceDTO.logs,
+	TRACES_EXPLORER: QuickfiltertypesSourceDTO.traces,
+	EXCEPTIONS: QuickfiltertypesSourceDTO.exceptions,
+	API_MONITORING: QuickfiltertypesSourceDTO.api_monitoring,
+	METER_EXPLORER: QuickfiltertypesSourceDTO.meter,
+	AI_OBSERVABILITY: QuickfiltertypesSourceDTO.ai_observability,
+	/** No saved filter list: renders `config` as given. */
+	INFRA_MONITORING: 'infra-monitoring',
+} as const;
+
+export type QuickFiltersSource =
+	(typeof QuickFiltersSource)[keyof typeof QuickFiltersSource];
 
 export type QuickFilterCheckboxUseFieldApis = {
 	startUnixMilli: number;

frontend/src/components/QuickFilters/utils.tsx

@@ -1,9 +1,8 @@
 import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
-import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { fieldDataTypeToDataType } from 'utils/fieldDataType';
 
-import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
+import { FiltersType, IQuickFiltersConfig } from './types';
 
 const FILTER_TITLE_MAP: Record<string, string> = {
 	duration_nano: 'Duration',
@@ -50,11 +49,10 @@ const getFilterType = (att: TelemetryFieldKey): FiltersType => {
 };
 
 export const getFilterConfig = (
-	signal?: SignalType,
 	customFilters?: TelemetryFieldKey[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
-	if (!customFilters?.length || !signal) {
+	if (!customFilters?.length) {
 		return config || [];
 	}
 
@@ -63,7 +61,6 @@ export const getFilterConfig = (
 			({
 				type: getFilterType(att),
 				title: getFilterName(att.name),
-				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
 					id: att.name,
 					key: att.name,

frontend/src/constants/localStorage.ts

@@ -21,6 +21,7 @@ export enum LOCALSTORAGE {
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
+	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 	THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
 	LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
@@ -46,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/routes.ts

@@ -50,6 +50,8 @@ const ROUTES = {
 	ROLE_EDIT: '/settings/roles/:roleId/edit',
 	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
+	LOGS_SAVE_VIEWS: '/logs/saved-views',
+	TRACES_SAVE_VIEWS: '/traces/saved-views',
 	TRACES_FUNNELS: '/traces/funnels',
 	TRACES_FUNNELS_DETAIL: '/traces/funnels/:funnelId',
 	WORKSPACE_LOCKED: '/workspace-locked',
@@ -67,6 +69,7 @@ const ROUTES = {
 	MESSAGING_QUEUES_OVERVIEW: '/messaging-queues/overview',
 	METRICS_EXPLORER: '/metrics-explorer/summary',
 	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
+	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
 	METRICS_EXPLORER_VOLUME_CONTROL: '/metrics-explorer/volume-control',
 	API_MONITORING_BASE: '/api-monitoring',
 	API_MONITORING: '/api-monitoring/explorer',
@@ -74,6 +77,7 @@ const ROUTES = {
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
 	METER: '/meter',
 	METER_EXPLORER: '/meter/explorer',
+	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
 	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.module.scss

@@ -0,0 +1,15 @@
+.trigger {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+	z-index: 10;
+	transition: transform 0.15s;
+
+	&:hover {
+		transform: scale(1.08);
+	}
+
+	&:active {
+		transform: scale(0.96);
+	}
+}

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
+
+import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
+import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
+import {
+	openAIAssistant,
+	useAIAssistantStore,
+} from '../store/useAIAssistantStore';
+
+import styles from './AIAssistantTrigger.module.scss';
+
+/**
+ * Floating action button anchored to the bottom-right of the content area.
+ * Hidden when the panel is already open or when on the full-screen AI Assistant page.
+ */
+export default function AIAssistantTrigger(): JSX.Element | null {
+	const { pathname } = useLocation();
+	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
+	const isModalOpen = useAIAssistantStore((s) => s.isModalOpen);
+
+	const isFullScreenPage = !!matchPath(pathname, {
+		path: ROUTES.AI_ASSISTANT,
+		exact: true,
+	});
+
+	const handleOpen = useCallback((): void => {
+		void logEvent(AIAssistantEvents.Opened, {
+			source: AIAssistantOpenSource.Icon,
+			currentPage: normalizePage(pathname),
+		});
+		openAIAssistant();
+	}, [pathname]);
+
+	if (isDrawerOpen || isModalOpen || isFullScreenPage) {
+		return null;
+	}
+
+	return (
+		<div className={`${styles.trigger} noz-wave`}>
+			<Tooltip title={NOZ_TOOLTIP_TITLE}>
+				<Button
+					size="md"
+					variant="solid"
+					color="primary"
+					icon
+					onClick={handleOpen}
+					aria-label="Open Noz"
+				>
+					<Noz size={24} />
+				</Button>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/container/AIAssistant/AIAssistantTrigger/index.ts

@@ -0,0 +1,2 @@
+export * from './AIAssistantTrigger';
+export { default } from './AIAssistantTrigger';

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -102,7 +102,7 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(ROUTES.METRICS_EXPLORER_EXPLORER, '')).toBe(
 			PageTypeDTO.metrics_explorer,
 		);
-		expect(resolvePageType('/metrics-explorer/views', '')).toBe(
+		expect(resolvePageType(ROUTES.METRICS_EXPLORER_VIEWS, '')).toBe(
 			PageTypeDTO.metrics_explorer,
 		);
 	});

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

@@ -235,6 +235,7 @@ describe('buildExplorerNavigationUrl', () => {
 			{ queryType: 'builder' } as never,
 			{
 				[QueryParams.panelTypes]: PANEL_TYPES.LIST,
+				[QueryParams.viewName]: 'My view',
 				[QueryParams.viewKey]: 'view-1',
 			},
 		);
@@ -258,7 +259,7 @@ describe('openSavedView', () => {
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
 		const params = new URLSearchParams(pushedUrl.split('?')[1]);
 		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
-		expect(params.get(QueryParams.viewName)).toBeNull();
+		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
 		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
 	});
 

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

@@ -9,7 +9,7 @@ import { SavedViewSourcePage } from 'container/SavedViews/types';
 import { findSavedView } from 'container/SavedViews/utils/findSavedView';
 import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
-import { SOURCEPAGE_VS_ROUTES } from 'container/SavedViews/constants';
+import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';
@@ -108,6 +108,7 @@ export function openSavedView(
 	const query = getSavedViewQuery(view);
 	const url = buildExplorerNavigationUrl(route, query, {
 		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
+		[QueryParams.viewName]: view.spec.displayName,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -13,7 +13,7 @@ import { matchPath } from 'react-router-dom';
  *
  * **URL-only.** All inputs come from `pathname` + `search`; we never reach
  * into Redux / context. SigNoz already encodes most page state into the URL
- * (`compositeQuery`, `startTime`/`endTime`, `viewKey`,
+ * (`compositeQuery`, `startTime`/`endTime`, `viewName`/`viewKey`,
  * `variables`, `expandedWidgetId`, `activeLogId`, …), so URL parsing is
  * sufficient. Anything not in the URL is simply omitted from `metadata` —
  * the server applies its own defaults.
@@ -288,7 +288,7 @@ export function getAutoContexts(
 
 	// ── Metrics ───────────────────────────────────────────────────────────────
 
-	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer).
+	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer, views).
 	if (
 		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
 	) {
@@ -361,6 +361,10 @@ function collectSharedMetadata(
 	if (viewKey) {
 		out.savedViewId = viewKey;
 	}
+	const viewName = params.get(QueryParams.viewName);
+	if (viewName) {
+		out.savedViewName = viewName;
+	}
 	const variablesRaw = params.get(QueryParams.variables);
 	if (variablesRaw) {
 		try {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
-import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 
 import DomainList from './Domains/DomainList';
@@ -24,8 +24,7 @@ function Explorer(): JSX.Element {
 				showFilters
 				quickFilterProps={{
 					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
+					quickFilterSource: QuickFiltersSource.API_MONITORING,
 					showQueryName: false,
 					useFieldApis: quickFilterFieldApis,
 				}}

frontend/src/container/ApiMonitoring/utils.tsx

@@ -91,7 +91,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			dataType: DataTypes.String,
 			type: 'resource',
 		},
-		dataSource: DataSource.TRACES,
 		defaultOpen: true,
 	},
 	{
@@ -102,7 +101,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			dataType: DataTypes.String,
 			type: 'resource',
 		},
-		dataSource: DataSource.TRACES,
 		defaultOpen: true,
 	},
 	{
@@ -113,7 +111,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			dataType: DataTypes.String,
 			type: 'tag',
 		},
-		dataSource: DataSource.TRACES,
 		defaultOpen: true,
 	},
 ];

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -72,6 +72,40 @@
 	}
 }
 
+.chat-support-gateway {
+	position: fixed;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
+	right: 20px;
+	z-index: 1000;
+
+	.chat-support-gateway-btn {
+		max-width: 48px;
+		width: 48px;
+		max-height: 48px;
+		height: 48px;
+		padding: 12px;
+		border-radius: 50%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		background-color: #f25733;
+		border: none;
+
+		&:hover {
+			color: white !important;
+			border-color: white !important;
+		}
+
+		.chat-support-gateway-btn-icon {
+			fill: white;
+		}
+	}
+}
+
 .add-credit-card-btn,
 .cancel-btn {
 	display: inline-flex;

frontend/src/container/AppLayout/index.tsx

@@ -28,6 +28,7 @@ import getUserLatestVersion from 'api/v1/version/getLatestVersion';
 import { AxiosError } from 'axios';
 import cx from 'classnames';
 import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
+import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
@@ -50,6 +51,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -398,6 +401,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -485,6 +489,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
+	const chatSupport = useChatSupport();
+
 	// Listen for API warnings
 	const handleWarning = (
 		isSlow: boolean,
@@ -828,7 +834,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
 
-						{isToDisplayLayout && !renderFullScreen && <BottomStrip />}
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (
@@ -839,6 +847,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
+				{chatSupport === ChatSupportState.NeedsCard && !isSavedViewEnabled && (
+					<ChatSupportGateway />
+				)}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/CreateAlertChannels/channelConfig.test.ts

@@ -2,7 +2,7 @@ import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/s
 
 import { toChannelConfig, toPostableChannel } from './channelConfig';
 import { toChannelFormState } from './channelFormValues';
-import { ChannelFormValues, ChannelKind } from './types';
+import { ChannelFormValues, ChannelKind, WebhookAuth } from './types';
 
 const slackValues: ChannelFormValues = {
 	name: 'prod alerts',
@@ -56,6 +56,22 @@ describe('toChannelConfig', () => {
 		});
 	});
 
+	it.each([
+		[WebhookAuth.none, {}],
+		[WebhookAuth.basic, { username: 'u', password: 'p' }],
+		[WebhookAuth.bearer, { bearerToken: 't' }],
+	])('sends only the %s webhook credentials', (webhookAuth, credentials) => {
+		expect(
+			toChannelConfig(ChannelKind.webhook, {
+				url: 'https://example.com/hook',
+				webhookAuth,
+				username: 'u',
+				password: 'p',
+				bearerToken: 't',
+			}).spec,
+		).toStrictEqual({ url: 'https://example.com/hook', ...credentials });
+	});
+
 	it('drops an attachment list the user emptied instead of sending []', () => {
 		expect(
 			toChannelConfig(ChannelKind.slack, {

frontend/src/container/CreateAlertChannels/channelConfig.ts

@@ -18,8 +18,17 @@ import {
 import { omit, pick } from 'lodash-es';
 import { omitBlank } from 'utils/omitBlank';
 
-import { ChannelFormValues, ChannelKind, ChannelSpecFormValues } from './types';
-import { canonicalJiraReopenDuration, filledRows } from './utils';
+import {
+	ChannelFormValues,
+	ChannelKind,
+	ChannelSpecFormValues,
+	WebhookAuth,
+} from './types';
+import {
+	canonicalJiraReopenDuration,
+	filledRows,
+	webhookAuthOf,
+} from './utils';
 
 const SPEC_FIELDS = {
 	[ChannelKind.slack]: [
@@ -210,6 +219,17 @@ export function toChannelConfig(
 		);
 	}
 
+	if (kind === ChannelKind.webhook) {
+		const auth = webhookAuthOf(values);
+		if (auth !== WebhookAuth.basic) {
+			delete picked.username;
+			delete picked.password;
+		}
+		if (auth !== WebhookAuth.bearer) {
+			delete picked.bearerToken;
+		}
+	}
+
 	const spec: Record<string, unknown> = omitBlank(picked);
 
 	// the API answers a read with the duration prometheus would print, and

frontend/src/container/CreateAlertChannels/channelFormValues.ts

@@ -1,6 +1,7 @@
 import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { ChannelFormValues, ChannelKind } from './types';
+import { webhookAuthOf } from './utils';
 
 export interface ChannelFormState {
 	kind: ChannelKind;
@@ -22,11 +23,15 @@ function toChannelKind(kind: string): ChannelKind {
 export function toChannelFormState(
 	channel: AlertmanagertypesGettableNotificationChannelDTO,
 ): ChannelFormState {
-	return {
-		kind: toChannelKind(channel.config.kind),
-		values: {
-			...channel.config.spec,
-			name: channel.displayName,
-		},
+	const kind = toChannelKind(channel.config.kind);
+	const values: ChannelFormValues = {
+		...channel.config.spec,
+		name: channel.displayName,
 	};
+
+	if (kind === ChannelKind.webhook) {
+		values.webhookAuth = webhookAuthOf(values);
+	}
+
+	return { kind, values };
 }

frontend/src/container/CreateAlertChannels/channelResolver.ts

@@ -1,4 +1,5 @@
 import { TFunction } from 'i18next';
+import { get, set } from 'lodash-es';
 import type { FieldErrors, Resolver } from 'react-hook-form';
 import type { $ZodIssue } from 'zod/v4/core';
 
@@ -10,12 +11,12 @@ const toFieldErrors = (
 	issues: $ZodIssue[],
 	t: TFunction,
 ): FieldErrors<ChannelFormValues> => {
-	const errors: Record<string, { type: string; message: string }> = {};
+	const errors = {};
 
 	issues.forEach((issue) => {
-		const field = issue.path.join('.') || 'name';
-		if (!errors[field]) {
-			errors[field] = { type: 'validation', message: t(issue.message) };
+		const path = issue.path.length ? issue.path : ['name'];
+		if (!get(errors, path)) {
+			set(errors, path, { type: 'validation', message: t(issue.message) });
 		}
 	});
 

frontend/src/container/CreateAlertChannels/channelRoundTrip.test.ts

@@ -23,7 +23,6 @@ const SPECS: Record<string, Record<string, unknown>> = {
 		url: 'https://example.com/hook',
 		username: 'u',
 		password: 'p',
-		bearerToken: 't',
 		sendResolved: true,
 	},
 	email: {

frontend/src/container/CreateAlertChannels/schemas/googlechat.ts

@@ -1,11 +1,7 @@
 import { z } from 'zod';
 
-import { isValidGoogleChatWebhookURL } from '../utils';
 import { requiredString } from './shared';
 
 export const googleChatSchema = z.object({
-	webhookUrl: requiredString('webhook_url_required').refine(
-		isValidGoogleChatWebhookURL,
-		{ message: 'google_chat_webhook_url_invalid' },
-	),
+	webhookUrl: requiredString('webhook_url_required'),
 });

frontend/src/container/CreateAlertChannels/schemas/incidentio.ts

@@ -1,13 +1,19 @@
 import { z } from 'zod';
 
-import { isValidIncidentIOURL } from '../utils';
 import { requiredString } from './shared';
 
 const required = requiredString('incidentio_required_fields');
 
 export const incidentIOSchema = z.object({
-	url: required.refine(isValidIncidentIOURL, {
-		message: 'incidentio_url_invalid',
-	}),
-	token: required,
+	url: required,
+	token: z
+		.string({ error: 'incidentio_required_fields' })
+		.refine((token) => token === token.trim(), {
+			message: 'incidentio_token_whitespace',
+		})
+		.pipe(
+			required.refine((token) => !/^bearer( |$)/i.test(token), {
+				message: 'incidentio_token_bearer_prefix',
+			}),
+		),
 });

frontend/src/container/CreateAlertChannels/schemas/jira.ts

@@ -1,12 +1,12 @@
 import { z } from 'zod';
 
-import { isValidJiraReopenDuration, isValidJiraSiteURL } from '../utils';
+import { isValidJiraReopenDuration } from '../utils';
 import { requiredString } from './shared';
 
 const required = requiredString('jira_required_fields');
 
 export const jiraSchema = z.object({
-	site: required.refine(isValidJiraSiteURL, { message: 'jira_site_invalid' }),
+	site: required,
 	email: required,
 	apiToken: required,
 	project: required,

frontend/src/container/CreateAlertChannels/schemas/slack.ts

@@ -2,6 +2,30 @@ import { z } from 'zod';
 
 import { requiredString } from './shared';
 
+// rows with a blank title or text are dropped on save, so only the rest are checked
+const fieldRow = z
+	.object({ title: z.string().optional(), value: z.string().optional() })
+	.refine((row) => !row.title?.trim() || !!row.value?.trim(), {
+		message: 'slack_field_value_required',
+		path: ['value'],
+	});
+
+const actionRow = z
+	.object({
+		text: z.string().optional(),
+		url: z.string().optional(),
+		name: z.string().optional(),
+	})
+	.refine(
+		(row) => !row.text?.trim() || !!row.url?.trim() || !!row.name?.trim(),
+		{
+			message: 'slack_action_url_or_name_required',
+			path: ['url'],
+		},
+	);
+
 export const slackSchema = z.object({
 	apiUrl: requiredString('webhook_url_required'),
+	fields: z.array(fieldRow).nullish(),
+	actions: z.array(actionRow).nullish(),
 });

frontend/src/container/CreateAlertChannels/schemas/webhook.ts

@@ -1,16 +1,26 @@
 import { z } from 'zod';
 
+import { WebhookAuth } from '../types';
+import { webhookAuthOf } from '../utils';
 import { requiredString } from './shared';
 
 export const webhookSchema = z
 	.object({
 		url: requiredString('webhook_url_required'),
+		webhookAuth: z.enum(WebhookAuth).optional(),
 		username: z.string().optional(),
 		password: z.string().optional(),
+		bearerToken: z.string().optional(),
 	})
-	// the API allows bearer-only and no-auth webhooks, but a username without its
-	// password is still an incomplete basic auth pair
-	.refine((v) => !v.username || !!v.password, {
-		message: 'username_no_password',
-		path: ['password'],
-	});
+	.refine(
+		(values) =>
+			webhookAuthOf(values) !== WebhookAuth.basic ||
+			!!values.username?.trim() ||
+			!!values.password?.trim(),
+		{ message: 'webhook_basic_auth_required', path: ['username'] },
+	)
+	.refine(
+		(values) =>
+			webhookAuthOf(values) !== WebhookAuth.bearer || !!values.bearerToken?.trim(),
+		{ message: 'webhook_bearer_token_required', path: ['bearerToken'] },
+	);

frontend/src/container/CreateAlertChannels/types.ts

@@ -31,6 +31,15 @@ export type ChannelSpecFormValues = Partial<
 		AlertmanagertypesChannelTelegramConfigDTO
 >;
 
+export const WebhookAuth = {
+	none: 'none',
+	basic: 'basic',
+	bearer: 'bearer',
+} as const;
+export type WebhookAuth = (typeof WebhookAuth)[keyof typeof WebhookAuth];
+
 export type ChannelFormValues = ChannelSpecFormValues & {
 	name?: string;
+	/** Never sent: the API reads the mode from which credentials are set. */
+	webhookAuth?: WebhookAuth;
 };

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,29 +1,4 @@
-const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
-
-export const isValidGoogleChatWebhookURL = (url: string): boolean => {
-	try {
-		const { protocol, hostname } = new URL(url);
-		return (
-			protocol === 'https:' && hostname.toLowerCase() === GOOGLE_CHAT_WEBHOOK_HOST
-		);
-	} catch {
-		return false;
-	}
-};
-
-const JIRA_CLOUD_HOST_SUFFIX = '.atlassian.net';
-
-export const isValidJiraSiteURL = (url: string): boolean => {
-	try {
-		const { protocol, hostname } = new URL(url);
-		return (
-			protocol === 'https:' &&
-			hostname.toLowerCase().endsWith(JIRA_CLOUD_HOST_SUFFIX)
-		);
-	} catch {
-		return false;
-	}
-};
+import { ChannelFormValues, WebhookAuth } from './types';
 
 // mirrors go's prometheus model.Duration units
 const JIRA_DURATION_UNIT_MS: Record<string, number> = {
@@ -94,21 +69,21 @@ export const canonicalJiraReopenDuration = (value: string): string => {
 	}, '');
 };
 
-const INCIDENTIO_EVENTS_PATH_PREFIX = '/v2/alert_events/http/';
-
-// the backend enforces the same rule, this is only for a nicer error experience
-export const isValidIncidentIOURL = (url: string): boolean => {
-	try {
-		const { protocol, pathname } = new URL(url);
-		const idx = pathname.indexOf(INCIDENTIO_EVENTS_PATH_PREFIX);
-		return (
-			protocol === 'https:' &&
-			idx !== -1 &&
-			pathname.length > idx + INCIDENTIO_EVENTS_PATH_PREFIX.length
-		);
-	} catch {
-		return false;
+export const webhookAuthOf = (
+	values: Pick<
+		ChannelFormValues,
+		'webhookAuth' | 'username' | 'password' | 'bearerToken'
+	>,
+): WebhookAuth => {
+	if (values.webhookAuth) {
+		return values.webhookAuth;
 	}
+	if (values.bearerToken) {
+		return WebhookAuth.bearer;
+	}
+	return values.username || values.password
+		? WebhookAuth.basic
+		: WebhookAuth.none;
 };
 
 export const filledRows = <T>(

frontend/src/container/CreateAlertChannels/validation.test.ts

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+
+import { ChannelFormValues, ChannelKind, WebhookAuth } from './types';
+import { validateChannel } from './validation';
+
+const t = ((key: string) => key) as TFunction;
+
+describe('validateChannel', () => {
+	it.each<[string, ChannelKind, ChannelFormValues, string | null]>([
+		[
+			'a google chat webhook behind a proxy',
+			ChannelKind.googlechat,
+			{ webhookUrl: 'http://relay.internal/chat' },
+			null,
+		],
+		[
+			'a jira site that is not on atlassian.net',
+			ChannelKind.jira,
+			{
+				site: 'https://jira-proxy.acme.com/',
+				email: 'a@acme.com',
+				apiToken: 't',
+				project: 'OPS',
+				issueType: 'Bug',
+			},
+			null,
+		],
+		[
+			'any incident.io url',
+			ChannelKind.incidentio,
+			{ url: 'https://relay.internal/incidentio', token: 'tok' },
+			null,
+		],
+		[
+			'an incident.io token pasted with its Bearer prefix',
+			ChannelKind.incidentio,
+			{ url: 'https://relay.internal/incidentio', token: 'Bearer tok' },
+			'incidentio_token_bearer_prefix',
+		],
+		[
+			'an incident.io token with a trailing space',
+			ChannelKind.incidentio,
+			{ url: 'https://relay.internal/incidentio', token: 'tok ' },
+			'incidentio_token_whitespace',
+		],
+		[
+			'a webhook username without a password',
+			ChannelKind.webhook,
+			{ url: 'https://hook', webhookAuth: WebhookAuth.basic, username: 'u' },
+			null,
+		],
+		[
+			'basic auth with neither username nor password',
+			ChannelKind.webhook,
+			{ url: 'https://hook', webhookAuth: WebhookAuth.basic },
+			'webhook_basic_auth_required',
+		],
+		[
+			'bearer auth without a token',
+			ChannelKind.webhook,
+			{ url: 'https://hook', webhookAuth: WebhookAuth.bearer, username: 'u' },
+			'webhook_bearer_token_required',
+		],
+		[
+			'a slack field without a value',
+			ChannelKind.slack,
+			{ apiUrl: 'https://hooks', fields: [{ title: 'env', value: '' }] },
+			'slack_field_value_required',
+		],
+		[
+			'a slack button with neither url nor name',
+			ChannelKind.slack,
+			{
+				apiUrl: 'https://hooks',
+				actions: [{ type: 'button', text: 'Runbook', url: '' }],
+			},
+			'slack_action_url_or_name_required',
+		],
+		[
+			'a slack button with a name only',
+			ChannelKind.slack,
+			{
+				apiUrl: 'https://hooks',
+				actions: [{ type: 'button', text: 'Ack', name: 'ack' }],
+			},
+			null,
+		],
+	])('%s', (_, kind, values, expected) => {
+		expect(validateChannel(kind, { name: 'channel', ...values }, t)).toBe(
+			expected,
+		);
+	});
+});

frontend/src/container/CreateAlertV2/utils.tsx

@@ -3,6 +3,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Spin } from 'antd';
 import { TIMEZONE_DATA } from 'components/CustomTimePicker/timezoneUtils';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { getRandomColor } from 'container/ExplorerOptions/utils';
 import { AlertDetectionTypes } from 'container/FormAlertRules';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
@@ -53,9 +54,7 @@ export function getColorForThreshold(thresholdLabel: string): string {
 	if (thresholdLabel === 'info') {
 		return Color.BG_ROBIN_500;
 	}
-	const colorKeys = Object.keys(Color) as (keyof typeof Color)[];
-	const randomKey = colorKeys[Math.floor(Math.random() * colorKeys.length)];
-	return Color[randomKey];
+	return getRandomColor();
 }
 
 export function parseGoTime(input: string): {

frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+import ExplorerOptions, { ExplorerOptionsProps } from './ExplorerOptions';
+import { getExplorerToolBarVisibility } from './utils';
+
+type ExplorerOptionsWrapperProps = Omit<
+	ExplorerOptionsProps,
+	'isExplorerOptionDrop'
+>;
+
+function ExplorerOptionWrapper({
+	disabled,
+	query,
+	isLoading,
+	onExport,
+	sourcepage,
+	isOneChartPerQuery,
+	splitedQueries,
+	signalSource,
+	handleChangeSelectedView,
+}: ExplorerOptionsWrapperProps): JSX.Element {
+	const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
+
+	useEffect(() => {
+		const toolbarVisibility = getExplorerToolBarVisibility(sourcepage);
+		setIsExplorerOptionHidden(!toolbarVisibility);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<ExplorerOptions
+			disabled={disabled}
+			query={query}
+			isLoading={isLoading}
+			onExport={onExport}
+			sourcepage={sourcepage}
+			signalSource={signalSource}
+			isExplorerOptionHidden={isExplorerOptionHidden}
+			setIsExplorerOptionHidden={setIsExplorerOptionHidden}
+			isOneChartPerQuery={isOneChartPerQuery}
+			splitedQueries={splitedQueries}
+			handleChangeSelectedView={handleChangeSelectedView}
+		/>
+	);
+}
+
+export default ExplorerOptionWrapper;

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

@@ -0,0 +1,234 @@
+.explorer-options-container {
+	position: fixed;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
+	left: calc(50% + 240px);
+	transform: translate(calc(-50% - 120px), 0);
+	transition: left 0.2s linear;
+
+	display: flex;
+	gap: 8px;
+	background-color: transparent;
+
+	.multi-alert-button,
+	.multi-dashboard-button {
+		min-width: 130px;
+
+		.ant-select-selector {
+			.ant-select-selection-placeholder {
+				margin-left: 0 !important;
+			}
+
+			.ant-select-arrow {
+				display: none !important;
+			}
+		}
+	}
+
+	&__divider {
+		--divider-vertical-margin: 0;
+	}
+}
+
+.hide-update {
+	left: calc(50% - 72px) !important;
+}
+
+.explorer-update {
+	display: inline-flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	background: color-mix(in srgb, var(--l1-border) 60%, transparent);
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	backdrop-filter: blur(20px);
+	box-sizing: border-box;
+
+	.action-icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 8px;
+		border-radius: 50px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-border);
+		cursor: pointer;
+		box-shadow: none;
+	}
+
+	.hidden {
+		display: none;
+	}
+}
+
+.explorer-options {
+	padding: 10px 12px;
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	backdrop-filter: blur(20px);
+
+	cursor: default;
+	display: flex;
+	gap: 16px;
+	z-index: 1;
+
+	.ant-select-selector {
+		padding: 0 !important;
+	}
+
+	hr {
+		border-color: var(--l1-border);
+	}
+
+	.view-options,
+	.actions {
+		.info-icon {
+			margin: 8px;
+		}
+
+		.hidden {
+			display: none;
+		}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+
+		.ant-select-focused {
+			border-color: transparent !important;
+
+			.ant-select-selector {
+				border-color: transparent !important;
+				box-shadow: none !important;
+			}
+		}
+
+		.ant-select-selector {
+			border: transparent !important;
+			background-color: transparent !important;
+
+			.ant-select-selection-placeholder {
+				margin-left: 12px;
+			}
+		}
+	}
+	.hidden {
+		display: none;
+	}
+
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.app-content {
+	&.collapsed {
+		.explorer-options-container {
+			left: calc(50% + 72px);
+		}
+	}
+}
+
+.render-options {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 2px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+
+	.dot {
+		margin-left: 6px;
+		min-height: 6px;
+		min-width: 6px;
+		border-radius: 50%;
+		backdrop-filter: blur(20px);
+	}
+}
+
+.save-view-modal {
+	width: 384px !important;
+	.ant-modal-content {
+		padding: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+
+		.ant-modal-header {
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.ant-modal-body {
+			padding: 12px 16px 0px 16px;
+
+			.ant-typography {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 20px; /* 142.857% */
+			}
+
+			.save-view-input {
+				margin-top: 8px;
+				display: flex;
+				gap: 8px;
+			}
+
+			.ant-color-picker-trigger {
+				padding: 6px;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				width: 32px;
+				height: 32px;
+
+				.ant-color-picker-color-block {
+					border-radius: 50px;
+					width: 16px;
+					height: 16px;
+					flex-shrink: 0;
+
+					.ant-color-picker-color-block-inner {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+			}
+		}
+
+		.ant-modal-footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: 16px 16px;
+			margin: 0;
+			.save-button {
+				display: flex;
+			}
+		}
+	}
+	.title {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px;
+	}
+}

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

@@ -0,0 +1,48 @@
+.explorer-option-droppable-container {
+	position: fixed;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
+	width: -webkit-fill-available;
+	height: 24px;
+	display: flex;
+	justify-content: center;
+	border-radius: 10px 10px 0px 0px;
+	// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+	// backdrop-filter: blur(20px);
+
+	.explorer-actions-btn {
+		display: flex;
+		gap: 8px;
+		margin-right: 8px;
+
+		.action-btn {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 10px 10px 0px 0px;
+			box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+			backdrop-filter: blur(20px);
+			height: 24px !important;
+			border: none;
+		}
+	}
+
+	.explorer-show-btn {
+		border-radius: 6px 6px 0px 0px;
+		border: 1px solid var(--l1-border);
+		background: color-mix(in srgb, var(--l1-border) 40%, transparent);
+		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+		backdrop-filter: blur(20px);
+		align-self: center;
+		padding: 8px 12px;
+		height: 24px !important;
+
+		.menu-bar {
+			border-radius: 50px;
+			background: var(--l3-background);
+			height: 4px;
+			width: 50px;
+		}
+	}
+}

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx

@@ -0,0 +1,84 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Tooltip } from 'antd';
+import { Disc3, X } from '@signozhq/icons';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { setExplorerToolBarVisibility } from './utils';
+
+import './ExplorerOptionsHideArea.styles.scss';
+
+interface DroppableAreaProps {
+	viewName: string;
+	isQueryUpdated: boolean;
+	isExplorerOptionHidden?: boolean;
+	sourcepage: DataSource;
+	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
+	handleClearSelect: () => void;
+	onUpdateQueryHandler: () => void;
+	isEditDeleteSupported: boolean;
+}
+
+function ExplorerOptionsHideArea({
+	viewName,
+	isQueryUpdated,
+	isExplorerOptionHidden,
+	sourcepage,
+	setIsExplorerOptionHidden,
+	handleClearSelect,
+	onUpdateQueryHandler,
+	isEditDeleteSupported,
+}: DroppableAreaProps): JSX.Element {
+	const handleShowExplorerOption = (): void => {
+		if (setIsExplorerOptionHidden) {
+			setIsExplorerOptionHidden(false);
+			setExplorerToolBarVisibility(true, sourcepage);
+		}
+	};
+
+	return (
+		<div className="explorer-option-droppable-container">
+			{isExplorerOptionHidden && (
+				<>
+					{viewName && (
+						<div className="explorer-actions-btn">
+							<Tooltip title="Clear this view">
+								<Button
+									onClick={handleClearSelect}
+									className="action-btn"
+									style={{ background: Color.BG_CHERRY_500 }}
+									icon={<X size={14} color={Color.BG_INK_500} />}
+								/>
+							</Tooltip>
+							{isEditDeleteSupported && isQueryUpdated && (
+								<Tooltip title="Update this View">
+									<Button
+										onClick={onUpdateQueryHandler}
+										className="action-btn"
+										style={{ background: Color.BG_ROBIN_500 }}
+										icon={<Disc3 size={14} color={Color.BG_INK_500} />}
+									/>
+								</Tooltip>
+							)}
+						</div>
+					)}
+					<Button
+						// style={{ alignSelf: 'center', marginRight: 'calc(10% - 20px)' }}
+						className="explorer-show-btn"
+						onClick={handleShowExplorerOption}
+						data-testid="show-explorer-option"
+					>
+						<div className="menu-bar" />
+					</Button>
+				</>
+			)}
+		</div>
+	);
+}
+
+ExplorerOptionsHideArea.defaultProps = {
+	isExplorerOptionHidden: undefined,
+	setIsExplorerOptionHidden: undefined,
+};
+
+export default ExplorerOptionsHideArea;

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -0,0 +1,391 @@
+import { useHistory } from 'react-router-dom';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableData';
+import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
+import { rest, server } from 'mocks-server/server';
+import {
+	defaultFeatureFlags,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { buildExportPanelLink } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+
+import ExplorerOptionWrapper from '../ExplorerOptionWrapper';
+import { getExplorerToolBarVisibility } from '../utils';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useHistory: jest.fn(),
+}));
+
+jest.mock('../utils', () => ({
+	getExplorerToolBarVisibility: jest.fn(),
+	generateRGBAFromHex: jest.fn(() => 'rgba(0, 0, 0, 0.08)'),
+	getRandomColor: jest.fn(() => '#000000'),
+	saveNewViewHandler: jest.fn(),
+	setExplorerToolBarVisibility: jest.fn(),
+	DATASOURCE_VS_ROUTES: {},
+}));
+
+const mockGetExplorerToolBarVisibility = jest.mocked(
+	getExplorerToolBarVisibility,
+);
+
+const mockUseHistory = jest.mocked(useHistory);
+
+// Mock data
+const TEST_QUERY_ID = 'test-query-id';
+const TEST_DASHBOARD_ID = 'test-dashboard-id';
+const TEST_DASHBOARD_TITLE_2 = 'Test Dashboard for Export';
+const NEW_DASHBOARD_ID = 'new-dashboard-id';
+
+// The export dialog talks to the generated Perses-spec dashboard endpoints.
+const V2_LIST_ENDPOINT = '*/api/v2/users/me/dashboards';
+const V2_CREATE_ENDPOINT = '*/api/v2/dashboards';
+
+// "Create new dashboard" names the dashboard from the `new_dashboard_title` i18n
+// key; the test-utils react-i18next mock returns the key verbatim.
+const NEW_DASHBOARD_TITLE = 'new_dashboard_title';
+
+// Use the existing mock query from the codebase
+const mockQuery: Query = {
+	...MOCK_QUERY,
+	id: TEST_QUERY_ID, // Override with our test ID
+} as Query;
+
+const ADD_TO_DASHBOARD_BUTTON_NAME = /add to dashboard/i;
+
+interface PickerDashboard {
+	id: string;
+	title: string;
+}
+
+/** Register the "list dashboards" endpoint the picker reads. */
+function mockDashboardList(dashboards: PickerDashboard[]): void {
+	server.use(
+		rest.get(V2_LIST_ENDPOINT, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						dashboards: dashboards.map(({ id, title }) => ({
+							id,
+							name: title,
+							spec: { display: { name: title } },
+						})),
+						reservedKeywords: [],
+					},
+				}),
+			),
+		),
+	);
+}
+
+/** Register the "create dashboard" endpoint the "New dashboard" button hits. */
+function mockCreateDashboard(id: string): void {
+	server.use(
+		rest.post(V2_CREATE_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(201), ctx.json({ status: 'success', data: { id } })),
+		),
+	);
+}
+
+// Helper function to render component with props
+const renderExplorerOptionWrapper = (
+	overrides = {},
+): ReturnType<typeof render> => {
+	const props = {
+		disabled: false,
+		query: mockQuery,
+		isLoading: false,
+		onExport: jest.fn() as jest.MockedFunction<
+			(
+				dashboard: ExportDashboard | null,
+				isNewDashboard?: boolean,
+				queryToExport?: Query,
+			) => void
+		>,
+		sourcepage: DataSource.LOGS,
+		isOneChartPerQuery: false,
+		splitedQueries: [],
+		signalSource: 'test-signal',
+		...overrides,
+	};
+
+	return render(
+		<ExplorerOptionWrapper
+			disabled={props.disabled}
+			query={props.query}
+			isLoading={props.isLoading}
+			onExport={props.onExport}
+			sourcepage={props.sourcepage}
+			isOneChartPerQuery={props.isOneChartPerQuery}
+			splitedQueries={props.splitedQueries}
+			signalSource={props.signalSource}
+		/>,
+		undefined,
+		{ appContextOverrides: { featureFlags: defaultFeatureFlags } },
+	);
+};
+
+describe('ExplorerOptionWrapper', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGetExplorerToolBarVisibility.mockReturnValue(true);
+	});
+
+	it('should navigate to alert creation page when "Create an Alert" is clicked in logs-explorer', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockPush = jest.fn();
+		mockUseHistory.mockReturnValue({
+			push: mockPush,
+		} as unknown as ReturnType<typeof useHistory>);
+
+		renderExplorerOptionWrapper({ sourcepage: DataSource.LOGS });
+
+		const createAlertButton = screen.getByRole('button', {
+			name: 'Create an Alert',
+		});
+		await user.click(createAlertButton);
+
+		expect(mockPush).toHaveBeenCalledTimes(1);
+		const calledWith = mockPush.mock.calls[0][0] as string;
+		const [path, search = ''] = calledWith.split('?');
+		expect(path).toBe('/alerts/new');
+		const params = new URLSearchParams(search);
+		expect(params.has('compositeQuery')).toBe(true);
+	});
+
+	describe('onExport functionality', () => {
+		it('should call onExport when New Dashboard button is clicked in export modal', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const testOnExport = jest.fn() as jest.MockedFunction<
+				(
+					dashboard: ExportDashboard | null,
+					isNewDashboard?: boolean,
+					queryToExport?: Query,
+				) => void
+			>;
+
+			mockCreateDashboard(NEW_DASHBOARD_ID);
+
+			renderExplorerOptionWrapper({ onExport: testOnExport });
+
+			// Find and click the "Add to Dashboard" button
+			const addToDashboardButton = screen.getByRole('button', {
+				name: ADD_TO_DASHBOARD_BUTTON_NAME,
+			});
+			await user.click(addToDashboardButton);
+
+			// Wait for the export modal to appear
+			await waitFor(() => {
+				expect(screen.getByRole('dialog')).toBeInTheDocument();
+			});
+
+			// Click the "New dashboard" button
+			const newDashboardButton = screen.getByTestId('export-panel-new-dashboard');
+			await user.click(newDashboardButton);
+
+			// Wait for the API call to complete and onExport to be called
+			await waitFor(() => {
+				expect(testOnExport).toHaveBeenCalledWith(
+					{ id: NEW_DASHBOARD_ID, title: NEW_DASHBOARD_TITLE },
+					true,
+				);
+			});
+		});
+
+		it('should call onExport when selecting existing dashboard and clicking Export button', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const testOnExport = jest.fn() as jest.MockedFunction<
+				(
+					dashboard: ExportDashboard | null,
+					isNewDashboard?: boolean,
+					queryToExport?: Query,
+				) => void
+			>;
+
+			// Mock existing dashboards with unique titles
+			const dashboards: PickerDashboard[] = [
+				{ id: 'dashboard-1', title: 'Dashboard 1' },
+				{ id: 'dashboard-2', title: 'Dashboard 2' },
+			];
+			mockDashboardList(dashboards);
+
+			renderExplorerOptionWrapper({ onExport: testOnExport });
+
+			// Find and click the "Add to Dashboard" button
+			const addToDashboardButton = screen.getByRole('button', {
+				name: ADD_TO_DASHBOARD_BUTTON_NAME,
+			});
+			await user.click(addToDashboardButton);
+
+			// Wait for the export modal to appear
+			await waitFor(() => {
+				expect(screen.getByRole('dialog')).toBeInTheDocument();
+			});
+
+			// Wait for the dashboard select to render AND finish loading. antd
+			// disables the Select while the list request is in flight, and a click
+			// on a disabled combobox is a no-op — so sync on the ready (enabled)
+			// state before clicking.
+			const modal = screen.getByRole('dialog');
+			await waitFor(() => {
+				const combobox = modal.querySelector('[role="combobox"]');
+				expect(combobox).toBeTruthy();
+				expect(combobox).not.toBeDisabled();
+			});
+
+			const dashboardSelect = modal.querySelector(
+				'[role="combobox"]',
+			) as HTMLElement;
+			expect(dashboardSelect).toBeInTheDocument();
+			await user.click(dashboardSelect);
+
+			// Wait for the dropdown options to appear and select the first dashboard
+			await waitFor(() => {
+				expect(screen.getByText(dashboards[0].title)).toBeInTheDocument();
+			});
+
+			// Click on the first dashboard option
+			const dashboardOption = screen.getByText(dashboards[0].title);
+			await user.click(dashboardOption);
+
+			// Wait for the selection to be made and the export button to be enabled
+			await waitFor(() => {
+				expect(screen.getByTestId('export-panel-export')).not.toHaveAttribute(
+					'aria-disabled',
+					'true',
+				);
+			});
+
+			// Click the export button
+			const exportButton = screen.getByTestId('export-panel-export');
+			await user.click(exportButton);
+
+			// Wait for onExport to be called with the selected dashboard
+			await waitFor(() => {
+				expect(testOnExport).toHaveBeenCalledWith(
+					{ id: dashboards[0].id, title: dashboards[0].title },
+					false,
+				);
+			});
+		});
+
+		it('should navigate to the panel editor via the export link without writing the dashboard', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			// Mock the safeNavigate function
+			const mockSafeNavigate = jest.fn();
+
+			const panelTypeParam = PANEL_TYPES.TIME_SERIES;
+			const query = mockQuery;
+
+			// Create a real handleExport function similar to LogsExplorerViews
+			// Export navigates only; it must not write the dashboard (PR #8029).
+			const handleExport = (dashboard: ExportDashboard | null): void => {
+				if (!dashboard) {
+					return;
+				}
+
+				// Call the real link builder (not mocked)
+				const dashboardEditView = buildExportPanelLink({
+					query,
+					panelType: panelTypeParam,
+					dashboardId: dashboard.id,
+				});
+
+				// Simulate navigation
+				mockSafeNavigate(dashboardEditView);
+			};
+
+			// Mock existing dashboards
+			const dashboards: PickerDashboard[] = [
+				{ id: TEST_DASHBOARD_ID, title: TEST_DASHBOARD_TITLE_2 },
+			];
+			mockDashboardList(dashboards);
+
+			renderExplorerOptionWrapper({ onExport: handleExport });
+
+			// Find and click the "Add to Dashboard" button
+			const addToDashboardButton = screen.getByRole('button', {
+				name: ADD_TO_DASHBOARD_BUTTON_NAME,
+			});
+			await user.click(addToDashboardButton);
+
+			// Wait for the export modal to appear
+			await waitFor(() => {
+				expect(screen.getByRole('dialog')).toBeInTheDocument();
+			});
+
+			// Wait for the dashboard select to render AND finish loading (see note above).
+			const modal = screen.getByRole('dialog');
+			await waitFor(() => {
+				const combobox = modal.querySelector('[role="combobox"]');
+				expect(combobox).toBeTruthy();
+				expect(combobox).not.toBeDisabled();
+			});
+
+			const dashboardSelect = modal.querySelector(
+				'[role="combobox"]',
+			) as HTMLElement;
+			expect(dashboardSelect).toBeInTheDocument();
+			await user.click(dashboardSelect);
+
+			// Wait for the dropdown options to appear and select the dashboard
+			await waitFor(() => {
+				expect(screen.getByText(dashboards[0].title)).toBeInTheDocument();
+			});
+
+			// Click on the dashboard option
+			const dashboardOption = screen.getByText(dashboards[0].title);
+			await user.click(dashboardOption);
+
+			// Wait for the selection to be made and the export button to be enabled
+			await waitFor(() => {
+				expect(screen.getByTestId('export-panel-export')).not.toHaveAttribute(
+					'aria-disabled',
+					'true',
+				);
+			});
+
+			// Click the export button
+			const exportButton = screen.getByTestId('export-panel-export');
+			await user.click(exportButton);
+
+			// Wait for the handleExport function to be called and navigation to occur
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+				// V2 panel-editor link: compositeQuery is double-encoded (see newPanelRoute).
+				expect(mockSafeNavigate).toHaveBeenCalledWith(
+					`/dashboard/${TEST_DASHBOARD_ID}/panel/new?panelKind=signoz%2FTimeSeriesPanel&compositeQuery=${encodeURIComponent(
+						encodeURIComponent(JSON.stringify(query)),
+					)}`,
+				);
+			});
+		});
+	});
+
+	it('should not show export buttons when component is disabled', () => {
+		const testOnExport = jest.fn() as jest.MockedFunction<
+			(
+				dashboard: ExportDashboard | null,
+				isNewDashboard?: boolean,
+				queryToExport?: Query,
+			) => void
+		>;
+
+		renderExplorerOptionWrapper({ disabled: true, onExport: testOnExport });
+
+		// The "Add to Dashboard" button should be disabled
+		const addToDashboardButton = screen.getByRole('button', {
+			name: ADD_TO_DASHBOARD_BUTTON_NAME,
+		});
+		expect(addToDashboardButton).toBeDisabled();
+	});
+});