test(data-export): assert scalar export filename via the naming helper

Same review cleanup as the foundation PR: frozen clock + delegation to getTimestampedFileName instead of a duplicated format regex.

docs/api/openapi.yml

@@ -1494,7 +1494,7 @@ components:
       - cosmosdb
       - cassandradb
       - redis
-      - cloudsql_postgres
+      - cloudsql
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -7998,15 +7998,6 @@ components:
       required:
       - items
       type: object
-    SpantypesGettableSpanMappers:
-      properties:
-        items:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanMapper'
-          type: array
-      required:
-      - items
-      type: object
     SpantypesGettableTraceAggregations:
       properties:
         aggregations:
@@ -8159,7 +8150,7 @@ components:
           type: boolean
         fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
-        groupId:
+        group_id:
           type: string
         id:
           type: string
@@ -8172,7 +8163,7 @@ components:
           type: string
       required:
       - id
-      - groupId
+      - group_id
       - name
       - fieldContext
       - config
@@ -13751,7 +13742,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/SpantypesGettableSpanMappers'
+                    $ref: '#/components/schemas/SpantypesGettableSpanMapperGroups'
                   status:
                     type: string
                 required:

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

@@ -2813,7 +2813,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cosmosdb = 'cosmosdb',
 	cassandradb = 'cassandradb',
 	redis = 'redis',
-	cloudsql_postgres = 'cloudsql_postgres',
+	cloudsql = 'cloudsql',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -9194,76 +9194,6 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
-export enum SpantypesSpanMapperOperationDTO {
-	move = 'move',
-	copy = 'copy',
-}
-export interface SpantypesSpanMapperSourceDTO {
-	context: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	key: string;
-	operation: SpantypesSpanMapperOperationDTO;
-	/**
-	 * @type integer
-	 */
-	priority: number;
-}
-
-export interface SpantypesSpanMapperConfigDTO {
-	/**
-	 * @type array,null
-	 */
-	sources: SpantypesSpanMapperSourceDTO[] | null;
-}
-
-export interface SpantypesSpanMapperDTO {
-	config: SpantypesSpanMapperConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	fieldContext: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	groupId: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface SpantypesGettableSpanMappersDTO {
-	/**
-	 * @type array
-	 */
-	items: SpantypesSpanMapperDTO[];
-}
-
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -9510,6 +9440,30 @@ export interface SpantypesPostableFlamegraphDTO {
 	selectedSpanId?: string;
 }
 
+export enum SpantypesSpanMapperOperationDTO {
+	move = 'move',
+	copy = 'copy',
+}
+export interface SpantypesSpanMapperSourceDTO {
+	context: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	key: string;
+	operation: SpantypesSpanMapperOperationDTO;
+	/**
+	 * @type integer
+	 */
+	priority: number;
+}
+
+export interface SpantypesSpanMapperConfigDTO {
+	/**
+	 * @type array,null
+	 */
+	sources: SpantypesSpanMapperSourceDTO[] | null;
+}
+
 export interface SpantypesPostableSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -9558,6 +9512,45 @@ export interface SpantypesPostableWaterfallDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
+export interface SpantypesSpanMapperDTO {
+	config: SpantypesSpanMapperConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	fieldContext: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	group_id: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
 export interface SpantypesUpdatableSpanMapperDTO {
 	config?: SpantypesSpanMapperConfigDTO;
 	/**
@@ -10859,7 +10852,7 @@ export type ListSpanMappersPathParameters = {
 	groupId: string;
 };
 export type ListSpanMappers200 = {
-	data: SpantypesGettableSpanMappersDTO;
+	data: SpantypesGettableSpanMapperGroupsDTO;
 	/**
 	 * @type string
 	 */

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -0,0 +1,33 @@
+.export-menu-popover {
+	width: 240px;
+	padding: 0 12px 12px 12px;
+
+	.title {
+		display: flex;
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: var(--periscope-font-size-small);
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		margin-bottom: 8px;
+	}
+
+	.export-format {
+		padding: 12px 4px;
+		display: flex;
+		flex-direction: column;
+
+		// radio option labels — radix popover content inherits the root font
+		// size; pin to the app's 13px base the antd popover used to impose
+		label {
+			font-size: var(--periscope-font-size-base);
+		}
+	}
+
+	.export-button {
+		width: 100%;
+	}
+}

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -0,0 +1,92 @@
+import { Download } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	ClientExportData,
+	useClientExport,
+} from 'hooks/useExportData/useClientExport';
+import { ExportFormat } from 'lib/exportData/types';
+import { useCallback, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import './ExportMenu.styles.scss';
+
+interface ExportMenuProps {
+	dataSource: DataSource;
+	// The queryRange response object the view holds — the hook picks the
+	// serializer (timeseries / table) from what it carries.
+	data: ClientExportData;
+	query?: Query;
+	yAxisUnit?: string;
+	fileName?: string;
+}
+
+// Download menu for in-memory query results (client-side serialization).
+// The raw/list backend export keeps its own menu in DownloadOptionsMenu.
+export default function ExportMenu({
+	dataSource,
+	data,
+	query,
+	yAxisUnit,
+	fileName,
+}: ExportMenuProps): JSX.Element {
+	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+	const { isExporting, handleExport: handleClientExport } = useClientExport({
+		data,
+		query,
+		yAxisUnit,
+		fileName,
+	});
+
+	const handleExport = useCallback((): void => {
+		setIsPopoverOpen(false);
+		handleClientExport({ format: exportFormat as ExportFormat });
+	}, [exportFormat, handleClientExport]);
+
+	return (
+		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+			<TooltipSimple title="Download">
+				<PopoverTrigger asChild>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Download"
+						data-testid={`export-menu-${dataSource}`}
+						disabled={isExporting}
+						loading={isExporting}
+					>
+						<Download size={14} />
+					</Button>
+				</PopoverTrigger>
+			</TooltipSimple>
+			<PopoverContent align="end" className="export-menu-popover">
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
+				</div>
+
+				<Button
+					variant="solid"
+					color="primary"
+					className="export-button"
+					onClick={handleExport}
+					disabled={isExporting}
+					loading={isExporting}
+					prefix={<Download size={16} />}
+				>
+					Export
+				</Button>
+			</PopoverContent>
+		</Popover>
+	);
+}

frontend/src/components/ExportMenu/__tests__/ExportMenu.test.tsx

@@ -0,0 +1,85 @@
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import ExportMenu from '../ExportMenu';
+
+const mockHandleExport = jest.fn();
+let mockIsExporting = false;
+
+jest.mock('hooks/useExportData/useClientExport', () => ({
+	useClientExport: (): unknown => ({
+		isExporting: mockIsExporting,
+		handleExport: mockHandleExport,
+	}),
+}));
+
+const data = {
+	statusCode: 200,
+	error: null,
+	message: '',
+	payload: { data: { result: [], resultType: 'time_series' } },
+} as unknown as MetricQueryRangeSuccessResponse;
+
+const TEST_ID = `export-menu-${DataSource.LOGS}`;
+
+function renderMenu(): void {
+	render(
+		<ExportMenu
+			dataSource={DataSource.LOGS}
+			data={data}
+			fileName="logs-timeseries"
+		/>,
+	);
+}
+
+describe('ExportMenu', () => {
+	beforeEach(() => {
+		mockHandleExport.mockReset();
+		mockIsExporting = false;
+	});
+
+	it('renders the download trigger button', () => {
+		renderMenu();
+		expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+	});
+
+	it('shows only format options — no shape, row-count, or column controls', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+
+		expect(screen.getByText('FORMAT')).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'csv' })).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'jsonl' })).toBeInTheDocument();
+
+		expect(screen.queryByText('Number of Rows')).not.toBeInTheDocument();
+		expect(screen.queryByText('Columns')).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'long' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'wide' })).not.toBeInTheDocument();
+	});
+
+	it('exports as csv by default', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledTimes(1);
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'csv' });
+	});
+
+	it('exports as jsonl when selected', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
+	});
+
+	it('disables the trigger while an export is in progress', () => {
+		mockIsExporting = true;
+		renderMenu();
+
+		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+	});
+});

frontend/src/constants/sessionStorage.ts

@@ -1,4 +1,3 @@
 export enum SESSIONSTORAGE {
 	RETRY_LAZY_REFRESHED = 'retry-lazy-refreshed',
-	VIEW_PANEL_HANDOFF = 'view-panel-handoff',
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/AttributeMappingsTab.module.scss

@@ -1,7 +0,0 @@
-.pageError {
-	padding: var(--padding-3) var(--padding-4);
-	border-radius: var(--radius-2);
-	background: var(--callout-error-background);
-	color: var(--callout-error-title);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/AttributeMappingsTab.tsx

@@ -1,21 +0,0 @@
-import styles from './AttributeMappingsTab.module.scss';
-import MappingsTable from './components/MappingsTable/MappingsTable';
-import { useAttributeMappingStore } from './hooks/useAttributeMappingStore';
-
-function AttributeMappingsTab(): JSX.Element {
-	const store = useAttributeMappingStore();
-
-	return (
-		<div data-testid="attribute-mappings-tab">
-			{store.isError ? (
-				<div className={styles.pageError} role="alert">
-					Failed to load mapping groups. Please try again.
-				</div>
-			) : (
-				<MappingsTable store={store} />
-			)}
-		</div>
-	);
-}
-
-export default AttributeMappingsTab;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -1,267 +0,0 @@
-import {
-	SpantypesFieldContextDTO as FieldContext,
-	SpantypesSpanMapperOperationDTO as MapperOperation,
-} from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-
-import {
-	GROUPS_ENDPOINT,
-	makeGroupsResponse,
-	makeMapper,
-	makeMappersResponse,
-	mappersEndpoint,
-	mockGroups,
-	mockMappers,
-} from 'container/LLMObservability/AttributeMapping/__tests__/fixtures';
-import AttributeMappingsTab from '../AttributeMappingsTab';
-
-function setupGroups(groups = mockGroups): void {
-	server.use(
-		rest.get(GROUPS_ENDPOINT, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(makeGroupsResponse(groups))),
-		),
-	);
-}
-
-function setupMappers(mappers = mockMappers, groupId = 'group-1'): void {
-	server.use(
-		rest.get(mappersEndpoint(groupId), (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(makeMappersResponse(mappers))),
-		),
-	);
-}
-
-async function expandGroup(
-	user: ReturnType<typeof userEvent.setup>,
-	groupId = 'group-1',
-): Promise<void> {
-	await user.click(screen.getByTestId(`group-expand-${groupId}`));
-}
-
-describe('AttributeMappingsTab (integration)', () => {
-	beforeEach(() => {
-		// Reset URL state between tests — jsdom shares window.location across a file.
-		window.history.pushState(null, '', '/');
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders no error banner on a successful load', async () => {
-		setupGroups();
-		render(<AttributeMappingsTab />);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('group-name-group-1')).toBeInTheDocument(),
-		);
-		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-	});
-
-	it('shows an error banner when the groups request fails', async () => {
-		server.use(
-			rest.get(GROUPS_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
-		);
-		render(<AttributeMappingsTab />);
-
-		await expect(screen.findByRole('alert')).resolves.toHaveTextContent(
-			'Failed to load mapping groups. Please try again.',
-		);
-	});
-
-	it('shows the empty state when there are no groups', async () => {
-		setupGroups([]);
-		render(<AttributeMappingsTab />);
-
-		await expect(
-			screen.findByTestId('mapper-groups-empty'),
-		).resolves.toHaveTextContent('No mapping groups yet.');
-	});
-
-	it('renders each group header row with its name, condition count and status', async () => {
-		setupGroups();
-		render(<AttributeMappingsTab />);
-
-		// Condition filters are no longer shown inline as clauses — the header
-		// carries a count instead (the keys surface in the group drawer, later PR).
-		// Group headers are antd Collapse panels, so rows scope to the panel item.
-		// group-1: enabled, with attribute + resource condition keys.
-		const enabledRow = (await screen.findByTestId('group-name-group-1')).closest(
-			'.ant-collapse-item',
-		) as HTMLElement;
-		expect(
-			within(enabledRow).getByTestId('group-name-group-1'),
-		).toHaveTextContent('demo');
-		expect(
-			within(enabledRow).getByTestId('group-condition-count-group-1'),
-		).toHaveTextContent('2 conditions');
-		expect(within(enabledRow).getByTestId('group-enabled-group-1')).toBeChecked();
-
-		// group-2: disabled, with no condition keys.
-		const disabledRow = screen
-			.getByTestId('group-name-group-2')
-			.closest('.ant-collapse-item') as HTMLElement;
-		expect(within(disabledRow).getByText('Tool')).toBeInTheDocument();
-		expect(
-			within(disabledRow).getByTestId('group-condition-count-group-2'),
-		).toHaveTextContent('0 conditions');
-		expect(
-			within(disabledRow).getByTestId('group-enabled-group-2'),
-		).not.toBeChecked();
-	});
-
-	it('renders the group enable state as a read-only switch', async () => {
-		setupGroups();
-		render(<AttributeMappingsTab />);
-
-		// The status switch reflects enabled state but is non-interactive in this
-		// read-only listing — editing lands in a later PR.
-		const toggle = await screen.findByTestId('group-enabled-group-1');
-		expect(toggle).toBeChecked();
-		expect(toggle).toBeDisabled();
-	});
-
-	it("reveals a group's mappers on expand and hides them on collapse", async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([makeMapper({ id: 'mapper-1' })]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		// The toggle is the antd Collapse header, which owns the expanded state.
-		const header = screen
-			.getByTestId('group-expand-group-1')
-			.closest('.ant-collapse-header') as HTMLElement;
-		expect(header).toHaveAttribute('aria-expanded', 'false');
-
-		await expandGroup(user);
-		expect(header).toHaveAttribute('aria-expanded', 'true');
-		await expect(
-			screen.findByTestId('mapper-target-mapper-1'),
-		).resolves.toBeInTheDocument();
-
-		await expandGroup(user);
-		await waitFor(() =>
-			expect(
-				screen.queryByTestId('mapper-target-mapper-1'),
-			).not.toBeInTheDocument(),
-		);
-	});
-
-	it("lazily fetches and renders a group's mappers on first expand", async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([
-			makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model', enabled: true }),
-		]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		// Mappers are not fetched until the row is expanded.
-		expect(
-			screen.queryByTestId('mapper-target-mapper-1'),
-		).not.toBeInTheDocument();
-
-		await expandGroup(user);
-
-		const target = await screen.findByTestId('mapper-target-mapper-1');
-		expect(target).toHaveTextContent('gen_ai.request.model');
-		const mapperRow = target.closest('tr') as HTMLElement;
-		// Sources ordered by priority, highest first (see fixtures).
-		const sources = within(mapperRow).getByTestId('mapper-sources-mapper-1');
-		expect(sources).toHaveTextContent('genai.model');
-		expect(sources).toHaveTextContent('llm.model');
-		// Writes-to field context + enabled status (an inline Switch, not text).
-		expect(within(mapperRow).getByText('attribute')).toBeInTheDocument();
-		expect(
-			within(mapperRow).getByTestId('mapper-enabled-mapper-1'),
-		).toBeChecked();
-	});
-
-	it("renders a mapper's enable state as a read-only switch", async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([makeMapper({ id: 'mapper-1', enabled: true })]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		await expandGroup(user);
-
-		// Like the group switch, a mapper's status switch reflects state without
-		// accepting flips in this read-only listing.
-		const toggle = await screen.findByTestId('mapper-enabled-mapper-1');
-		expect(toggle).toBeChecked();
-		expect(toggle).toBeDisabled();
-	});
-
-	it('shows the mappers error state when the mappers request fails', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		server.use(
-			rest.get(mappersEndpoint('group-1'), (_req, res, ctx) =>
-				res(ctx.status(500)),
-			),
-		);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		await expandGroup(user);
-
-		await expect(
-			screen.findByTestId('mappers-error-group-1'),
-		).resolves.toHaveTextContent('Failed to load mappings. Please try again.');
-	});
-
-	it('shows the mappers empty state when a group has no mappers', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		await expandGroup(user);
-
-		await expect(
-			screen.findByTestId('mappers-empty-group-1'),
-		).resolves.toHaveTextContent('No mappings in this group yet.');
-	});
-
-	it('collapses extra mapper sources into a "+N more" label beyond the visible cap', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([
-			makeMapper({
-				id: 'mapper-1',
-				config: {
-					sources: [1, 2, 3, 4, 5].map((priority) => ({
-						key: `source-${priority}`,
-						context: FieldContext.attribute,
-						operation: MapperOperation.copy,
-						priority,
-					})),
-				},
-			}),
-		]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		await expandGroup(user);
-
-		await expect(screen.findByText('+2 more')).resolves.toBeInTheDocument();
-	});
-
-	it('shows a muted placeholder when a mapper has no sources', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		setupMappers([makeMapper({ id: 'mapper-1', config: { sources: [] } })]);
-		render(<AttributeMappingsTab />);
-
-		await screen.findByTestId('group-name-group-1');
-		await expandGroup(user);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('mapper-sources-mapper-1')).toHaveTextContent('—'),
-		);
-	});
-});

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.module.scss

