+
+ related signals
+
+
+
-
-
+
+
+ ),
+ value: RelatedSignalsViews.LOGS,
+ },
+ // {
+ // label: (
+ //
+ //
+ // ),
+ // value: RelatedSignalsViews.METRICS,
+ // },
+ // {
+ // label: (
+ //
+ //
+ // ),
+ // value: RelatedSignalsViews.INFRA,
+ // },
+ ]}
+ onChange={handleRelatedSignalsChange}
+ className="related-signals-radio"
+ />
+ Loading more logs ...
;
+ }
+
+ if (hasReachedEndOfLogs) {
+ return *** End ***
;
+ }
+
+ return null;
+ }, [isFetching, hasReachedEndOfLogs]);
+
+ const renderContent = useMemo(
+ () => (
+
+
+
+
+
+
+ ),
+ [logs, getItemContent, renderFooter],
+ );
+
+ const renderNoLogsFound = (): JSX.Element => (
+
+
+ 
+
+ No logs found for selected span.
+
+ Try viewing logs for the current trace.
+
+
+
+
+ }
+ onClick={handleExplorerPageRedirect}
+ size="md"
+ >
+ Log Explorer
+
+
+
+ );
+
+ return (
+
+
+ {(isLoading || isFetching) &&
+ );
+}
+
+export default SpanLogs;
diff --git a/frontend/src/container/SpanDetailsDrawer/SpanLogs/constants.ts b/frontend/src/container/SpanDetailsDrawer/SpanLogs/constants.ts
new file mode 100644
index 000000000000..0b8a70ae3b51
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/constants.ts
@@ -0,0 +1,93 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { Filter } from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * Creates a query payload for fetching logs related to a specific span
+ * @param start - Start time in milliseconds
+ * @param end - End time in milliseconds
+ * @param filter - V5 filter expression for trace_id and span_id
+ * @param order - Timestamp ordering ('desc' for newest first, 'asc' for oldest first)
+ * @returns Query payload for logs API
+ */
+export const getSpanLogsQueryPayload = (
+ start: number,
+ end: number,
+ filter: Filter,
+ order: 'asc' | 'desc' = 'desc',
+): GetQueryResultsProps => ({
+ graphType: PANEL_TYPES.LIST,
+ selectedTime: 'GLOBAL_TIME',
+ query: {
+ clickhouse_sql: [],
+ promql: [],
+ builder: {
+ queryData: [
+ {
+ dataSource: DataSource.LOGS,
+ queryName: 'A',
+ aggregateOperator: 'noop',
+ aggregateAttribute: {
+ id: '------false',
+ dataType: DataTypes.String,
+ key: '',
+ type: '',
+ },
+ timeAggregation: 'rate',
+ spaceAggregation: 'sum',
+ functions: [],
+ filter,
+ expression: 'A',
+ disabled: false,
+ stepInterval: 60,
+ having: [],
+ limit: null,
+ orderBy: [
+ {
+ columnName: 'timestamp',
+ order,
+ },
+ ],
+ groupBy: [],
+ legend: '',
+ reduceTo: 'avg',
+ offset: 0,
+ pageSize: 100,
+ },
+ ],
+ queryFormulas: [],
+ queryTraceOperator: [],
+ },
+ id: uuidv4(),
+ queryType: EQueryType.QUERY_BUILDER,
+ },
+ start,
+ end,
+});
+
+/**
+ * Creates tag filters for querying logs by trace_id only (for context logs)
+ * @param traceId - The trace identifier
+ * @returns Tag filters for the query builder
+ */
+export const getTraceOnlyFilters = (traceId: string): TagFilter => ({
+ items: [
+ {
+ id: uuidv4(),
+ key: {
+ id: uuidv4(),
+ dataType: DataTypes.String,
+ type: '',
+ key: 'trace_id',
+ },
+ op: 'in',
+ value: traceId,
+ },
+ ],
+ op: 'AND',
+});
diff --git a/frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss b/frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss
new file mode 100644
index 000000000000..727b96d14f0b
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss
@@ -0,0 +1,100 @@
+.span-logs {
+ margin-inline: 16px;
+ height: calc(100% - 64px - 55px - 56px);
+
+ &-virtuoso {
+ background: rgba(171, 189, 255, 0.04);
+ }
+ &-list-container .logs-loading-skeleton {
+ height: 100%;
+ border: 1px solid var(--bg-slate-500);
+ border-top: none;
+ color: var(--bg-vanilla-400);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0;
+ }
+
+ &-empty-content {
+ height: 100%;
+ border: 1px solid var(--bg-slate-500);
+ border-top: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 96px;
+ gap: 12px;
+
+ .description {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.75rem;
+ width: 320px;
+
+ .no-data-img {
+ height: 2rem;
+ width: 2rem;
+ }
+
+ .no-data-text-1 {
+ color: var(--bg-vanilla-400);
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: -0.07px;
+ }
+ .no-data-text-2 {
+ font-weight: 500;
+ }
+ }
+
+ .action-section {
+ width: 320px;
+
+ .action-btn {
+ border-radius: 2px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-slate-500);
+ color: var(--bg-vanilla-400);
+ padding: 4px 8px;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+ }
+ }
+}
+
+.lightMode {
+ .span-logs {
+ &-empty-content {
+ .description {
+ .no-data-text-1 {
+ color: var(--bg-ink-400);
+
+ .no-data-text-2 {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+
+ .action-section {
+ .action-btn {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-300);
+ color: var(--bg-ink-400);
+
+ &:hover {
+ border-color: var(--bg-vanilla-200);
+ background: var(--bg-vanilla-200);
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs.ts b/frontend/src/container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs.ts
new file mode 100644
index 000000000000..39fe55b04735
--- /dev/null
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs.ts
@@ -0,0 +1,281 @@
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { OPERATORS } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Filter } from 'types/api/v5/queryRange';
+import { v4 as uuid } from 'uuid';
+
+import { getSpanLogsQueryPayload } from './constants';
+
+interface UseSpanContextLogsProps {
+ traceId: string;
+ spanId: string;
+ timeRange: {
+ startTime: number;
+ endTime: number;
+ };
+}
+
+interface UseSpanContextLogsReturn {
+ logs: ILog[];
+ isLoading: boolean;
+ isError: boolean;
+ isFetching: boolean;
+ spanLogIds: Set
+
+ );
+}
+
+interface SpanRelatedSignalsProps {
+ selectedSpan: Span;
+ traceStartTime: number;
+ traceEndTime: number;
+ isOpen: boolean;
+ onClose: () => void;
+ initialView: RelatedSignalsViews;
+}
+
+function SpanRelatedSignals({
+ selectedSpan,
+ traceStartTime,
+ traceEndTime,
+ isOpen,
+ onClose,
+ initialView,
+}: SpanRelatedSignalsProps): JSX.Element {
+ const [selectedView, setSelectedView] = useState
+ {filters.map((filter) => (
+
+
+
+ {filter.key?.key}={filter.value}
+
+
+ ))}
+
+
+
+ {selectedView === RelatedSignalsViews.LOGS && (
+ <>
+
+
+
+ ),
+ value: RelatedSignalsViews.LOGS,
+ },
+ // {
+ // label: (
+ //
+ //
+ // ),
+ // value: RelatedSignalsViews.METRICS,
+ // },
+ // {
+ // label: (
+ //
+ //
+ // ),
+ // value: RelatedSignalsViews.INFRA,
+ // },
+ ]}
+ onChange={handleTabChange}
+ className="related-signals-radio"
+ />
+ {selectedView === RelatedSignalsViews.LOGS && (
+ }
+ className="open-in-explorer"
+ onClick={handleExplorerPageRedirect}
+ />
+ )}
+ {children}
;
+ },
+);
+
+// Mock Virtuoso to avoid complex virtualization
+jest.mock('react-virtuoso', () => ({
+ Virtuoso: jest.fn(({ data, itemContent }) => (
+
+ {data?.map((item: any, index: number) => (
+
+ )),
+}));
+
+// Mock RawLogView component
+jest.mock(
+ 'components/Logs/RawLogView',
+ () =>
+ // eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+ function MockRawLogView({
+ data,
+ onLogClick,
+ isHighlighted,
+ helpTooltip,
+ }: any) {
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+
+ {itemContent(index, item)}
+
+ ))}
+ onLogClick?.(data, e)}
+ >
+
+ );
+ },
+);
+
+// Mock PreferenceContextProvider
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+ PreferenceContextProvider: ({ children }: any): JSX.Element => (
+ {data.body}
+ {data.timestamp}
+ {children}
+ ),
+}));
+
+describe('SpanDetailsDrawer', () => {
+ let apiCallHistory: any[] = [];
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ apiCallHistory = [];
+ mockSafeNavigate.mockClear();
+ mockWindowOpen.mockClear();
+ mockUpdateAllQueriesOperators.mockClear();
+
+ // Setup API call tracking
+ (GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
+ apiCallHistory.push(query);
+
+ // Determine response based on v5 filter expressions
+ const filterExpression =
+ query.query?.builder?.queryData?.[0]?.filter?.expression;
+
+ if (!filterExpression) return Promise.resolve(mockEmptyLogsResponse);
+
+ // Check for span logs query (contains both trace_id and span_id)
+ if (filterExpression.includes('span_id')) {
+ return Promise.resolve(mockSpanLogsResponse);
+ }
+ // Check for before logs query (contains trace_id and id <)
+ if (filterExpression.includes('id <')) {
+ return Promise.resolve(mockBeforeLogsResponse);
+ }
+ // Check for after logs query (contains trace_id and id >)
+ if (filterExpression.includes('id >')) {
+ return Promise.resolve(mockAfterLogsResponse);
+ }
+
+ return Promise.resolve(mockEmptyLogsResponse);
+ });
+ });
+
+ afterEach(() => {
+ server.resetHandlers();
+ });
+
+ // Mock QueryBuilder context value
+ const mockQueryBuilderContextValue = {
+ currentQuery: {
+ builder: {
+ queryData: [
+ {
+ dataSource: 'logs',
+ queryName: 'A',
+ filter: { expression: "trace_id = 'test-trace-id'" },
+ },
+ ],
+ },
+ },
+ stagedQuery: {
+ builder: {
+ queryData: [
+ {
+ dataSource: 'logs',
+ queryName: 'A',
+ filter: { expression: "trace_id = 'test-trace-id'" },
+ },
+ ],
+ },
+ },
+ updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+ panelType: 'list',
+ redirectWithQuery: jest.fn(),
+ handleRunQuery: jest.fn(),
+ handleStageQuery: jest.fn(),
+ resetQuery: jest.fn(),
+ };
+
+ const renderSpanDetailsDrawer = (props = {}): void => {
+ render(
+