fix: opamp collector reconnect send updated config

.github/CODEOWNERS

@@ -200,15 +200,6 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
-/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
-/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
-/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
-/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
-/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
-/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -216,8 +207,6 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv

docs/contributing/go/handler.md

@@ -179,7 +179,6 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
-- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,15 +23,6 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
-func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
-	sql := f.TextToJsonColumn(column)
-	sql = append(sql, "->"...)
-	sql = schema.Append(f.bunf, sql, mapField)
-	sql = append(sql, "->>"...)
-	sql = schema.Append(f.bunf, sql, key)
-	return sql
-}
-
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,67 +55,6 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
-func TestJSONExtractMapValue(t *testing.T) {
-	tests := []struct {
-		name     string
-		column   string
-		mapField string
-		key      string
-		expected string
-	}{
-		{
-			name:     "PlainKey",
-			column:   "data",
-			mapField: "labels",
-			key:      "team",
-			expected: `"data"::jsonb->'labels'->>'team'`,
-		},
-		{
-			name:     "DottedKey_OneMapEntry",
-			column:   "data",
-			mapField: "labels",
-			key:      "k8s.cluster",
-			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
-		},
-		{
-			name:     "SingleQuoteInKey_Doubled",
-			column:   "data",
-			mapField: "labels",
-			key:      "o'brien",
-			expected: `"data"::jsonb->'labels'->>'o''brien'`,
-		},
-		{
-			name:     "BackslashInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a\b`,
-			expected: `"data"::jsonb->'labels'->>'a\b'`,
-		},
-		{
-			name:     "DoubleQuoteInKey_Literal",
-			column:   "data",
-			mapField: "labels",
-			key:      `a"b`,
-			expected: `"data"::jsonb->'labels'->>'a"b'`,
-		},
-		{
-			name:     "QualifiedColumn",
-			column:   "rule.data",
-			mapField: "labels",
-			key:      "severity",
-			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			f := newFormatter(pgdialect.New())
-			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
-			assert.Equal(t, tt.expected, got)
-		})
-	}
-}
-
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

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

@@ -41,8 +41,6 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
-	ListRulesV3200,
-	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -75,8 +73,7 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
- * @deprecated
+ * This endpoint lists all alert rules with their current evaluation state
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -118,7 +115,6 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary List alert rules
  */
 
