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 (
);
}