Merge branch 'main' into feat/add-support-for-expanding-long-status_message-in-span-details-drawer

frontend/src/container/SpanDetailsDrawer/Events/components/EventAttribute.tsx

@@ -3,6 +3,7 @@ import { Tooltip, Typography } from 'antd';
 import AttributeWithExpandablePopover from './AttributeWithExpandablePopover';
 
 const EXPANDABLE_ATTRIBUTE_KEYS = ['exception.stacktrace', 'exception.message'];
+const ATTRIBUTE_LENGTH_THRESHOLD = 100;
 
 interface EventAttributeProps {
 	attributeKey: string;
@@ -15,7 +16,11 @@ function EventAttribute({
 	attributeValue,
 	onExpand,
 }: EventAttributeProps): JSX.Element {
-	if (EXPANDABLE_ATTRIBUTE_KEYS.includes(attributeKey)) {
+	const shouldExpand =
+		EXPANDABLE_ATTRIBUTE_KEYS.includes(attributeKey) ||
+		attributeValue.length > ATTRIBUTE_LENGTH_THRESHOLD;
+
+	if (shouldExpand) {
 		return (
 			<AttributeWithExpandablePopover
 				attributeKey={attributeKey}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -51,9 +51,12 @@
 		padding: 10px 12px;
 
 		.item {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
+			&,
+			.attribute-container {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
 
 			.span-name-wrapper {
 				display: flex;
@@ -413,6 +416,7 @@
 				text-transform: uppercase;
 			}
 
+			.attribute-container .wrapper,
 			.value-wrapper {
 				display: flex;
 				align-items: center;

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -4,6 +4,7 @@ import {
 	Button,
 	Checkbox,
 	Input,
+	Modal,
 	Select,
 	Skeleton,
 	Tabs,
@@ -52,6 +53,7 @@ import { formatEpochTimestamp } from 'utils/timeUtils';
 
 import Attributes from './Attributes/Attributes';
 import { RelatedSignalsViews } from './constants';
+import EventAttribute from './Events/components/EventAttribute';
 import Events from './Events/Events';
 import LinkedSpans from './LinkedSpans/LinkedSpans';
 import SpanRelatedSignals from './SpanRelatedSignals/SpanRelatedSignals';
@@ -166,11 +168,27 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 		setShouldUpdateUserPreference,
 	] = useState<boolean>(false);
 
+	const [statusMessageModalContent, setStatusMessageModalContent] = useState<{
+		title: string;
+		content: string;
+	} | null>(null);
+
 	const handleTimeRangeChange = useCallback((value: number): void => {
 		setShouldFetchSpanPercentilesData(true);
 		setSelectedTimeRange(value);
 	}, []);
 
+	const showStatusMessageModal = useCallback(
+		(title: string, content: string): void => {
+			setStatusMessageModalContent({ title, content });
+		},
+		[],
+	);
+
+	const handleStatusMessageModalCancel = useCallback((): void => {
+		setStatusMessageModalContent(null);
+	}, []);
+
 	const color = generateColor(
 		selectedSpan?.serviceName || '',
 		themeColors.traceDetailColors,
@@ -868,14 +886,11 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 
 						{selectedSpan.statusMessage && (
 							<div className="item">
-								<Typography.Text className="attribute-key">
-									status message
-								</Typography.Text>
-								<div className="value-wrapper">
-									<Typography.Text className="attribute-value">
-										{selectedSpan.statusMessage}
-									</Typography.Text>
-								</div>
+								<EventAttribute
+									attributeKey="status message"
+									attributeValue={selectedSpan.statusMessage}
+									onExpand={showStatusMessageModal}
+								/>
 							</div>
 						)}
 						<div className="item">
@@ -936,6 +951,19 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 					key={activeDrawerView}
 				/>
 			)}
+
+			<Modal
+				title={statusMessageModalContent?.title}
+				open={!!statusMessageModalContent}
+				onCancel={handleStatusMessageModalCancel}
+				footer={null}
+				width="80vw"
+				centered
+			>
+				<pre className="attribute-with-expandable-popover__full-view">
+					{statusMessageModalContent?.content}
+				</pre>
+			</Modal>
 		</>
 	);
 }

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

@@ -29,6 +29,8 @@ import {
 	mockEmptyLogsResponse,
 	mockSpan,
 	mockSpanLogsResponse,
+	mockSpanWithLongStatusMessage,
+	mockSpanWithShortStatusMessage,
 } from './mockData';
 
 // Get typed mocks
@@ -128,6 +130,26 @@ jest.mock('lib/uPlotLib/utils/generateColor', () => ({
 	generateColor: jest.fn().mockReturnValue('#1f77b4'),
 }));
 
+// Mock Antd Popover to render content immediately (avoids async portal issues)
+jest.mock('antd', () => {
+	const originalModule = jest.requireActual('antd');
+	return {
+		...originalModule,
+		Popover: ({
+			content,
+			children,
+		}: {
+			content: React.ReactNode;
+			children: React.ReactNode;
+		}): JSX.Element => (
+			<div>
+				{children}
+				<div data-testid="popover-content">{content}</div>
+			</div>
+		),
+	};
+});
+
 // Mock getSpanPercentiles API
 jest.mock('api/trace/getSpanPercentiles', () => ({
 	__esModule: true,
@@ -1153,3 +1175,112 @@ describe('SpanDetailsDrawer - Search Visibility User Flows', () => {
 		expect(searchInput).toHaveFocus();
 	});
 });
+
+describe('SpanDetailsDrawer - Status Message Truncation User Flows', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		mockWindowOpen.mockClear();
+		mockUpdateAllQueriesOperators.mockClear();
+
+		(GetMetricQueryRange as jest.Mock).mockImplementation(() =>
+			Promise.resolve(mockEmptyLogsResponse),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should display expandable popover with Expand button for long status message', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label
+		expect(screen.getByText('status message')).toBeInTheDocument();
+
+		// User sees the status message value (appears in both original element and popover preview)
+		const statusMessageElements = screen.getAllByText(
+			mockSpanWithLongStatusMessage.statusMessage,
+		);
+		expect(statusMessageElements.length).toBeGreaterThan(0);
+
+		// User sees Expand button in popover (popover is mocked to render immediately)
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		expect(expandButton).toBeInTheDocument();
+	});
+
+	it('should open modal with full status message when user clicks Expand button', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User clicks the Expand button (popover is mocked to render immediately)
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		await fireEvent.click(expandButton);
+
+		// User sees modal with the full status message content
+		await waitFor(() => {
+			// Modal should be visible with the title
+			const modalTitle = document.querySelector('.ant-modal-title');
+			expect(modalTitle).toBeInTheDocument();
+			expect(modalTitle?.textContent).toBe('status message');
+			// Modal content should contain the full message in a pre tag
+			const preElement = document.querySelector(
+				'.attribute-with-expandable-popover__full-view',
+			);
+			expect(preElement).toBeInTheDocument();
+			expect(preElement?.textContent).toBe(
+				mockSpanWithLongStatusMessage.statusMessage,
+			);
+		});
+	});
+
+	it('should display short status message as simple text without popover', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithShortStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label and value
+		expect(screen.getByText('status message')).toBeInTheDocument();
+		expect(
+			screen.getByText(mockSpanWithShortStatusMessage.statusMessage),
+		).toBeInTheDocument();
+
+		// User hovers over the status message value
+		const statusMessageValue = screen.getByText(
+			mockSpanWithShortStatusMessage.statusMessage,
+		);
+		fireEvent.mouseEnter(statusMessageValue);
+
+		// No Expand button should appear (no expandable popover for short messages)
+		expect(
+			screen.queryByRole('button', { name: /expand/i }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -35,6 +35,19 @@ export const mockSpan: Span = {
 	level: 0,
 };
 
+// Mock span with long status message (> 100 characters) for testing truncation
+export const mockSpanWithLongStatusMessage: Span = {
+	...mockSpan,
+	statusMessage:
+		'Error: Connection timeout occurred while trying to reach the database server. The connection pool was exhausted and all retry attempts failed after 30 seconds.',
+};
+
+// Mock span with short status message (<= 100 characters)
+export const mockSpanWithShortStatusMessage: Span = {
+	...mockSpan,
+	statusMessage: 'Connection successful',
+};
+
 // Mock logs with proper relationships
 export const mockSpanLogs: ILog[] = [
 	{