fix: disable next page in child spans pagination if nextCursor is empty

This commit is contained in:
ahmadshaheer 2025-09-21 20:07:05 +04:30
parent 47e2687afe
commit c8f3ab667a
2 changed files with 21 additions and 8 deletions

View File

@ -68,7 +68,12 @@ function SpanTable({
const [serviceSpansPagination, setServiceSpansPagination] = useState<
Record<
string,
{ currentPage: number; totalCount?: number; hasMorePages?: boolean }
{
currentPage: number;
totalCount?: number;
hasMorePages?: boolean;
nextCursor?: string;
}
>
>({});
@ -96,7 +101,7 @@ function SpanTable({
try {
const currentPage = 1;
const offset = (currentPage - 1) * SERVICE_SPAN_PAGE_SIZE;
const serviceSpans = await fetchServiceSpans(
const { spans: serviceSpans, nextCursor } = await fetchServiceSpans(
traceId,
entrySpan.serviceName,
SERVICE_SPAN_PAGE_SIZE,
@ -108,12 +113,13 @@ function SpanTable({
isExpanded: true,
};
// Update hasMorePages based on response length
// Update pagination with nextCursor
setServiceSpansPagination((prevPagination) => ({
...prevPagination,
[spanId]: {
...prevPagination[spanId],
hasMorePages: serviceSpans.length === SERVICE_SPAN_PAGE_SIZE,
nextCursor,
},
}));
@ -148,20 +154,21 @@ function SpanTable({
try {
const offset = (newPage - 1) * SERVICE_SPAN_PAGE_SIZE;
const serviceSpans = await fetchServiceSpans(
const { spans: serviceSpans, nextCursor } = await fetchServiceSpans(
traceId,
entrySpan.serviceName,
SERVICE_SPAN_PAGE_SIZE,
offset,
);
// Update hasMorePages based on response length
// Update pagination with nextCursor
setServiceSpansPagination((prevPagination) => ({
...prevPagination,
[entrySpanId]: {
...prevPagination[entrySpanId],
currentPage: newPage,
hasMorePages: serviceSpans.length === SERVICE_SPAN_PAGE_SIZE,
nextCursor,
},
}));
@ -285,6 +292,7 @@ function SpanTable({
}
handleCountItemsPerPageChange={(): void => {}} // Service spans use fixed page size
showSizeChanger={false} // Disable page size changer for service spans
nextCursor={pagination.nextCursor}
/>
</div>
);

View File

@ -41,7 +41,7 @@ export async function fetchServiceSpans(
serviceName: string,
pageSize = 10,
offset = 0,
): Promise<SpanDataRow[]> {
): Promise<{ spans: SpanDataRow[]; nextCursor: string }> {
// Use the same payload structure as in SpanList component but with service-specific filter
const payload = initialQueriesMap.traces;
@ -121,12 +121,17 @@ export async function fetchServiceSpans(
// Extract spans from the API response using the same path as SpanList component
const spans =
response?.payload?.data?.newResult?.data?.result?.[0]?.list || [];
const nextCursor =
response?.payload?.data?.newResult?.data?.result?.[0]?.nextCursor || '';
// Transform the API response to SpanDataRow format if needed
// The API should return the correct format for traces, but we'll handle any potential transformation
return (spans as unknown) as SpanDataRow[];
return {
spans: (spans as unknown) as SpanDataRow[],
nextCursor,
};
} catch (error) {
console.error('Failed to fetch service spans:', error);
return [];
return { spans: [], nextCursor: '' };
}
}