feat: reorder options

* fix: back button issue

* chore: add unit test

* fix : test cases

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

.github/CODEOWNERS

@@ -118,6 +118,9 @@ go.mod @therealpandey
 
 /tests/integration/ @therealpandey
 
+# e2e tests
+/tests/e2e/ @AshwinBhatkal
+
 # Flagger Owners
 
 /pkg/flagger/ @therealpandey
@@ -162,3 +165,7 @@ go.mod @therealpandey
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
+
+## Dashboard V2
+/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend

frontend/plugins/rules/no-antd-components.mjs

@@ -18,6 +18,7 @@ const BANNED_COMPONENTS = {
 		'Use @signozhq/ui/typography Typography instead of antd Typography.',
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
+	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 };
 
 export default {

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -51,13 +51,6 @@
 				background: var(--l1-background);
 			}
 
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -9,13 +9,13 @@ import {
 	Flex,
 	Input,
 	InputRef,
-	Progress,
 	Space,
 	Spin,
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
 } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -59,7 +59,7 @@ function ProgressRender(item: string | number): JSX.Element {
 			<Progress
 				percent={percent}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const cpuPercent = percent;
 					if (cpuPercent >= 90) {

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -45,6 +45,10 @@
 	.contributors-row {
 		height: 80px;
 	}
+	.top-contributors-progress {
+		--progress-background: transparent;
+	}
+
 	&__content {
 		.ant-table {
 			&-cell {

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Table, TableColumnsType as ColumnsType } from 'antd';
+import { Table, TableColumnsType as ColumnsType } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -51,8 +52,8 @@ function TopContributorsRows({
 					<Progress
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
-						trailColor="rgba(255, 255, 255, 0)"
 						strokeColor={Color.BG_ROBIN_500}
+						className="top-contributors-progress"
 					/>
 				</ConditionalAlertPopover>
 			),

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

@@ -141,12 +141,9 @@
 
 			.progress-container {
 				width: 158px;
-				.ant-progress {
-					margin: 0;
 
-					.ant-progress-text {
-						font-weight: 600;
-					}
+				span {
+					font-weight: 600;
 				}
 			}
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -136,12 +137,11 @@ function DomainMetrics({
 							<Tooltip title={formattedDomainMetricsData.errorRate}>
 								{formattedDomainMetricsData.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(
 											Number(formattedDomainMetricsData.errorRate).toFixed(2),
 										)}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(formattedDomainMetricsData.errorRate).toFixed(2),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getDisplayValue,
@@ -80,10 +81,9 @@ function EndPointMetrics({
 							<Tooltip title={metricsData?.errorRate}>
 								{metricsData?.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(metricsData?.errorRate ?? 0).toFixed(2),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -257,10 +258,9 @@ export const columnsConfig: ColumnType<APIDomainsRowData>[] = [
 				errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate;
 			return (
 				<Progress
-					status="active"
 					percent={Number((errorRateValue as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorRatePercent = Number((errorRateValue as number).toFixed(2));
 						if (errorRatePercent >= 90) {
@@ -1022,14 +1022,13 @@ export const getEndPointsColumnsConfig = (
 		className: `column`,
 		render: (errorRate: number | string): React.ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(1),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number((errorRate as number).toFixed(1));
 					if (errorRatePercent >= 90) {
@@ -2514,10 +2513,9 @@ export const dependentServicesColumns: ColumnType<DependentServicesData>[] = [
 		render: (errorPercentage: number | string): React.ReactNode =>
 			errorPercentage !== '-' ? (
 				<Progress
-					status="active"
 					percent={Number((errorPercentage as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorPercentagePercent = Number(
 							(errorPercentage as number).toFixed(2),
@@ -3022,14 +3020,13 @@ export const getAllEndpointsWidgetData = (
 		),
 		F1: (errorRate: any): ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(2),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number(
 						(

frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss

@@ -39,7 +39,5 @@
 
 	width: 100% !important;
 
-	.ant-progress-steps-outer {
-		width: 100% !important;
-	}
+	--progress-width: 100%;
 }

frontend/src/container/Home/StepsProgress/StepsProgress.tsx

@@ -1,4 +1,4 @@
-import { Progress } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 
 import { ChecklistItem } from '../HomeChecklist/HomeChecklist';
 
@@ -15,9 +15,7 @@ function StepsProgress({
 
 	const totalChecklistItems = checklistItems.length;
 
-	const progress = Math.round(
-		(completedChecklistItems.length / totalChecklistItems) * 100,
-	);
+	const progress = (completedChecklistItems.length / totalChecklistItems) * 100;
 
 	return (
 		<div className="steps-progress-container">

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Tag } from 'antd';
+import { Tag } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getHostLists,
@@ -79,8 +80,8 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				size="small"
 				strokeColor={getProgressColor(Number(value))}
+				showInfo
 			/>
 		),
 	},
@@ -90,8 +91,8 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				size="small"
 				strokeColor={getMemoryProgressColor(Number(value))}
+				showInfo
 			/>
 		),
 	},

frontend/src/container/InfraMonitoringHosts/table.module.scss

@@ -60,11 +60,6 @@
 	& > div {
 		width: 100%;
 	}
-
-	:global(.ant-progress-bg) {
-		height: 8px !important;
-		border-radius: 4px;
-	}
 }
 
 .progressBar {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -103,12 +103,8 @@
 			.progress-container {
 				width: 158px;
 
-				.ant-progress {
-					margin: 0;
-
-					.ant-progress-text {
-						font-weight: 600;
-					}
+				span {
+					font-weight: 600;
 				}
 			}
 
@@ -292,10 +288,6 @@
 			}
 
 			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
 			}
 
 			.ant-table-tbody > tr:hover > td {

frontend/src/container/InfraMonitoringK8s/components/EntityProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import TanStackTable from 'components/TanStackTableView';
 import {
 	getMemoryProgressColor,
@@ -53,7 +53,6 @@ export function EntityProgressBar({
 			<Progress
 				percent={percentage}
 				strokeLinecap="butt"
-				size="small"
 				status="normal"
 				strokeColor={getStrokeColor(type, value)}
 				className={styles.progressBar}

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

@@ -142,13 +142,6 @@
 				}
 			}
 
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -87,12 +87,7 @@
 
 					.service-progress-indicator {
 						width: fit-content;
-						margin-inline-end: 0px !important;
-						margin-bottom: 0px !important;
-
-						.ant-progress-inner {
-							width: 30px;
-						}
+						--progress-width: 30px;
 					}
 
 					.percent-value {

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
 import Spinner from 'components/Spinner';

frontend/src/lib/history.ts

@@ -1,4 +1,15 @@
 import { createBrowserHistory } from 'history';
 import { getBasePath } from 'utils/basePath';
 
-export default createBrowserHistory({ basename: getBasePath() });
+const history = createBrowserHistory({ basename: getBasePath() });
+
+let inAppPushCount = 0;
+history.listen((_, action) => {
+	if (action === 'PUSH') {
+		inAppPushCount += 1;
+	}
+});
+
+export const hasInAppHistory = (): boolean => inAppPushCount > 0;
+
+export default history;

frontend/src/pages/DashboardPageV2/index.tsx

@@ -0,0 +1,8 @@
+function DashboardPageV2(): JSX.Element {
+	return (
+		<div>
+			<h1>Dashboard Page V2</h1>
+		</div>
+	);
+}
+export default DashboardPageV2;

frontend/src/pages/DashboardsListPageV2/index.tsx

@@ -0,0 +1,9 @@
+function DashboardsListPageV2(): JSX.Element {
+	return (
+		<div>
+			<h1>Dashboards List Page V2</h1>
+		</div>
+	);
+}
+
+export default DashboardsListPageV2;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/DockModeSwitcher.tsx

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { Dock, PanelBottom, PanelRight } from '@signozhq/icons';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	TooltipContent,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+
+import { SpanDetailVariant } from './constants';
+
+interface DockOption {
+	value: SpanDetailVariant;
+	icon: ReactNode;
+	tooltip: string;
+}
+
+const DOCK_OPTIONS: DockOption[] = [
+	{
+		value: SpanDetailVariant.DIALOG,
+		icon: <Dock size={14} />,
+		tooltip: 'Open as floating panel',
+	},
+	{
+		value: SpanDetailVariant.DOCKED,
+		icon: <PanelBottom size={14} />,
+		tooltip: 'Dock at the bottom',
+	},
+	{
+		value: SpanDetailVariant.DOCKED_RIGHT,
+		icon: <PanelRight size={14} />,
+		tooltip: 'Dock on the right',
+	},
+];
+
+interface DockModeSwitcherProps {
+	value: SpanDetailVariant;
+	onChange: (value: SpanDetailVariant) => void;
+	tooltipClassName?: string;
+}
+
+// Icon-segmented control for picking the Span Details panel dock mode.
+// The inner <span> wrap is load-bearing: TooltipTrigger asChild clones its
+// child and merges its own data-state, which would otherwise clobber
+// ToggleGroupItem's data-state="on"/"off" active styling.
+function DockModeSwitcher({
+	value,
+	onChange,
+	tooltipClassName,
+}: DockModeSwitcherProps): JSX.Element {
+	return (
+		<TooltipProvider>
+			<ToggleGroup
+				type="single"
+				value={value}
+				onChange={(v): void => {
+					if (v) {
+						onChange(v as SpanDetailVariant);
+					}
+				}}
+				size="sm"
+			>
+				{DOCK_OPTIONS.map((option) => (
+					<TooltipRoot key={option.value}>
+						<TooltipTrigger asChild>
+							<span>
+								<ToggleGroupItem value={option.value}>{option.icon}</ToggleGroupItem>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent className={tooltipClassName}>
+							{option.tooltip}
+						</TooltipContent>
+					</TooltipRoot>
+				))}
+			</ToggleGroup>
+		</TooltipProvider>
+	);
+}
+
+export default DockModeSwitcher;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,25 +1,16 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
 import {
 	Bookmark,
 	CalendarClock,
 	ChartColumnBig,
-	Dock,
 	Link2,
 	List,
-	PanelBottom,
 	ScrollText,
 	Timer,
 } from '@signozhq/icons';
@@ -61,6 +52,7 @@ import {
 	SpanDetailVariant,
 	VISIBLE_ACTIONS,
 } from './constants';
+import DockModeSwitcher from './DockModeSwitcher';
 import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
 import { useTracePinnedFields } from './hooks/useTracePinnedFields';
 import {
@@ -492,31 +484,14 @@ function SpanDetailsPanel({
 		];
 
 		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
 			actions.push({
-				key: 'dock-toggle',
+				key: 'dock-mode',
 				component: (
-					<TooltipProvider>
-						<TooltipRoot>
-							<TooltipTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									color="secondary"
-									onClick={(): void =>
-										onVariantChange(
-											isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-										)
-									}
-								>
-									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-								</Button>
-							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
-								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
-							</TooltipContent>
-						</TooltipRoot>
-					</TooltipProvider>
+					<DockModeSwitcher
+						value={variant}
+						onChange={onVariantChange}
+						tooltipClassName={styles.dockToggleTooltip}
+					/>
 				),
 			});
 		}
@@ -553,7 +528,10 @@ function SpanDetailsPanel({
 		</>
 	);
 
-	if (variant === SpanDetailVariant.DOCKED) {
+	if (
+		variant === SpanDetailVariant.DOCKED ||
+		variant === SpanDetailVariant.DOCKED_RIGHT
+	) {
 		return <div className={styles.root}>{content}</div>;
 	}
 

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/constants.ts

@@ -22,6 +22,7 @@ export enum SpanDetailVariant {
 	DRAWER = 'drawer',
 	DIALOG = 'dialog',
 	DOCKED = 'docked',
+	DOCKED_RIGHT = 'right',
 }
 
 export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -16,7 +16,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';
-import history from 'lib/history';
+import history, { hasInAppHistory } from 'lib/history';
 import {
 	ArrowLeft,
 	CalendarClock,
@@ -96,13 +96,7 @@ function TraceDetailsHeader({
 	}, [traceID]);
 
 	const handlePreviousBtnClick = useCallback((): void => {
-		const isSpaNavigate =
-			document.referrer &&
-			// oxlint-disable-next-line signoz/no-raw-absolute-path
-			new URL(document.referrer).origin === window.location.origin;
-		const hasBackHistory = window.history.length > 1;
-
-		if (isSpaNavigate && hasBackHistory) {
+		if (hasInAppHistory()) {
 			history.goBack();
 		} else {
 			history.push(ROUTES.TRACES_EXPLORER);
@@ -130,6 +124,7 @@ function TraceDetailsHeader({
 							size="md"
 							className={styles.backBtn}
 							onClick={handlePreviousBtnClick}
+							aria-label="Back"
 						>
 							<ArrowLeft size={14} />
 						</Button>

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { render } from 'tests/test-utils';
+
+import TraceDetailsHeader from '../TraceDetailsHeader';
+
+const mockGoBack = jest.fn();
+const mockPush = jest.fn();
+const mockHasInAppHistory = jest.fn();
+
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		goBack: (): void => mockGoBack(),
+		push: (path: string): void => mockPush(path),
+		replace: jest.fn(),
+		location: { pathname: '/', search: '' },
+		listen: (): (() => void) => (): void => undefined,
+	},
+	hasInAppHistory: (): boolean => mockHasInAppHistory(),
+}));
+
+const baseProps = {
+	filterMetadata: {
+		startTime: 0,
+		endTime: 1,
+		traceId: 'trace-123',
+	},
+	onFilteredSpansChange: jest.fn(),
+	isDataLoaded: false,
+};
+
+describe('TraceDetailsHeader – back button', () => {
+	beforeEach(() => {
+		mockGoBack.mockClear();
+		mockPush.mockClear();
+		mockHasInAppHistory.mockReset();
+	});
+
+	it('calls history.goBack() when there is in-app SPA history', () => {
+		mockHasInAppHistory.mockReturnValue(true);
+		render(<TraceDetailsHeader {...baseProps} />);
+
+		fireEvent.click(screen.getByRole('button', { name: /back/i }));
+
+		expect(mockGoBack).toHaveBeenCalledTimes(1);
+		expect(mockPush).not.toHaveBeenCalled();
+	});
+
+	it('pushes to the traces explorer route when there is no in-app SPA history', () => {
+		mockHasInAppHistory.mockReturnValue(false);
+		render(<TraceDetailsHeader {...baseProps} />);
+
+		fireEvent.click(screen.getByRole('button', { name: /back/i }));
+
+		expect(mockPush).toHaveBeenCalledTimes(1);
+		expect(mockPush).toHaveBeenCalledWith(ROUTES.TRACES_EXPLORER);
+		expect(mockGoBack).not.toHaveBeenCalled();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -4,13 +4,28 @@
 	flex-direction: column;
 }
 
+.layoutRow {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	min-width: 0;
 	overflow: hidden;
 }
 
+.rightDock {
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid var(--l2-border);
+	min-width: 0;
+}
+
 // Shared Ant Collapse chrome reset for both the flamegraph and waterfall
 // collapse panels.
 .flameCollapse,

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -242,9 +242,13 @@ function TraceDetailsV3(): JSX.Element {
 		() =>
 			(getLocalStorageKey(
 				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DIALOG,
+			) as SpanDetailVariant) || SpanDetailVariant.DOCKED_RIGHT,
 	);
 
+	const RIGHT_DOCK_MIN = 480;
+	const RIGHT_DOCK_MAX = 720;
+	const [rightDockWidth, setRightDockWidth] = useState(RIGHT_DOCK_MIN);
+
 	const handleVariantChange = useCallback(
 		(newVariant: SpanDetailVariant): void => {
 			setLocalStorageKey(
@@ -291,7 +295,9 @@ function TraceDetailsV3(): JSX.Element {
 		(!!errorFetchingTraceData || !traceData?.payload?.spans?.length);
 
 	const isDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
+	const isRightDocked = spanDetailVariant === SpanDetailVariant.DOCKED_RIGHT;
 	const isWaterfallDocked = panelState.isOpen && isDocked;
+	const showRightDock = panelState.isOpen && isRightDocked;
 
 	const waterfallChildren = (
 		<ResizableBox
@@ -332,94 +338,119 @@ function TraceDetailsV3(): JSX.Element {
 					<NoData />
 				) : (
 					<>
-						<div className={styles.content}>
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'flame')}
-								onChange={(): void => handleCollapseChange('flame')}
-								size="small"
-								className={styles.flameCollapse}
-								items={[
-									{
-										key: 'flame',
-										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
-													Flame Graph
-													{traceData?.payload?.totalSpansCount &&
-														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
-															<WarningPopover
-																message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
-																placement="bottomLeft"
-															/>
-														)}
-												</span>
-												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
-															<ChartNoAxesGantt size={13} />
-															Spans: {traceData.payload.totalSpansCount}
-														</span>
-														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
-														>
-															<TriangleAlert size={13} />
-															Errors: {traceData.payload.totalErrorSpansCount ?? 0}
-														</span>
+						<div className={styles.layoutRow}>
+							<div className={styles.content}>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'flame')}
+									onChange={(): void => handleCollapseChange('flame')}
+									size="small"
+									className={styles.flameCollapse}
+									items={[
+										{
+											key: 'flame',
+											label: (
+												<div className={styles.collapseLabel}>
+													<span className={styles.collapseTitle}>
+														Flame Graph
+														{traceData?.payload?.totalSpansCount &&
+															traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
+																<WarningPopover
+																	message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
+																	placement="bottomLeft"
+																/>
+															)}
 													</span>
-												) : null}
-											</div>
-										),
-										children: (
-											<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
-												<TraceFlamegraph
-													filteredSpanIds={filteredSpanIds}
-													isFilterActive={isFilterActive}
-													selectedSpan={selectedSpan}
-													totalSpansCount={totalSpansCount}
-												/>
-											</ResizableBox>
-										),
-									},
-								]}
-							/>
+													{traceData?.payload?.totalSpansCount ? (
+														<span className={styles.collapseCount}>
+															<span className={styles.collapseCountItem}>
+																<ChartNoAxesGantt size={13} />
+																Spans: {traceData.payload.totalSpansCount}
+															</span>
+															<span
+																className={cx(styles.collapseCountItem, {
+																	[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
+																})}
+															>
+																<TriangleAlert size={13} />
+																Errors: {traceData.payload.totalErrorSpansCount ?? 0}
+															</span>
+														</span>
+													) : null}
+												</div>
+											),
+											children: (
+												<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
+													<TraceFlamegraph
+														filteredSpanIds={filteredSpanIds}
+														isFilterActive={isFilterActive}
+														selectedSpan={selectedSpan}
+														totalSpansCount={totalSpansCount}
+													/>
+												</ResizableBox>
+											),
+										},
+									]}
+								/>
 
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'waterfall')}
-								onChange={(): void => handleCollapseChange('waterfall')}
-								size="small"
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
-								items={[
-									{
-										key: 'waterfall',
-										label: 'Waterfall',
-										children: activeKeys.includes('waterfall') ? waterfallChildren : null,
-									},
-								]}
-							/>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'waterfall')}
+									onChange={(): void => handleCollapseChange('waterfall')}
+									size="small"
+									className={cx(styles.waterfallCollapse, {
+										[styles.isDocked]: isWaterfallDocked,
+									})}
+									items={[
+										{
+											key: 'waterfall',
+											label: 'Waterfall',
+											children: activeKeys.includes('waterfall')
+												? waterfallChildren
+												: null,
+										},
+									]}
+								/>
 
-							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
+								{panelState.isOpen && isDocked && (
+									<div className={styles.dockedSpanDetails}>
+										<SpanDetailsPanel
+											panelState={panelState}
+											selectedSpan={selectedSpan}
+											variant={SpanDetailVariant.DOCKED}
+											onVariantChange={handleVariantChange}
+											traceStartTime={traceData?.payload?.startTimestampMillis}
+											traceEndTime={traceData?.payload?.endTimestampMillis}
+										/>
+									</div>
+								)}
+							</div>
+
+							{showRightDock && (
+								<ResizableBox
+									direction="horizontal"
+									handlePosition="start"
+									defaultWidth={rightDockWidth}
+									minWidth={RIGHT_DOCK_MIN}
+									maxWidth={RIGHT_DOCK_MAX}
+									onResize={setRightDockWidth}
+									className={styles.rightDock}
+								>
 									<SpanDetailsPanel
 										panelState={panelState}
 										selectedSpan={selectedSpan}
-										variant={SpanDetailVariant.DOCKED}
+										variant={SpanDetailVariant.DOCKED_RIGHT}
 										onVariantChange={handleVariantChange}
 										traceStartTime={traceData?.payload?.startTimestampMillis}
 										traceEndTime={traceData?.payload?.endTimestampMillis}
 									/>
-								</div>
+								</ResizableBox>
 							)}
 						</div>
 
-						{panelState.isOpen && !isDocked && (
+						{panelState.isOpen && spanDetailVariant === SpanDetailVariant.DIALOG && (
 							<SpanDetailsPanel
 								panelState={panelState}
 								selectedSpan={selectedSpan}

frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss

@@ -24,7 +24,6 @@
 		}
 
 		&--vertical {
-			bottom: 0;
 			left: 0;
 			right: 0;
 			height: 1px;
@@ -32,11 +31,26 @@
 		}
 
 		&--horizontal {
-			right: 0;
 			top: 0;
 			bottom: 0;
 			width: 1px;
 			cursor: col-resize;
 		}
+
+		&--vertical-end {
+			bottom: 0;
+		}
+
+		&--vertical-start {
+			top: 0;
+		}
+
+		&--horizontal-end {
+			right: 0;
+		}
+
+		&--horizontal-start {
+			left: 0;
+		}
 	}
 }

frontend/src/periscope/components/ResizableBox/ResizableBox.tsx

@@ -5,6 +5,10 @@ import './ResizableBox.styles.scss';
 export interface ResizableBoxProps {
 	children: React.ReactNode;
 	direction?: 'vertical' | 'horizontal';
+	// Which edge the resize handle sits on. 'end' = bottom (vertical) or right
+	// (horizontal); 'start' = top or left. Dragging the start handle towards the
+	// content shrinks it; away grows it.
+	handlePosition?: 'start' | 'end';
 	defaultHeight?: number;
 	minHeight?: number;
 	maxHeight?: number;
@@ -19,6 +23,7 @@ export interface ResizableBoxProps {
 function ResizableBox({
 	children,
 	direction = 'vertical',
+	handlePosition = 'end',
 	defaultHeight = 200,
 	minHeight = 50,
 	maxHeight = Infinity,
@@ -30,6 +35,7 @@ function ResizableBox({
 	className,
 }: ResizableBoxProps): JSX.Element {
 	const isHorizontal = direction === 'horizontal';
+	const isStartHandle = handlePosition === 'start';
 	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
 	const containerRef = useRef<HTMLDivElement>(null);
 
@@ -40,10 +46,13 @@ function ResizableBox({
 			const startSize = size;
 			const min = isHorizontal ? minWidth : minHeight;
 			const max = isHorizontal ? maxWidth : maxHeight;
+			// Start-edge handle: pointer moving away from content (negative delta)
+			// grows the box, so invert the sign.
+			const deltaSign = isStartHandle ? -1 : 1;
 
 			const onMouseMove = (moveEvent: MouseEvent): void => {
 				const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-				const delta = currentPos - startPos;
+				const delta = (currentPos - startPos) * deltaSign;
 				const newSize = Math.min(max, Math.max(min, startSize + delta));
 				setSize(newSize);
 				onResize?.(newSize);
@@ -61,7 +70,16 @@ function ResizableBox({
 			document.addEventListener('mousemove', onMouseMove);
 			document.addEventListener('mouseup', onMouseUp);
 		},
-		[size, isHorizontal, minWidth, maxWidth, minHeight, maxHeight, onResize],
+		[
+			size,
+			isHorizontal,
+			isStartHandle,
+			minWidth,
+			maxWidth,
+			minHeight,
+			maxHeight,
+			onResize,
+		],
 	);
 
 	const containerStyle = disabled
@@ -69,7 +87,11 @@ function ResizableBox({
 		: isHorizontal
 			? { width: size }
 			: { height: size };
-	const handleClass = `resizable-box__handle resizable-box__handle--${direction}`;
+	const handleClass = [
+		'resizable-box__handle',
+		`resizable-box__handle--${direction}`,
+		`resizable-box__handle--${direction}-${handlePosition}`,
+	].join(' ');
 
 	return (
 		<div

pkg/modules/logspipeline/impllogspipeline/module.go

@@ -0,0 +1,50 @@
+package impllogspipeline
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+const elementType = "log_pipelines"
+
+type module struct {
+	sqlStore sqlstore.SQLStore
+}
+
+func NewModule(sqlStore sqlstore.SQLStore) logspipeline.Module {
+	return &module{sqlStore: sqlStore}
+}
+
+func (m *module) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
+	subq := m.sqlStore.BunDB().NewSelect().
+		TableExpr("agent_config_version").
+		ColumnExpr("MAX(version)").
+		Where("org_id = ?", orgID).
+		Where("element_type = ?", elementType)
+
+	var result struct {
+		Total   int `bun:"total"`
+		Enabled int `bun:"enabled_count"`
+	}
+	err := m.sqlStore.BunDB().NewSelect().
+		TableExpr("agent_config_element AS e").
+		Join("JOIN agent_config_version AS v ON v.id = e.version_id").
+		Join("JOIN pipelines AS p ON p.id = e.element_id").
+		Where("v.org_id = ?", orgID).
+		Where("v.element_type = ?", elementType).
+		Where("v.version = (?)", subq).
+		ColumnExpr("COUNT(*) AS total").
+		ColumnExpr("SUM(CASE WHEN p.enabled THEN 1 ELSE 0 END) AS enabled_count").
+		Scan(ctx, &result)
+	if err != nil {
+		return nil, err
+	}
+
+	return map[string]any{
+		"logs_pipeline.total.count":   result.Total,
+		"logs_pipeline.enabled.count": result.Enabled,
+	}, nil
+}

pkg/modules/logspipeline/logspipeline.go

@@ -0,0 +1,7 @@
+package logspipeline
+
+import "github.com/SigNoz/signoz/pkg/statsreporter"
+
+type Module interface {
+	statsreporter.StatsCollector
+}

pkg/signoz/module.go

@@ -19,6 +19,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/inframonitoring/implinframonitoring"
 	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
 	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule/impllmpricingrule"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline"
+	"github.com/SigNoz/signoz/pkg/modules/logspipeline/impllogspipeline"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer/implmetricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
@@ -85,6 +87,7 @@ type Modules struct {
 	Promote          promote.Module
 	ServiceAccount   serviceaccount.Module
 	CloudIntegration cloudintegration.Module
+	LogsPipeline     logspipeline.Module
 	RuleStateHistory rulestatehistory.Module
 	TraceDetail      tracedetail.Module
 	SpanMapper       spanmapper.Module
@@ -143,6 +146,7 @@ func NewModules(
 		InfraMonitoring:  implinframonitoring.NewModule(telemetryStore, telemetryMetadataStore, querier, providerSettings, config.InfraMonitoring),
 		Promote:          implpromote.NewModule(telemetryMetadataStore, telemetryStore),
 		ServiceAccount:   serviceAccount,
+		LogsPipeline:     impllogspipeline.NewModule(sqlstore),
 		RuleStateHistory: implrulestatehistory.NewModule(implrulestatehistory.NewStore(telemetryStore, telemetryMetadataStore, providerSettings.Logger)),
 		CloudIntegration: cloudIntegrationModule,
 		TraceDetail:      impltracedetail.NewModule(impltracedetail.NewTraceStore(telemetryStore), providerSettings, config.TraceDetail),

pkg/signoz/signoz.go

@@ -497,6 +497,7 @@ func New(
 		modules.AuthDomain,
 		serviceAccount,
 		cloudIntegrationModule,
+		modules.LogsPipeline,
 	}
 
 	// Initialize stats reporter from the available stats reporter provider factories