spanOperationTable.tsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. import {Fragment} from 'react';
  2. import * as qs from 'query-string';
  3. import {getInterval} from 'sentry/components/charts/utils';
  4. import type {GridColumnHeader} from 'sentry/components/gridEditable';
  5. import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
  6. import SortLink from 'sentry/components/gridEditable/sortLink';
  7. import Link from 'sentry/components/links/link';
  8. import type {CursorHandler} from 'sentry/components/pagination';
  9. import Pagination from 'sentry/components/pagination';
  10. import {t} from 'sentry/locale';
  11. import type {NewQuery} from 'sentry/types/organization';
  12. import {defined} from 'sentry/utils';
  13. import {browserHistory} from 'sentry/utils/browserHistory';
  14. import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
  15. import type {MetaType} from 'sentry/utils/discover/eventView';
  16. import EventView, {isFieldSortable} from 'sentry/utils/discover/eventView';
  17. import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
  18. import type {Sort} from 'sentry/utils/discover/fields';
  19. import {fieldAlignment} from 'sentry/utils/discover/fields';
  20. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  21. import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
  22. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  23. import {useLocation} from 'sentry/utils/useLocation';
  24. import useOrganization from 'sentry/utils/useOrganization';
  25. import usePageFilters from 'sentry/utils/usePageFilters';
  26. import {
  27. PRIMARY_RELEASE_ALIAS,
  28. SECONDARY_RELEASE_ALIAS,
  29. } from 'sentry/views/insights/common/components/releaseSelector';
  30. import {PercentChangeCell} from 'sentry/views/insights/common/components/tableCells/percentChangeCell';
  31. import {OverflowEllipsisTextContainer} from 'sentry/views/insights/common/components/textAlign';
  32. import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/insights/common/utils/constants';
  33. import {appendReleaseFilters} from 'sentry/views/insights/common/utils/releaseComparison';
  34. import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
  35. import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
  36. import {APP_START_SPANS} from 'sentry/views/insights/mobile/appStarts/components/spanOpSelector';
  37. import {
  38. COLD_START_TYPE,
  39. WARM_START_TYPE,
  40. } from 'sentry/views/insights/mobile/appStarts/components/startTypeSelector';
  41. import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
  42. import {useTableQuery} from 'sentry/views/insights/mobile/screenload/components/tables/screensTable';
  43. import {MobileCursors} from 'sentry/views/insights/mobile/screenload/constants';
  44. import {SpanMetricsField} from 'sentry/views/insights/types';
  45. const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, PROJECT_ID} =
  46. SpanMetricsField;
  47. type Props = {
  48. primaryRelease?: string;
  49. secondaryRelease?: string;
  50. transaction?: string;
  51. };
  52. export function SpanOperationTable({
  53. transaction,
  54. primaryRelease,
  55. secondaryRelease,
  56. }: Props) {
  57. const moduleURL = useModuleURL('app_start');
  58. const location = useLocation();
  59. const {selection} = usePageFilters();
  60. const organization = useOrganization();
  61. const {isProjectCrossPlatform, selectedPlatform} = useCrossPlatformProject();
  62. const cursor = decodeScalar(location.query?.[MobileCursors.SPANS_TABLE]);
  63. const spanOp = decodeScalar(location.query[SpanMetricsField.SPAN_OP]) ?? '';
  64. const startType =
  65. decodeScalar(location.query[SpanMetricsField.APP_START_TYPE]) ?? COLD_START_TYPE;
  66. const deviceClass = decodeScalar(location.query[SpanMetricsField.DEVICE_CLASS]) ?? '';
  67. const searchQuery = new MutableSearch([
  68. // Exclude root level spans because they're comprised of nested operations
  69. '!span.description:"Cold Start"',
  70. '!span.description:"Warm Start"',
  71. // Exclude this span because we can get TTID contributing spans instead
  72. '!span.description:"Initial Frame Render"',
  73. 'has:span.description',
  74. 'transaction.op:ui.load',
  75. `transaction:${transaction}`,
  76. `has:ttid`,
  77. `${SpanMetricsField.APP_START_TYPE}:${
  78. startType || `[${COLD_START_TYPE},${WARM_START_TYPE}]`
  79. }`,
  80. `${SpanMetricsField.SPAN_OP}:${spanOp ? spanOp : `[${APP_START_SPANS.join(',')}]`}`,
  81. ...(spanOp ? [`${SpanMetricsField.SPAN_OP}:${spanOp}`] : []),
  82. ...(deviceClass ? [`${SpanMetricsField.DEVICE_CLASS}:${deviceClass}`] : []),
  83. ]);
  84. if (isProjectCrossPlatform) {
  85. searchQuery.addFilterValue('os.name', selectedPlatform);
  86. }
  87. const queryStringPrimary = appendReleaseFilters(
  88. searchQuery,
  89. primaryRelease,
  90. secondaryRelease
  91. );
  92. const sort = decodeSorts(location.query[QueryParameterNames.SPANS_SORT])[0] ?? {
  93. kind: 'desc',
  94. field: `avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`,
  95. };
  96. const newQuery: NewQuery = {
  97. name: '',
  98. fields: [
  99. PROJECT_ID,
  100. SPAN_OP,
  101. SPAN_GROUP,
  102. SPAN_DESCRIPTION,
  103. `avg_if(${SPAN_SELF_TIME},release,${primaryRelease})`,
  104. `avg_if(${SPAN_SELF_TIME},release,${secondaryRelease})`,
  105. `avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`,
  106. `sum(${SPAN_SELF_TIME})`,
  107. ],
  108. query: queryStringPrimary,
  109. dataset: DiscoverDatasets.SPANS_METRICS,
  110. version: 2,
  111. projects: selection.projects,
  112. interval: getInterval(selection.datetime, STARFISH_CHART_INTERVAL_FIDELITY),
  113. };
  114. const eventView = EventView.fromNewQueryWithLocation(newQuery, location);
  115. eventView.sorts = [sort];
  116. const {data, isLoading, pageLinks} = useTableQuery({
  117. eventView,
  118. enabled: true,
  119. referrer: 'api.starfish.mobile-spartup-span-table',
  120. cursor,
  121. });
  122. const columnNameMap = {
  123. [SPAN_OP]: t('Operation'),
  124. [SPAN_DESCRIPTION]: t('Span Description'),
  125. [`avg_if(${SPAN_SELF_TIME},release,${primaryRelease})`]: t(
  126. 'Avg Duration (%s)',
  127. PRIMARY_RELEASE_ALIAS
  128. ),
  129. [`avg_if(${SPAN_SELF_TIME},release,${secondaryRelease})`]: t(
  130. 'Avg Duration (%s)',
  131. SECONDARY_RELEASE_ALIAS
  132. ),
  133. [`avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`]:
  134. t('Change'),
  135. };
  136. function renderBodyCell(column, row): React.ReactNode {
  137. if (!data?.meta || !data?.meta.fields) {
  138. return row[column.key];
  139. }
  140. if (column.key === SPAN_DESCRIPTION) {
  141. const label = row[SpanMetricsField.SPAN_DESCRIPTION];
  142. const pathname = `${moduleURL}/spans/`;
  143. const query = {
  144. ...location.query,
  145. transaction,
  146. spanOp: row[SpanMetricsField.SPAN_OP],
  147. spanGroup: row[SpanMetricsField.SPAN_GROUP],
  148. spanDescription: row[SpanMetricsField.SPAN_DESCRIPTION],
  149. appStartType: row[SpanMetricsField.APP_START_TYPE],
  150. };
  151. return (
  152. <OverflowEllipsisTextContainer>
  153. <Link to={`${pathname}?${qs.stringify(query)}`}>{label}</Link>
  154. </OverflowEllipsisTextContainer>
  155. );
  156. }
  157. if (data.meta.fields[column.key] === 'percent_change') {
  158. return (
  159. <PercentChangeCell
  160. deltaValue={defined(row[column.key]) ? parseFloat(row[column.key]) : Infinity}
  161. preferredPolarity="-"
  162. />
  163. );
  164. }
  165. const renderer = getFieldRenderer(column.key, data?.meta.fields, false);
  166. const rendered = renderer(row, {
  167. location,
  168. organization,
  169. unit: data?.meta.units?.[column.key],
  170. });
  171. return rendered;
  172. }
  173. function renderHeadCell(
  174. column: GridColumnHeader,
  175. tableMeta?: MetaType
  176. ): React.ReactNode {
  177. const fieldType = tableMeta?.fields?.[column.key];
  178. const alignment = fieldAlignment(column.key as string, fieldType);
  179. const field = {
  180. field: column.key as string,
  181. width: column.width,
  182. };
  183. function generateSortLink() {
  184. if (!tableMeta) {
  185. return undefined;
  186. }
  187. let newSortDirection: Sort['kind'] = 'desc';
  188. if (sort?.field === column.key) {
  189. if (sort.kind === 'desc') {
  190. newSortDirection = 'asc';
  191. }
  192. }
  193. function getNewSort() {
  194. return `${newSortDirection === 'desc' ? '-' : ''}${column.key}`;
  195. }
  196. return {
  197. ...location,
  198. query: {...location.query, [QueryParameterNames.SPANS_SORT]: getNewSort()},
  199. };
  200. }
  201. const canSort = isFieldSortable(field, tableMeta?.fields, true);
  202. const sortLink = (
  203. <SortLink
  204. align={alignment}
  205. title={column.name}
  206. direction={sort?.field === column.key ? sort.kind : undefined}
  207. canSort={canSort}
  208. generateSortLink={generateSortLink}
  209. />
  210. );
  211. return sortLink;
  212. }
  213. const columnSortBy = eventView.getSorts();
  214. const handleCursor: CursorHandler = (newCursor, pathname, query) => {
  215. browserHistory.push({
  216. pathname,
  217. query: {...query, [MobileCursors.SPANS_TABLE]: newCursor},
  218. });
  219. };
  220. return (
  221. <Fragment>
  222. <GridEditable
  223. isLoading={isLoading}
  224. data={data?.data as TableDataRow[]}
  225. columnOrder={[
  226. String(SPAN_OP),
  227. String(SPAN_DESCRIPTION),
  228. `avg_if(${SPAN_SELF_TIME},release,${primaryRelease})`,
  229. `avg_if(${SPAN_SELF_TIME},release,${secondaryRelease})`,
  230. `avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`,
  231. ].map(col => {
  232. return {key: col, name: columnNameMap[col] ?? col, width: COL_WIDTH_UNDEFINED};
  233. })}
  234. columnSortBy={columnSortBy}
  235. grid={{
  236. renderHeadCell: column => renderHeadCell(column, data?.meta),
  237. renderBodyCell,
  238. }}
  239. />
  240. <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
  241. </Fragment>
  242. );
  243. }