suspectSpansTable.tsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. import type {ReactNode} from 'react';
  2. import type {Location} from 'history';
  3. import type {GridColumnOrder} from 'sentry/components/gridEditable';
  4. import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
  5. import SortLink from 'sentry/components/gridEditable/sortLink';
  6. import Link from 'sentry/components/links/link';
  7. import {t} from 'sentry/locale';
  8. import type {Organization} from 'sentry/types/organization';
  9. import type {Project} from 'sentry/types/project';
  10. import {defined} from 'sentry/utils';
  11. import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
  12. import type {ColumnType} from 'sentry/utils/discover/fields';
  13. import {fieldAlignment} from 'sentry/utils/discover/fields';
  14. import {Container as TableCellContainer} from 'sentry/utils/discover/styles';
  15. import type {SuspectSpans} from 'sentry/utils/performance/suspectSpans/types';
  16. import {spanDetailsRouteWithQuery} from './spanDetails/utils';
  17. import type {SpanSort, SpansTotalValues} from './types';
  18. import {SpanSortOthers, SpanSortPercentiles} from './types';
  19. type Props = {
  20. isLoading: boolean;
  21. location: Location;
  22. organization: Organization;
  23. sort: SpanSort;
  24. suspectSpans: SuspectSpans;
  25. totals: SpansTotalValues | null;
  26. transactionName: string;
  27. project?: Project;
  28. };
  29. export default function SuspectSpansTable(props: Props) {
  30. const {
  31. location,
  32. organization,
  33. transactionName,
  34. isLoading,
  35. suspectSpans,
  36. totals,
  37. sort,
  38. project,
  39. } = props;
  40. const data: TableDataRowWithExtras[] = suspectSpans.map(suspectSpan => ({
  41. operation: suspectSpan.op,
  42. group: suspectSpan.group,
  43. description: suspectSpan.description,
  44. frequency:
  45. // Frequency is computed using the `uniq` function in ClickHouse.
  46. // Because it is an approximation, it can occasionally exceed the number of events.
  47. defined(suspectSpan.frequency) && defined(totals?.['count()'])
  48. ? Math.min(1, suspectSpan.frequency / totals!['count()'])
  49. : null,
  50. avgOccurrences: suspectSpan.avgOccurrences,
  51. p50ExclusiveTime: suspectSpan.p50ExclusiveTime,
  52. p75ExclusiveTime: suspectSpan.p75ExclusiveTime,
  53. p95ExclusiveTime: suspectSpan.p95ExclusiveTime,
  54. p99ExclusiveTime: suspectSpan.p99ExclusiveTime,
  55. sumExclusiveTime: suspectSpan.sumExclusiveTime,
  56. }));
  57. return (
  58. <GridEditable
  59. isLoading={isLoading}
  60. data={data}
  61. columnOrder={COLUMN_ORDER[sort].map(column => COLUMNS[column])}
  62. columnSortBy={[]}
  63. grid={{
  64. renderHeadCell,
  65. renderBodyCell: renderBodyCellWithMeta(
  66. location,
  67. organization,
  68. transactionName,
  69. project
  70. ),
  71. }}
  72. location={location}
  73. />
  74. );
  75. }
  76. function renderHeadCell(column: TableColumn, _index: number): ReactNode {
  77. const align = fieldAlignment(column.key, COLUMN_TYPE[column.key]);
  78. return (
  79. <SortLink
  80. title={column.name}
  81. align={align}
  82. direction={undefined}
  83. canSort={false}
  84. generateSortLink={() => undefined}
  85. />
  86. );
  87. }
  88. function renderBodyCellWithMeta(
  89. location: Location,
  90. organization: Organization,
  91. transactionName: string,
  92. project?: Project
  93. ) {
  94. return function (
  95. column: TableColumn,
  96. dataRow: TableDataRowWithExtras
  97. ): React.ReactNode {
  98. const fieldRenderer = getFieldRenderer(column.key, COLUMN_TYPE);
  99. if (column.key === 'description') {
  100. const target = spanDetailsRouteWithQuery({
  101. orgSlug: organization.slug,
  102. transaction: transactionName,
  103. query: location.query,
  104. spanSlug: {op: dataRow.operation, group: dataRow.group},
  105. projectID: project?.id,
  106. });
  107. return (
  108. <TableCellContainer>
  109. <Link to={target}>{dataRow[column.key] ?? t('(unnamed span)')}</Link>
  110. </TableCellContainer>
  111. );
  112. }
  113. return fieldRenderer(dataRow, {location, organization});
  114. };
  115. }
  116. type TableColumnKey =
  117. | 'operation'
  118. | 'description'
  119. | 'frequency'
  120. | 'avgOccurrences'
  121. | 'p50ExclusiveTime'
  122. | 'p75ExclusiveTime'
  123. | 'p95ExclusiveTime'
  124. | 'p99ExclusiveTime'
  125. | 'sumExclusiveTime';
  126. type TableColumn = GridColumnOrder<TableColumnKey>;
  127. type TableDataRow = Record<TableColumnKey, any>;
  128. type TableDataRowWithExtras = TableDataRow & {
  129. group: string;
  130. };
  131. const COLUMN_ORDER: Record<SpanSort, TableColumnKey[]> = {
  132. [SpanSortOthers.AVG_OCCURRENCE]: [
  133. 'operation',
  134. 'description',
  135. 'avgOccurrences',
  136. 'frequency',
  137. 'p75ExclusiveTime',
  138. 'sumExclusiveTime',
  139. ],
  140. [SpanSortOthers.SUM_EXCLUSIVE_TIME]: [
  141. 'operation',
  142. 'description',
  143. 'frequency',
  144. 'p75ExclusiveTime',
  145. 'sumExclusiveTime',
  146. ],
  147. [SpanSortPercentiles.P50_EXCLUSIVE_TIME]: [
  148. 'operation',
  149. 'description',
  150. 'frequency',
  151. 'p50ExclusiveTime',
  152. 'sumExclusiveTime',
  153. ],
  154. [SpanSortPercentiles.P75_EXCLUSIVE_TIME]: [
  155. 'operation',
  156. 'description',
  157. 'frequency',
  158. 'p75ExclusiveTime',
  159. 'sumExclusiveTime',
  160. ],
  161. [SpanSortPercentiles.P95_EXCLUSIVE_TIME]: [
  162. 'operation',
  163. 'description',
  164. 'frequency',
  165. 'p95ExclusiveTime',
  166. 'sumExclusiveTime',
  167. ],
  168. [SpanSortPercentiles.P99_EXCLUSIVE_TIME]: [
  169. 'operation',
  170. 'description',
  171. 'frequency',
  172. 'p99ExclusiveTime',
  173. 'sumExclusiveTime',
  174. ],
  175. };
  176. const COLUMNS: Record<TableColumnKey, TableColumn> = {
  177. operation: {
  178. key: 'operation',
  179. name: t('Span Operation'),
  180. width: COL_WIDTH_UNDEFINED,
  181. },
  182. description: {
  183. key: 'description',
  184. name: t('Span Name'),
  185. width: COL_WIDTH_UNDEFINED,
  186. },
  187. frequency: {
  188. key: 'frequency',
  189. name: t('Frequency'),
  190. width: COL_WIDTH_UNDEFINED,
  191. },
  192. avgOccurrences: {
  193. key: 'avgOccurrences',
  194. name: t('Average Occurrences'),
  195. width: COL_WIDTH_UNDEFINED,
  196. },
  197. p50ExclusiveTime: {
  198. key: 'p50ExclusiveTime',
  199. name: t('P50 Self Time'),
  200. width: COL_WIDTH_UNDEFINED,
  201. },
  202. p75ExclusiveTime: {
  203. key: 'p75ExclusiveTime',
  204. name: t('P75 Self Time'),
  205. width: COL_WIDTH_UNDEFINED,
  206. },
  207. p95ExclusiveTime: {
  208. key: 'p95ExclusiveTime',
  209. name: t('P95 Self Time'),
  210. width: COL_WIDTH_UNDEFINED,
  211. },
  212. p99ExclusiveTime: {
  213. key: 'p99ExclusiveTime',
  214. name: t('P99 Self Time'),
  215. width: COL_WIDTH_UNDEFINED,
  216. },
  217. sumExclusiveTime: {
  218. key: 'sumExclusiveTime',
  219. name: t('Total Self Time'),
  220. width: COL_WIDTH_UNDEFINED,
  221. },
  222. };
  223. const COLUMN_TYPE: Record<TableColumnKey, ColumnType> = {
  224. operation: 'string',
  225. description: 'string',
  226. frequency: 'percentage',
  227. avgOccurrences: 'number',
  228. p50ExclusiveTime: 'duration',
  229. p75ExclusiveTime: 'duration',
  230. p95ExclusiveTime: 'duration',
  231. p99ExclusiveTime: 'duration',
  232. sumExclusiveTime: 'duration',
  233. };