transactionsTable.tsx 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {Location} from 'history';
  4. import * as qs from 'query-string';
  5. import GridEditable, {
  6. COL_WIDTH_UNDEFINED,
  7. type GridColumnHeader,
  8. } from 'sentry/components/gridEditable';
  9. import Link from 'sentry/components/links/link';
  10. import type {CursorHandler} from 'sentry/components/pagination';
  11. import Pagination from 'sentry/components/pagination';
  12. import {t} from 'sentry/locale';
  13. import type {Organization} from 'sentry/types/organization';
  14. import {browserHistory} from 'sentry/utils/browserHistory';
  15. import type {EventsMetaType} from 'sentry/utils/discover/eventView';
  16. import {FIELD_FORMATTERS, getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
  17. import type {Sort} from 'sentry/utils/discover/fields';
  18. import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
  19. import useLocationQuery from 'sentry/utils/url/useLocationQuery';
  20. import {useLocation} from 'sentry/utils/useLocation';
  21. import useOrganization from 'sentry/utils/useOrganization';
  22. import {renderHeadCell} from 'sentry/views/insights/common/components/tableCells/renderHeadCell';
  23. import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
  24. import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
  25. import {useQueuesByTransactionQuery} from 'sentry/views/insights/queues/queries/useQueuesByTransactionQuery';
  26. import {Referrer} from 'sentry/views/insights/queues/referrers';
  27. import {SpanFunction, type SpanMetricsResponse} from 'sentry/views/insights/types';
  28. type Row = Pick<
  29. SpanMetricsResponse,
  30. | 'sum(span.duration)'
  31. | 'transaction'
  32. | `avg_if(${string},${string},${string})`
  33. | `count_op(${string})`
  34. >;
  35. type Column = GridColumnHeader<string>;
  36. const COLUMN_ORDER: Column[] = [
  37. {
  38. key: 'transaction',
  39. name: t('Transactions'),
  40. width: COL_WIDTH_UNDEFINED,
  41. },
  42. {
  43. key: 'span.op',
  44. name: t('Type'),
  45. width: COL_WIDTH_UNDEFINED,
  46. },
  47. {
  48. key: 'avg(messaging.message.receive.latency)',
  49. name: t('Avg Time in Queue'),
  50. width: COL_WIDTH_UNDEFINED,
  51. },
  52. {
  53. key: 'avg_if(span.duration,span.op,queue.process)',
  54. name: t('Avg Processing Time'),
  55. width: COL_WIDTH_UNDEFINED,
  56. },
  57. {
  58. key: 'trace_status_rate(ok)',
  59. name: t('Error Rate'),
  60. width: COL_WIDTH_UNDEFINED,
  61. },
  62. {
  63. key: 'count_op(queue.publish)',
  64. name: t('Published'),
  65. width: COL_WIDTH_UNDEFINED,
  66. },
  67. {
  68. key: 'count_op(queue.process)',
  69. name: t('Processed'),
  70. width: COL_WIDTH_UNDEFINED,
  71. },
  72. {
  73. key: 'time_spent_percentage(app,span.duration)',
  74. name: t('Time Spent'),
  75. width: COL_WIDTH_UNDEFINED,
  76. },
  77. ];
  78. const SORTABLE_FIELDS = [
  79. 'transaction',
  80. 'count_op(queue.publish)',
  81. 'count_op(queue.process)',
  82. 'avg_if(span.duration,span.op,queue.process)',
  83. 'avg(messaging.message.receive.latency)',
  84. `${SpanFunction.TIME_SPENT_PERCENTAGE}(app,span.duration)`,
  85. ] as const;
  86. type ValidSort = Sort & {
  87. field: (typeof SORTABLE_FIELDS)[number];
  88. };
  89. export function isAValidSort(sort: Sort): sort is ValidSort {
  90. return (SORTABLE_FIELDS as unknown as string[]).includes(sort.field);
  91. }
  92. const DEFAULT_SORT = {
  93. field: 'time_spent_percentage(app,span.duration)' as const,
  94. kind: 'desc' as const,
  95. };
  96. export function TransactionsTable() {
  97. const organization = useOrganization();
  98. const location = useLocation();
  99. const locationQuery = useLocationQuery({
  100. fields: {
  101. destination: decodeScalar,
  102. [QueryParameterNames.DESTINATIONS_SORT]: decodeScalar,
  103. },
  104. });
  105. const sort =
  106. decodeSorts(locationQuery[QueryParameterNames.DESTINATIONS_SORT])
  107. .filter(isAValidSort)
  108. .at(0) ?? DEFAULT_SORT;
  109. const {data, isPending, meta, pageLinks, error} = useQueuesByTransactionQuery({
  110. destination: locationQuery.destination,
  111. sort,
  112. referrer: Referrer.QUEUES_SUMMARY_TRANSACTIONS_TABLE,
  113. });
  114. const handleCursor: CursorHandler = (newCursor, pathname, query) => {
  115. browserHistory.push({
  116. pathname,
  117. query: {...query, [QueryParameterNames.TRANSACTIONS_CURSOR]: newCursor},
  118. });
  119. };
  120. return (
  121. <Fragment>
  122. <GridEditable
  123. aria-label={t('Transactions')}
  124. isLoading={isPending}
  125. error={error}
  126. data={data}
  127. columnOrder={COLUMN_ORDER}
  128. columnSortBy={[
  129. {
  130. key: sort.field,
  131. order: sort.kind,
  132. },
  133. ]}
  134. grid={{
  135. renderHeadCell: column =>
  136. renderHeadCell({
  137. column,
  138. sort,
  139. location,
  140. sortParameterName: QueryParameterNames.DESTINATIONS_SORT,
  141. }),
  142. renderBodyCell: (column, row) =>
  143. renderBodyCell(column, row, meta, location, organization),
  144. }}
  145. />
  146. <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
  147. </Fragment>
  148. );
  149. }
  150. function renderBodyCell(
  151. column: Column,
  152. row: Row,
  153. meta: EventsMetaType | undefined,
  154. location: Location,
  155. organization: Organization
  156. ) {
  157. const op = row['span.op'];
  158. const isProducer = op === 'queue.publish';
  159. const isConsumer = op === 'queue.process';
  160. const key = column.key;
  161. if (
  162. row[key] === undefined ||
  163. (isConsumer && ['count_op(queue.publish)'].includes(key)) ||
  164. (isProducer &&
  165. [
  166. 'count_op(queue.process)',
  167. 'avg(messaging.message.receive.latency)',
  168. 'avg_if(span.duration,span.op,queue.process)',
  169. ].includes(key))
  170. ) {
  171. return (
  172. <AlignRight>
  173. <NoValue>{' \u2014 '}</NoValue>
  174. </AlignRight>
  175. );
  176. }
  177. if (key === 'transaction') {
  178. return <TransactionCell transaction={row[key]} op={op} />;
  179. }
  180. // Need to invert trace_status_rate(ok) to show error rate
  181. if (key === 'trace_status_rate(ok)') {
  182. const formatter = FIELD_FORMATTERS.percentage.renderFunc;
  183. return (
  184. <AlignRight>
  185. {formatter(key, {'trace_status_rate(ok)': 1 - (row[key] ?? 0)})}
  186. </AlignRight>
  187. );
  188. }
  189. if (!meta?.fields) {
  190. return row[column.key];
  191. }
  192. if (key.startsWith('avg')) {
  193. const renderer = FIELD_FORMATTERS.duration.renderFunc;
  194. return renderer(key, row);
  195. }
  196. if (key === 'span.op') {
  197. switch (row[key]) {
  198. case 'queue.publish':
  199. return t('Producer');
  200. case 'queue.process':
  201. return t('Consumer');
  202. default:
  203. return row[key];
  204. }
  205. }
  206. const renderer = getFieldRenderer(column.key, meta.fields, false);
  207. return renderer(row, {
  208. location,
  209. organization,
  210. unit: meta.units?.[column.key],
  211. });
  212. }
  213. function TransactionCell({transaction, op}: {op: string; transaction: string}) {
  214. const moduleURL = useModuleURL('queue');
  215. const {query} = useLocation();
  216. const queryString = {
  217. ...query,
  218. transaction,
  219. 'span.op': op,
  220. };
  221. return (
  222. <NoOverflow>
  223. <Link to={`${moduleURL}/destination/?${qs.stringify(queryString)}`}>
  224. {transaction}
  225. </Link>
  226. </NoOverflow>
  227. );
  228. }
  229. const NoOverflow = styled('span')`
  230. overflow: hidden;
  231. `;
  232. const AlignRight = styled('span')`
  233. text-align: right;
  234. `;
  235. const NoValue = styled('span')`
  236. color: ${p => p.theme.gray300};
  237. `;