@@ -1,19 +0,0 @@
-.groupHeaderLabel {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	min-width: 0;
-}
-
-.groupName {
-	color: var(--l1-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.groupCount {
-	color: var(--l3-foreground);
-	font-size: var(--font-size-xs);
-	white-space: nowrap;
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.tsx

@@ -1,36 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
-
-import styles from './GroupHeader.module.scss';
-
-interface GroupHeaderProps {
-	group: MappingGroup;
-}
-
-function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
-	const conditionCount = group.attributes.length + group.resource.length;
-
-	return (
-		<div
-			className={styles.groupHeaderLabel}
-			data-testid={`group-expand-${group.id}`}
-		>
-			<Typography.Text
-				as="span"
-				className={styles.groupName}
-				testId={`group-name-${group.id}`}
-			>
-				{group.name}
-			</Typography.Text>
-			<Typography.Text
-				as="span"
-				className={styles.groupCount}
-				testId={`group-condition-count-${group.id}`}
-			>
-				· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default GroupHeader;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/index.ts

@@ -1 +0,0 @@
-export { default } from './GroupHeader';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,26 +0,0 @@
-import { Switch } from '@signozhq/ui/switch';
-
-import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
-import styles from './GroupHeaderActions.module.scss';
-
-interface GroupHeaderActionsProps {
-	group: MappingGroup;
-}
-
-function GroupHeaderActions({ group }: GroupHeaderActionsProps): JSX.Element {
-	return (
-		<div
-			className={styles.actions}
-			onClick={(event): void => event.stopPropagation()}
-		>
-			<Switch
-				value={group.enabled}
-				// We don't yet support toggling a group's enabled state in this read-only PR, so disable the switch. A later PR will add the toggle handler and its drawer.
-				disabled
-				testId={`group-enabled-${group.id}`}
-			/>
-		</div>
-	);
-}
-
-export default GroupHeaderActions;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/index.ts

@@ -1 +0,0 @@
-export { default } from './GroupHeaderActions';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.module.scss

@@ -1,14 +0,0 @@
-.table {
-	width: 100%;
-	border-collapse: collapse;
-	table-layout: fixed;
-}
-
-.mapperStateRow .stateCell {
-	color: var(--l3-foreground);
-}
-
-.stateCell {
-	padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-12);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -1,98 +0,0 @@
-import { useListSpanMappers } from 'api/generated/services/spanmapper';
-import { motion } from 'motion/react';
-
-import {
-	MappingGroup,
-	Mapping,
-} from 'container/LLMObservability/AttributeMapping/types';
-import { buildMappingsFromListResponse } from 'container/LLMObservability/AttributeMapping/utils';
-import { COLUMN_COUNT } from '../constants';
-import MapperRow, { MapperRowSkeleton } from '../MapperRow';
-import MappingsColgroup from '../MappingsColgroup';
-import styles from './GroupMappers.module.scss';
-
-const MAPPER_SKELETON_ROWS = 1;
-
-const STATE_ROW_MOTION = {
-	initial: { opacity: 0 },
-	animate: { opacity: 1 },
-	transition: { duration: 0.18, ease: 'easeOut' },
-} as const;
-
-interface StateRowProps {
-	groupId: string;
-}
-
-function ErrorRow({ groupId }: StateRowProps): JSX.Element {
-	return (
-		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
-			<td
-				colSpan={COLUMN_COUNT}
-				className={styles.stateCell}
-				data-testid={`mappers-error-${groupId}`}
-			>
-				Failed to load mappings. Please try again.
-			</td>
-		</motion.tr>
-	);
-}
-
-function EmptyRow({ groupId }: StateRowProps): JSX.Element {
-	return (
-		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
-			<td
-				colSpan={COLUMN_COUNT}
-				className={styles.stateCell}
-				data-testid={`mappers-empty-${groupId}`}
-			>
-				No mappings in this group yet.
-			</td>
-		</motion.tr>
-	);
-}
-
-interface GroupMappersProps {
-	group: MappingGroup;
-}
-
-function GroupMappers({ group }: GroupMappersProps): JSX.Element {
-	const {
-		data: mappers = [],
-		isLoading,
-		isError,
-	} = useListSpanMappers<Mapping[]>(
-		{
-			groupId: group.id,
-		},
-		{
-			query: {
-				refetchOnMount: false,
-				select: buildMappingsFromListResponse,
-			},
-		},
-	);
-
-	let rows: JSX.Element[];
-	if (isError) {
-		rows = [<ErrorRow key="error" groupId={group.id} />];
-	} else if (isLoading) {
-		rows = Array.from({ length: MAPPER_SKELETON_ROWS }).map((_, index) => (
-			<MapperRowSkeleton key={`mapper-skeleton-${index}`} />
-		));
-	} else if (mappers.length === 0) {
-		rows = [<EmptyRow key="empty" groupId={group.id} />];
-	} else {
-		rows = mappers.map((mapper, index) => (
-			<MapperRow key={mapper.id} mapper={mapper} index={index} />
-		));
-	}
-
-	return (
-		<table className={styles.table}>
-			<MappingsColgroup />
-			<tbody>{rows}</tbody>
-		</table>
-	);
-}
-
-export default GroupMappers;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/index.ts

@@ -1 +0,0 @@
-export { default } from './GroupMappers';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.module.scss

@@ -1,65 +0,0 @@
-.mapperRow {
-	&:hover {
-		background: var(--l2-background-hover);
-	}
-}
-
-.cell {
-	padding: var(--spacing-4) var(--spacing-6);
-	vertical-align: middle;
-	color: var(--l1-foreground);
-	font-size: var(--periscope-font-size-base);
-}
-
-// Indent the first cell so mapper rows read as nested under their group.
-.targetCell {
-	padding-left: var(--spacing-12);
-}
-
-// Shorter vertical padding so the loading state reads as a compact placeholder.
-.skeletonCell {
-	composes: cell;
-	:global(.ant-skeleton-input) {
-		min-height: 18px !important;
-		height: 18px !important;
-	}
-	:global(.ant-skeleton-button) {
-		min-height: 18px !important;
-		height: 18px !important;
-	}
-}
-
-.statusCell {
-	text-align: right;
-}
-
-.rowActions {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-3);
-}
-
-.sources {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-3);
-}
-
-.sourceChipText {
-	display: block;
-	max-width: 220px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.sourceMore {
-	font-size: var(--font-size-xs);
-	white-space: nowrap;
-}
-
-.muted {
-	color: var(--l3-foreground);
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -1,102 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import { SpantypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-import { motion } from 'motion/react';
-
-import { Mapping } from 'container/LLMObservability/AttributeMapping/types';
-import styles from './MapperRow.module.scss';
-
-const MAX_VISIBLE_SOURCES = 3;
-
-const ROW_TRANSITION = { duration: 0.18, ease: 'easeOut' } as const;
-const MAX_STAGGERED_ROWS = 6;
-const STAGGER_STEP = 0.03;
-
-interface MapperRowProps {
-	mapper: Mapping;
-	index: number;
-}
-
-function MapperRow({ mapper, index }: MapperRowProps): JSX.Element {
-	const sources = mapper.sources ?? [];
-	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
-	const remainingSources = sources.length - visibleSources.length;
-
-	return (
-		<motion.tr
-			className={styles.mapperRow}
-			data-testid={`mapper-row-${mapper.id}`}
-			initial={{ opacity: 0, y: -4 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{
-				...ROW_TRANSITION,
-				delay: Math.min(index, MAX_STAGGERED_ROWS) * STAGGER_STEP,
-			}}
-		>
-			<td className={cx(styles.cell, styles.targetCell)}>
-				<Typography.Text
-					truncate={1}
-					title={mapper.name}
-					data-testid={`mapper-target-${mapper.id}`}
-				>
-					{mapper.name}
-				</Typography.Text>
-			</td>
-			<td className={styles.cell}>
-				{sources.length === 0 ? (
-					<span className={styles.muted} data-testid={`mapper-sources-${mapper.id}`}>
-						—
-					</span>
-				) : (
-					<div
-						className={styles.sources}
-						data-testid={`mapper-sources-${mapper.id}`}
-					>
-						{visibleSources.map((source) => (
-							<Badge
-								variant="outline"
-								color="vanilla"
-								className={styles.sourceChip}
-								key={`${source.context}:${source.key}`}
-							>
-								<span className={styles.sourceChipText} title={source.key}>
-									{source.key}
-								</span>
-							</Badge>
-						))}
-						{remainingSources > 0 && (
-							<span className={cx(styles.sourceMore, styles.muted)}>
-								+{remainingSources} more
-							</span>
-						)}
-					</div>
-				)}
-			</td>
-			<td className={styles.cell}>
-				<Badge
-					color={
-						mapper.fieldContext === SpantypesFieldContextDTO.resource
-							? 'amber'
-							: 'robin'
-					}
-					variant="outline"
-				>
-					{mapper.fieldContext}
-				</Badge>
-			</td>
-			<td className={cx(styles.cell, styles.statusCell)}>
-				<div className={styles.rowActions}>
-					<Switch
-						value={mapper.enabled}
-						disabled
-						testId={`mapper-enabled-${mapper.id}`}
-					/>
-				</div>
-			</td>
-		</motion.tr>
-	);
-}
-
-export default MapperRow;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRowSkeleton.tsx

@@ -1,30 +0,0 @@
-import { Skeleton } from 'antd';
-import cx from 'classnames';
-
-import styles from './MapperRow.module.scss';
-
-function MapperRowSkeleton(): JSX.Element {
-	return (
-		<tr className={styles.mapperRow}>
-			<td className={cx(styles.skeletonCell, styles.targetCell)}>
-				<Skeleton.Input active size="small" style={{ width: '55%' }} />
-			</td>
-			<td className={styles.skeletonCell}>
-				<div className={styles.sources}>
-					<Skeleton.Button active size="small" style={{ width: 88 }} />
-					<Skeleton.Button active size="small" style={{ width: 56 }} />
-				</div>
-			</td>
-			<td className={styles.skeletonCell}>
-				<Skeleton.Button active size="small" style={{ width: 72 }} />
-			</td>
-			<td className={cx(styles.skeletonCell, styles.statusCell)}>
-				<div className={styles.rowActions}>
-					<Skeleton.Button active size="small" shape="round" />
-				</div>
-			</td>
-		</tr>
-	);
-}
-
-export default MapperRowSkeleton;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/index.ts

@@ -1,2 +0,0 @@
-export { default } from './MapperRow';
-export { default as MapperRowSkeleton } from './MapperRowSkeleton';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.module.scss

@@ -1,11 +0,0 @@
-.colTarget {
-	width: 32%;
-}
-
-.colWritesTo {
-	width: 140px;
-}
-
-.colStatus {
-	width: 120px;
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.tsx

@@ -1,14 +0,0 @@
-import styles from './MappingsColgroup.module.scss';
-
-function MappingsColgroup(): JSX.Element {
-	return (
-		<colgroup>
-			<col className={styles.colTarget} />
-			<col />
-			<col className={styles.colWritesTo} />
-			<col className={styles.colStatus} />
-		</colgroup>
-	);
-}
-
-export default MappingsColgroup;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/index.ts

@@ -1 +0,0 @@
-export { default } from './MappingsColgroup';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.module.scss

@@ -1,124 +0,0 @@
-.table {
-	width: 100%;
-	border-collapse: collapse;
-	table-layout: fixed;
-}
-
-.headerRow {
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.headerCell {
-	padding: var(--spacing-4) var(--spacing-6);
-	text-align: left;
-	font-size: var(--periscope-font-size-base);
-	font-weight: var(--font-weight-normal);
-	color: var(--l2-foreground);
-
-	&:last-child {
-		text-align: right;
-	}
-}
-
-.groupsCollapse:global(.ant-collapse) {
-	background: transparent;
-	border: none;
-	border-radius: 0;
-
-	> :global(.ant-collapse-item) {
-		border-bottom: none;
-		border-top: 1px solid var(--l2-border);
-		border-radius: 0;
-
-		&:last-child {
-			border-bottom: 1px solid var(--l2-border);
-			border-radius: 0;
-		}
-
-		> :global(.ant-collapse-header) {
-			align-items: center;
-			gap: var(--spacing-3);
-			background: var(--l2-background);
-			border-radius: 0;
-			padding: var(--spacing-3) var(--spacing-6);
-			color: var(--l3-foreground);
-
-			:global(.ant-collapse-expand-icon) {
-				display: flex;
-				align-items: center;
-				height: auto;
-				padding-inline-end: 0;
-				color: var(--l3-foreground);
-			}
-
-			:global(.ant-collapse-header-text) {
-				min-width: 0;
-			}
-
-			:global(.ant-collapse-extra) {
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-
-	:global(.ant-collapse-content) {
-		background: transparent;
-		border-top: none;
-		color: inherit;
-
-		> :global(.ant-collapse-content-box) {
-			padding: 0;
-		}
-	}
-}
-
-.tableEmpty {
-	padding: var(--spacing-12) var(--spacing-6);
-	text-align: center;
-	color: var(--l3-foreground);
-	font-size: var(--periscope-font-size-base);
-}
-
-.skeletonList {
-	display: flex;
-	flex-direction: column;
-}
-
-// Mirrors the Collapse header banner while groups load.
-.skeletonBanner {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--spacing-3) var(--spacing-6);
-	background: var(--l2-background);
-	border-top: 1px solid var(--l2-border);
-
-	&:last-child {
-		border-bottom: 1px solid var(--l2-border);
-	}
-	:global(.ant-skeleton-input) {
-		min-height: 18px !important;
-		height: 18px !important;
-	}
-	:global(.ant-skeleton-button) {
-		min-height: 18px !important;
-		height: 18px !important;
-	}
-}
-
-.skeletonGroupLeft {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	flex: 1;
-	min-width: 0;
-}
-
-.skeletonGroupRight {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	flex-shrink: 0;
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { Collapse, type CollapseProps, Skeleton } from 'antd';
-
-import { AttributeMappingStore } from 'container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore';
-import GroupHeader from './GroupHeader';
-import GroupHeaderActions from './GroupHeaderActions';
-import GroupMappers from './GroupMappers';
-import MappingsColgroup from './MappingsColgroup';
-import styles from './MappingsTable.module.scss';
-
-const SKELETON_ROW_COUNT = 3;
-
-interface MappingsTableProps {
-	store: AttributeMappingStore;
-}
-
-function MappingsTable({ store }: MappingsTableProps): JSX.Element {
-	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-
-	const isEmpty = !store.isLoading && store.groups.length === 0;
-
-	const items: CollapseProps['items'] = store.groups.map((group) => ({
-		key: group.id,
-		label: <GroupHeader group={group} />,
-		extra: <GroupHeaderActions group={group} />,
-		children: <GroupMappers group={group} />,
-	}));
-
-	const skeletonBanners = (
-		<div className={styles.skeletonList}>
-			{Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
-				<div
-					// eslint-disable-next-line react/no-array-index-key
-					key={`group-skeleton-${index}`}
-					className={styles.skeletonBanner}
-				>
-					<div className={styles.skeletonGroupLeft}>
-						<Skeleton.Input
-							active
-							size="small"
-							style={{ width: index % 2 === 0 ? 200 : 140 }}
-						/>
-						<Skeleton.Input active size="small" style={{ width: 64 }} />
-					</div>
-					<div className={styles.skeletonGroupRight}>
-						<Skeleton.Button active size="small" shape="round" />
-					</div>
-				</div>
-			))}
-		</div>
-	);
-
-	if (isEmpty) {
-		return (
-			<div className={styles.tableEmpty} data-testid="mapper-groups-empty">
-				No mapping groups yet.
-			</div>
-		);
-	}
-
-	return (
-		<div data-testid="mappings-table">
-			<table className={styles.table}>
-				<MappingsColgroup />
-				<thead>
-					<tr className={styles.headerRow}>
-						<th className={styles.headerCell}>Target</th>
-						<th className={styles.headerCell}>Sources</th>
-						<th className={styles.headerCell}>Writes to</th>
-						<th className={styles.headerCell}>Status</th>
-					</tr>
-				</thead>
-			</table>
-			{store.isLoading ? (
-				skeletonBanners
-			) : (
-				<Collapse
-					className={styles.groupsCollapse}
-					activeKey={expandedGroups}
-					onChange={(keys): void =>
-						setExpandedGroups(Array.isArray(keys) ? keys : [keys])
-					}
-					bordered={false}
-					destroyInactivePanel
-					expandIcon={({ isActive }): JSX.Element =>
-						isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-					}
-					items={items}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default MappingsTable;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/constants.ts

@@ -1 +0,0 @@
-export const COLUMN_COUNT = 4;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore.ts

@@ -1,33 +0,0 @@
-import { useMemo } from 'react';
-import { SpantypesSpanMapperGroupDTO } from 'api/generated/services/sigNoz.schemas';
-import { useListSpanMapperGroups } from 'api/generated/services/spanmapper';
-
-import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
-import { buildMappingGroup } from 'container/LLMObservability/AttributeMapping/utils';
-
-export interface AttributeMappingStore {
-	groups: MappingGroup[];
-	isLoading: boolean;
-	isError: boolean;
-}
-
-// Read-only store for the listing view: loads the server groups only. Each
-// group's mappers are fetched lazily when its panel is expanded (see
-// GroupMappers), so page load is a single request instead of an N+1 fan-out
-// across every group. Editing (enabled toggles, save/discard) and its drawers
-// land in a later PR — this PR only lists.
-export function useAttributeMappingStore(): AttributeMappingStore {
-	const groupsQuery = useListSpanMapperGroups();
-
-	const groups = useMemo<MappingGroup[]>(() => {
-		const serverGroups: SpantypesSpanMapperGroupDTO[] =
-			groupsQuery.data?.data?.items ?? [];
-		return serverGroups.map((group) => buildMappingGroup(group));
-	}, [groupsQuery.data]);
-
-	return {
-		groups,
-		isLoading: groupsQuery.isLoading,
-		isError: groupsQuery.isError,
-	};
-}

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -2,5 +2,12 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	padding: var(--spacing-0);
+	padding: var(--spacing-12);
+}
+
+.tableEmpty {
+	padding: var(--spacing-12) var(--spacing-6);
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,27 +1,9 @@
-import { Tabs } from '@signozhq/ui/tabs';
-
 import AttributeMappingHeader from './components/AttributeMappingHeader';
-import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
 
 const noop = (): void => undefined;
 
 function LLMObservabilityAttributeMapping(): JSX.Element {
-	const tabItems = [
-		{
-			key: 'attribute-mappings',
-			label: 'Attribute mappings',
-			children: <AttributeMappingsTab />,
-		},
-		{
-			key: 'test',
-			label: 'Test',
-			disabled: true,
-			disabledReason: 'Coming soon',
-			children: null,
-		},
-	];
-
 	return (
 		<div
 			className={styles.llmObservabilityAttributeMapping}
@@ -34,11 +16,9 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 				onSave={noop}
 			/>
 
-			<Tabs
-				testId="attribute-mapping-tabs"
-				defaultValue="attribute-mappings"
-				items={tabItems}
-			/>
+			<div className={styles.tableEmpty} data-testid="attribute-mapping-empty">
+				No mapping groups configured yet.
+			</div>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -1,67 +0,0 @@
-import { rest, server } from 'mocks-server/server';
-import { render, screen } from 'tests/test-utils';
-
-import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
-import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';
-
-function setupGroups(): void {
-	server.use(
-		rest.get(GROUPS_ENDPOINT, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(makeGroupsResponse(mockGroups))),
-		),
-	);
-}
-
-describe('LLMObservabilityAttributeMapping', () => {
-	beforeEach(() => {
-		window.history.pushState(null, '', '/');
-		setupGroups();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the page shell', () => {
-		render(<LLMObservabilityAttributeMapping />);
-
-		expect(
-			screen.getByTestId('llm-observability-attribute-mapping-page'),
-		).toBeInTheDocument();
-	});
-
-	it('shows the attribute-mappings and test sub-tab labels', () => {
-		render(<LLMObservabilityAttributeMapping />);
-
-		expect(
-			screen.getByRole('tab', { name: 'Attribute mappings' }),
-		).toBeInTheDocument();
-		expect(screen.getByRole('tab', { name: 'Test' })).toBeInTheDocument();
-	});
-
-	it('activates the attribute-mappings tab by default and renders its content', async () => {
-		render(<LLMObservabilityAttributeMapping />);
-
-		const attributeMappingsTab = screen.getByRole('tab', {
-			name: 'Attribute mappings',
-		});
-		expect(attributeMappingsTab).toHaveAttribute('data-state', 'active');
-		await expect(
-			screen.findByTestId('attribute-mappings-tab'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('renders the header with its description and no Save/Discard while pristine', () => {
-		render(<LLMObservabilityAttributeMapping />);
-
-		expect(
-			screen.getByText(
-				'Configure source-to-target attribute remapping for LLM traces',
-			),
-		).toBeInTheDocument();
-		// The actions only appear once there are staged changes.
-		expect(screen.queryByTestId('save-changes-btn')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('unsaved-changes')).not.toBeInTheDocument();
-	});
-});

frontend/src/container/LLMObservability/AttributeMapping/__tests__/fixtures.ts

@@ -1,93 +0,0 @@
-import {
-	SpantypesFieldContextDTO as FieldContext,
-	SpantypesSpanMapperDTO as Mapper,
-	SpantypesSpanMapperGroupDTO as MapperGroup,
-	SpantypesSpanMapperOperationDTO as MapperOperation,
-} from 'api/generated/services/sigNoz.schemas';
-
-// Endpoint globs used by MSW handlers. The generated client hits relative
-// `/api/v1/span_mapper_groups[...]`, so the `*` prefix matches regardless of
-// base URL.
-export const GROUPS_ENDPOINT = '*/api/v1/span_mapper_groups';
-export function mappersEndpoint(groupId: string): string {
-	return `*/api/v1/span_mapper_groups/${groupId}/span_mappers`;
-}
-
-export function makeGroup(overrides: Partial<MapperGroup> = {}): MapperGroup {
-	return {
-		id: 'group-1',
-		orgId: 'org-1',
-		name: 'demo',
-		enabled: true,
-		condition: {
-			attributes: ['ai.embeddings'],
-			resource: ['cloud.account.id'],
-		},
-		...overrides,
-	};
-}
-
-export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
-	return {
-		id: 'mapper-1',
-		group_id: 'group-1',
-		name: 'gen_ai.request.model',
-		enabled: true,
-		fieldContext: FieldContext.attribute,
-		config: {
-			sources: [
-				{
-					key: 'genai.model',
-					context: FieldContext.attribute,
-					operation: MapperOperation.copy,
-					priority: 2,
-				},
-				{
-					key: 'llm.model',
-					context: FieldContext.attribute,
-					operation: MapperOperation.move,
-					priority: 1,
-				},
-			],
-		},
-		...overrides,
-	};
-}
-
-// Both list endpoints share the same `{ status, data: { items } }` envelope —
-// the generated schema mis-types the mappers response with the groups DTO
-// (see GroupMappers), but the runtime envelope shape is identical.
-export function makeGroupsResponse(groups: MapperGroup[]): {
-	status: string;
-	data: { items: MapperGroup[] };
-} {
-	return { status: 'ok', data: { items: groups } };
-}
-
-export function makeMappersResponse(mappers: Mapper[]): {
-	status: string;
-	data: { items: Mapper[] };
-} {
-	return { status: 'ok', data: { items: mappers } };
-}
-
-export const mockGroups: MapperGroup[] = [
-	makeGroup({
-		id: 'group-1',
-		name: 'demo',
-		condition: {
-			attributes: ['ai.embeddings'],
-			resource: ['cloud.account.id'],
-		},
-	}),
-	makeGroup({
-		id: 'group-2',
-		name: 'Tool',
-		enabled: false,
-		condition: { attributes: null, resource: null },
-	}),
-];
-
-export const mockMappers: Mapper[] = [
-	makeMapper({ id: 'mapper-1', group_id: 'group-1' }),
-];

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -5,6 +5,23 @@
 	gap: var(--spacing-8);
 }
 
+.pageHeaderTitle {
+	display: flex;
+	flex-direction: column;
+}
+
+.title {
+	margin: 0;
+	font-size: var(--periscope-font-size-large);
+	font-weight: var(--font-weight-semibold);
+}
+
+.description {
+	margin: var(--spacing-2) 0 0;
+	font-size: var(--periscope-font-size-base);
+	color: var(--l3-foreground);
+}
+
 .pageHeaderActions {
 	display: flex;
 	align-items: center;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 
 import styles from './AttributeMappingHeader.module.scss';
 
@@ -18,35 +17,38 @@ function AttributeMappingHeader({
 }: AttributeMappingHeaderProps): JSX.Element {
 	return (
 		<header className={styles.pageHeader}>
-			<Typography.Text as="p" size="base" color="muted">
-				Configure source-to-target attribute remapping for LLM traces
-			</Typography.Text>
-			{isDirty && (
-				<div className={styles.pageHeaderActions}>
+			<div className={styles.pageHeaderTitle}>
+				<h1 className={styles.title}>Attribute Mapping</h1>
+				<p className={styles.description}>
+					Configure source-to-target attribute remapping for LLM traces
+				</p>
+			</div>
+			<div className={styles.pageHeaderActions}>
+				{isDirty && (
 					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
 						Unsaved changes
 					</span>
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={onDiscard}
-						disabled={isSaving}
-						testId="discard-changes-btn"
-					>
-						Discard
-					</Button>
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onSave}
-						loading={isSaving}
-						disabled={isSaving}
-						testId="save-changes-btn"
-					>
-						{isSaving ? 'Saving…' : 'Save changes'}
-					</Button>
-				</div>
-			)}
+				)}
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onDiscard}
+					disabled={!isDirty || isSaving}
+					testId="discard-changes-btn"
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onSave}
+					loading={isSaving}
+					disabled={!isDirty || isSaving}
+					testId="save-changes-btn"
+				>
+					{isSaving ? 'Saving…' : 'Save changes'}
+				</Button>
+			</div>
 		</header>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/types.ts

@@ -1,26 +0,0 @@
-import {
-	SpantypesFieldContextDTO,
-	SpantypesSpanMapperOperationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export interface SourceConfig {
-	key: string;
-	context: SpantypesFieldContextDTO;
-	operation: SpantypesSpanMapperOperationDTO;
-}
-
-export interface Mapping {
-	id: string;
-	name: string;
-	fieldContext: SpantypesFieldContextDTO;
-	sources: SourceConfig[];
-	enabled: boolean;
-}
-
-export interface MappingGroup {
-	id: string;
-	name: string;
-	attributes: string[];
-	resource: string[];
-	enabled: boolean;
-}

frontend/src/container/LLMObservability/AttributeMapping/utils.ts

@@ -1,48 +0,0 @@
-import {
-	ListSpanMappers200,
-	SpantypesSpanMapperDTO,
-	SpantypesSpanMapperGroupDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { MappingGroup, Mapping, SourceConfig } from './types';
-
-function getMapperSources(mapper: SpantypesSpanMapperDTO): SourceConfig[] {
-	const sources = mapper.config?.sources ?? [];
-	return [...sources]
-		.sort((a, b) => a.priority - b.priority)
-		.map((source) => ({
-			key: source.key,
-			context: source.context,
-			operation: source.operation,
-		}));
-}
-
-export function buildMapping(mapper: SpantypesSpanMapperDTO): Mapping {
-	return {
-		id: mapper.id,
-		name: mapper.name,
-		fieldContext: mapper.fieldContext,
-		sources: getMapperSources(mapper),
-		enabled: mapper.enabled,
-	};
-}
-
-export function buildMappingsFromListResponse(
-	response: ListSpanMappers200,
-): Mapping[] {
-	const items = (response.data?.items ??
-		[]) as unknown as SpantypesSpanMapperDTO[];
-	return items.map(buildMapping);
-}
-
-export function buildMappingGroup(
-	group: SpantypesSpanMapperGroupDTO,
-): MappingGroup {
-	return {
-		id: group.id,
-		name: group.name,
-		attributes: group.condition?.attributes ?? [],
-		resource: group.condition?.resource ?? [],
-		enabled: group.enabled,
-	};
-}

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

@@ -182,6 +182,14 @@
 				flex: 1;
 				min-height: 0;
 				overflow-y: visible;
+
+				.table-view-container-header {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					padding: 12px;
+					flex-shrink: 0;
+				}
 			}
 
 			.time-series-view-container {
@@ -191,14 +199,6 @@
 				min-height: 0;
 				overflow-y: visible;
 
-				.time-series-view-container-header {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					padding: 12px;
-					flex-shrink: 0;
-				}
-
 				.time-series-view {
 					flex-shrink: 0;
 					height: 65vh;

frontend/src/container/LogsExplorerViews/index.tsx

@@ -18,13 +18,18 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { QueryParams } from 'constants/query';
-import { initialFilters, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	initialFilters,
+	initialQueriesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import {
 	getExportQueryData,
@@ -32,7 +37,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
@@ -461,23 +465,32 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
-							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}
 								data={data}
 								isError={isError}
 								error={error as APIError}
 								yAxisUnit={yAxisUnit}
+								onYAxisUnitChange={onUnitChange}
 								isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
+								allowExport
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
+							{data && !isError && (
+								<div className="table-view-container-header">
+									<ExportMenu
+										dataSource={DataSource.LOGS}
+										data={data}
+										query={stagedQuery || initialQueriesMap.metrics}
+										fileName="logs-table"
+									/>
+								</div>
+							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

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

@@ -311,6 +311,7 @@ function TimeSeries({
 									dataSource={DataSource.METRICS}
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
+									allowExport
 								/>
 							</div>
 						);

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

@@ -3,6 +3,14 @@
 	min-height: 350px;
 	padding: 0px 12px;
 
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 0;
+		flex-shrink: 0;
+	}
+
 	.ant-card-body {
 		height: 50vh;
 		min-height: 350px;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -16,6 +16,7 @@ import Uplot from 'components/Uplot';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
@@ -41,11 +42,14 @@ import { SuccessResponse, Warning } from 'types/api';
 import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
+import ExportMenu from 'components/ExportMenu/ExportMenu';
+
 import './TimeSeriesView.styles.scss';
 
 function TimeSeriesView({
@@ -59,6 +63,8 @@ function TimeSeriesView({
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
 	stackBarChart = false,
+	allowExport = false,
+	onYAxisUnitChange,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -244,10 +250,32 @@ function TimeSeriesView({
 		[baseChartOptions, stackedBands],
 	);
 
+	const showExport = allowExport && !!data?.rawV5Response;
+	const showHeader = showExport || !!onYAxisUnitChange;
+
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
+			{showHeader && (
+				<div className="time-series-view__header">
+					<div>
+						{onYAxisUnitChange && (
+							<BuilderUnitsFilter onChange={onYAxisUnitChange} yAxisUnit={yAxisUnit} />
+						)}
+					</div>
+					{showExport && data?.rawV5Response && (
+						<ExportMenu
+							dataSource={dataSource}
+							yAxisUnit={yAxisUnit}
+							data={data}
+							query={currentQuery}
+							fileName={`${dataSource}-timeseries`}
+						/>
+					)}
+				</div>
+			)}
+
 			<div
 				className="graph-container"
 				style={{ height: '100%', width: '100%' }}
@@ -295,7 +323,11 @@ function TimeSeriesView({
 }
 
 interface TimeSeriesViewProps {
-	data?: SuccessResponse<MetricRangePayloadProps> & { warning?: Warning };
+	data?: SuccessResponse<MetricRangePayloadProps> & {
+		warning?: Warning;
+		rawV5Response?: QueryRangeResponseV5;
+		legendMap?: Record<string, string>;
+	};
 	yAxisUnit?: string;
 	isLoading: boolean;
 	isError: boolean;
@@ -305,6 +337,11 @@ interface TimeSeriesViewProps {
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
 	stackBarChart?: boolean;
+	// Opt-in: render the client-side export menu (Logs explorer for now).
+	allowExport?: boolean;
+	// 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;
 }
 
 TimeSeriesView.defaultProps = {

frontend/src/container/TimeSeriesView/__tests__/TimeSeriesView.test.tsx

@@ -0,0 +1,138 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import store from 'store';
+import { DataSource } from 'types/common/queryBuilder';
+
+import TimeSeriesView from '../TimeSeriesView';
+
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="uplot-chart" />,
+}));
+
+jest.mock('components/ExportMenu/ExportMenu', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="timeseries-export-menu" />,
+}));
+
+jest.mock('container/QueryBuilder/filters/BuilderUnitsFilter', () => ({
+	BuilderUnitsFilter: (): JSX.Element => (
+		<div data-testid="builder-units-filter" />
+	),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => ({ currentQuery: null }),
+}));
+
+jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
+	getUPlotChartOptions: (): unknown => ({}),
+}));
+
+jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
+	getUPlotChartData: (): number[][] => [
+		[1, 2],
+		[3, 4],
+	],
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({ stackSeries: (): unknown => ({ data: [], bands: [] }) }),
+);
+
+jest.mock('container/GridCardLayout/GridCard/utils', () => ({
+	getLocalStorageGraphVisibilityState: (): unknown => ({
+		graphVisibilityStates: [],
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): unknown => ({ timezone: { value: 'UTC' } }),
+}));
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: (): unknown => ({ width: 800, height: 400 }),
+}));
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockStore = configureStore([])({ ...store.getState() });
+
+const rawV5Response = {
+	type: 'time_series',
+	data: { results: [] },
+	meta: {},
+};
+
+function makeData(withRawV5: boolean): any {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: '' } },
+		...(withRawV5 ? { rawV5Response, legendMap: {} } : {}),
+	};
+}
+
+function renderView(props: {
+	allowExport?: boolean;
+	withRawV5?: boolean;
+	onYAxisUnitChange?: (value: string) => void;
+}): ReturnType<typeof render> {
+	const { allowExport, withRawV5 = true, onYAxisUnitChange } = props;
+	return render(
+		<Provider store={mockStore}>
+			<MemoryRouter>
+				<TimeSeriesView
+					isLoading={false}
+					isError={false}
+					isFilterApplied
+					dataSource={DataSource.LOGS}
+					data={makeData(withRawV5)}
+					allowExport={allowExport}
+					onYAxisUnitChange={onYAxisUnitChange}
+				/>
+			</MemoryRouter>
+		</Provider>,
+	);
+}
+
+describe('TimeSeriesView header gating', () => {
+	it('renders the export menu when allowExport is set and raw V5 data is present', () => {
+		const { queryByTestId } = renderView({ allowExport: true });
+		expect(queryByTestId('timeseries-export-menu')).toBeInTheDocument();
+	});
+
+	it('renders no export menu without allowExport', () => {
+		const { queryByTestId } = renderView({});
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders no export menu when the raw V5 response is missing', () => {
+		const { queryByTestId } = renderView({ allowExport: true, withRawV5: false });
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders the unit selector only when onYAxisUnitChange is passed', () => {
+		const withUnit = renderView({ onYAxisUnitChange: jest.fn() });
+		expect(withUnit.queryByTestId('builder-units-filter')).toBeInTheDocument();
+		withUnit.unmount();
+
+		const withoutUnit = renderView({ allowExport: true });
+		expect(
+			withoutUnit.queryByTestId('builder-units-filter'),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders no header row when neither export nor unit selector is enabled', () => {
+		const { container } = renderView({ withRawV5: false });
+		expect(container.querySelector('.time-series-view__header')).toBeNull();
+	});
+});

frontend/src/container/TimeSeriesView/utils.ts

@@ -1,10 +1,41 @@
 import { SuccessResponse } from 'types/api/index';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
+type ConvertibleData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+};
+
+// Applies the same ns→ms conversion to the raw V5 tree, so client-side export
+// serializes the values the chart displays (not the original nanoseconds).
+function convertRawV5ValuesToMs(
+	response: QueryRangeResponseV5,
+): QueryRangeResponseV5 {
+	if (response.type !== 'time_series') {
+		return response;
+	}
+
+	const results = (response.data.results as TimeSeriesData[]).map((result) => ({
+		...result,
+		aggregations: (result.aggregations ?? []).map((bucket) => ({
+			...bucket,
+			series: (bucket.series ?? []).map((series) => ({
+				...series,
+				values: (series.values ?? []).map((value) => ({
+					...value,
+					value: value.value / 1000000,
+				})),
+			})),
+		})),
+	}));
+
+	return { ...response, data: { ...response.data, results } };
+}
+
 export const convertDataValueToMs = (
-	data?: SuccessResponse<MetricRangePayloadProps>,
-): SuccessResponse<MetricRangePayloadProps> | undefined => {
+	data?: ConvertibleData,
+): ConvertibleData | undefined => {
 	const convertedData = data;
 
 	const convertedResult: QueryData[] = data?.payload?.data?.result
@@ -22,5 +53,11 @@ export const convertDataValueToMs = (
 		convertedData.payload.data.result = convertedResult;
 	}
 
+	if (convertedData?.rawV5Response) {
+		convertedData.rawV5Response = convertRawV5ValuesToMs(
+			convertedData.rawV5Response,
+		);
+	}
+
 	return convertedData;
 };

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

@@ -1,6 +1,7 @@
-.actions {
+.traces-table-view-header {
 	display: flex;
-	align-items: center;
 	justify-content: flex-end;
-	gap: var(--spacing-3);
+	align-items: center;
+	padding: 12px;
+	flex-shrink: 0;
 }

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

@@ -10,6 +10,7 @@ import {
 import { useSelector } from 'react-redux';
 import { Space } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -20,8 +21,11 @@ import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import './TableView.styles.scss';
+
 function TableView({
 	setWarning,
 	setIsLoadingQueries,
@@ -97,6 +101,16 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
+			{!isError && data && (
+				<div className="traces-table-view-header">
+					<ExportMenu
+						dataSource={DataSource.TRACES}
+						data={data}
+						query={stagedQuery || initialQueriesMap.traces}
+						fileName="traces-table"
+					/>
+				</div>
+			)}
 			{!isError && (
 				<QueryTable
 					query={stagedQuery || initialQueriesMap.traces}

frontend/src/hooks/useExportData/__tests__/useClientExport.test.ts

@@ -4,7 +4,8 @@ import {
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
 import { ExportFormat } from 'lib/exportData/types';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useClientExport } from '../useClientExport';
 
@@ -24,31 +25,87 @@ jest.mock('antd', () => {
 
 const mockDownloadFile = downloadFile as jest.Mock;
 
-function timeSeriesResponse(): QueryRangeResponseV5 {
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function timeSeriesData(): MetricQueryRangeSuccessResponse {
 	return {
-		type: 'time_series',
-		data: {
-			results: [
-				{
-					queryName: 'A',
-					aggregations: [
-						{
-							index: 0,
-							alias: '',
-							meta: {},
-							series: [
-								{
-									labels: [{ key: { name: 'service' }, value: 'a' }],
-									values: [{ timestamp: 1000, value: 12 }],
-								},
-							],
-						},
-					],
-				},
-			],
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: 'time_series' } },
+		legendMap: { A: '{{service}}' },
+		rawV5Response: {
+			type: 'time_series',
+			data: {
+				results: [
+					{
+						queryName: 'A',
+						aggregations: [
+							{
+								index: 0,
+								alias: '',
+								meta: {},
+								series: [
+									{
+										labels: [{ key: { name: 'service' }, value: 'a' }],
+										values: [{ timestamp: 1000, value: 12 }],
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+			meta: {},
 		},
-		meta: {},
-	} as unknown as QueryRangeResponseV5;
+	} as unknown as MetricQueryRangeSuccessResponse;
+}
+
+function scalarData(): MetricQueryRangeSuccessResponse {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: [
+					{
+						queryName: 'A',
+						legend: '',
+						series: null,
+						list: null,
+						table: {
+							columns: [
+								{
+									name: 'service.name',
+									id: 'service.name',
+									queryName: 'A',
+									isValueColumn: false,
+								},
+								{ name: 'count()', id: 'A', queryName: 'A', isValueColumn: true },
+							],
+							rows: [{ data: { 'service.name': 'frontend', A: 120 } }],
+						},
+					},
+				],
+			},
+		},
+	} as unknown as MetricQueryRangeSuccessResponse;
 }
 
 describe('useClientExport', () => {
@@ -64,13 +121,9 @@ describe('useClientExport', () => {
 		jest.useRealTimers();
 	});
 
-	it('exports time_series as CSV to a timestamped <fileName>.csv', () => {
+	it('dispatches timeseries data to the timeseries serializer (csv)', () => {
 		const { result } = renderHook(() =>
-			useClientExport({
-				response: timeSeriesResponse(),
-				fileName: 'chart',
-				legendMap: { A: '{{service}}' },
-			}),
+			useClientExport({ data: timeSeriesData(), query, fileName: 'chart' }),
 		);
 
 		act(() => {
@@ -83,12 +136,28 @@ describe('useClientExport', () => {
 		expect(name).toBe(getTimestampedFileName('chart', 'csv'));
 		expect(mime).toContain('text/csv');
 		expect(content).toContain('service');
-		expect(content).toContain('a');
 	});
 
-	it('exports as JSONL to a timestamped <fileName>.jsonl with the ndjson mime', () => {
+	it('dispatches scalar (table) data to the table serializer', () => {
 		const { result } = renderHook(() =>
-			useClientExport({ response: timeSeriesResponse() }),
+			useClientExport({ data: scalarData(), query, fileName: 'table' }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+		const [content, name] = mockDownloadFile.mock.calls[0];
+		expect(name).toBe(getTimestampedFileName('table', 'csv'));
+		expect(content).toContain('service.name');
+		expect(content).toContain('frontend');
+		expect(content).toContain('120');
+	});
+
+	it('exports as JSONL with the ndjson mime', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ data: timeSeriesData(), query }),
 		);
 
 		act(() => {
@@ -101,8 +170,8 @@ describe('useClientExport', () => {
 		expect(content).toContain('"series"');
 	});
 
-	it('does nothing when there is no response', () => {
-		const { result } = renderHook(() => useClientExport({}));
+	it('does nothing when there is no data', () => {
+		const { result } = renderHook(() => useClientExport({ query }));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });
@@ -112,13 +181,14 @@ describe('useClientExport', () => {
 		expect(mockMessageError).not.toHaveBeenCalled();
 	});
 
-	it('shows an error and does not download for unsupported result types', () => {
+	it('shows an error for unsupported result types', () => {
 		const raw = {
-			type: 'raw',
-			data: { results: [] },
-			meta: {},
-		} as unknown as QueryRangeResponseV5;
-		const { result } = renderHook(() => useClientExport({ response: raw }));
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: { data: { result: [], resultType: '' } },
+		} as unknown as MetricQueryRangeSuccessResponse;
+		const { result } = renderHook(() => useClientExport({ data: raw, query }));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });

frontend/src/hooks/useExportData/useClientExport.ts

@@ -4,11 +4,14 @@ import {
 	downloadFile,
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
+import { exportScalarData } from 'lib/exportData/exportScalarData';
 import { exportTimeseriesData } from 'lib/exportData/exportTimeseriesData';
 import { toCsv } from 'lib/exportData/toCsv';
 import { toJsonl } from 'lib/exportData/toJsonl';
 import { ExportFormat, SerializedTable } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 
@@ -20,33 +23,44 @@ const FORMAT_META: Record<ExportFormat, { mime: string; extension: string }> = {
 	},
 };
 
-// Picks the serializer for the response's request type. Narrows the results
-// union via the response discriminant. scalar lands with #5591; raw/trace are
-// server-exported, distribution is never emitted.
+/** The queryRange response object views hold — structural (params left
+ * unconstrained) so both explorer variants assign cleanly. */
+export type ClientExportData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
+};
+
+// Picks the serializer from what the queryRange response carries: timeseries
+// queries surface the raw V5 tree (rawV5Response); table queries carry the
+// formatForWeb webTables payload (resultType 'scalar'). raw/trace stay
+// server-exported via useServerExport.
 function serialize(
-	response: QueryRangeResponseV5,
+	data: ClientExportData,
 	yAxisUnit?: string,
-	legendMap?: Record<string, string>,
 	query?: Query,
 ): SerializedTable {
-	if (response.type === REQUEST_TYPES.TIME_SERIES) {
+	if (data.rawV5Response?.type === REQUEST_TYPES.TIME_SERIES) {
 		return exportTimeseriesData({
-			data: response.data.results as TimeSeriesData[],
+			data: data.rawV5Response.data.results as TimeSeriesData[],
 			yAxisUnit,
-			legendMap,
+			legendMap: data.legendMap,
 			query,
 		});
 	}
 
-	throw new Error(`Export is not supported for "${response.type}" results`);
+	if (data.payload?.data?.resultType === 'scalar' && query) {
+		return exportScalarData({ data, query });
+	}
+
+	throw new Error('Export is not supported for this result type');
 }
 
 interface UseClientExportProps {
-	response?: QueryRangeResponseV5;
+	// currently supports only qb v5 responses. Can extend to support future responses.
+	data?: ClientExportData;
 	query?: Query;
 	yAxisUnit?: string;
 	fileName?: string;
-	legendMap?: Record<string, string>;
 }
 
 interface ClientExportOptions {
@@ -59,23 +73,22 @@ interface UseClientExportReturn {
 }
 
 export function useClientExport({
-	response, // currently supports only qb v5 response. Can extend to support future responses.
+	data,
 	query,
 	yAxisUnit,
 	fileName = 'export',
-	legendMap,
 }: UseClientExportProps): UseClientExportReturn {
 	const [isExporting, setIsExporting] = useState<boolean>(false);
 
 	const handleExport = useCallback(
 		({ format }: ClientExportOptions): void => {
-			if (!response) {
+			if (!data) {
 				return;
 			}
 
 			setIsExporting(true);
 			try {
-				const table = serialize(response, yAxisUnit, legendMap, query);
+				const table = serialize(data, yAxisUnit, query);
 				const content =
 					format === ExportFormat.Jsonl ? toJsonl(table) : toCsv(table);
 				const { mime, extension } = FORMAT_META[format];
@@ -86,7 +99,7 @@ export function useClientExport({
 				setIsExporting(false);
 			}
 		},
-		[response, query, yAxisUnit, fileName, legendMap],
+		[data, query, yAxisUnit, fileName],
 	);
 
 	return { isExporting, handleExport };

frontend/src/lib/dashboard/getQueryResults.ts

@@ -22,7 +22,11 @@ import { SuccessResponseV2, Warning } from 'types/api';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { ExecStats, MetricRangePayloadV5 } from 'types/api/v5/queryRange';
+import {
+	ExecStats,
+	MetricRangePayloadV5,
+	QueryRangeResponseV5,
+} from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -192,6 +196,8 @@ export async function GetMetricQueryRange(
 		| SuccessResponseV2<MetricRangePayloadV5>;
 	let warning: Warning | undefined;
 	let meta: ExecStats | undefined;
+	// Raw V5 response, kept before it's converted to legacy — powers client-side export.
+	let rawV5Response: QueryRangeResponseV5 | undefined;
 
 	const panelType = props.originalGraphType || props.graphType;
 
@@ -268,6 +274,8 @@ export async function GetMetricQueryRange(
 				endTime: props.end * 1000,
 			});
 
+			rawV5Response = publicResponse.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -288,6 +296,8 @@ export async function GetMetricQueryRange(
 				headers,
 			);
 
+			rawV5Response = v5Response.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -366,6 +376,8 @@ export async function GetMetricQueryRange(
 		...response,
 		warning,
 		meta,
+		rawV5Response,
+		legendMap,
 	};
 }
 

frontend/src/lib/exportData/__tests__/exportScalarData.test.ts

@@ -0,0 +1,94 @@
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { exportScalarData } from '../exportScalarData';
+
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [
+					{ key: 'service.name', dataType: 'string', type: 'tag', id: 'svc' },
+				],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function makeResponse(
+	tables: {
+		queryName: string;
+		columns: { name: string; id?: string; isValueColumn: boolean }[];
+		rows: Record<string, string | number>[];
+	}[],
+): SuccessResponse<MetricRangePayloadProps> {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: tables.map((table) => ({
+					queryName: table.queryName,
+					legend: '',
+					series: null,
+					list: null,
+					table: {
+						columns: table.columns.map((col) => ({
+							...col,
+							queryName: table.queryName,
+						})),
+						rows: table.rows.map((row) => ({ data: row })),
+					},
+				})),
+			},
+		},
+	} as unknown as SuccessResponse<MetricRangePayloadProps>;
+}
+
+describe('exportScalarData', () => {
+	it('serializes the table exactly as QueryTable prepares it', () => {
+		const data = makeResponse([
+			{
+				queryName: 'A',
+				columns: [
+					{ name: 'service.name', id: 'service.name', isValueColumn: false },
+					{ name: 'count()', id: 'A', isValueColumn: true },
+				],
+				rows: [
+					{ 'service.name': 'frontend', A: 120 },
+					{ 'service.name': 'cart', A: 80 },
+				],
+			},
+		]);
+
+		const table = exportScalarData({ data, query });
+
+		// group + aggregation columns, raw values, on-screen order — inherited
+		// 1:1 from createTableColumnsFromQuery (the renderer's own preparer)
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()'],
+			rows: [
+				['frontend', 120],
+				['cart', 80],
+			],
+		});
+	});
+
+	it('returns an empty table for an empty response', () => {
+		const table = exportScalarData({
+			data: makeResponse([]),
+			query,
+		});
+
+		expect(table.rows).toStrictEqual([]);
+	});
+});

frontend/src/lib/exportData/__tests__/exportTableData.test.ts

@@ -0,0 +1,58 @@
+import { exportTableData } from '../exportTableData';
+
+const columns = [
+	{ name: 'service.name', key: 'service.name' },
+	{ name: 'count()', key: 'A', isValueColumn: true },
+	{ name: 'avg(duration)', key: 'B', isValueColumn: true },
+];
+
+describe('exportTableData', () => {
+	it('serializes raw values in display column order', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [
+				{ 'service.name': 'frontend', A: 120, B: 45.5 },
+				{ 'service.name': 'cart', A: 80, B: 12 },
+			],
+		});
+
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [
+				['frontend', 120, 45.5],
+				['cart', 80, 12],
+			],
+		});
+	});
+
+	it('appends column units to value columns only, skipping display-only ids', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120, B: 45.5 }],
+			columnUnits: { A: 'short', B: 'ms', 'service.name': 'ms' },
+		});
+
+		// group column never gets a unit; 'short' is display-only and skipped
+		expect(table.headers).toStrictEqual([
+			'service.name',
+			'count()',
+			'avg(duration) (ms)',
+		]);
+	});
+
+	it('marks missing cells as blank gaps', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120 }],
+		});
+
+		expect(table.rows).toStrictEqual([['frontend', 120, '']]);
+	});
+
+	it('returns a headers-only table for empty data', () => {
+		expect(exportTableData({ columns, dataSource: [] })).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [],
+		});
+	});
+});

frontend/src/lib/exportData/__tests__/exportTimeseriesData.test.ts

@@ -81,6 +81,18 @@ describe('exportTimeseriesData', () => {
 		]);
 	});
 
+	it('omits display-only format ids (short/none) from headers', () => {
+		const data = [
+			makeQuery('A', [{ series: [makeSeries({ service: 'a' }, [[1000, 1]])] }]),
+		];
+
+		const short = exportTimeseriesData({ data, yAxisUnit: 'short' });
+		expect(short.headers[short.headers.length - 1]).toBe('value');
+
+		const none = exportTimeseriesData({ data, yAxisUnit: 'none' });
+		expect(none.headers[none.headers.length - 1]).toBe('value');
+	});
+
 	it('multi-query: query is its own column; label keys are unioned', () => {
 		const data = [
 			makeQuery('A', [{ series: [makeSeries({ service: 'x' }, [[1000, 1]])] }]),

frontend/src/lib/exportData/exportScalarData.ts

@@ -0,0 +1,48 @@
+import { createTableColumnsFromQuery } from 'lib/query/createTableColumnsFromQuery';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { exportTableData } from './exportTableData';
+import { SerializedTable } from './types';
+
+interface ExportScalarDataArgs {
+	// The queryRange response object the table mount already holds (the
+	// formatForWeb payload carrying webTables).
+	data?: SuccessResponse<MetricRangePayloadProps>;
+	query: Query;
+}
+
+/**
+ * Serializes a scalar/table queryRange response into a table — via
+ * createTableColumnsFromQuery, the exact preparer QueryTable renders from, so
+ * the export inherits the on-screen merge, naming and column order 1:1.
+ */
+export function exportScalarData({
+	data,
+	query,
+}: ExportScalarDataArgs): SerializedTable {
+	const queryTableData = (data?.payload?.data?.newResult?.data?.result ||
+		data?.payload?.data?.result ||
+		[]) as QueryDataV3[];
+
+	const { columns, dataSource } = createTableColumnsFromQuery({
+		query,
+		queryTableData,
+	});
+
+	return exportTableData({
+		// antd widens title/dataIndex; createTableColumnsFromQuery always sets strings
+		columns: columns.map((column) => {
+			const rawIndex = 'dataIndex' in column ? column.dataIndex : undefined;
+			const key =
+				typeof rawIndex === 'string' || typeof rawIndex === 'number'
+					? String(rawIndex)
+					: '';
+			const name = typeof column.title === 'string' ? column.title : key;
+			return { name, key: key || name };
+		}),
+		dataSource: dataSource as unknown as Record<string, unknown>[],
+	});
+}

frontend/src/lib/exportData/exportTableData.ts

@@ -0,0 +1,46 @@
+import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
+
+/** Generic table-model column — any prepared table (QueryTable, dashboard
+ * tables, plain antd tables) adapts to this in a line or two. */
+export interface ExportTableColumn {
+	/** Display name, used as the export header (column order = array order). */
+	name: string;
+	/** Key into each dataSource record. */
+	key: string;
+	isValueColumn?: boolean;
+}
+
+interface ExportTableDataArgs {
+	columns: ExportTableColumn[];
+	dataSource: Record<string, unknown>[];
+	/** Per-column display unit, keyed by column key (dashboards; absent in explorer). */
+	columnUnits?: Record<string, string>;
+}
+
+/**
+ * Serializes a prepared table model into a format-agnostic table — raw values
+ * in display column order (lossless; no cell formatting applied).
+ */
+export function exportTableData({
+	columns,
+	dataSource,
+	columnUnits,
+}: ExportTableDataArgs): SerializedTable {
+	const headers = columns.map((column) =>
+		column.isValueColumn
+			? withUnit(column.name, columnUnits?.[column.key])
+			: column.name,
+	);
+
+	const rows = dataSource.map((record) =>
+		columns.map((column) => {
+			const value = record[column.key];
+			return value === undefined || value === null
+				? ''
+				: (value as string | number);
+		}),
+	);
+
+	return { headers, rows };
+}

frontend/src/lib/exportData/exportTimeseriesData.ts

@@ -5,6 +5,7 @@ import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
 
 interface ExportTimeseriesDataArgs {
 	data: TimeSeriesData[];
@@ -98,11 +99,6 @@ function flatten(
 	return flat;
 }
 
-// Appends the y-axis unit to the value header: `value` → `value (ms)`.
-function withUnit(header: string, yAxisUnit?: string): string {
-	return yAxisUnit ? `${header} (${yAxisUnit})` : header;
-}
-
 function toIso(timestamp: number): string {
 	return new Date(timestamp).toISOString();
 }

frontend/src/lib/exportData/withUnit.ts

@@ -0,0 +1,11 @@
+// Display-format ids, not physical units — meaningful on a chart axis
+// (compact-number formatting) but misleading in an export header.
+const DISPLAY_ONLY_UNITS = new Set(['short', 'none']);
+
+/** Appends a unit to a header: `value` → `value (ms)`. Skips display-only ids. */
+export function withUnit(header: string, unit?: string): string {
+	if (!unit || DISPLAY_ONLY_UNITS.has(unit)) {
+		return header;
+	}
+	return `${header} (${unit})`;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/useSwitchToViewMode.test.ts

@@ -1,10 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	clearViewPanelHandoff,
-	readViewPanelHandoff,
-} from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useSwitchToViewMode } from '../useSwitchToViewMode';
@@ -23,16 +18,11 @@ jest.mock('hooks/useUrlQuery', () => ({
 }));
 
 const query = { queryType: 'builder' } as unknown as Query;
-const spec = {
-	plugin: { kind: 'signoz/TimeSeriesPanel' },
-	display: { name: 'CPU' },
-} as unknown as DashboardtypesPanelSpecDTO;
 
 describe('useSwitchToViewMode', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockSearch = '';
-		clearViewPanelHandoff();
 	});
 
 	function invoke(): void {
@@ -42,7 +32,6 @@ describe('useSwitchToViewMode', () => {
 				panelId: 'panel-1',
 				panelType: PANEL_TYPES.TIME_SERIES,
 				query,
-				spec,
 			}),
 		);
 		result.current();
@@ -63,21 +52,6 @@ describe('useSwitchToViewMode', () => {
 		).toStrictEqual(query);
 	});
 
-	it('stashes the live draft spec in the sessionStorage handoff, not the URL', () => {
-		invoke();
-
-		expect(readViewPanelHandoff('dash-1', 'panel-1')).toStrictEqual(spec);
-		// The spec must not bloat the URL — the config-only display name never leaks into it.
-		expect(mockSafeNavigate.mock.calls[0][0]).not.toContain('CPU');
-	});
-
-	it('scopes the handoff to the exact dashboard + panel', () => {
-		invoke();
-
-		expect(readViewPanelHandoff('dash-1', 'other-panel')).toBeNull();
-		expect(readViewPanelHandoff('other-dash', 'panel-1')).toBeNull();
-	});
-
 	it('carries dashboard variables through and drops other editor URL state', () => {
 		mockSearch = 'variables=%7B%22a%22%3A1%7D&compositeQuery=stale';
 		invoke();

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSwitchToViewMode.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { generatePath } from 'react-router-dom';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -8,35 +7,27 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { writeViewPanelHandoff } from '../../PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore';
-
 interface UseSwitchToViewModeArgs {
 	dashboardId: string;
 	panelId: string;
 	panelType: PANEL_TYPES;
 	query: Query;
-	/** Live (un-saved) draft spec — the query rides in the URL, the rest via the handoff. */
-	spec: DashboardtypesPanelSpecDTO;
 }
 
 /**
- * Leaves the editor for the dashboard with this panel expanded in the View modal, seeded with
- * the live (un-saved) query + config — V1's "Switch to View Mode". The query rides in the URL
- * (`compositeQuery`); the rest of the spec rides in a tab-scoped sessionStorage handoff.
+ * Callback that leaves the editor for the dashboard with this panel expanded in the
+ * View modal, seeded with the live (un-saved) query — V1's "Switch to View Mode".
  */
 export function useSwitchToViewMode({
 	dashboardId,
 	panelId,
 	panelType,
 	query,
-	spec,
 }: UseSwitchToViewModeArgs): () => void {
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
 
 	return useCallback((): void => {
-		writeViewPanelHandoff({ dashboardId, panelId, spec });
-
 		const params = new URLSearchParams();
 		const variables = urlQuery.get(QueryParams.variables);
 		if (variables) {
@@ -51,5 +42,5 @@ export function useSwitchToViewMode({
 		safeNavigate(
 			`${generatePath(ROUTES.DASHBOARD, { dashboardId })}?${params.toString()}`,
 		);
-	}, [safeNavigate, urlQuery, dashboardId, panelId, panelType, query, spec]);
+	}, [safeNavigate, urlQuery, dashboardId, panelId, panelType, query]);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -38,8 +38,6 @@ import { useTableColumns } from './hooks/useTableColumns';
 import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
 
 import styles from './PanelEditor.module.scss';
-import logEvent from '@/api/common/logEvent';
-import { DashboardEvents } from '../../constants/events';
 
 interface PanelEditorContainerProps {
 	dashboardId: string;
@@ -206,7 +204,6 @@ function PanelEditorContainer({
 		panelId,
 		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
 		query: currentQuery,
-		spec: draft.spec,
 	});
 
 	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
@@ -237,13 +234,6 @@ function PanelEditorContainer({
 		onClose();
 	}, [isNew, panelId, setScrollTargetId, onClose]);
 
-	const switchToViewMode = useCallback((): void => {
-		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
-			panelId: panelId,
-		});
-		onSwitchToView();
-	}, [onSwitchToView]);
-
 	return (
 		<div className={styles.page} data-testid="panel-editor-v2">
 			<Header
@@ -253,7 +243,7 @@ function PanelEditorContainer({
 				readOnly={!isEditable}
 				readOnlyReason={editDisabledReason}
 				onSave={onSave}
-				onSwitchToView={switchToViewMode}
+				onSwitchToView={onSwitchToView}
 				onClose={onCloseEditor}
 			/>
 			<ResizablePanelGroup

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalContent.tsx

@@ -16,8 +16,6 @@ import ViewPanelModalHeader from './ViewPanelModalHeader';
 import { useViewPanelMode } from './useViewPanelMode';
 import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
 import styles from './ViewPanelModal.module.scss';
-import logEvent from 'api/common/logEvent';
-import { DashboardEvents } from 'pages/DashboardPageV2/constants/events';
 
 interface ViewPanelModalContentProps {
 	panel: DashboardtypesPanelDTO;
@@ -99,14 +97,6 @@ function ViewPanelModalContent({
 		return null;
 	}
 
-	const onSwitchToEdit = (): void => {
-		// Carry the drilldown edits so the editor opens on them, not the saved panel.
-		logEvent(DashboardEvents.SWITCH_TO_EDIT_MODE, {
-			panelId: panelId,
-		});
-		openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) });
-	};
-
 	return (
 		<div className={styles.content} data-testid="view-panel-modal-content">
 			<ViewPanelModalHeader
@@ -124,7 +114,10 @@ function ViewPanelModalContent({
 						refreshWindow();
 					}
 				}}
-				onSwitchToEdit={onSwitchToEdit}
+				onSwitchToEdit={(): void =>
+					// Carry the drilldown edits so the editor opens on them, not the saved panel.
+					openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) })
+				}
 				panelKind={draft.spec.plugin.kind}
 				queryType={queryType}
 				signal={signal}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalHeader.tsx

@@ -13,7 +13,6 @@ import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/
 import type { EQueryType } from 'types/common/dashboard';
 
 import styles from './ViewPanelModal.module.scss';
-import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
 
 interface ViewPanelModalHeaderProps {
 	selectedInterval: Time | CustomTimeType;
@@ -65,10 +64,6 @@ function ViewPanelModalHeader({
 	// Same capabilities-guarded options as the editor's PanelTypeSwitcher, so the two
 	// selectors disable the same kinds (e.g. List under PromQL, metrics-only kinds).
 	const panelTypeItems = usePanelTypeSelectItems({ queryType, signal });
-	const canEditDashboard = useDashboardStore((s) => s.canEditDashboard);
-	const isLocked = useDashboardStore((s) => s.isLocked);
-
-	const canSwitchToEdit = canEditDashboard && !isLocked;
 
 	return (
 		<div className={styles.toolbar}>
@@ -80,17 +75,15 @@ function ViewPanelModalHeader({
 					onChange={onChangePanelKind}
 				/>
 			</div>
-			{canSwitchToEdit && (
-				<Button
-					variant="outlined"
-					color="secondary"
-					prefix={<PenLine />}
-					onClick={onSwitchToEdit}
-					data-testid="view-panel-switch-to-edit"
-				>
-					Switch to Edit Mode
-				</Button>
-			)}
+			<Button
+				variant="outlined"
+				color="secondary"
+				prefix={<PenLine />}
+				onClick={onSwitchToEdit}
+				data-testid="view-panel-switch-to-edit"
+			>
+				Switch to Edit Mode
+			</Button>
 			<Button
 				variant="link"
 				color="primary"

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelMode.ts

@@ -23,11 +23,8 @@ import {
 	type PanelQueryTimeOverride,
 	type UsePanelQueryResult,
 } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
 import type { EQueryType } from 'types/common/dashboard';
 
-import { readViewPanelHandoff } from './viewPanelHandoffStore';
-
 interface UseViewPanelModeArgs {
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
@@ -80,33 +77,25 @@ export function useViewPanelMode({
 }: UseViewPanelModeArgs): UseViewPanelModeReturn {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 
-	// Config edits from the editor's "Switch to View Mode" arrive via the handoff; the query
-	// still comes from the URL. Falls back to the saved panel for a plain grid "View".
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const baseSpec = useMemo<DashboardtypesPanelSpecDTO>(
-		() => readViewPanelHandoff(dashboardId, panelId) ?? panel.spec,
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed
-		[],
-	);
-
-	// Mount-only so a refresh re-seeds and in-modal edits survive (V1 parity).
-	const compositeQuery = useGetCompositeQueryParam();
+	// Seed the draft from the URL (`compositeQuery` + `graphType`) when present, else the saved
+	// panel — mount-only, so a refresh re-seeds from the URL and in-modal edits survive (V1 parity).
+	const urlQuery = useGetCompositeQueryParam();
 	const urlGraphType = useUrlQuery().get(
 		QueryParams.graphType,
 	) as PANEL_TYPES | null;
 	const initialPanel = useMemo<DashboardtypesPanelDTO>(
 		() =>
-			compositeQuery
+			urlQuery
 				? {
 						...panel,
 						spec: buildViewPanelSpec({
-							spec: baseSpec,
-							query: compositeQuery,
+							spec: panel.spec,
+							query: urlQuery,
 							panelType:
-								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[baseSpec.plugin.kind],
+								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
 						}),
 					}
-				: { ...panel, spec: baseSpec },
+				: panel,
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
 		[],
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore.ts

@@ -1,43 +0,0 @@
-import getSessionStorage from 'api/browser/sessionstorage/get';
-import removeSessionStorage from 'api/browser/sessionstorage/remove';
-import setSessionStorage from 'api/browser/sessionstorage/set';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { SESSIONSTORAGE } from 'constants/sessionStorage';
-
-interface ViewPanelHandoff {
-	/** Correlator: the read returns the spec only for this exact dashboard + panel. */
-	dashboardId: string;
-	panelId: string;
-	spec: DashboardtypesPanelSpecDTO;
-}
-
-/**
- * Tab-scoped handoff of the editor's un-saved draft spec to the View modal, so "Switch to View
- * Mode" carries config edits — not just the query, which stays in the URL. sessionStorage keeps
- * the link small yet survives a refresh, and clears the edits when the tab closes.
- */
-export function writeViewPanelHandoff(handoff: ViewPanelHandoff): void {
-	setSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF, JSON.stringify(handoff));
-}
-
-export function readViewPanelHandoff(
-	dashboardId: string,
-	panelId: string,
-): DashboardtypesPanelSpecDTO | null {
-	const raw = getSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF);
-	if (!raw) {
-		return null;
-	}
-	try {
-		const handoff = JSON.parse(raw) as ViewPanelHandoff;
-		return handoff.dashboardId === dashboardId && handoff.panelId === panelId
-			? handoff.spec
-			: null;
-	} catch {
-		return null;
-	}
-}
-
-export function clearViewPanelHandoff(): void {
-	removeSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useViewPanel.ts

@@ -6,8 +6,6 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
-
 export interface UseViewPanelApi {
 	/** Panel id currently expanded in the View modal; null when none is open. */
 	expandedPanelId: string | null;
@@ -43,11 +41,10 @@ export function useViewPanel(): UseViewPanelApi {
 			// Copy before mutating: useUrlQuery returns a memoized instance.
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
-			// Drop leftover in-modal query/kind + the editor's handoff so a plain View opens
-			// on the saved panel, not stale state the modal would otherwise hydrate from.
+			// Drop any leftover in-modal query/kind so a plain View opens on the saved
+			// panel, not a stale URL query the modal would otherwise hydrate from.
 			next.delete(QueryParams.compositeQuery);
 			next.delete(QueryParams.graphType);
-			clearViewPanelHandoff();
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
 		[pathname, safeNavigate, urlQuery],
@@ -58,8 +55,6 @@ export function useViewPanel(): UseViewPanelApi {
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
 			next.set(QueryParams.graphType, panelType);
-			// A grid drilldown opens on the saved panel, never a stale editor handoff.
-			clearViewPanelHandoff();
 			// Same encoding the query builder uses (see `useGetCompositeQueryParam`): the URL
 			// value is `encodeURIComponent(JSON.stringify(query))`, decoded once on read.
 			next.set(
@@ -78,7 +73,6 @@ export function useViewPanel(): UseViewPanelApi {
 		// (the in-modal query builder writes compositeQuery, V1 parity).
 		next.delete(QueryParams.compositeQuery);
 		next.delete(QueryParams.graphType);
-		clearViewPanelHandoff();
 		const search = next.toString();
 		safeNavigate(search ? `${pathname}?${search}` : pathname);
 	}, [pathname, safeNavigate, urlQuery]);

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -3,10 +3,7 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
+import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -51,10 +48,9 @@ function DynamicSelector({
 	onChange,
 	onAutoSelect,
 }: DynamicSelectorProps): JSX.Element {
-	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 
 	const existingQuery = useMemo(
 		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
@@ -100,10 +96,8 @@ function DynamicSelector({
 				!!variable.dynamicAttribute &&
 				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
 			refetchOnWindowFocus: false,
-			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
-			cacheTime: isAutoRefreshDisabled
-				? DASHBOARD_CACHE_TIME
-				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
+			cacheTime: DASHBOARD_CACHE_TIME,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -3,10 +3,7 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
+import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -47,10 +44,9 @@ function QuerySelector({
 	onChange,
 	onAutoSelect,
 }: QuerySelectorProps): JSX.Element {
-	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 	const payload = useMemo(() => selectionToPayload(selections), [selections]);
 
 	const {
@@ -84,10 +80,8 @@ function QuerySelector({
 		{
 			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
 			refetchOnWindowFocus: false,
-			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
-			cacheTime: isAutoRefreshDisabled
-				? DASHBOARD_CACHE_TIME
-				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
+			cacheTime: DASHBOARD_CACHE_TIME,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/usePanelQuery.test.tsx

@@ -2,10 +2,6 @@
 import { useSelector } from 'react-redux';
 import { act, renderHook } from '@testing-library/react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
 
 import { usePanelQuery } from '../usePanelQuery';
 import { useGetQueryRangeV5 } from '../useGetQueryRangeV5';
@@ -436,28 +432,4 @@ describe('usePanelQuery', () => {
 			expect(result.current.pagination?.pageIndex).toBe(0);
 		});
 	});
-
-	describe('cacheTime (auto-refresh OOM guard)', () => {
-		const withAutoRefreshDisabled = (disabled: boolean): void => {
-			mockUseSelector.mockImplementation((selector: unknown) =>
-				(selector as (state: { globalTime: unknown }) => unknown)({
-					globalTime: { ...DEFAULT_GLOBAL_TIME, isAutoRefreshDisabled: disabled },
-				}),
-			);
-		};
-
-		it('caches for DASHBOARD_CACHE_TIME when auto-refresh is disabled', () => {
-			withAutoRefreshDisabled(true);
-			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
-			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
-			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME);
-		});
-
-		it('drops cacheTime to 0 when auto-refresh is enabled', () => {
-			withAutoRefreshDisabled(false);
-			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
-			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
-			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED);
-		});
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5.ts

@@ -13,8 +13,6 @@ export interface UseGetQueryRangeV5Args {
 	enabled: boolean;
 	/** Retain prior data across a key change (list paging) so the table + pager stay mounted. */
 	keepPreviousData?: boolean;
-	/** Unused-entry TTL; callers drop to 0 under auto-refresh to bound cache growth (V1 parity). */
-	cacheTime?: number;
 }
 
 /**
@@ -48,7 +46,6 @@ export function useGetQueryRangeV5({
 	queryKey,
 	enabled,
 	keepPreviousData,
-	cacheTime,
 }: UseGetQueryRangeV5Args): UseQueryResult<QueryRangeV5200, Error> {
 	return useQuery<QueryRangeV5200, Error>({
 		queryKey,
@@ -56,6 +53,5 @@ export function useGetQueryRangeV5({
 		enabled,
 		retry: retryUnlessClientError,
 		keepPreviousData,
-		cacheTime,
 	});
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery.ts

@@ -4,10 +4,6 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -114,7 +110,6 @@ export function usePanelQuery({
 		selectedTime: globalSelectedInterval,
 		maxTime,
 		minTime,
-		isAutoRefreshDisabled,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
 	// Resolved variable values for this dashboard, published by useResolvedVariables.
@@ -248,10 +243,6 @@ export function usePanelQuery({
 		enabled: enabled && runnable && !isWaitingOnVariable,
 		// Hold the current page while the next loads (offset re-keys) so the pager doesn't flash.
 		keepPreviousData: isPaginated,
-		// 0 under auto-refresh so time-keyed entries don't accumulate and OOM the tab (V1 parity).
-		cacheTime: isAutoRefreshDisabled
-			? DASHBOARD_CACHE_TIME
-			: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 	});
 
 	const queryClient = useQueryClient();

frontend/src/pages/DashboardPageV2/constants/events.ts

@@ -1,4 +0,0 @@
-export enum DashboardEvents {
-	SWITCH_TO_EDIT_MODE = 'View Panel: Switch to edit mode',
-	SWITCH_TO_VIEW_MODE = 'Edit Panel: Switch to view mode',
-}

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

@@ -10,7 +10,6 @@ import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
@@ -116,9 +115,6 @@ function TimeSeriesViewContainer({
 
 	return (
 		<div className="trace-explorer-time-series-view-container">
-			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}
 				isError={isError}
@@ -126,8 +122,10 @@ function TimeSeriesViewContainer({
 				isLoading={isLoading || isFetching}
 				data={responseData}
 				yAxisUnit={yAxisUnit}
+				onYAxisUnitChange={onUnitChange}
 				dataSource={dataSource}
 				setWarning={setWarning}
+				allowExport
 			/>
 		</div>
 	);

frontend/src/types/api/metrics/getQueryRange.ts

@@ -8,7 +8,11 @@ import {
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
-import { ExecStats, QueryRangeRequestV5 } from '../v5/queryRange';
+import {
+	ExecStats,
+	QueryRangeRequestV5,
+	QueryRangeResponseV5,
+} from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -48,6 +52,9 @@ export interface MetricQueryRangeSuccessResponse extends SuccessResponse<
 > {
 	warning?: Warning;
 	meta?: ExecStats;
+	// Raw V5 response (pre-legacy-conversion) + per-query legend map, for client-side export.
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
 }
 
 export interface MetricRangePayloadV3 {

pkg/apiserver/signozapiserver/spanmapper.go

@@ -98,7 +98,7 @@ func (provider *provider) addSpanMapperRoutes(router *mux.Router) error {
 			Description:         "Returns all mappers belonging to a mapping group.",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            new(spantypes.GettableSpanMappers),
+			Response:            new(spantypes.GettableSpanMapperGroups),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/assets/dashboards/overview.json

@@ -0,0 +1 @@
+{}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/integration.json

@@ -0,0 +1,27 @@
+{
+  "id": "cloudsql",
+  "title": "GCP Cloud SQL",
+  "icon": "file://icon.svg",
+  "overview": "file://overview.md",
+  "supportedSignals": {
+    "metrics": true,
+    "logs": true
+  },
+  "dataCollected": {
+    "metrics": [],
+    "logs": []
+  },
+  "telemetryCollectionStrategy": {
+    "gcp": {}
+  },
+  "assets": {
+    "dashboards": [
+      {
+        "id": "overview",
+        "title": "GCP Cloud SQL Overview",
+        "description": "Overview of GCP Cloud SQL metrics",
+        "definition": "file://assets/dashboards/overview.json"
+      }
+    ]
+  }
+}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/overview.md

@@ -0,0 +1,3 @@
+### Monitor GCP Cloud SQL with SigNoz
+
+Collect key GCP Cloud SQL metrics and view them with an out of the box dashboard.

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql_postgres/integration.json

@@ -1,106 +0,0 @@
-{
-  "id": "cloudsql_postgres",
-  "title": "GCP Cloud SQL for PostgreSQL",
-  "icon": "file://icon.svg",
-  "overview": "file://overview.md",
-  "supportedSignals": {
-    "metrics": true,
-    "logs": true
-  },
-  "dataCollected": {
-    "metrics": [
-      {
-        "name": "cloudsql.googleapis.com/database/up",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/cpu/utilization",
-        "unit": "Percent",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/memory/utilization",
-        "unit": "Percent",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/memory/usage",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/disk/bytes_used",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/num_backends",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/num_backends_by_state",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/transaction_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/deadlock_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/vacuum/oldest_transaction_age",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/insights/aggregate/execution_time",
-        "unit": "Microseconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/insights/perquery/execution_time",
-        "unit": "Microseconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "cloudsql.googleapis.com/database/postgresql/replication/replica_byte_lag",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      }
-    ],
-    "logs": []
-  },
-  "telemetryCollectionStrategy": {
-    "gcp": {}
-  },
-  "assets": {
-    "dashboards": [
-      {
-        "id": "overview",
-        "title": "GCP Cloud SQL for PostgreSQL Overview",
-        "description": "Overview of GCP Cloud SQL for PostgreSQL metrics",
-        "definition": "file://assets/dashboards/overview.json"
-      }
-    ]
-  }
-}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql_postgres/overview.md

@@ -1,3 +0,0 @@
-### Monitor GCP Cloud SQL for PostgreSQL with SigNoz
-
-Collect key GCP Cloud SQL for PostgreSQL metrics and view them with an out of the box dashboard.

pkg/types/cloudintegrationtypes/serviceid.go

@@ -41,7 +41,7 @@ var (
 	AzureServiceRedis                      = ServiceID{valuer.NewString("redis")}
 
 	// GCP services.
-	GCPServiceCloudSQLPostgres = ServiceID{valuer.NewString("cloudsql_postgres")}
+	GCPServiceCloudSQL = ServiceID{valuer.NewString("cloudsql")}
 )
 
 func (ServiceID) Enum() []any {
@@ -73,7 +73,7 @@ func (ServiceID) Enum() []any {
 		AzureServiceCosmosDB,
 		AzureServiceCassandraDB,
 		AzureServiceRedis,
-		GCPServiceCloudSQLPostgres,
+		GCPServiceCloudSQL,
 	}
 }
 
@@ -111,7 +111,7 @@ var SupportedServices = map[CloudProviderType][]ServiceID{
 		AzureServiceRedis,
 	},
 	CloudProviderTypeGCP: {
-		GCPServiceCloudSQLPostgres,
+		GCPServiceCloudSQL,
 	},
 }
 

pkg/types/ruletypes/api_params.go

@@ -338,7 +338,6 @@ func isValidLabelValue(v string) bool {
 // validate runs during UnmarshalJSON (read + write path).
 // Preserves the original pre-existing checks only so that stored rules
 // continue to load without errors.
-// TODO(srikanthccv): remove this once v1 is deprecated and removed.
 func (r *PostableRule) validate() error {
 	var errs []error
 
@@ -367,13 +366,9 @@ func (r *PostableRule) validate() error {
 
 	errs = append(errs, testTemplateParsing(r)...)
 
-	if len(errs) > 0 {
-		messages := make([]string, len(errs))
-		for i, e := range errs {
-			messages[i] = e.Error()
-		}
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "alert rule definition is not valid").
-			WithAdditional(messages...)
+	joined := errors.Join(errs...)
+	if joined != nil {
+		return errors.WrapInvalidInputf(joined, errors.CodeInvalidInput, "validation failed")
 	}
 	return nil
 }
@@ -471,13 +466,9 @@ func (r *PostableRule) Validate() error {
 
 	errs = append(errs, testTemplateParsing(r)...)
 
-	if len(errs) > 0 {
-		messages := make([]string, len(errs))
-		for i, e := range errs {
-			messages[i] = e.Error()
-		}
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "alert rule is not valid").
-			WithAdditional(messages...)
+	joined := errors.Join(errs...)
+	if joined != nil {
+		return errors.WrapInvalidInputf(joined, errors.CodeInvalidInput, "validation failed")
 	}
 	return nil
 }

pkg/types/ruletypes/validate_test.go

@@ -4,23 +4,8 @@ import (
 	"encoding/json"
 	"strings"
 	"testing"
-
-	"github.com/SigNoz/signoz/pkg/errors"
 )
 
-func errorContains(err error, substr string) bool {
-	j := errors.AsJSON(err)
-	if strings.Contains(j.Message, substr) {
-		return true
-	}
-	for _, e := range j.Errors {
-		if strings.Contains(e.Message, substr) {
-			return true
-		}
-	}
-	return false
-}
-
 // validV1Builder returns a minimal valid v1 builder rule JSON.
 func validV1Builder() string {
 	return `{
@@ -509,7 +494,7 @@ func TestValidate_PostableRule_Common(t *testing.T) {
 			if tt.wantErr {
 				if err == nil {
 					t.Errorf("expected error containing %q, got nil", tt.errSubstr)
-				} else if tt.errSubstr != "" && !errorContains(err, tt.errSubstr) {
+				} else if tt.errSubstr != "" && !strings.Contains(err.Error(), tt.errSubstr) {
 					t.Errorf("expected error containing %q, got: %v", tt.errSubstr, err)
 				}
 			} else {
@@ -702,7 +687,7 @@ func TestValidate_V1_ConditionFields(t *testing.T) {
 			if tt.wantErr {
 				if validateErr == nil {
 					t.Errorf("expected Validate() error containing %q, got nil", tt.errSubstr)
-				} else if tt.errSubstr != "" && !errorContains(validateErr, tt.errSubstr) {
+				} else if tt.errSubstr != "" && !strings.Contains(validateErr.Error(), tt.errSubstr) {
 					t.Errorf("expected error containing %q, got: %v", tt.errSubstr, validateErr)
 				}
 			} else {
@@ -1044,7 +1029,7 @@ func TestValidate_V2Alpha1(t *testing.T) {
 			if tt.wantErr {
 				if err == nil {
 					t.Errorf("expected error containing %q, got nil", tt.errSubstr)
-				} else if tt.errSubstr != "" && !errorContains(err, tt.errSubstr) {
+				} else if tt.errSubstr != "" && !strings.Contains(err.Error(), tt.errSubstr) {
 					t.Errorf("expected error containing %q, got: %v", tt.errSubstr, err)
 				}
 			} else {
@@ -1352,7 +1337,7 @@ func TestValidate_MultipleErrors(t *testing.T) {
 			t.Fatal("expected unmarshal error for wrong version")
 		}
 		// The error should mention version
-		if !errorContains(err, "version") {
+		if !strings.Contains(err.Error(), "version") {
 			t.Errorf("expected error to mention version, got: %v", err)
 		}
 	})
@@ -1370,9 +1355,10 @@ func TestValidate_MultipleErrors(t *testing.T) {
 		if validateErr == nil {
 			t.Fatal("expected Validate() error")
 		}
+		errStr := validateErr.Error()
 		// Should contain errors for thresholds, evaluation, notificationSettings
 		for _, substr := range []string{"evaluation", "notificationSettings"} {
-			if !errorContains(validateErr, substr) {
+			if !strings.Contains(errStr, substr) {
 				t.Errorf("expected error to mention %q, got: %v", substr, validateErr)
 			}
 		}
@@ -1483,7 +1469,7 @@ func TestValidate_V2Alpha1_CumulativeEvaluation(t *testing.T) {
 			if tt.wantErr {
 				if err == nil {
 					t.Errorf("expected error containing %q, got nil", tt.errSubstr)
-				} else if !errorContains(err, tt.errSubstr) {
+				} else if !strings.Contains(err.Error(), tt.errSubstr) {
 					t.Errorf("expected error containing %q, got: %v", tt.errSubstr, err)
 				}
 			} else if err != nil {

pkg/types/spantypes/mapper.go

@@ -54,7 +54,7 @@ type SpanMapper struct {
 	types.UserAuditable
 
 	ID           valuer.UUID      `json:"id"            required:"true"`
-	GroupID      valuer.UUID      `json:"groupId"       required:"true"`
+	GroupID      valuer.UUID      `json:"group_id"      required:"true"`
 	Name         string           `json:"name"          required:"true"`
 	FieldContext FieldContext     `json:"fieldContext"  required:"true"`
 	Config       SpanMapperConfig `json:"config"        required:"true"`
@@ -63,7 +63,7 @@ type SpanMapper struct {
 
 type PostableSpanMapper struct {
 	Name         string           `json:"name"          required:"true"`
-	FieldContext FieldContext     `json:"fieldContext"  required:"true"`
+	FieldContext FieldContext     `json:"fieldContext" required:"true"`
 	Config       SpanMapperConfig `json:"config"        required:"true"`
 	Enabled      bool             `json:"enabled"`
 }