External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-18 07:56:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: on clicking child span, fetch details from API + overall bugfixes

Browse Source
This commit is contained in:
ahmadshaheer 2025-09-21 19:24:36 +04:30
parent ae18c138c8
commit 277d6c5dbd
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/container/SpanList/SpanTable.tsx
View File

@ -1,5 +1,6 @@
import { Button } from '@signozhq/button'; import { Button } from '@signozhq/button';
import { ColumnDef, DataTable, Row } from '@signozhq/table'; import { ColumnDef, DataTable, Row } from '@signozhq/table';
import getTraceV2 from 'api/trace/getTraceV2';
import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig'; import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import Controls from 'container/Controls'; import Controls from 'container/Controls';
import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react'; import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
@ -202,28 +203,32 @@ function SpanTable({
); );
const handleSpanClick = useCallback( const handleSpanClick = useCallback(
(span: SpanDataRow) => { async (span: SpanDataRow): Promise<void> => {
if (setSelectedSpan) { if (!setSelectedSpan || !traceId) return;
// Convert span data to the format expected by SpanDetailsDrawer
const convertedSpan = ({ try {
id: span.data.span_id, // Make API call to fetch full span details
traceID: span.data.trace_id, const response = await getTraceV2({
spanID: span.data.span_id, traceId,
parentSpanID: '', selectedSpanId: span.data.span_id,
operationName: span.data.name, uncollapsedSpans: [],
startTime: new Date(span.timestamp).getTime() * 1000000, // Convert to nanoseconds isSelectedSpanIDUnCollapsed: true,
duration: span.data.duration_nano, });
tags: [],
logs: [], if (response.payload?.spans) {
process: { const fullSpan = response.payload.spans.find(
serviceName: span.data['service.name'], (s: Span) => s.spanId === span.data.span_id,
tags: [], );
}, console.log({ fullSpan });
} as unknown) as Span; if (fullSpan) {
setSelectedSpan(convertedSpan); setSelectedSpan(fullSpan);
}
}
} catch (error) {
console.error('Failed to fetch span details:', error);
} }
}, },
[setSelectedSpan], [setSelectedSpan, traceId],
); );
const renderNameCell = useCallback( const renderNameCell = useCallback(
@ -479,8 +484,11 @@ function SpanTable({
(row: Row<TableRowData>) => { (row: Row<TableRowData>) => {
const { original } = row; const { original } = row;
if (original.type === SPAN_TYPE_ENTRY) { if (original.type === SPAN_TYPE_ENTRY) {
handleEntrySpanClick(original.originalData as ServiceEntrySpan); // For entry spans, expand/collapse
const entrySpan = original.originalData as ServiceEntrySpan;
handleEntrySpanClick(entrySpan);
} else if (original.type === SPAN_TYPE_SERVICE) { } else if (original.type === SPAN_TYPE_SERVICE) {
// For service spans, trigger API call to fetch full details
handleSpanClick(original.originalData as SpanDataRow); handleSpanClick(original.originalData as SpanDataRow);
} }
}, },

9
frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
View File

@ -69,6 +69,8 @@ function TraceDetailsV2(): JSX.Element {
useEffect(() => { useEffect(() => {
if (selectedSpan) { if (selectedSpan) {
setIsSpanDetailsDocked(false); setIsSpanDetailsDocked(false);
} else {
setIsSpanDetailsDocked(true);
} }
}, [selectedSpan]); }, [selectedSpan]);
@ -113,12 +115,7 @@ function TraceDetailsV2(): JSX.Element {
useEffect(() => { useEffect(() => {
const viewParam = urlQuery.get('view'); const viewParam = urlQuery.get('view');
const newActiveTab = viewParam === 'span-list' ? 'span-list' : 'flamegraph'; const newActiveTab = viewParam === 'span-list' ? 'span-list' : 'flamegraph';
if (viewParam === 'span-list') {
setIsSpanDetailsDocked(true);
setSelectedSpan(undefined);
} else {
setIsSpanDetailsDocked(false);
}
if (newActiveTab !== activeTab) { if (newActiveTab !== activeTab) {
setActiveTab(newActiveTab); setActiveTab(newActiveTab);
} }