import {Fragment} from 'react'; import type {Location} from 'history'; import IdBadge from 'sentry/components/idBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import type {Organization} from 'sentry/types/organization'; import type {Project} from 'sentry/types/project'; import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types'; import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames'; import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {useLocation} from 'sentry/utils/useLocation'; import {useParams} from 'sentry/utils/useParams'; import Breadcrumb from 'sentry/views/performance/breadcrumb'; import {SpanSummaryReferrer} from 'sentry/views/performance/transactionSummary/transactionSpans/spanSummary/referrers'; import SpanSummaryCharts from 'sentry/views/performance/transactionSummary/transactionSpans/spanSummary/spanSummaryCharts'; import SpanSummaryTable from 'sentry/views/performance/transactionSummary/transactionSpans/spanSummary/spanSummaryTable'; import {getSelectedProjectPlatforms} from 'sentry/views/performance/utils'; import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover'; import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types'; import Tab from '../../tabs'; import SpanSummaryControls from './spanSummaryControls'; import SpanSummaryHeader from './spanSummaryHeader'; type Props = { organization: Organization; project: Project | undefined; spanSlug: SpanSlug; transactionName: string; }; export default function SpanSummary(props: Props) { const {organization, project, transactionName, spanSlug} = props; const location = useLocation(); // customize the route analytics event we send useRouteAnalyticsEventNames( 'performance_views.span_summary.view', 'Performance Views: Span Summary page viewed' ); useRouteAnalyticsParams({ project_platforms: project ? getSelectedProjectPlatforms(location, [project]) : '', }); return ( {project && ( )} {transactionName} ); } type ContentProps = { location: Location; organization: Organization; project: Project | undefined; transactionName: string; }; function SpanSummaryContent(props: ContentProps) { const {transactionName, project} = props; const {spanSlug: spanParam} = useParams(); const [spanOp, groupId] = spanParam.split(':'); const filters: SpanMetricsQueryFilters = { 'span.group': groupId, 'span.op': spanOp, transaction: transactionName, }; const {data: spanHeaderData} = useSpanMetrics( { search: MutableSearch.fromQueryObject(filters), fields: [ 'span.description', 'avg(span.duration)', 'sum(span.self_time)', 'count()', ], }, SpanSummaryReferrer.SPAN_SUMMARY_HEADER_DATA ); const description = spanHeaderData[0]?.['span.description']; const timeSpent = spanHeaderData[0]?.['sum(span.self_time)']; const avgDuration = spanHeaderData[0]?.['avg(span.duration)']; const spanCount = spanHeaderData[0]?.['count()']; return ( ); }