content.tsx 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. import {Fragment} from 'react';
  2. import type {Location} from 'history';
  3. import Feature from 'sentry/components/acl/feature';
  4. import IdBadge from 'sentry/components/idBadge';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import type {Organization, Project} from 'sentry/types';
  7. import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
  8. import type EventView from 'sentry/utils/discover/eventView';
  9. import type {ChildrenProps as SpanExamplesProps} from 'sentry/utils/performance/suspectSpans/spanExamplesQuery';
  10. import SpanExamplesQuery from 'sentry/utils/performance/suspectSpans/spanExamplesQuery';
  11. import type {ChildrenProps as SuspectSpansProps} from 'sentry/utils/performance/suspectSpans/suspectSpansQuery';
  12. import SuspectSpansQuery from 'sentry/utils/performance/suspectSpans/suspectSpansQuery';
  13. import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
  14. import {setGroupedEntityTag} from 'sentry/utils/performanceForSentry';
  15. import {decodeScalar} from 'sentry/utils/queryString';
  16. import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
  17. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  18. import Breadcrumb from 'sentry/views/performance/breadcrumb';
  19. import {getSelectedProjectPlatforms} from 'sentry/views/performance/utils';
  20. import Tab from '../../tabs';
  21. import {SpanSortOthers} from '../types';
  22. import {getTotalsView} from '../utils';
  23. import SpanChart from './chart';
  24. import SpanDetailsControls from './spanDetailsControls';
  25. import SpanDetailsHeader from './spanDetailsHeader';
  26. import SpanTable from './spanDetailsTable';
  27. import {ZoomKeys} from './utils';
  28. type Props = {
  29. eventView: EventView;
  30. location: Location;
  31. organization: Organization;
  32. project: Project | undefined;
  33. spanSlug: SpanSlug;
  34. transactionName: string;
  35. };
  36. export default function SpanDetailsContentWrapper(props: Props) {
  37. const {location, organization, eventView, project, transactionName, spanSlug} = props;
  38. const minExclusiveTime = decodeScalar(location.query[ZoomKeys.MIN]);
  39. const maxExclusiveTime = decodeScalar(location.query[ZoomKeys.MAX]);
  40. // customize the route analytics event we send
  41. useRouteAnalyticsEventNames(
  42. 'performance_views.span_summary.view',
  43. 'Performance Views: Span Summary page viewed'
  44. );
  45. useRouteAnalyticsParams({
  46. project_platforms: project ? getSelectedProjectPlatforms(location, [project]) : '',
  47. });
  48. return (
  49. <Fragment>
  50. <Layout.Header>
  51. <Layout.HeaderContent>
  52. <Breadcrumb
  53. organization={organization}
  54. location={location}
  55. transaction={{
  56. project: project?.id ?? '',
  57. name: transactionName,
  58. }}
  59. tab={Tab.SPANS}
  60. spanSlug={spanSlug}
  61. />
  62. <Layout.Title>
  63. {project && (
  64. <IdBadge
  65. project={project}
  66. avatarSize={28}
  67. hideName
  68. avatarProps={{hasTooltip: true, tooltip: project.slug}}
  69. />
  70. )}
  71. {transactionName}
  72. </Layout.Title>
  73. </Layout.HeaderContent>
  74. </Layout.Header>
  75. <Layout.Body>
  76. <Layout.Main fullWidth>
  77. <DiscoverQuery
  78. eventView={getTotalsView(eventView)}
  79. orgSlug={organization.slug}
  80. location={location}
  81. referrer="api.performance.transaction-spans"
  82. cursor="0:0:1"
  83. noPagination
  84. >
  85. {({tableData}) => {
  86. const totalCount: number | null =
  87. (tableData?.data?.[0]?.['count()'] as number) ?? null;
  88. if (totalCount) {
  89. setGroupedEntityTag('spans.totalCount', 1000, totalCount);
  90. }
  91. return (
  92. <SuspectSpansQuery
  93. location={location}
  94. orgSlug={organization.slug}
  95. eventView={getSpansEventView(eventView)}
  96. perSuspect={0}
  97. spanOps={[spanSlug.op]}
  98. spanGroups={[spanSlug.group]}
  99. cursor="0:0:1"
  100. minExclusiveTime={minExclusiveTime}
  101. maxExclusiveTime={maxExclusiveTime}
  102. >
  103. {suspectSpansResults => (
  104. <SpanExamplesQuery
  105. location={location}
  106. orgSlug={organization.slug}
  107. eventView={eventView}
  108. spanOp={spanSlug.op}
  109. spanGroup={spanSlug.group}
  110. limit={10}
  111. minExclusiveTime={minExclusiveTime}
  112. maxExclusiveTime={maxExclusiveTime}
  113. >
  114. {spanExamplesResults => (
  115. <SpanDetailsContent
  116. location={location}
  117. organization={organization}
  118. project={project}
  119. eventView={eventView}
  120. spanSlug={spanSlug}
  121. transactionName={transactionName}
  122. totalCount={totalCount}
  123. suspectSpansResults={suspectSpansResults}
  124. spanExamplesResults={spanExamplesResults}
  125. />
  126. )}
  127. </SpanExamplesQuery>
  128. )}
  129. </SuspectSpansQuery>
  130. );
  131. }}
  132. </DiscoverQuery>
  133. </Layout.Main>
  134. </Layout.Body>
  135. </Fragment>
  136. );
  137. }
  138. type ContentProps = {
  139. eventView: EventView;
  140. location: Location;
  141. organization: Organization;
  142. project: Project | undefined;
  143. spanExamplesResults: SpanExamplesProps;
  144. spanSlug: SpanSlug;
  145. suspectSpansResults: SuspectSpansProps;
  146. totalCount: number;
  147. transactionName: string;
  148. };
  149. function SpanDetailsContent(props: ContentProps) {
  150. const {
  151. location,
  152. organization,
  153. project,
  154. eventView,
  155. spanSlug,
  156. transactionName,
  157. totalCount,
  158. suspectSpansResults,
  159. spanExamplesResults,
  160. } = props;
  161. // There should always be exactly 1 result
  162. const suspectSpan = suspectSpansResults.suspectSpans?.[0];
  163. const examples = spanExamplesResults.examples?.[0]?.examples;
  164. const transactionCountContainingSpan = suspectSpan?.frequency;
  165. return (
  166. <Fragment>
  167. <Feature features="performance-span-histogram-view">
  168. <SpanDetailsControls
  169. organization={organization}
  170. location={location}
  171. eventView={eventView}
  172. />
  173. </Feature>
  174. <SpanDetailsHeader
  175. spanSlug={spanSlug}
  176. totalCount={totalCount}
  177. suspectSpan={suspectSpan}
  178. />
  179. <SpanChart
  180. totalCount={transactionCountContainingSpan}
  181. organization={organization}
  182. eventView={eventView}
  183. spanSlug={spanSlug}
  184. />
  185. <SpanTable
  186. location={location}
  187. organization={organization}
  188. project={project}
  189. suspectSpan={suspectSpan}
  190. transactionName={transactionName}
  191. isLoading={spanExamplesResults.isLoading}
  192. examples={examples ?? []}
  193. pageLinks={spanExamplesResults.pageLinks}
  194. />
  195. </Fragment>
  196. );
  197. }
  198. function getSpansEventView(eventView: EventView): EventView {
  199. // TODO: There is a bug where if the sort is not avg occurrence,
  200. // then the avg occurrence will never be added to the fields
  201. eventView = eventView.withSorts([{field: SpanSortOthers.AVG_OCCURRENCE, kind: 'desc'}]);
  202. eventView.fields = [
  203. {field: 'count()'},
  204. {field: 'count_unique(id)'},
  205. {field: 'equation|count() / count_unique(id)'},
  206. {field: 'sumArray(spans_exclusive_time)'},
  207. {field: 'percentileArray(spans_exclusive_time, 0.50)'},
  208. {field: 'percentileArray(spans_exclusive_time, 0.75)'},
  209. {field: 'percentileArray(spans_exclusive_time, 0.95)'},
  210. {field: 'percentileArray(spans_exclusive_time, 0.99)'},
  211. ];
  212. return eventView;
  213. }