@@ -138,7 +134,6 @@ export function useListRules<
 }
 
 /**
- * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1393,97 +1388,3 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
-/**
- * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
- * @summary List alert rules (v3)
- */
-export const listRulesV3 = (
-	params?: ListRulesV3Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListRulesV3200>({
-		url: `/api/v3/rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
-	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListRulesV3QueryOptions = <
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
-		signal,
-	}) => listRulesV3(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listRulesV3>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListRulesV3QueryResult = NonNullable<
-	Awaited<ReturnType<typeof listRulesV3>>
->;
-export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List alert rules (v3)
- */
-
-export function useListRulesV3<
-	TData = Awaited<ReturnType<typeof listRulesV3>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListRulesV3Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listRulesV3>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListRulesV3QueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary List alert rules (v3)
- */
-export const invalidateListRulesV3 = async (
-	queryClient: QueryClient,
-	params?: ListRulesV3Params,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListRulesV3QueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -10188,99 +10188,6 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
-export interface RuletypesLabelPairDTO {
-	/**
-	 * @type string
-	 */
-	key: string;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
-export enum RuletypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum RuletypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-	state = 'state',
-	severity = 'severity',
-}
-export type RuletypesListableRuleDTOLabels = { [key: string]: string };
-
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
-export interface RuletypesListableRuleDTO {
-	/**
-	 * @type string
-	 */
-	alert: string;
-	alertType: RuletypesAlertTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type object
-	 */
-	labels?: RuletypesListableRuleDTOLabels;
-	ruleType: RuletypesRuleTypeDTO;
-	state: RuletypesAlertStateDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface RuletypesListableRulesDTO {
-	/**
-	 * @type array
-	 */
-	labels: RuletypesLabelPairDTO[];
-	/**
-	 * @type array
-	 */
-	reservedKeywords: string[];
-	/**
-	 * @type array
-	 */
-	rules: RuletypesListableRuleDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	total: number;
-}
-
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10377,6 +10284,11 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14277,45 +14189,6 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
-export type ListRulesV3Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	query?: string;
-	/**
-	 * @type array
-	 * @description undefined
-	 */
-	states?: string[];
-	/**
-	 * @description undefined
-	 */
-	sort?: RuletypesListSortDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: RuletypesListOrderDTO;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-};
-
-export type ListRulesV3200 = {
-	data: RuletypesListableRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveAccessibleName('Download');
+		expect(button).toHaveClass('periscope-btn', 'ghost');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

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

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

@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
-	flex: 1;
-	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

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

@@ -1,33 +0,0 @@
-// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
-// only hand height down; each pane below owns its own scroll.
-.layout {
-	display: flex;
-	flex: 1;
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}
-
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
-	width: 280px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	position: relative;
-	overflow: visible;
-	z-index: 2;
-}
-
-// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
-// `height: 100%`), which owns the scrolling.
-.content {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}

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

@@ -1,54 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import QuickFilters from '../QuickFilters';
-
-import styles from './QuickFiltersLayout.module.scss';
-
-// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	ComponentProps<typeof QuickFilters>
->;
-
-export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
-	showFilters: boolean;
-	className?: string;
-	contentClassName?: string;
-	testId?: string;
-	children: ReactNode;
-}
-
-function QuickFiltersLayout({
-	quickFilterProps,
-	showFilters,
-	className,
-	contentClassName,
-	testId,
-	children,
-}: QuickFiltersLayoutProps): JSX.Element {
-	return (
-		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
-				<aside
-					className={styles.filters}
-					data-testid="quick-filters-layout-filters"
-				>
-					<QuickFilters {...quickFilterProps} />
-				</aside>
-			)}
-			<section
-				className={cx(styles.content, contentClassName)}
-				data-testid="quick-filters-layout-content"
-			>
-				<OverlayScrollbar>
-					<div>{children}</div>
-				</OverlayScrollbar>
-			</section>
-		</div>
-	);
-}
-
-export default QuickFiltersLayout;

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

@@ -1,79 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../types';
-import QuickFiltersLayout from '../QuickFiltersLayout';
-
-jest.mock('../QuickFiltersLayout.module.scss', () => ({
-	__esModule: true,
-	default: {
-		layout: 'layout',
-		filters: 'filters',
-		content: 'content',
-	},
-}));
-
-jest.mock('../../QuickFilters', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
-	),
-}));
-
-const quickFilterProps = {
-	source: QuickFiltersSource.TRACES_EXPLORER,
-	handleFilterVisibilityChange: jest.fn(),
-};
-
-describe('QuickFiltersLayout', () => {
-	it('renders QuickFilters with the given props inside the filters pane', () => {
-		render(
-			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
-		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
-		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
-			QuickFiltersSource.TRACES_EXPLORER,
-		);
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
-			'content',
-		);
-	});
-
-	it('does not render the filters pane when showFilters is false', () => {
-		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-		expect(screen.getByText('content')).toBeInTheDocument();
-	});
-
-	it('merges classNames onto the root and content panes', () => {
-		render(
-			<QuickFiltersLayout
-				showFilters
-				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
-			'content',
-			'page-content',
-		);
-	});
-});

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

@@ -6,12 +6,27 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.qf-api-monitoring {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-traces-explorer {
+		height: calc(100vh - 45px);
+	}
+
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -1,38 +0,0 @@
-// Hands the parent's height down to the active pane and lets the pane scroll
-// its own content, so TopNav and the tab bar stay put. Child combinators only
-// (nested Tabs must not be caught).
-.routeTab {
-	flex: 1;
-	min-height: 0;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) {
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active)
-	> :global(.overlay-scrollbar) {
-	flex: 1;
-	min-height: 0;
-}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,11 +5,6 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
-jest.mock('./RouteTab.module.scss', () => ({
-	__esModule: true,
-	default: { routeTab: 'routeTab' },
-}));
-
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -79,36 +74,6 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
-	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
-		);
-		expect(container.querySelector('.ant-tabs')).toHaveClass(
-			'routeTab',
-			'custom-tabs',
-		);
-	});
-
-	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(
-			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
-		).toHaveTextContent('Dummy Component 1');
-	});
-
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,32 +5,20 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
-import styles from './RouteTab.module.scss';
-
 interface Params {
 	[key: string]: string;
 }
 
-/**
- * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
- * stays put. Mounted as the page root the pane is bounded to the viewport; inside
- * a plain block wrapper the scroller is inert and the page scrolls as usual.
- * Pane content that needs a bounded box must size itself with `height: 100%`
- * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
- */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
-	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -62,16 +50,11 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: (
-			<OverlayScrollbar>
-				<Component />
-			</OverlayScrollbar>
-		),
+		children: <Component />,
 	}));
 
 	return (
 		<Tabs
-			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/constants/theme.ts

@@ -129,10 +129,6 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
-	/* Series palette (dark). Hues in the red band are deliberately absent: red is
-	   reserved for thresholds and error states, so an arbitrary series must never
-	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
-	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -156,13 +152,13 @@ const themeColors = {
 
 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		amber1: '#E1A155',
+		coralOrange: '#E17055',
 		pumpkin: '#FF7F50',
 
-		// Olives / Greens (3)
-		olive1: '#DFC33A',
-		olive2: '#D5E55D',
-		green7: '#81C220',
+		// Reds (3)
+		radicalRed: '#FF1A66',
+		crimsonRed: '#EB5757',
+		fireRed: '#E10600',
 
 		// Pinks (3)
 		hotPink: '#E84393',
@@ -195,9 +191,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		green8: '#5AC02B',
-		green9: '#48E043',
-		green10: '#68E788',
+		red1: '#C0392B',
+		red2: '#E74C3C',
+		red3: '#EC7063',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -216,9 +212,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		teal7: '#2BC07B',
-		teal8: '#43E0C5',
-		teal9: '#68D9E7',
+		crimson1: '#C0392B',
+		crimson2: '#E74C3C',
+		crimson3: '#EC7063',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -228,18 +224,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		cyan4: '#83C2EB',
+		blush1: '#FF6F91',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		blue7: '#4375E0',
-		blue8: '#686DE7',
-		indigo1: '#A68EED',
-		indigo2: '#B980EA',
-		purple6: '#EE98D9',
-		olive3: '#F2F0AE',
+		tomato1: '#E74C3C',
+		tomato2: '#EC7063',
+		tomato3: '#F1948A',
+		salmon1: '#FF6B6B',
+		salmon2: '#FF8787',
+		salmon3: '#FFA1A1',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -258,9 +254,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		purple4: '#A52BC0',
-		purple5: '#E043D0',
-		magenta4: '#E768B5',
+		red4: '#C0392B',
+		red5: '#E74C3C',
+		red6: '#EC7063',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -271,19 +267,18 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
-	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		magenta1: '#D81B60',
+		radicalRed: '#D81B60',
 
 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		amber1: '#E1A14B',
+		steelcoral: '#E14B5A',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		olive1: '#C9BD3A',
+		steelrust: '#C93A50',
 		steelgreen: '#2F7D69',
 
 		mediumOrchidDark: '#8E24AA',
@@ -291,17 +286,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		green1: '#ACDB24',
-		green2: '#66CC21',
+		outrageousOrangeDark: '#E64A19',
+		roseBudDark: '#D84315',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',
 
 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		green3: '#3F8B3A',
+		chestnut: '#8B3A3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		green4: '#3CC964',
+		beautyBushDark: '#C93C3C',
 
 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -309,13 +304,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',
 
-		teal1: '#1FBF83',
+		harleyOrange: '#CC2E12',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',
 
-		teal2: '#28C6C1',
+		red: '#C62828',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -325,7 +320,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		cyan1: '#1B546D',
+		maroon: '#6D1B1B',
 		navy: '#0D1B5E',
 		gray: '#616161',
 
@@ -333,25 +328,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		blue1: '#3B74DF',
+		tomato: '#E53935',
 		steelBlue: '#3A6EA5',
 
 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		blue2: '#4041B0',
+		indianRed: '#B04040',
 		mediumSlateBlue: '#5C6BC0',
-		indigo1: '#6644A9',
+		rosyBrownDark: '#A94444',
 		darkSlateGray: '#2E4A4A',
 
 		fuchsia: '#C511C5',
-		indigo2: '#AD42E0',
-		purple1: '#C83AC5',
+		salmonDark: '#E64A3C',
+		darkSalmonDark: '#C85A3A',
 		paleVioletRedDark: '#C2186A',
 
 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		purple2: '#E573BC',
+		lightCoralDark: '#E57373',
 
 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -1,15 +1,23 @@
-.api-monitoring-explorer {
-	.api-quick-filters-header {
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
+.api-monitoring-page {
+	display: flex;
+	height: 100%;
 
-		display: flex;
-		align-items: center;
-		gap: 6px;
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;
 
-		font-size: 14px;
-		line-height: 18px;
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--l1-border);
+			border-right: 1px solid var(--l1-border);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
 	}
 
 	.api-module-right-section {
@@ -153,6 +161,16 @@
 			}
 		}
 	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }
 
 .no-filtered-domains-message-container {

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

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -19,21 +20,20 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="api-monitoring-explorer"
-				showFilters
-				quickFilterProps={{
-					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<QuickFilters
+						className="qf-api-monitoring"
+						source={QuickFiltersSource.API_MONITORING}
+						signal={SignalType.API_MONITORING}
+						showFilterCollapse={false}
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
 				<DomainList />
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/ExplorerActions/AddToDashboardButton.tsx

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { Grid2X2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 } from 'uuid';
-
-import { EXPLORER_ACTION_EVENTS, getExportPanelType } from './utils';
-
-function AddToDashboardButton({
-	query,
-	sourcepage,
-	panelType,
-}: {
-	query: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-}): JSX.Element {
-	const [queryToExport, setQueryToExport] = useState<Query | null>(null);
-	const { panelType: contextPanelType } = useQueryBuilder();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();
-
-	const open = (): void => {
-		if (!query) {
-			return;
-		}
-		void logEvent(EXPLORER_ACTION_EVENTS.addToDashboard, {
-			sourcepage,
-			panelType: contextPanelType,
-		});
-		setQueryToExport(query);
-	};
-
-	const handleExport = (
-		dashboard: ExportDashboard | null,
-		isNewDashboard?: boolean,
-	): void => {
-		if (!dashboard || !queryToExport) {
-			return;
-		}
-		const exportPanelType = panelType ?? getExportPanelType(contextPanelType);
-
-		void logEvent(EXPLORER_ACTION_EVENTS.exported, {
-			sourcepage,
-			panelType: exportPanelType,
-			isNewDashboard,
-			dashboardName: dashboard.title,
-		});
-
-		const link = getExportToDashboardLink({
-			query: queryToExport,
-			panelType: exportPanelType,
-			dashboardId: dashboard.id,
-			widgetId: v4(),
-		});
-		if (link) {
-			safeNavigate(link);
-		}
-	};
-
-	const button = (
-		<Button
-			variant="ghost"
-			color="secondary"
-			size="icon"
-			disabled={!query}
-			onClick={open}
-			prefix={<Grid2X2 size={16} />}
-			aria-label="Add to dashboard"
-			data-testid="explorer-add-to-dashboard"
-		/>
-	);
-
-	return (
-		<>
-			<TooltipSimple title="Add to dashboard">{button}</TooltipSimple>
-			<ExportPanelContainer
-				open={queryToExport !== null}
-				onClose={(): void => setQueryToExport(null)}
-				query={queryToExport}
-				onExport={handleExport}
-			/>
-		</>
-	);
-}
-
-export default AddToDashboardButton;

frontend/src/container/ExplorerActions/CreateAlertButton.tsx

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

frontend/src/container/ExplorerActions/ExplorerActions.tsx

@@ -1,38 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddToDashboardButton from './AddToDashboardButton';
-import CreateAlertButton from './CreateAlertButton';
-
-function ExplorerActions({
-	query,
-	dashboardQuery = query,
-	sourcepage,
-	panelType,
-	iconOnly,
-}: {
-	query: Query | null;
-	// When the dashboard export differs from the alert one (traces list injects columns).
-	dashboardQuery?: Query | null;
-	sourcepage: DataSource;
-	panelType?: PANEL_TYPES;
-	iconOnly?: boolean;
-}): JSX.Element {
-	return (
-		<>
-			<CreateAlertButton
-				query={query}
-				sourcepage={sourcepage}
-				iconOnly={iconOnly}
-			/>
-			<AddToDashboardButton
-				query={dashboardQuery}
-				sourcepage={sourcepage}
-				panelType={panelType}
-			/>
-		</>
-	);
-}
-
-export default ExplorerActions;

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

@@ -1,317 +0,0 @@
-import logEvent from 'api/common/logEvent';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	getExportQueryData as getLogsExportQuery,
-	getQueryByPanelType as getLogsQueryByPanelType,
-} from 'container/LogsExplorerViews/explorerUtils';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import {
-	getExportQueryData as getTracesExportQuery,
-	getQueryByPanelType as getTracesQueryByPanelType,
-} from 'container/TracesExplorer/explorerUtils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { buildExportPanelLink } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import AddToDashboardButton from '../AddToDashboardButton';
-import { EXPLORER_ACTION_EVENTS, getExportPanelType } from '../utils';
-
-const DASHBOARD = { id: 'dash-1', title: 'Dash 1' };
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: jest.fn(),
-}));
-jest.mock('uuid', () => ({ v4: (): string => 'widget-1' }));
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-// The picker is the dialog's business; here it just hands a dashboard back.
-jest.mock('container/ExportPanel/ExportPanelContainer', () => ({
-	__esModule: true,
-	default: ({
-		open,
-		query,
-		onExport,
-	}: {
-		open: boolean;
-		query: Query | null;
-		onExport: (dashboard: { id: string; title: string }) => void;
-	}): JSX.Element | null =>
-		open ? (
-			<button
-				type="button"
-				data-testid="export-stub"
-				data-query={JSON.stringify(query)}
-				onClick={(): void => onExport({ id: 'dash-1', title: 'Dash 1' })}
-			>
-				export
-			</button>
-		) : null,
-}));
-
-const mockSafeNavigate = jest.fn();
-const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
-const mockedUseSafeNavigate = jest.mocked(useSafeNavigate);
-const mockedLogEvent = jest.mocked(logEvent);
-
-const FILTER = "service.name = 'frontend'";
-const COLUMNS = [{ name: 'service.name' }, { name: 'name' }];
-const options = { selectColumns: COLUMNS } as unknown as OptionsQuery;
-
-function stagedQuery(dataSource: DataSource, queryName = 'A'): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		id: `query-${queryName}`,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					queryName,
-					aggregateOperator: StringOperators.COUNT,
-					filter: { expression: FILTER },
-					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-function setPanelType(panelType: PANEL_TYPES): void {
-	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
-		typeof useQueryBuilder
-	>);
-}
-
-async function exportTo(
-	query: Query | null,
-	sourcepage: DataSource,
-	panelType: PANEL_TYPES,
-	panelTypeProp?: PANEL_TYPES,
-): Promise<void> {
-	setPanelType(panelType);
-	render(
-		<AddToDashboardButton
-			query={query}
-			sourcepage={sourcepage}
-			panelType={panelTypeProp}
-		/>,
-	);
-	const user = userEvent.setup();
-	await user.click(screen.getByTestId('explorer-add-to-dashboard'));
-	await user.click(screen.getByTestId('export-stub'));
-}
-
-function expectedLink(query: Query, panelType: PANEL_TYPES): string | null {
-	return buildExportPanelLink({
-		query,
-		panelType,
-		dashboardId: DASHBOARD.id,
-	});
-}
-
-describe('AddToDashboardButton', () => {
-	beforeEach(() => {
-		mockSafeNavigate.mockReset();
-		mockedLogEvent.mockClear();
-		mockedUseSafeNavigate.mockReturnValue({ safeNavigate: mockSafeNavigate });
-	});
-
-	it('is disabled without a query and the picker stays closed', () => {
-		setPanelType(PANEL_TYPES.LIST);
-		render(<AddToDashboardButton query={null} sourcepage={DataSource.LOGS} />);
-
-		expect(screen.getByTestId('explorer-add-to-dashboard')).toBeDisabled();
-		expect(screen.queryByTestId('export-stub')).not.toBeInTheDocument();
-	});
-
-	it('hands the picker the same query it will export', async () => {
-		const query = stagedQuery(DataSource.LOGS);
-		setPanelType(PANEL_TYPES.TIME_SERIES);
-		render(<AddToDashboardButton query={query} sourcepage={DataSource.LOGS} />);
-
-		await userEvent
-			.setup()
-			.click(screen.getByTestId('explorer-add-to-dashboard'));
-
-		expect(screen.getByTestId('export-stub')).toHaveAttribute(
-			'data-query',
-			JSON.stringify(query),
-		);
-	});
-
-	it('logs open and success with the source page', async () => {
-		const query = stagedQuery(DataSource.TRACES);
-
-		await exportTo(query, DataSource.TRACES, PANEL_TYPES.TABLE);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			EXPLORER_ACTION_EVENTS.addToDashboard,
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TABLE,
-			},
-		);
-		expect(mockedLogEvent).toHaveBeenCalledWith(EXPLORER_ACTION_EVENTS.exported, {
-			sourcepage: DataSource.TRACES,
-			panelType: PANEL_TYPES.TABLE,
-			isNewDashboard: undefined,
-			dashboardName: DASHBOARD.title,
-		});
-	});
-
-	it('a panel type from the page wins over the fold of the context one', async () => {
-		const query = stagedQuery(DataSource.METRICS);
-
-		// context says list, the page says time series
-		await exportTo(
-			query,
-			DataSource.METRICS,
-			PANEL_TYPES.LIST,
-			PANEL_TYPES.TIME_SERIES,
-		);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expectedLink(query, PANEL_TYPES.TIME_SERIES),
-		);
-	});
-
-	describe('logs, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.LOGS);
-
-		it('list: the list request shaping with timestamp desc, panel type list', async () => {
-			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
-				page: 1,
-				pageSize: 100,
-				filters: { items: [], op: 'AND' },
-				filter: { expression: FILTER },
-			});
-			const exportQuery = getLogsExportQuery(
-				listRequest,
-				PANEL_TYPES.LIST,
-			) as Query;
-
-			await exportTo(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
-
-			expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([
-				{ columnName: 'timestamp', order: 'desc' },
-			]);
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.LIST),
-			);
-		});
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query untouched, same panel type',
-			async (panelType) => {
-				const exportQuery = getLogsExportQuery(staged, panelType) as Query;
-
-				await exportTo(exportQuery, DataSource.LOGS, panelType);
-
-				expect(exportQuery).toBe(staged);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(staged, panelType),
-				);
-			},
-		);
-	});
-
-	describe('traces, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.TRACES);
-
-		it('list: list shaping plus the selected columns, panel type list', async () => {
-			const exportQuery = getTracesExportQuery(
-				getTracesQueryByPanelType(staged, PANEL_TYPES.LIST),
-				getExportPanelType(PANEL_TYPES.LIST),
-				options,
-			);
-
-			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.LIST);
-
-			const [queryData] = exportQuery.builder.queryData;
-			expect(queryData.selectColumns).toStrictEqual(COLUMNS);
-			expect(queryData.groupBy).toStrictEqual([]);
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.LIST),
-			);
-		});
-
-		it('trace: list shaping, no columns, panel type folds to time series', async () => {
-			const exportQuery = getTracesExportQuery(
-				getTracesQueryByPanelType(staged, PANEL_TYPES.TRACE),
-				getExportPanelType(PANEL_TYPES.TRACE),
-				options,
-			);
-
-			await exportTo(exportQuery, DataSource.TRACES, PANEL_TYPES.TRACE);
-
-			expect(exportQuery.builder.queryData[0].selectColumns).toBeUndefined();
-			expect(mockSafeNavigate).toHaveBeenCalledWith(
-				expectedLink(exportQuery, PANEL_TYPES.TIME_SERIES),
-			);
-		});
-
-		// Same as the alert: the list / trace order lives in ListView state and the
-		// page shapes the export without it, so the panel query has no order by.
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: order by is not carried into the panel query',
-			async (panelType) => {
-				expect(staged.builder.queryData[0].orderBy).toHaveLength(1);
-				const exportQuery = getTracesExportQuery(
-					getTracesQueryByPanelType(staged, panelType),
-					getExportPanelType(panelType),
-					options,
-				);
-
-				await exportTo(exportQuery, DataSource.TRACES, panelType);
-
-				expect(exportQuery.builder.queryData[0].orderBy).toStrictEqual([]);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(exportQuery, getExportPanelType(panelType)),
-				);
-			},
-		);
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query untouched, same panel type',
-			async (panelType) => {
-				const exportQuery = getTracesExportQuery(
-					getTracesQueryByPanelType(staged, panelType),
-					getExportPanelType(panelType),
-					options,
-				);
-
-				await exportTo(exportQuery, DataSource.TRACES, panelType);
-
-				expect(exportQuery).toBe(staged);
-				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					expectedLink(staged, panelType),
-				);
-			},
-		);
-	});
-
-	it('metrics: the chart query as is, panel type time series from the page', async () => {
-		const query = stagedQuery(DataSource.METRICS);
-
-		await exportTo(
-			query,
-			DataSource.METRICS,
-			PANEL_TYPES.TIME_SERIES,
-			PANEL_TYPES.TIME_SERIES,
-		);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expectedLink(query, PANEL_TYPES.TIME_SERIES),
-		);
-	});
-});

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

@@ -1,224 +0,0 @@
-import { useHistory } from 'react-router-dom';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import {
-	getExportQueryData as getLogsExportQuery,
-	getQueryByPanelType as getLogsQueryByPanelType,
-} from 'container/LogsExplorerViews/explorerUtils';
-import { getQueryByPanelType as getTracesQueryByPanelType } from 'container/TracesExplorer/explorerUtils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import CreateAlertButton from '../CreateAlertButton';
-import { EXPLORER_ACTION_EVENTS } from '../utils';
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: jest.fn(),
-}));
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
-const mockPush = jest.fn();
-const mockedUseHistory = jest.mocked(useHistory);
-const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
-const mockedLogEvent = jest.mocked(logEvent);
-
-const FILTER = "service.name = 'frontend'";
-const ORDER_BY = [{ columnName: 'timestamp', order: 'asc' }];
-
-function stagedQuery(
-	dataSource: DataSource,
-	aggregateOperator: StringOperators,
-	queryName = 'A',
-): Query {
-	const base = initialQueriesMap[dataSource];
-	return {
-		...base,
-		id: `query-${queryName}`,
-		builder: {
-			...base.builder,
-			queryData: [
-				{
-					...base.builder.queryData[0],
-					queryName,
-					aggregateOperator,
-					filter: { expression: FILTER },
-					orderBy: ORDER_BY,
-					groupBy: [{ key: 'service.name', dataType: 'string', type: 'resource' }],
-				},
-			],
-		},
-	} as Query;
-}
-
-function pushedQuery(): Query {
-	expect(mockPush).toHaveBeenCalledTimes(1);
-	const [path, search] = (mockPush.mock.calls[0][0] as string).split('?');
-	expect(path).toBe(ROUTES.ALERTS_NEW);
-	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
-	return JSON.parse(raw as string);
-}
-
-function setPanelType(panelType: PANEL_TYPES): void {
-	mockedUseQueryBuilder.mockReturnValue({ panelType } as ReturnType<
-		typeof useQueryBuilder
-	>);
-}
-
-async function clickCreateAlert(
-	query: Query | null,
-	sourcepage: DataSource,
-	panelType: PANEL_TYPES,
-): Promise<void> {
-	setPanelType(panelType);
-	render(<CreateAlertButton query={query} sourcepage={sourcepage} />);
-	await userEvent.setup().click(screen.getByTestId('explorer-create-alert'));
-}
-
-describe('CreateAlertButton', () => {
-	beforeEach(() => {
-		mockPush.mockReset();
-		mockedLogEvent.mockClear();
-		mockedUseHistory.mockReturnValue({ push: mockPush } as unknown as ReturnType<
-			typeof useHistory
-		>);
-	});
-
-	it('is disabled and does nothing without a query', async () => {
-		await clickCreateAlert(null, DataSource.LOGS, PANEL_TYPES.LIST);
-
-		expect(screen.getByTestId('explorer-create-alert')).toBeDisabled();
-		expect(mockPush).not.toHaveBeenCalled();
-	});
-
-	it('logs one event with the source page', async () => {
-		const query = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
-
-		await clickCreateAlert(query, DataSource.TRACES, PANEL_TYPES.TIME_SERIES);
-
-		expect(mockedLogEvent).toHaveBeenCalledWith(
-			EXPLORER_ACTION_EVENTS.createAlert,
-			{
-				sourcepage: DataSource.TRACES,
-				panelType: PANEL_TYPES.TIME_SERIES,
-			},
-		);
-	});
-
-	describe('logs, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.LOGS, StringOperators.NOOP);
-
-		it('list: count aggregation, no order by, filter and pagination as the page sent them', async () => {
-			const listRequest = getLogsQueryByPanelType(staged, PANEL_TYPES.LIST, {
-				page: 1,
-				pageSize: 100,
-				filters: { items: [], op: 'AND' },
-				filter: { expression: FILTER },
-			});
-			const exportQuery = getLogsExportQuery(
-				listRequest,
-				PANEL_TYPES.LIST,
-			) as Query;
-
-			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.LIST);
-
-			const [queryData] = pushedQuery().builder.queryData;
-			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-			expect(queryData.orderBy).toStrictEqual([]);
-			expect(queryData.groupBy).toStrictEqual([]);
-			expect(queryData.filter).toStrictEqual({ expression: FILTER });
-			expect(queryData.pageSize).toBe(100);
-		});
-
-		it('time series: staged query as is, order by and group by kept', async () => {
-			const tsStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
-			const exportQuery = getLogsExportQuery(
-				tsStaged,
-				PANEL_TYPES.TIME_SERIES,
-			) as Query;
-
-			await clickCreateAlert(
-				exportQuery,
-				DataSource.LOGS,
-				PANEL_TYPES.TIME_SERIES,
-			);
-
-			const [queryData] = pushedQuery().builder.queryData;
-			expect(queryData).toStrictEqual(tsStaged.builder.queryData[0]);
-		});
-
-		it('table: staged query as is', async () => {
-			const tableStaged = stagedQuery(DataSource.LOGS, StringOperators.COUNT);
-			const exportQuery = getLogsExportQuery(
-				tableStaged,
-				PANEL_TYPES.TABLE,
-			) as Query;
-
-			await clickCreateAlert(exportQuery, DataSource.LOGS, PANEL_TYPES.TABLE);
-
-			expect(pushedQuery().builder).toStrictEqual(tableStaged.builder);
-		});
-	});
-
-	describe('traces, the query the page hands over per view', () => {
-		const staged = stagedQuery(DataSource.TRACES, StringOperators.NOOP);
-
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: count aggregation, group by cleared by the list shaping, filter kept',
-			async (panelType) => {
-				const exportQuery = getTracesQueryByPanelType(staged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				const [queryData] = pushedQuery().builder.queryData;
-				expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-				expect(queryData.groupBy).toStrictEqual([]);
-				expect(queryData.filter).toStrictEqual({ expression: FILTER });
-			},
-		);
-
-		// The list / trace views keep their order in ListView state, and the page
-		// shapes the export without it, so the alert never sees an order by.
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'%s: order by is not carried, even when the staged query has one',
-			async (panelType) => {
-				expect(staged.builder.queryData[0].orderBy).toStrictEqual(ORDER_BY);
-				const exportQuery = getTracesQueryByPanelType(staged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				expect(pushedQuery().builder.queryData[0].orderBy).toStrictEqual([]);
-			},
-		);
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'%s: staged query as is',
-			async (panelType) => {
-				const aggStaged = stagedQuery(DataSource.TRACES, StringOperators.COUNT);
-				const exportQuery = getTracesQueryByPanelType(aggStaged, panelType);
-
-				await clickCreateAlert(exportQuery, DataSource.TRACES, panelType);
-
-				expect(pushedQuery().builder).toStrictEqual(aggStaged.builder);
-			},
-		);
-	});
-
-	it('metrics: the chart query as is', async () => {
-		const query = stagedQuery(DataSource.METRICS, StringOperators.COUNT);
-
-		await clickCreateAlert(query, DataSource.METRICS, PANEL_TYPES.TIME_SERIES);
-
-		expect(pushedQuery().builder).toStrictEqual(query.builder);
-	});
-});

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

@@ -1,144 +0,0 @@
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { StringOperators } from 'types/common/queryBuilder';
-
-import { getCreateAlertLink, getExportPanelType } from '../utils';
-
-function withFirstQuery(
-	base: Query,
-	overrides: Partial<Query['builder']['queryData'][number]>,
-): Query {
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [{ ...base.builder.queryData[0], ...overrides }],
-		},
-	};
-}
-
-function decodeQuery(link: string): Query {
-	const search = link.split('?')[1];
-	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
-	return JSON.parse(raw as string);
-}
-
-describe('getExportPanelType', () => {
-	it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE, PANEL_TYPES.LIST])(
-		'keeps %s',
-		(panelType) => {
-			expect(getExportPanelType(panelType)).toBe(panelType);
-		},
-	);
-
-	it.each([PANEL_TYPES.BAR, PANEL_TYPES.PIE, PANEL_TYPES.TRACE, null])(
-		'folds %s to time series',
-		(panelType) => {
-			expect(getExportPanelType(panelType)).toBe(PANEL_TYPES.TIME_SERIES);
-		},
-	);
-});
-
-describe('getCreateAlertLink', () => {
-	const orderBy = [{ columnName: 'timestamp', order: 'desc' }];
-
-	it('points at the new alert route with the query in the url', () => {
-		const query = initialQueriesMap.traces;
-		const link = getCreateAlertLink({
-			query,
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-
-		expect(link.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
-		expect(decodeQuery(link)).toStrictEqual(query);
-	});
-
-	it('logs list: noop becomes count and order by is dropped', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.NOOP,
-			orderBy,
-		});
-
-		const [queryData] = decodeQuery(
-			getCreateAlertLink({
-				query,
-				panelType: PANEL_TYPES.LIST,
-			}),
-		).builder.queryData;
-
-		expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-		expect(queryData.orderBy).toStrictEqual([]);
-	});
-
-	it('logs time series keeps order by', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.COUNT,
-			orderBy,
-		});
-
-		const [queryData] = decodeQuery(
-			getCreateAlertLink({
-				query,
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		).builder.queryData;
-
-		expect(queryData.orderBy).toStrictEqual(orderBy);
-	});
-
-	it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-		'%s drops order by whatever the source',
-		(panelType) => {
-			const query = withFirstQuery(initialQueriesMap.traces, {
-				aggregateOperator: StringOperators.NOOP,
-				orderBy,
-			});
-
-			const [queryData] = decodeQuery(getCreateAlertLink({ query, panelType }))
-				.builder.queryData;
-
-			expect(queryData.aggregateOperator).toBe(StringOperators.COUNT);
-			expect(queryData.orderBy).toStrictEqual([]);
-		},
-	);
-
-	it('converts a noop on any query, not only the first', () => {
-		const first = initialQueriesMap.logs.builder.queryData[0];
-		const query: Query = {
-			...initialQueriesMap.logs,
-			builder: {
-				...initialQueriesMap.logs.builder,
-				queryData: [
-					{ ...first, aggregateOperator: StringOperators.COUNT },
-					{ ...first, queryName: 'B', aggregateOperator: StringOperators.NOOP },
-				],
-			},
-		};
-
-		const operators = decodeQuery(
-			getCreateAlertLink({ query, panelType: PANEL_TYPES.TIME_SERIES }),
-		).builder.queryData.map((item) => item.aggregateOperator);
-
-		expect(operators).toStrictEqual([
-			StringOperators.COUNT,
-			StringOperators.COUNT,
-		]);
-	});
-
-	it('does not mutate the query it is given', () => {
-		const query = withFirstQuery(initialQueriesMap.logs, {
-			aggregateOperator: StringOperators.NOOP,
-			orderBy,
-		});
-		const snapshot = JSON.stringify(query);
-
-		getCreateAlertLink({
-			query,
-			panelType: PANEL_TYPES.LIST,
-		});
-
-		expect(JSON.stringify(query)).toBe(snapshot);
-	});
-});

frontend/src/container/ExplorerActions/utils.ts

@@ -1,46 +0,0 @@
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { cloneDeep } from 'lodash-es';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { StringOperators } from 'types/common/queryBuilder';
-
-export const EXPLORER_ACTION_EVENTS = {
-	createAlert: 'Explorer: Create alert clicked',
-	addToDashboard: 'Explorer: Add to dashboard clicked',
-	exported: 'Explorer: Add to dashboard successful',
-} as const;
-
-export function getExportPanelType(panelType: PANEL_TYPES | null): PANEL_TYPES {
-	return panelType && AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-		? panelType
-		: PANEL_TYPES.TIME_SERIES;
-}
-
-// Alerts need an aggregation, and list style views carry an order the alert
-// cannot use.
-export function getCreateAlertLink({
-	query,
-	panelType,
-}: {
-	query: Query;
-	panelType: PANEL_TYPES | null;
-}): string {
-	const isListStyle =
-		panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
-
-	const alertQuery = cloneDeep(query);
-	alertQuery.builder.queryData = alertQuery.builder.queryData.map((item) => ({
-		...item,
-		aggregateOperator:
-			item.aggregateOperator === StringOperators.NOOP
-				? StringOperators.COUNT
-				: item.aggregateOperator,
-		orderBy: isListStyle ? [] : item.orderBy,
-	}));
-
-	return `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-		JSON.stringify(alertQuery),
-	)}`;
-}

frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -186,21 +188,26 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
+			<div
 				className="trace-explorer-page"
-				testId="llm-observability-explorer"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.AI_OBSERVABILITY,
-					signal: SignalType.AI_OBSERVABILITY,
-					useFieldApis: quickFiltersFieldApis,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-				}}
+				data-testid="llm-observability-explorer"
 			>
-				<div className="trace-explorer">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.AI_OBSERVABILITY}
+						signal={SignalType.AI_OBSERVABILITY}
+						useFieldApis={quickFiltersFieldApis}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -284,7 +291,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
@@ -6,6 +6,7 @@ import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
@@ -13,18 +14,18 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 function LogsActionsContainer({
 	listQuery,
+	selectedPanelType,
 	showFrequencyChart,
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
-	explorerActions,
 }: {
 	listQuery: any;
+	selectedPanelType: PANEL_TYPES;
 	showFrequencyChart: boolean;
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
-	explorerActions: ReactNode;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -59,43 +60,48 @@ function LogsActionsContainer({
 		<div className="logs-actions-container">
 			<div className="tab-options">
 				<div className="tab-options-left">
-					<div className="frequency-chart-view-controller">
-						<Typography>Frequency chart</Typography>
-						<Switch
-							value={showFrequencyChart}
-							defaultValue
-							onChange={handleToggleFrequencyChart}
-						/>
-					</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<div className="frequency-chart-view-controller">
+							<Typography>Frequency chart</Typography>
+							<Switch
+								value={showFrequencyChart}
+								defaultValue
+								onChange={handleToggleFrequencyChart}
+							/>
+						</div>
+					)}
 				</div>
 
 				<div className="tab-options-right">
-					{explorerActions}
-					<div className="order-by-container">
-						<div className="order-by-label">
-							Order by <Minus size={14} /> <ArrowUp10 size={14} />
-						</div>
+					{selectedPanelType === PANEL_TYPES.LIST && (
+						<>
+							<div className="order-by-container">
+								<div className="order-by-label">
+									Order by <Minus size={14} /> <ArrowUp10 size={14} />
+								</div>
 
-						<ListViewOrderBy
-							value={orderBy}
-							onChange={(value): void => setOrderBy(value)}
-							dataSource={DataSource.LOGS}
-						/>
-					</div>
-					<div className="download-options-container">
-						<DownloadOptionsMenu
-							dataSource={DataSource.LOGS}
-							selectedColumns={options?.selectColumns}
-						/>
-					</div>
-					<div className="format-options-container">
-						<LogsFormatOptionsMenu
-							items={formatItems}
-							selectedOptionFormat={options.format}
-							config={config}
-							onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
-						/>
-					</div>
+								<ListViewOrderBy
+									value={orderBy}
+									onChange={(value): void => setOrderBy(value)}
+									dataSource={DataSource.LOGS}
+								/>
+							</div>
+							<div className="download-options-container">
+								<DownloadOptionsMenu
+									dataSource={DataSource.LOGS}
+									selectedColumns={options?.selectColumns}
+								/>
+							</div>
+							<div className="format-options-container">
+								<LogsFormatOptionsMenu
+									items={formatItems}
+									selectedOptionFormat={options.format}
+									config={config}
+									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
+								/>
+							</div>
+						</>
+					)}
 				</div>
 			</div>
 			{config.fieldsSelector && (

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

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

frontend/src/container/LogsExplorerViews/index.tsx

@@ -37,7 +37,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -141,10 +140,6 @@ function LogsExplorerViewsContainer({
 		[selectedPanelType, requestData],
 	);
 
-	const explorerActions = (
-		<ExplorerActions query={exportDefaultQuery} sourcepage={DataSource.LOGS} />
-	);
-
 	const {
 		data: listChartData,
 		isFetching: isFetchingListChartData,
@@ -421,14 +416,14 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && selectedPanelType === PANEL_TYPES.LIST && (
+				{!showLiveLogs && (
 					<LogsActionsContainer
 						listQuery={listQuery}
+						selectedPanelType={selectedPanelType}
 						showFrequencyChart={showFrequencyChart}
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
-						explorerActions={explorerActions}
 					/>
 				)}
 
@@ -479,23 +474,21 @@ function LogsExplorerViewsContainer({
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
 								allowExport
-								headerActions={explorerActions}
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							<div className="table-view-container-header">
-								{explorerActions}
-								{data && !isError && (
+							{data && !isError && (
+								<div className="table-view-container-header">
 									<ExportMenu
 										dataSource={DataSource.LOGS}
 										data={data}
 										query={stagedQuery || initialQueriesMap.metrics}
 										fileName="logs-table"
 									/>
-								)}
-							</div>
+								</div>
+							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -1,7 +1,18 @@
 .meter-explorer-container {
+	display: flex;
+	flex-direction: row;
+
+	.meter-explorer-quick-filters-section {
+		width: 280px;
+		border-right: 1px solid var(--l1-border);
+
+		&.hidden {
+			display: none;
+		}
+	}
+
 	.meter-explorer-content-section {
-		// Clearance for the fixed ExplorerOptions bar.
-		padding-bottom: 80px;
+		width: 100%;
 
 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -72,6 +83,14 @@
 			}
 		}
 	}
+
+	&.quick-filters-open {
+		.meter-explorer-content-section {
+			width: calc(100% - 280px);
+		}
+	}
+
+	padding-bottom: 80px;
 }
 
 .dashboards-and-alerts-popover-container {

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

@@ -3,8 +3,9 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -120,21 +121,29 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="meter-explorer-container"
-				showFilters={showQuickFilters}
-				quickFilterProps={{
-					className: 'qf-meter-explorer',
-					source: QuickFiltersSource.METER_EXPLORER,
-					signal: SignalType.METER_EXPLORER,
-					showFilterCollapse: true,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {
-						setShowQuickFilters(!showQuickFilters);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
+			<div
+				className={cx('meter-explorer-container', {
+					'quick-filters-open': showQuickFilters,
+				})}
 			>
+				<div
+					className={cx('meter-explorer-quick-filters-section', {
+						hidden: !showQuickFilters,
+					})}
+				>
+					<QuickFilters
+						className="qf-meter-explorer"
+						source={QuickFiltersSource.METER_EXPLORER}
+						signal={SignalType.METER_EXPLORER}
+						showFilterCollapse
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {
+							setShowQuickFilters(!showQuickFilters);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</div>
+
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
 						<div className="explore-header">
@@ -187,7 +196,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

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

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

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

@@ -19,7 +19,6 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -52,7 +51,6 @@ function TimeSeries({
 	showYAxisUnitSelector,
 	metrics,
 	isCancelled = false,
-	exportDefaultQuery,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -274,9 +272,6 @@ function TimeSeries({
 							metricName;
 
 						const currentYAxisUnit = yAxisUnit || metricUnit;
-						const exportQuery = changeLayoutForOneChartPerQuery
-							? queryPayloads[index]
-							: exportDefaultQuery;
 
 						return (
 							<div
@@ -317,14 +312,6 @@ function TimeSeries({
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
 									allowExport
-									headerActions={
-										<ExplorerActions
-											query={stagedQuery ? exportQuery : null}
-											sourcepage={DataSource.METRICS}
-											panelType={PANEL_TYPES.TIME_SERIES}
-											iconOnly={changeLayoutForOneChartPerQuery}
-										/>
-									}
 								/>
 							</div>
 						);

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

@@ -4,7 +4,6 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
@@ -147,11 +146,9 @@ function renderExplorer(): void {
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter>
 				<Provider store={store}>
-					<TooltipProvider>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</TooltipProvider>
+					<ErrorModalProvider>
+						<Explorer />
+					</ErrorModalProvider>
 				</Provider>
 			</MemoryRouter>
 		</QueryClientProvider>,

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

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
-import { initialQueriesMap } from 'constants/queryBuilder';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
@@ -72,7 +71,6 @@ function renderTimeSeries(
 			yAxisUnit="count"
 			setYAxisUnit={mockSetYAxisUnit}
 			showYAxisUnitSelector={false}
-			exportDefaultQuery={initialQueriesMap.metrics}
 			{...overrides}
 		/>,
 	);

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

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { Warning } from 'types/api';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -18,5 +17,4 @@ export interface TimeSeriesProps {
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
 	isCancelled?: boolean;
-	exportDefaultQuery: Query;
 }

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -60,6 +60,9 @@
 	.metrics-table-container {
 		padding-bottom: 48px;
 		.ant-table {
+			margin-left: -16px;
+			margin-right: -16px;
+
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;

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

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

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

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

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

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

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

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

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

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

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

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

frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts

@@ -13,7 +13,7 @@ describe('Get Series Data', () => {
 		expect(seriesData).toHaveLength(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#83C2EB');
+		expect(seriesData[1].fill).toBe('#FF6F91');
 		expect(seriesData[1].width).toBe(2);
 	});
 

frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -57,12 +57,3 @@
 	color: var(--l3-foreground);
 	text-align: center;
 }
-
-/* The bottom legend's box is only the rows reserved for it. */
-.container:not(.isRight) .emptyState {
-	flex: 1;
-	min-height: 0;
-	display: grid;
-	place-items: center;
-	padding: 0;
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -8,7 +8,7 @@ import { LegendAction, LegendPosition, LegendProps } from '../types';
 import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
 import LegendRow from './LegendRow';
 import LegendToolbar from './LegendToolbar';
-import { getVisibleSeriesState } from './utils';
+import { filterLegendItems, getShownSeriesState } from './utils';
 
 import styles from './Legend.module.scss';
 
@@ -20,7 +20,6 @@ export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
-	showSearch = false,
 	focusedSeriesIndex,
 	onAction,
 	showCopy = true,
@@ -31,22 +30,27 @@ export default function Legend({
 	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
 	const isRightPosition = position === LegendPosition.RIGHT;
 
-	// The layout decides: it reserves the height.
-	const showToolbar = showSearch && items.length > 0;
+	const { visibleCount, soleShownSeriesIndex } = useMemo(
+		() => getShownSeriesState(items),
+		[items],
+	);
 
-	const effectiveQuery = showToolbar ? filterQuery : '';
+	// A bottom legend gets two rows; spending one on chrome costs more chart than
+	// the readout is worth.
+	const showToolbar = isRightPosition && items.length > 0;
+	const showFilter = showToolbar;
 
-	const {
-		listedItems,
-		visibleCount,
-		onlyVisibleSeriesIndex,
-		areAllSeriesVisible,
-	} = useMemo(
-		() => getVisibleSeriesState(items, effectiveQuery),
+	const effectiveQuery = showFilter ? filterQuery : '';
+
+	const visibleLegendItems = useMemo(
+		() => filterLegendItems(items, effectiveQuery),
 		[items, effectiveQuery],
 	);
 
-	const isEmptyState = !!effectiveQuery.trim() && listedItems.length === 0;
+	const isEmptyState =
+		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
+
+	const isAllShown = visibleCount === items.length;
 
 	// A row that unmounts under the pointer never fires its own mouseleave.
 	const handleMouseLeave = useCallback(
@@ -59,20 +63,14 @@ export default function Legend({
 			<LegendRow
 				key={item.seriesIndex}
 				item={item}
-				isOneSeriesVisible={onlyVisibleSeriesIndex === item.seriesIndex}
-				areAllSeriesVisible={areAllSeriesVisible}
+				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
+				isAllShown={isAllShown}
 				isFocused={focusedSeriesIndex === item.seriesIndex}
 				showCopy={showCopy}
 				onAction={onAction}
 			/>
 		),
-		[
-			onlyVisibleSeriesIndex,
-			areAllSeriesVisible,
-			focusedSeriesIndex,
-			showCopy,
-			onAction,
-		],
+		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
 	);
 
 	return (
@@ -89,7 +87,7 @@ export default function Legend({
 				<LegendToolbar
 					visibleCount={visibleCount}
 					totalCount={items.length}
-					position={position}
+					showFilter={showFilter}
 					filterQuery={filterQuery}
 					onFilterQueryChange={setFilterQuery}
 				/>
@@ -103,7 +101,7 @@ export default function Legend({
 					className={styles.scroller}
 					listClassName={styles.gridList}
 					itemClassName={styles.gridItem}
-					data={listedItems}
+					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>
 			)}

frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx

@@ -13,9 +13,9 @@ import styles from './LegendRow.module.scss';
 export interface LegendRowProps {
 	item: LegendItem;
 	/** The only series currently shown, so hiding it is refused. */
-	isOneSeriesVisible: boolean;
+	isSoleShown: boolean;
 	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	areAllSeriesVisible: boolean;
+	isAllShown: boolean;
 	isFocused: boolean;
 	showCopy: boolean;
 	onAction: OnLegendAction;
@@ -29,15 +29,15 @@ export interface LegendRowProps {
  */
 function LegendRow({
 	item,
-	isOneSeriesVisible,
-	areAllSeriesVisible,
+	isSoleShown,
+	isAllShown,
 	isFocused,
 	showCopy,
 	onAction,
 }: LegendRowProps): JSX.Element {
 	const { seriesIndex, show } = item;
 	const label = item.label ?? '';
-	const isShowAllAction = show && !areAllSeriesVisible;
+	const isShowAllAction = show && !isAllShown;
 	const scopeActionLabel = isShowAllAction
 		? 'Show all series'
 		: 'Show only current series';
@@ -47,15 +47,15 @@ function LegendRow({
 
 	/** Everything showing -> isolate; showing alone -> restore all. */
 	const handleRowClick = useCallback((): void => {
-		if (isOneSeriesVisible) {
+		if (isSoleShown) {
 			onAction({ type: LegendAction.SHOW_ALL });
 			return;
 		}
 		onAction({
-			type: areAllSeriesVisible ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
+			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
 			seriesIndex,
 		});
-	}, [isOneSeriesVisible, areAllSeriesVisible, onAction, seriesIndex]);
+	}, [isSoleShown, isAllShown, onAction, seriesIndex]);
 
 	const handleMarkerClick = useCallback(
 		(event: MouseEvent<HTMLButtonElement>): void => {
@@ -126,7 +126,7 @@ function LegendRow({
 					backgroundColor: show ? seriesColor : 'transparent',
 				}}
 				onClick={handleMarkerClick}
-				disabled={isOneSeriesVisible}
+				disabled={isSoleShown}
 				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
 				data-is-legend-marker={true}
 				data-testid={`legend-marker-${seriesIndex}`}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss

@@ -33,32 +33,3 @@
 .searchIcon {
 	color: var(--l3-foreground);
 }
-
-/* Height + margin must match LEGEND_TOOLBAR_HEIGHT and LEGEND_TOOLBAR_GAP. */
-.inlineToolbar {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 24px;
-	margin-bottom: var(--spacing-2);
-	padding-right: var(--spacing-4);
-}
-
-.search {
-	flex: 0 0 auto;
-	width: 240px;
-	max-width: 100%;
-}
-
-.statusInline {
-	// Truncates rather than wrapping onto a row the legend has not reserved.
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.searchInputInline {
-	width: 100%;
-	height: 24px;
-}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -1,17 +1,14 @@
 import { ChangeEvent, useCallback } from 'react';
-import cx from 'classnames';
 import { Input } from 'antd';
 import { Search } from '@signozhq/icons';
 
-import { LegendPosition } from '../types';
-
 import styles from './LegendToolbar.module.scss';
 
 export interface LegendToolbarProps {
 	visibleCount: number;
 	totalCount: number;
-	/** Layout only: the column stacks, the bottom row does not. */
-	position: LegendPosition;
+	/** Search is intrinsic to the right-positioned legend. */
+	showFilter: boolean;
 	filterQuery: string;
 	onFilterQueryChange: (query: string) => void;
 }
@@ -20,7 +17,7 @@ export interface LegendToolbarProps {
 export default function LegendToolbar({
 	visibleCount,
 	totalCount,
-	position,
+	showFilter,
 	filterQuery,
 	onFilterQueryChange,
 }: LegendToolbarProps): JSX.Element {
@@ -30,48 +27,30 @@ export default function LegendToolbar({
 		[onFilterQueryChange],
 	);
 
-	const searchProps = {
-		allowClear: true,
-		prefix: <Search size={12} className={styles.searchIcon} />,
-		placeholder: 'Search...',
-		value: filterQuery,
-		onChange: handleFilterChange,
-		className: styles.searchInput,
-		'data-testid': 'legend-search-input',
-	};
-
-	const status = (
-		<span
-			className={cx(styles.status, {
-				[styles.statusInline]: position !== LegendPosition.RIGHT,
-			})}
-			aria-live="polite"
-			data-testid="legend-status"
-		>
-			{`Showing ${visibleCount} of ${totalCount} series`}
-		</span>
-	);
-
-	if (position === LegendPosition.RIGHT) {
-		return (
-			<>
-				<div className={styles.searchContainer}>
-					<Input {...searchProps} />
-				</div>
-				<div className={styles.toolbar}>{status}</div>
-			</>
-		);
-	}
-
 	return (
-		<div className={styles.inlineToolbar}>
-			<div className={styles.search}>
-				<Input
-					{...searchProps}
-					className={cx(styles.searchInput, styles.searchInputInline)}
-				/>
+		<>
+			{showFilter && (
+				<div className={styles.searchContainer}>
+					<Input
+						allowClear
+						prefix={<Search size={12} className={styles.searchIcon} />}
+						placeholder="Search..."
+						value={filterQuery}
+						onChange={handleFilterChange}
+						className={styles.searchInput}
+						data-testid="legend-search-input"
+					/>
+				</div>
+			)}
+			<div className={styles.toolbar}>
+				<span
+					className={styles.status}
+					aria-live="polite"
+					data-testid="legend-status"
+				>
+					{`Showing ${visibleCount} of ${totalCount} series`}
+				</span>
 			</div>
-			{status}
-		</div>
+		</>
 	);
 }

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -16,7 +16,6 @@ export default function UPlotLegend({
 	position = LegendPosition.BOTTOM,
 	config,
 	averageLegendWidth,
-	showSearch,
 }: UPlotLegendProps): JSX.Element {
 	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
 	const onAction = useLegendActions();
@@ -28,7 +27,6 @@ export default function UPlotLegend({
 			items={items}
 			position={position}
 			averageLegendWidth={averageLegendWidth}
-			showSearch={showSearch}
 			focusedSeriesIndex={focusedSeriesIndex}
 			onAction={onAction}
 		/>

frontend/src/lib/uPlotV2/components/Legend/__tests__/UPlotLegend.test.tsx

@@ -88,15 +88,11 @@ describe('UPlotLegend', () => {
 		jest.clearAllMocks();
 	});
 
-	const renderLegend = (
-		position?: LegendPosition,
-		showSearch = true,
-	): RenderResult =>
+	const renderLegend = (position?: LegendPosition): RenderResult =>
 		render(
 			<TooltipProvider>
 				<UPlotLegend
 					position={position}
-					showSearch={showSearch}
 					// config is consumed by the mocked useLegendsSync hook, not directly
 					config={{} as any}
 				/>
@@ -104,38 +100,14 @@ describe('UPlotLegend', () => {
 		);
 
 	describe('layout and position', () => {
-		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
-			'gives the legend a search box and a readout (%s)',
-			(position) => {
-				renderLegend(position);
+		it('renders the search input on a RIGHT legend', () => {
+			renderLegend(LegendPosition.RIGHT);
 
-				expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-				expect(screen.getByTestId('legend-status')).toBeInTheDocument();
-			},
-		);
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});
 
-		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
-			'counts down the readout as the search narrows the list (%s)',
-			async (position) => {
-				const user = userEvent.setup();
-				renderLegend(position);
-
-				// B is hidden.
-				expect(screen.getByTestId('legend-status')).toHaveTextContent(
-					'Showing 2 of 3 series',
-				);
-
-				await user.type(screen.getByTestId('legend-search-input'), 'a');
-
-				// Only A matches, counted against all three.
-				expect(screen.getByTestId('legend-status')).toHaveTextContent(
-					'Showing 1 of 3 series',
-				);
-			},
-		);
-
-		it('keeps a BOTTOM legend bare while every series is on screen', () => {
-			renderLegend(LegendPosition.BOTTOM, false);
+		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
+			renderLegend();
 
 			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
 			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
@@ -144,16 +116,6 @@ describe('UPlotLegend', () => {
 			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
 		});
 
-		it('filters a BOTTOM legend from its search box', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.BOTTOM);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'b');
-
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.queryByText('A')).not.toBeInTheDocument();
-		});
-
 		it('renders the marker with the series colour, filled only when shown', () => {
 			renderLegend(LegendPosition.RIGHT);
 

frontend/src/lib/uPlotV2/components/Legend/__tests__/utils.test.ts

@@ -1,6 +1,6 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
 
-import { filterLegendItems, getVisibleSeriesState } from '../utils';
+import { filterLegendItems, getShownSeriesState } from '../utils';
 
 const items = (shown: boolean[]): LegendItem[] =>
 	shown.map((show, index) => ({
@@ -10,49 +10,26 @@ const items = (shown: boolean[]): LegendItem[] =>
 		show,
 	}));
 
-describe('getVisibleSeriesState', () => {
+describe('getShownSeriesState', () => {
 	it('counts the shown series', () => {
-		const state = getVisibleSeriesState(items([true, false, true]), '');
-
-		expect(state.visibleCount).toBe(2);
-		expect(state.onlyVisibleSeriesIndex).toBeNull();
-		expect(state.areAllSeriesVisible).toBe(false);
+		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
+			visibleCount: 2,
+			soleShownSeriesIndex: null,
+		});
 	});
 
 	it('names the series when exactly one is shown', () => {
-		const state = getVisibleSeriesState(items([false, true, false]), '');
-
-		expect(state.visibleCount).toBe(1);
-		expect(state.onlyVisibleSeriesIndex).toBe(2);
+		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
+			visibleCount: 1,
+			soleShownSeriesIndex: 2,
+		});
 	});
 
 	it('reports nothing shown', () => {
-		const state = getVisibleSeriesState(items([false, false]), '');
-
-		expect(state.visibleCount).toBe(0);
-		expect(state.onlyVisibleSeriesIndex).toBeNull();
-	});
-
-	it('reports every series shown', () => {
-		expect(
-			getVisibleSeriesState(items([true, true]), '').areAllSeriesVisible,
-		).toBe(true);
-	});
-
-	it('counts only the series the search listed', () => {
-		const state = getVisibleSeriesState(items([true, true, false]), 'series-1');
-
-		expect(state.listedItems.map((item) => item.label)).toStrictEqual([
-			'series-1',
-		]);
-		expect(state.visibleCount).toBe(1);
-	});
-
-	it('reads isolation off every series, not the listed ones', () => {
-		const state = getVisibleSeriesState(items([false, true, false]), 'series-2');
-
-		expect(state.listedItems).toHaveLength(1);
-		expect(state.onlyVisibleSeriesIndex).toBe(2);
+		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
+			visibleCount: 0,
+			soleShownSeriesIndex: null,
+		});
 	});
 });
 

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -21,9 +21,5 @@ export const LEGEND_ROW_HEIGHT = 28;
 export const LEGEND_ROW_GAP = 2;
 export const LEGEND_MAX_BOTTOM_ROWS = 2;
 
-/** Must match `.inlineToolbar`'s height and margin-bottom, or it eats a row. */
-export const LEGEND_TOOLBAR_HEIGHT = 24;
-export const LEGEND_TOOLBAR_GAP = 4;
-
 /** Hover delay before a row's full-name tooltip opens. */
 export const LEGEND_TOOLTIP_DELAY_MS = 500;

frontend/src/lib/uPlotV2/components/Legend/utils.ts

@@ -1,12 +1,22 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
 
-export interface LegendViewState {
-	listedItems: LegendItem[];
-	/** Listed items that are toggled on, against every series in the readout. */
+export interface ShownSeriesState {
 	visibleCount: number;
-	/** The series index when exactly one series is toggled on, else null. */
-	onlyVisibleSeriesIndex: number | null;
-	areAllSeriesVisible: boolean;
+	/** The series index when exactly one series is shown, else null. */
+	soleShownSeriesIndex: number | null;
+}
+
+/**
+ * Driven by what is actually shown, never a remembered isolation: hiding series
+ * one at a time down to a single one is the same state as "Only".
+ */
+export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
+	const shown = items.filter((item) => item.show);
+
+	return {
+		visibleCount: shown.length,
+		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
+	};
 }
 
 export function filterLegendItems(
@@ -22,23 +32,3 @@ export function filterLegendItems(
 		item.label?.toLowerCase().includes(normalisedQuery),
 	);
 }
-
-/**
- * Isolation is driven by what is actually shown, never a remembered one: hiding
- * series one at a time down to a single one is the same state as "Only". It is
- * read off the whole series set, not off what the search left listed.
- */
-export function getVisibleSeriesState(
-	items: LegendItem[],
-	query: string,
-): LegendViewState {
-	const visible = items.filter((item) => item.show);
-	const listedItems = filterLegendItems(items, query);
-
-	return {
-		listedItems,
-		visibleCount: listedItems.filter((item) => item.show).length,
-		onlyVisibleSeriesIndex: visible.length === 1 ? visible[0].seriesIndex : null,
-		areAllSeriesVisible: visible.length === items.length,
-	};
-}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -73,9 +73,9 @@ function createTooltipContent(
 	};
 }
 
-function createUPlotInstance(cursorIdx: number | null, timestamp = 1): uPlot {
+function createUPlotInstance(cursorIdx: number | null): uPlot {
 	return {
-		data: [[timestamp], []],
+		data: [[1], []],
 		cursor: { idx: cursorIdx },
 		// The rest of the uPlot fields are not used by Tooltip
 	} as unknown as uPlot;
@@ -122,19 +122,6 @@ describe('Tooltip', () => {
 		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
 	});
 
-	it('drops the date from the header title for a point on the current day', () => {
-		const todayTimestamp = dayjs().tz('UTC').startOf('hour').unix();
-		const uPlotInstance = createUPlotInstance(0, todayTimestamp);
-
-		renderTooltip({ uPlotInstance });
-
-		const expectedTitle = dayjs(todayTimestamp * 1000)
-			.tz('UTC')
-			.format(DATE_TIME_FORMATS.TIME_SECONDS);
-
-		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-	});
-
 	it('does not render header when showTooltipHeader is false', () => {
 		const uPlotInstance = createUPlotInstance(0);
 

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
 import { Pin } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import type uPlot from 'uplot';
-import { formatTimestampOmittingTodaysDate } from 'utils/timeUtils';
 
 import { TooltipContentItem } from '../../../types';
 import TooltipItem from '../TooltipItem/TooltipItem';
@@ -18,7 +19,6 @@ interface TooltipHeaderProps {
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
 	headerRowClassName?: string;
-	/** Overrides the default, which drops the date part for points on the current day. */
 	dateFormat?: string;
 }
 
@@ -29,7 +29,7 @@ export default function TooltipHeader({
 	isPinned,
 	activeItem,
 	headerRowClassName,
-	dateFormat,
+	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -46,11 +46,9 @@ export default function TooltipHeader({
 		if (timestamp == null) {
 			return null;
 		}
-		return formatTimestampOmittingTodaysDate(
-			timestamp * 1000,
-			resolvedTimezone,
-			dateFormat,
-		);
+		return dayjs(timestamp * 1000)
+			.tz(resolvedTimezone)
+			.format(dateFormat);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,

frontend/src/lib/uPlotV2/components/types.ts

@@ -145,8 +145,6 @@ export interface LegendProps {
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Set by the chart layout, which reserves the height for it. */
-	showSearch?: boolean;
 	/** Series index highlighted by the chart cursor. */
 	focusedSeriesIndex: number | null;
 	onAction: OnLegendAction;
@@ -160,7 +158,6 @@ export interface UPlotLegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
 	averageLegendWidth?: number;
-	showSearch?: boolean;
 }
 
 export interface TooltipContentItem {

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -265,7 +265,7 @@ function getPathBuilder({
 	drawStyle,
 	lineInterpolation,
 	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.85,
+	barWidthFactor = 0.6,
 	barMaxWidth = 200,
 	stepInterval,
 }: {

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -297,7 +297,7 @@ describe('UPlotSeriesBuilder', () => {
 		);
 
 		const config = builder.getConfig();
-		expect(config.stroke).toBe('#AD42E0');
+		expect(config.stroke).toBe('#E64A3C');
 	});
 
 	it('passes through pointsFilter when provided', () => {

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,7 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react';
-import ChartLayout, {
-	LegendLayout,
-} from 'lib/visualization/layout/ChartLayout/ChartLayout';
+import ChartLayout from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
@@ -60,7 +58,7 @@ export default function ChartWrapper({
 	);
 
 	const legendComponent = useCallback(
-		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => {
+		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
 				return null;
 			}
@@ -69,7 +67,6 @@ export default function ChartWrapper({
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}
-					showSearch={showSearch}
 				/>
 			);
 		},

frontend/src/lib/visualization/charts/Pie/Pie.tsx

@@ -68,23 +68,17 @@ export default function Pie({
 
 	// Reuse the uPlot chart/legend split so the donut + legend get the same area
 	// allocation (right column, or up-to-two bottom rows) as every other panel.
-	const {
-		width,
-		height,
-		legendWidth,
-		legendHeight,
-		averageLegendWidth,
-		showLegendSearch,
-	} = useMemo(
-		() =>
-			calculateChartDimensions({
-				containerWidth,
-				containerHeight,
-				legendConfig: { position },
-				seriesLabels: data.map((slice) => slice.label),
-			}),
-		[containerWidth, containerHeight, position, data],
-	);
+	const { width, height, legendWidth, legendHeight, averageLegendWidth } =
+		useMemo(
+			() =>
+				calculateChartDimensions({
+					containerWidth,
+					containerHeight,
+					legendConfig: { position },
+					seriesLabels: data.map((slice) => slice.label),
+				}),
+			[containerWidth, containerHeight, position, data],
+		);
 
 	// Donut geometry derived from the allocated chart box, sized to leave room
 	// for the external leader labels (see getDonutGeometry).
@@ -230,7 +224,6 @@ export default function Pie({
 					items={legendItems}
 					position={position}
 					averageLegendWidth={averageLegendWidth}
-					showSearch={showLegendSearch}
 					focusedSeriesIndex={focusedSeriesIndex}
 					onAction={onLegendAction}
 				/>

frontend/src/lib/visualization/charts/__tests__/utils.test.ts

@@ -25,7 +25,6 @@ describe('calculateChartDimensions', () => {
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
-			showLegendSearch: false,
 		});
 	});
 
@@ -107,10 +106,10 @@ describe('calculateChartDimensions', () => {
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + 2px gap + 12px padding, plus the 24px search row + 4px.
-		expect(dims.showLegendSearch).toBe(true);
-		expect(dims.legendHeight).toBe(98);
-		expect(dims.height).toBe(402);
+		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
+		// clipped third row, and none left over.
+		expect(dims.legendHeight).toBe(70);
+		expect(dims.height).toBe(430);
 	});
 
 	it('BOTTOM: items one past a row still reserve two rows', () => {
@@ -124,50 +123,6 @@ describe('calculateChartDimensions', () => {
 		expect(dims.legendHeight).toBe(70);
 	});
 
-	it('BOTTOM: no search row while every item is already on screen', () => {
-		// 1000px fits 4 per row, so 8 items fill both reserved rows exactly.
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(8),
-		});
-		expect(dims.showLegendSearch).toBe(false);
-		expect(dims.legendHeight).toBe(70);
-	});
-
-	it('BOTTOM: a search row once the grid overflows the reserved rows', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(9),
-		});
-		expect(dims.showLegendSearch).toBe(true);
-		expect(dims.legendHeight).toBe(98);
-	});
-
-	it('BOTTOM: no search row when it would push the legend past a short panel', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 120,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(40),
-		});
-		expect(dims.showLegendSearch).toBe(false);
-		expect(dims.legendHeight).toBe(40);
-	});
-
-	it('RIGHT: always carries its chrome; the column has the height for it', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.RIGHT },
-			seriesLabels: labels(40),
-		});
-		expect(dims.showLegendSearch).toBe(true);
-	});
-
 	it('BOTTOM: reserves the rows the grid actually lays out, not the rows a bare width estimate allows', () => {
 		// The item width alone suggests three fit on one row; the grid's per-item
 		// padding and column gap leave room for two.

frontend/src/lib/visualization/charts/utils.ts

@@ -2,8 +2,6 @@ import {
 	LEGEND_MAX_BOTTOM_ROWS,
 	MIN_LEGEND_ITEM_WIDTH,
 	LEGEND_COLUMN_GAP,
-	LEGEND_TOOLBAR_GAP,
-	LEGEND_TOOLBAR_HEIGHT,
 	LEGEND_ITEM_EXTRA_WIDTH,
 	LEGEND_ROW_GAP,
 	LEGEND_ROW_HEIGHT,
@@ -17,8 +15,6 @@ export interface ChartDimensions {
 	legendWidth: number;
 	legendHeight: number;
 	averageLegendWidth: number;
-	/** For a BOTTOM legend that row's height is inside `legendHeight`. */
-	showLegendSearch: boolean;
 }
 
 const AVG_CHAR_WIDTH = 8;
@@ -80,8 +76,6 @@ export function calculateAverageLegendWidth(legends: string[]): number {
  *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
  *     the rectangle never clips a row or reserves space for half of one. Two
  *     rows that would take half a short panel fall back to one row.
- *   - A grid overflowing those rows also gets a search row, whose height is
- *     part of `legendHeight`.
  *   - Chart height is `containerHeight - legendHeight`, never below 0.
  * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
  *
@@ -107,7 +101,6 @@ export function calculateChartDimensions({
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
-			showLegendSearch: false,
 		};
 	}
 
@@ -147,7 +140,6 @@ export function calculateChartDimensions({
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
 			averageLegendWidth: rightLegendWidth,
-			showLegendSearch: legendItemCount > 0,
 		};
 	}
 
@@ -166,25 +158,18 @@ export function calculateChartDimensions({
 		),
 	);
 
-	// The wrapper's bottom padding and the search row are inside this height.
-	const heightForRows = (rowCount: number, withToolbar: boolean): number =>
+	// The wrapper's bottom padding is inside this height (border-box).
+	const heightForRows = (rowCount: number): number =>
 		rowCount * LEGEND_ROW_HEIGHT +
 		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING +
-		(withToolbar ? LEGEND_TOOLBAR_HEIGHT + LEGEND_TOOLBAR_GAP : 0);
-
-	const shortPanelBudget = containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO;
-	const gridRowCount = Math.ceil(legendItemCount / legendItemsPerRow);
-
-	// Only once rows overflow — below that every series is already on screen —
-	// and only while the row it costs leaves the legend inside the panel's share.
-	const showLegendSearch =
-		gridRowCount > LEGEND_MAX_BOTTOM_ROWS &&
-		heightForRows(1, true) <= shortPanelBudget;
+		LEGEND_PADDING;
 
 	const neededRowCount = Math.max(
 		1,
-		Math.min(LEGEND_MAX_BOTTOM_ROWS, gridRowCount),
+		Math.min(
+			LEGEND_MAX_BOTTOM_ROWS,
+			Math.ceil(legendItemCount / legendItemsPerRow),
+		),
 	);
 
 	// Without this, short grid panels hand most of their area to the legend and
@@ -192,11 +177,11 @@ export function calculateChartDimensions({
 	// row's items are clipped rather than removed, so they are scroll-only here.
 	const legendRowCount =
 		neededRowCount > 1 &&
-		heightForRows(neededRowCount, showLegendSearch) > shortPanelBudget
+		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
 			? 1
 			: neededRowCount;
 
-	const bottomLegendHeight = heightForRows(legendRowCount, showLegendSearch);
+	const bottomLegendHeight = heightForRows(legendRowCount);
 
 	return {
 		width: containerWidth,
@@ -204,6 +189,5 @@ export function calculateChartDimensions({
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
 		averageLegendWidth: legendItemWidth,
-		showLegendSearch,
 	};
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -7,14 +7,9 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import 'lib/visualization/layout/ChartLayout/ChartLayout.styles.scss';
 
-export interface LegendLayout {
-	averageLegendWidth: number;
-	showSearch: boolean;
-}
-
 export interface ChartLayoutProps {
 	showLegend?: boolean;
-	legendComponent: (layout: LegendLayout) => React.ReactNode;
+	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
@@ -45,7 +40,6 @@ export default function ChartLayout({
 					legendWidth: 0,
 					legendHeight: 0,
 					averageLegendWidth: MAX_LEGEND_WIDTH,
-					showLegendSearch: false,
 				};
 			}
 			const legendItemsMap = config.getLegendItems();
@@ -87,10 +81,7 @@ export default function ChartLayout({
 							width: chartDimensions.legendWidth,
 						}}
 					>
-						{legendComponent({
-							averageLegendWidth: chartDimensions.averageLegendWidth,
-							showSearch: chartDimensions.showLegendSearch,
-						})}
+						{legendComponent(chartDimensions.averageLegendWidth)}
 					</div>
 				)}
 			</div>

frontend/src/pages/AllErrors/AllErrors.styles.scss

@@ -1,4 +1,11 @@
 .all-errors-page {
+	display: flex;
+	height: 100%;
+	.all-errors-quick-filter-section {
+		width: 0%;
+		flex-shrink: 0;
+	}
+
 	.all-errors-right-section {
 		.right-toolbar-actions-container {
 			display: flex;
@@ -11,4 +18,14 @@
 	.ant-tabs {
 		margin: 0 8px;
 	}
+
+	&.filter-visible {
+		.all-errors-quick-filter-section {
+			width: 260px;
+		}
+
+		.all-errors-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -5,11 +5,13 @@ import { Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
+import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
@@ -57,52 +59,63 @@ function AllErrors(): JSX.Element {
 	const quickFilterFieldApis = useSignalFieldApis();
 
 	return (
-		<QuickFiltersLayout
-			className="all-errors-page"
-			contentClassName="all-errors-right-section"
-			showFilters={showFilters}
-			quickFilterProps={{
-				className: 'qf-exceptions',
-				source: QuickFiltersSource.EXCEPTIONS,
-				signal: SignalType.EXCEPTIONS,
-				handleFilterVisibilityChange,
-				useFieldApis: quickFilterFieldApis,
-			}}
-		>
-			<Toolbar
-				showAutoRefresh={false}
-				leftActions={
-					!showFilters ? (
-						<Tooltip title="Show Filters">
-							<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-								<Filter size="md" />
-							</Button>
-						</Tooltip>
-					) : undefined
-				}
-				rightActions={
-					<div className="right-toolbar-actions-container">
-						<RightToolbarActions
-							onStageRunQuery={handleRunQuery}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
+			{showFilters && (
+				<section className={cx('all-errors-quick-filter-section')}>
+					<QuickFilters
+						className="qf-exceptions"
+						source={QuickFiltersSource.EXCEPTIONS}
+						signal={SignalType.EXCEPTIONS}
+						handleFilterVisibilityChange={handleFilterVisibilityChange}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
+			)}
+			<section
+				className={cx(
+					'all-errors-right-section',
+					showFilters ? 'filter-visible' : '',
+				)}
+			>
+				<TypicalOverlayScrollbar>
+					<>
+						<Toolbar
+							showAutoRefresh={false}
+							leftActions={
+								!showFilters ? (
+									<Tooltip title="Show Filters">
+										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+											<Filter size="md" />
+										</Button>
+									</Tooltip>
+								) : undefined
+							}
+							rightActions={
+								<div className="right-toolbar-actions-container">
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
+									<HeaderRightSection
+										enableAnnouncements={false}
+										enableShare
+										enableFeedback
+									/>
+								</div>
+							}
 						/>
-						<HeaderRightSection
-							enableAnnouncements={false}
-							enableShare
-							enableFeedback
+						<ResourceAttributesFilterV2 />
+						<RouteTab
+							routes={routes}
+							activeKey={pathname}
+							history={history}
+							showRightSection={false}
 						/>
-					</div>
-				}
-			/>
-			<ResourceAttributesFilterV2 />
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-			/>
-		</QuickFiltersLayout>
+					</>
+				</TypicalOverlayScrollbar>
+			</section>
+		</div>
 	);
 }
 

frontend/src/pages/AllErrors/stories/AllErrors.stories.tsx

@@ -98,30 +98,17 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
+
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.styles.scss

@@ -1,4 +1,11 @@
 .api-monitoring-page {
+	flex: 1;
+	display: flex;
+
+	.ant-tabs {
+		flex: 1;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +15,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.tsx

@@ -13,12 +13,9 @@ function ApiMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Explorer];
 
 	return (
-		<RouteTab
-			className="api-monitoring-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="api-monitoring-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.mocks.tsx

@@ -8,7 +8,6 @@ import {
 	QuickfiltertypesSourceDTO,
 	TelemetrytypesFieldContextDTO,
 	TelemetrytypesFieldDataTypeDTO,
-	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { VIEWS } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
@@ -25,10 +24,7 @@ import {
 	toggleControl,
 } from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-import {
-	fieldKeysResponse,
-	fieldValuesResponse,
-} from '@/storybook/msw/__story_mockdata__/fields';
+import { fieldValuesResponse } from '@/storybook/msw/__story_mockdata__/fields';
 import { quickFiltersResponse } from '@/storybook/msw/__story_mockdata__/quickFilters';
 
 import {
@@ -321,21 +317,6 @@ export const apiMonitoringMocks = defineStoryMocks({
 			})),
 		),
 
-		rest.get(
-			'http://localhost/api/v1/fields/keys',
-			response.json((req) =>
-				fieldKeysResponse(
-					groupByAttributeKeys(req.url.searchParams.get('searchText') ?? '').map(
-						({ key }) => key,
-					),
-					{
-						signal: TelemetrytypesSignalDTO.traces,
-						fieldContext: TelemetrytypesFieldContextDTO.attribute,
-					},
-				),
-			),
-		),
-
 		rest.get(
 			'http://localhost/api/v1/fields/values',
 			response.json((req) =>

frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -59,35 +59,6 @@ export const PortDomain: Story = {
 /** The page fetches before it renders a filter, which outlasts the 1s default. */
 const untilLoaded = { timeout: 15_000 };
 
-const openQuickFiltersSettings = async (): Promise<void> => {
-	// The settings control renders disabled while its permission check is in
-	// flight and is swapped for the enabled one once the check answers, so it is
-	// looked up again on every attempt; a click on the disabled one is dropped in
-	// silence.
-	const control = await waitFor(() => {
-		const settings = screen.getByTestId('settings-icon-container');
-
-		expect(settings).toBeEnabled();
-
-		return settings;
-	}, untilLoaded);
-
-	await userEvent.click(control);
-	await screen.findByText('Edit quick filters', undefined, untilLoaded);
-};
-
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /**
  * The quick-filter panel has no test id of its own, and it only mounts once the
  * workspace's filters have answered.
@@ -172,24 +143,3 @@ export const NoExternalCalls: Story = {
 export const Loading: Story = {
 	args: { dataState: 'loading' },
 };
-
-/** The editable quick-filter settings panel. */
-export const QuickFiltersSettings: Story = {
-	play: openQuickFiltersSettings,
-};
-
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -1,4 +1,13 @@
 .infra-monitoring-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoringPage.tsx

@@ -13,11 +13,8 @@ export default function InfrastructureMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Hosts, Kubernetes];
 
 	return (
-		<RouteTab
-			className="infra-monitoring-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="infra-monitoring-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/LLMObservability/Explorer/stories/Explorer.stories.tsx

@@ -146,39 +146,11 @@ export const Failed: Story = {
 	parameters: { allowConsoleErrors: true },
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** The editable quick-filter settings panel. */
 export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};
-
 /** A quick-filter value selected against the LLM span query. */
 export const QuickFilterSelected: Story = {
 	play: async ({ canvasElement }): Promise<void> => {

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,4 +1,16 @@
 .logs-module-container {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	.ant-tabs {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +20,25 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+		min-height: 0;
+
+		.ant-tabs-content {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/LogsModulePage/LogsModulePage.tsx

@@ -13,11 +13,8 @@ export default function LogsModulePage(): JSX.Element {
 	const routes: TabRoutes[] = [logsExplorer, logsPipelines, logSaveView];
 
 	return (
-		<RouteTab
-			className="logs-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="logs-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/LogsModulePage/stories/LogsModulePage.stories.tsx

@@ -166,31 +166,18 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };
 
 /**

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.styles.scss

@@ -1,4 +1,13 @@
 .messaging-queues-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.tsx

@@ -68,11 +68,8 @@ export default function MessagingQueuesMainPage(): JSX.Element {
 	];
 
 	return (
-		<RouteTab
-			className="messaging-queues-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="messaging-queues-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/MeterExplorer/MeterExplorerPage.tsx

@@ -14,13 +14,14 @@ function MeterExplorerPage(): JSX.Element {
 	const routes: TabRoutes[] = [Meter, Explorer, Views];
 
 	return (
-		<RouteTab
-			className="meter-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-			defaultActiveKey={ROUTES.METER}
-		/>
+		<div className="meter-explorer-page">
+			<RouteTab
+				routes={routes}
+				activeKey={pathname}
+				history={history}
+				defaultActiveKey={ROUTES.METER}
+			/>
+		</div>
 	);
 }
 

frontend/src/pages/MeterExplorer/stories/MeterExplorer.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -19,7 +18,6 @@ const pageStory = storyMocks(meterMocks, { layout: 'app' });
  */
 const meta = {
 	title: 'Pages/Metering/Cost Meter',
-	tags: ['play'],
 	component: MeterExplorerPage,
 	...pageStory,
 	parameters: { ...pageStory.parameters },
@@ -29,38 +27,6 @@ export default meta;
 
 type Story = StoryObj<MeterArgs>;
 
-/** The page fetches before it renders its filters, which outlasts the 1s default. */
-const untilLoaded = { timeout: 15_000 };
-
-const openQuickFiltersSettings = async (): Promise<void> => {
-	// The settings control renders disabled while its permission check is in
-	// flight and is swapped for the enabled one once the check answers, so it is
-	// looked up again on every attempt; a click on the disabled one is dropped in
-	// silence.
-	const control = await waitFor(() => {
-		const settings = screen.getByTestId('settings-icon-container');
-
-		expect(settings).toBeEnabled();
-
-		return settings;
-	}, untilLoaded);
-
-	await userEvent.click(control);
-	await screen.findByText('Edit quick filters', undefined, untilLoaded);
-};
-
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /**
  * The Meter tab over the last day: what the workspace ingested in total, then
  * the hourly count and size of log records, of spans, and the metric datapoints
@@ -122,26 +88,3 @@ export const ExplorerWithoutQuickFilters: Story = {
 export const ViewsEmpty: Story = {
 	args: { tab: 'views', savedViews: 0 },
 };
-
-/** The editable quick-filter settings panel, which lives on the Explorer tab. */
-export const QuickFiltersSettings: Story = {
-	args: { tab: 'explorer' },
-	play: openQuickFiltersSettings,
-};
-
-/** Settings with an unsaved filter removal and the fixed action footer. */
-export const QuickFiltersSettingsDirty: Story = {
-	args: { tab: 'explorer' },
-	play: dirtyQuickFiltersSettings,
-};
-
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { tab: 'explorer', banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
-};

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

@@ -1,4 +1,13 @@
 .metrics-explorer-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding-left: 16px;
 		margin-bottom: 0px;
@@ -9,7 +18,20 @@
 	}
 
 	.ant-tabs-content-holder {
+		display: flex;
 		padding: 16px;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
 	}
 
 	.tab-item {

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -42,12 +42,9 @@ function MetricsExplorerPage(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	return (
-		<RouteTab
-			className="metrics-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="metrics-explorer-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

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

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

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -13,8 +15,6 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerActions from 'container/ExplorerActions/ExplorerActions';
-import { getExportPanelType } from 'container/ExplorerActions/utils';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
@@ -196,24 +196,6 @@ function TracesExplorer(): JSX.Element {
 		[stagedQuery, panelType],
 	);
 
-	const exportDashboardQuery = useMemo(
-		() =>
-			getExportQueryData(
-				exportDefaultQuery,
-				getExportPanelType(panelType),
-				options,
-			),
-		[exportDefaultQuery, panelType, options],
-	);
-
-	const explorerActions = (
-		<ExplorerActions
-			query={stagedQuery ? exportDefaultQuery : null}
-			dashboardQuery={stagedQuery ? exportDashboardQuery : null}
-			sourcepage={DataSource.TRACES}
-		/>
-	);
-
 	const handleExport = useCallback(
 		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
 			if (!dashboard || !panelType) {
@@ -279,20 +261,23 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="trace-explorer-page"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.TRACES_EXPLORER,
-					signal: SignalType.TRACES,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
-				<div className="trace-explorer">
+			<div className="trace-explorer-page">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.TRACES_EXPLORER}
+						signal={SignalType.TRACES}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -338,7 +323,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -350,7 +334,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -363,7 +346,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -374,7 +356,6 @@ function TracesExplorer(): JSX.Element {
 									setWarning={setWarning}
 									setIsLoadingQueries={setIsLoadingQueries}
 									queryKeyRef={listQueryKeyRef}
-									headerActions={explorerActions}
 								/>
 							</div>
 						)}
@@ -388,7 +369,7 @@ function TracesExplorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

@@ -25,15 +25,16 @@ function TracesModulePage(): JSX.Element {
 	};
 
 	return (
-		<RouteTab
-			className="traces-module-container"
-			routes={routes}
-			activeKey={
-				pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
-			}
-			history={history}
-			onChangeHandler={handleTabChange}
-		/>
+		<div className="traces-module-container">
+			<RouteTab
+				routes={routes}
+				activeKey={
+					pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
+				}
+				history={history}
+				onChangeHandler={handleTabChange}
+			/>
+		</div>
 	);
 }
 

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.tsx

@@ -116,29 +116,16 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
-const dirtyQuickFiltersSettings = async (): Promise<void> => {
-	await openQuickFiltersSettings();
-	// One Remove per added filter; the first row's is the one clicked.
-	const [removeFilter] = await screen.findAllByRole('button', {
-		name: 'Remove',
-	});
-
-	await userEvent.click(removeFilter);
-	await screen.findByRole('button', { name: 'Save changes' });
-};
-
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: dirtyQuickFiltersSettings,
-};
+	play: async (): Promise<void> => {
+		await openQuickFiltersSettings();
+		// One Remove per added filter; the first row's is the one clicked.
+		const [removeFilter] = await screen.findAllByRole('button', {
+			name: 'Remove',
+		});
 
-/**
- * The same panel with a banner above the shell. The banner takes 48px off the
- * layout, so this is the case where the footer used to be pushed off screen:
- * the panel is sized from the filters pane rather than the viewport, which
- * keeps Save changes reachable.
- */
-export const QuickFiltersSettingsWithBanner: Story = {
-	args: { banner: 'trial-expiry' },
-	play: dirtyQuickFiltersSettings,
+		await userEvent.click(removeFilter);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
 };

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

@@ -1,36 +0,0 @@
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-
-import { formatTimestampOmittingTodaysDate } from '../timeUtils';
-
-describe('formatTimestampOmittingTodaysDate', () => {
-	const timezone = 'Asia/Kolkata';
-
-	it('drops the date for a point on the current day', () => {
-		const now = dayjs().tz(timezone);
-
-		expect(formatTimestampOmittingTodaysDate(now.valueOf(), timezone)).toBe(
-			now.format(DATE_TIME_FORMATS.TIME_SECONDS),
-		);
-	});
-
-	it('keeps the date for a point on any other day', () => {
-		const yesterday = dayjs().tz(timezone).subtract(1, 'day');
-
-		expect(formatTimestampOmittingTodaysDate(yesterday.valueOf(), timezone)).toBe(
-			yesterday.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS),
-		);
-	});
-
-	it('honours an explicit format over the day check', () => {
-		const now = dayjs().tz(timezone);
-
-		expect(
-			formatTimestampOmittingTodaysDate(
-				now.valueOf(),
-				timezone,
-				DATE_TIME_FORMATS.ISO_DATETIME_SECONDS,
-			),
-		).toBe(now.format(DATE_TIME_FORMATS.ISO_DATETIME_SECONDS));
-	});
-});

frontend/src/utils/timeUtils.ts

@@ -342,22 +342,3 @@ export const getMs = (value: string): string =>
 			})
 			.format('SSS'),
 	).toFixed(2);
-
-/** `overrideFormat`, when given, wins over the same-day check. */
-export const formatTimestampOmittingTodaysDate = (
-	timestampMs: number,
-	timezone: string,
-	overrideFormat?: string,
-): string => {
-	const time = dayjs(timestampMs).tz(timezone);
-
-	if (overrideFormat) {
-		return time.format(overrideFormat);
-	}
-
-	return time.format(
-		time.isSame(dayjs().tz(timezone), 'day')
-			? DATE_TIME_FORMATS.TIME_SECONDS
-			: DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
-	);
-};

pkg/apiserver/signozapiserver/alertmanager.go

@@ -145,7 +145,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusCreated,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbCreate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -174,7 +173,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbList)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -201,7 +199,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbRead)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -229,7 +226,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbUpdate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -257,7 +253,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusNoContent,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbDelete)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -286,7 +281,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbUpdate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{
@@ -314,7 +308,6 @@ func (provider *provider) addAlertmanagerRoutes(router *mux.Router) error {
 			SuccessStatusCode:   http.StatusNoContent,
 			ErrorStatusCodes:    []int{http.StatusBadRequest},
 			Deprecated:          false,
-			Stability:           handler.StabilityDevelopment,
 			SecuritySchemes:     newScopedSecuritySchemes([]string{coretypes.ResourceMetaResourceNotificationChannel.Scope(coretypes.VerbCreate)}),
 		},
 		handler.WithResourceDefs(handler.BasicResourceDef{

pkg/apiserver/signozapiserver/ruler.go

@@ -15,26 +15,10 @@ func (provider *provider) addRulerRoutes(router *mux.Router) error {
 		ID:                  "ListRules",
 		Tags:                []string{"rules"},
 		Summary:             "List alert rules",
-		Description:         "This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.",
+		Description:         "This endpoint lists all alert rules with their current evaluation state",
 		Response:            make([]*ruletypes.Rule, 0),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
-		Deprecated:          true,
-		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-	})).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v3/rules", handler.New(provider.authzMiddleware.ViewAccess(provider.rulerHandler.ListRulesV3), handler.OpenAPIDef{
-		ID:                  "ListRulesV3",
-		Tags:                []string{"rules"},
-		Summary:             "List alert rules (v3)",
-		Description:         "Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.",
-		RequestQuery:        new(ruletypes.ListRulesParams),
-		Response:            new(ruletypes.ListableRules),
-		ResponseContentType: "application/json",
-		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{http.StatusBadRequest},
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err

pkg/http/handler/handler_test.go

@@ -1,75 +0,0 @@
-package handler
-
-import (
-	"net/http"
-	"testing"
-
-	"github.com/gorilla/mux"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-	"github.com/swaggest/openapi-go"
-	"github.com/swaggest/openapi-go/openapi3"
-)
-
-type bespokeOpenAPIHandler struct{}
-
-func (bespokeOpenAPIHandler) ServeHTTP(http.ResponseWriter, *http.Request) {}
-
-func (bespokeOpenAPIHandler) ServeOpenAPI(opCtx openapi.OperationContext) {
-	opCtx.SetID("Bespoke")
-	opCtx.AddRespStructure(nil, openapi.WithHTTPStatus(http.StatusOK))
-}
-
-func (bespokeOpenAPIHandler) ResourceDefs() []ResourceDef { return nil }
-
-func TestAttachStabilities(t *testing.T) {
-	router := mux.NewRouter()
-	router.Handle("/development", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Development", SuccessStatusCode: http.StatusOK, Stability: StabilityDevelopment})).Methods(http.MethodGet)
-	router.Handle("/beta/{id}", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Beta", SuccessStatusCode: http.StatusOK, Stability: StabilityBeta})).Methods(http.MethodPut)
-	router.Handle("/unset", New(func(http.ResponseWriter, *http.Request) {}, OpenAPIDef{ID: "Unset", SuccessStatusCode: http.StatusOK})).Methods(http.MethodGet)
-	router.Handle("/bespoke", bespokeOpenAPIHandler{}).Methods(http.MethodGet)
-
-	reflector := openapi3.NewReflector()
-	collector := NewOpenAPICollector(reflector)
-	require.NoError(t, router.Walk(collector.Walker))
-	collector.AttachStabilities(reflector.Spec)
-
-	testCases := []struct {
-		subtestName            string
-		path                   string
-		method                 string
-		expectedExtensionValue any
-	}{
-		{
-			subtestName:            "development handler",
-			path:                   "/development",
-			method:                 "get",
-			expectedExtensionValue: "development",
-		},
-		{
-			subtestName:            "beta handler with path parameter",
-			path:                   "/beta/{id}",
-			method:                 "put",
-			expectedExtensionValue: "beta",
-		},
-		{
-			subtestName:            "unset handler defaults to alpha",
-			path:                   "/unset",
-			method:                 "get",
-			expectedExtensionValue: "alpha",
-		},
-		{
-			subtestName:            "handler built outside New defaults to alpha",
-			path:                   "/bespoke",
-			method:                 "get",
-			expectedExtensionValue: "alpha",
-		},
-	}
-
-	for _, testCase := range testCases {
-		t.Run(testCase.subtestName, func(t *testing.T) {
-			operation := reflector.Spec.Paths.MapOfPathItemValues[testCase.path].MapOfOperationValues[testCase.method]
-			assert.Equal(t, testCase.expectedExtensionValue, operation.MapOfAnything["x-signoz-stability"])
-		})
-	}
-}

pkg/http/handler/openapi.go

@@ -1,37 +1,14 @@
 package handler
 
 import (
-	"net/http"
 	"reflect"
 
-	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
 	"github.com/swaggest/jsonschema-go"
 	openapigo "github.com/swaggest/openapi-go"
-	"github.com/swaggest/openapi-go/openapi3"
 	"github.com/swaggest/rest/openapi"
 )
 
-const signozStabilityKey string = "x-signoz-stability"
-
-var (
-	StabilityDevelopment = Stability{valuer.NewString("development")}
-	StabilityAlpha       = Stability{valuer.NewString("alpha")}
-	StabilityBeta        = Stability{valuer.NewString("beta")}
-	StabilityStable      = Stability{valuer.NewString("stable")}
-)
-
-// Stability is emitted as the x-signoz-stability extension on every operation; unset means alpha.
-type Stability struct{ valuer.String }
-
-func (stability Stability) StringValue() string {
-	if stability.IsZero() {
-		return StabilityAlpha.String.StringValue()
-	}
-
-	return stability.String.StringValue()
-}
-
 // OpenAPIExample is a named example for an OpenAPI operation.
 type OpenAPIExample struct {
 	Name        string
@@ -55,7 +32,6 @@ type OpenAPIDef struct {
 	SuccessStatusCode   int
 	ErrorStatusCodes    []int
 	Deprecated          bool
-	Stability           Stability
 	SecuritySchemes     []OpenAPISecurityScheme
 }
 
@@ -66,16 +42,14 @@ type OpenAPISecurityScheme struct {
 
 // OpenAPICollector is a collector for OpenAPI operations.
 type OpenAPICollector struct {
-	collector   *openapi.Collector
-	stabilities map[operationKey]Stability
+	collector *openapi.Collector
 }
 
 func NewOpenAPICollector(reflector openapigo.Reflector) *OpenAPICollector {
 	c := openapi.NewCollector(reflector)
 
 	return &OpenAPICollector{
-		collector:   c,
-		stabilities: make(map[operationKey]Stability),
+		collector: c,
 	}
 }
 
@@ -103,9 +77,6 @@ func (c *OpenAPICollector) Walker(route *mux.Route, _ *mux.Router, _ []*mux.Rout
 			if err := c.collector.CollectOperation(method, path, c.collect(method, path, handler.ServeOpenAPI)); err != nil {
 				return err
 			}
-			if err := c.recordStability(method, path, httpHandler); err != nil {
-				return err
-			}
 		}
 		return nil
 	}
@@ -113,17 +84,6 @@ func (c *OpenAPICollector) Walker(route *mux.Route, _ *mux.Router, _ []*mux.Rout
 	return nil
 }
 
-// AttachStabilities stamps every operation in spec, so handlers built outside New
-// carry the unset stability rather than none.
-func (c *OpenAPICollector) AttachStabilities(spec *openapi3.Spec) {
-	for path, pathItem := range spec.Paths.MapOfPathItemValues {
-		for method, operation := range pathItem.MapOfOperationValues {
-			operation.WithMapOfAnythingItem(signozStabilityKey, c.stabilities[operationKey{method: method, path: path}].StringValue())
-			pathItem.MapOfOperationValues[method] = operation
-		}
-	}
-}
-
 func (c *OpenAPICollector) collect(method string, path string, serveOpenAPIFunc ServeOpenAPIFunc) func(oc openapigo.OperationContext) error {
 	return func(oc openapigo.OperationContext) error {
 		// Serve the OpenAPI documentation for the handler
@@ -157,23 +117,3 @@ func (c *OpenAPICollector) collect(method string, path string, serveOpenAPIFunc
 		return nil
 	}
 }
-
-func (c *OpenAPICollector) recordStability(method string, path string, httpHandler http.Handler) error {
-	generic, ok := httpHandler.(*handler)
-	if !ok {
-		return nil
-	}
-
-	cleanMethod, cleanPath, _, err := openapigo.SanitizeMethodPath(method, path)
-	if err != nil {
-		return err
-	}
-
-	c.stabilities[operationKey{method: cleanMethod, path: cleanPath}] = generic.openAPIDef.Stability
-	return nil
-}
-
-type operationKey struct {
-	method string
-	path   string
-}

pkg/modules/dashboard/impldashboard/fs/definitions/ai-o11y-overview.json

@@ -1,5 +1,5 @@
 {
-  "version": 3,
+  "version": 2,
   "definition": {
     "schemaVersion": "v6",
     "name": "signoz---ai-o11y-overview",
@@ -437,7 +437,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -489,7 +489,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -722,7 +722,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -782,7 +782,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -850,7 +850,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -868,7 +868,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -886,7 +886,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -904,7 +904,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -961,7 +961,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -979,7 +979,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -997,7 +997,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1015,7 +1015,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1076,7 +1076,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1175,7 +1175,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1192,7 +1192,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1248,7 +1248,7 @@
                     "spec": {
                       "queries": [
                         {
-                          "type": "builder_ai_query",
+                          "type": "builder_query",
                           "spec": {
                             "name": "A",
                             "signal": "traces",
@@ -1282,7 +1282,7 @@
                           }
                         },
                         {
-                          "type": "builder_ai_query",
+                          "type": "builder_query",
                           "spec": {
                             "name": "B",
                             "signal": "traces",
@@ -1353,7 +1353,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -2075,7 +2075,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -2724,7 +2724,7 @@
                     "spec": {
                       "queries": [
                         {
-                          "type": "builder_ai_query",
+                          "type": "builder_query",
                           "spec": {
                             "name": "A",
                             "signal": "traces",

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.agent.json

@@ -1,5 +1,5 @@
 {
-  "version": 2,
+  "version": 1,
   "definition": {
     "name": "gen_ai.agent",
     "condition": {
@@ -68,7 +68,7 @@
             {
               "key": "final_result",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 10
             }
           ]

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.llm.json

@@ -1,5 +1,5 @@
 {
-  "version": 3,
+  "version": 2,
   "definition": {
     "name": "gen_ai.llm",
     "condition": {
@@ -250,19 +250,19 @@
             {
               "key": "gen_ai.prompt",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 30
             },
             {
               "key": "ai.prompt.messages",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 20
             },
             {
               "key": "input.value",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 10
             }
           ]
@@ -276,25 +276,25 @@
             {
               "key": "gen_ai.completion",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 30
             },
             {
               "key": "ai.response.toolCalls",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 25
             },
             {
               "key": "ai.response.text",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 20
             },
             {
               "key": "output.value",
               "context": "attribute",
-              "operation": "move",
+              "operation": "copy",
               "priority": 10
             }
           ]