widgetDefinitions.tsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. import {CHART_PALETTE} from 'sentry/constants/chartPalette';
  2. import {t} from 'sentry/locale';
  3. import type {Organization} from 'sentry/types/organization';
  4. import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/discover/fields';
  5. import {getTermHelp, PerformanceTerm} from '../../data';
  6. import {GenericPerformanceWidgetDataType} from './types';
  7. export interface ChartDefinition {
  8. dataType: GenericPerformanceWidgetDataType;
  9. fields: string[];
  10. // Additional fields to get requested but are not directly used in visualization.
  11. title: string;
  12. titleTooltip: string;
  13. // The first field in the list will be treated as the primary field in most widgets (except for special casing).
  14. allowsOpenInDiscover?: boolean;
  15. chartColor?: string;
  16. secondaryFields?: string[]; // Optional. Will default to colors depending on placement in list or colors from the chart itself.
  17. vitalStops?: {
  18. meh: number;
  19. poor: number;
  20. };
  21. }
  22. export enum PerformanceWidgetSetting {
  23. DURATION_HISTOGRAM = 'duration_histogram',
  24. LCP_HISTOGRAM = 'lcp_histogram',
  25. FCP_HISTOGRAM = 'fcp_histogram',
  26. FID_HISTOGRAM = 'fid_histogram',
  27. APDEX_AREA = 'apdex_area',
  28. P50_DURATION_AREA = 'p50_duration_area',
  29. P75_DURATION_AREA = 'p75_duration_area',
  30. P95_DURATION_AREA = 'p95_duration_area',
  31. P99_DURATION_AREA = 'p99_duration_area',
  32. P75_LCP_AREA = 'p75_lcp_area',
  33. TPM_AREA = 'tpm_area',
  34. FAILURE_RATE_AREA = 'failure_rate_area',
  35. USER_MISERY_AREA = 'user_misery_area',
  36. WORST_LCP_VITALS = 'worst_lcp_vitals',
  37. WORST_FCP_VITALS = 'worst_fcp_vitals',
  38. WORST_CLS_VITALS = 'worst_cls_vitals',
  39. WORST_FID_VITALS = 'worst_fid_vitals',
  40. MOST_CHANGED = 'most_changed',
  41. MOST_IMPROVED = 'most_improved',
  42. MOST_REGRESSED = 'most_regressed',
  43. MOST_RELATED_ERRORS = 'most_related_errors',
  44. MOST_RELATED_ISSUES = 'most_related_issues',
  45. MOST_TIME_SPENT_DB_QUERIES = 'most_time_spent_db_queries',
  46. HIGHEST_OPPORTUNITY_PAGES = 'highest_opportunity_pages',
  47. SLOW_HTTP_OPS = 'slow_http_ops',
  48. SLOW_DB_OPS = 'slow_db_ops',
  49. SLOW_RESOURCE_OPS = 'slow_resource_ops',
  50. SLOW_BROWSER_OPS = 'slow_browser_ops',
  51. COLD_STARTUP_AREA = 'cold_startup_area',
  52. WARM_STARTUP_AREA = 'warm_startup_area',
  53. SLOW_FRAMES_AREA = 'slow_frames_area',
  54. FROZEN_FRAMES_AREA = 'frozen_frames_area',
  55. MOST_SLOW_FRAMES = 'most_slow_frames',
  56. MOST_FROZEN_FRAMES = 'most_frozen_frames',
  57. SPAN_OPERATIONS = 'span_operations',
  58. TIME_TO_INITIAL_DISPLAY = 'time_to_initial_display',
  59. TIME_TO_FULL_DISPLAY = 'time_to_full_display',
  60. OVERALL_PERFORMANCE_SCORE = 'overall_performance_score',
  61. MOST_TIME_CONSUMING_RESOURCES = 'most_time_consuming_resources',
  62. MOST_TIME_CONSUMING_DOMAINS = 'most_time_consuming_domains',
  63. SLOW_SCREENS_BY_TTID = 'slow_screens_by_ttid',
  64. SLOW_SCREENS_BY_COLD_START = 'slow_screens_by_cold_start',
  65. SLOW_SCREENS_BY_WARM_START = 'slow_screens_by_warm_start',
  66. HIGHEST_CACHE_MISS_RATE_TRANSACTIONS = 'highest_cache__miss_rate_transactions',
  67. }
  68. const WIDGET_PALETTE = CHART_PALETTE[5];
  69. export const WIDGET_DEFINITIONS: ({
  70. organization,
  71. }: {
  72. organization: Organization;
  73. }) => Record<PerformanceWidgetSetting, ChartDefinition> = ({
  74. organization,
  75. }: {
  76. organization: Organization;
  77. }) => ({
  78. [PerformanceWidgetSetting.DURATION_HISTOGRAM]: {
  79. title: t('Duration Distribution'),
  80. titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION),
  81. fields: ['transaction.duration'],
  82. dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
  83. chartColor: WIDGET_PALETTE[5],
  84. },
  85. [PerformanceWidgetSetting.LCP_HISTOGRAM]: {
  86. title: t('LCP Distribution'),
  87. titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION),
  88. fields: ['measurements.lcp'],
  89. dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
  90. chartColor: WIDGET_PALETTE[5],
  91. },
  92. [PerformanceWidgetSetting.FCP_HISTOGRAM]: {
  93. title: t('FCP Distribution'),
  94. titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION),
  95. fields: ['measurements.fcp'],
  96. dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
  97. chartColor: WIDGET_PALETTE[5],
  98. },
  99. [PerformanceWidgetSetting.FID_HISTOGRAM]: {
  100. title: t('FID Distribution'),
  101. titleTooltip: getTermHelp(organization, PerformanceTerm.DURATION_DISTRIBUTION),
  102. fields: ['measurements.fid'],
  103. dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
  104. chartColor: WIDGET_PALETTE[5],
  105. },
  106. [PerformanceWidgetSetting.WORST_LCP_VITALS]: {
  107. title: t('Worst LCP Web Vitals'),
  108. titleTooltip: getTermHelp(organization, PerformanceTerm.LCP),
  109. fields: ['measurements.lcp'],
  110. vitalStops: {
  111. poor: 4000,
  112. meh: 2500,
  113. },
  114. dataType: GenericPerformanceWidgetDataType.VITALS,
  115. },
  116. [PerformanceWidgetSetting.WORST_FCP_VITALS]: {
  117. title: t('Worst FCP Web Vitals'),
  118. titleTooltip: getTermHelp(organization, PerformanceTerm.FCP),
  119. fields: ['measurements.fcp'],
  120. vitalStops: {
  121. poor: 3000,
  122. meh: 1000,
  123. },
  124. dataType: GenericPerformanceWidgetDataType.VITALS,
  125. },
  126. [PerformanceWidgetSetting.WORST_FID_VITALS]: {
  127. title: t('Worst FID Web Vitals'),
  128. titleTooltip: getTermHelp(organization, PerformanceTerm.FID),
  129. fields: ['measurements.fid'],
  130. vitalStops: {
  131. poor: 300,
  132. meh: 100,
  133. },
  134. dataType: GenericPerformanceWidgetDataType.VITALS,
  135. },
  136. [PerformanceWidgetSetting.WORST_CLS_VITALS]: {
  137. title: t('Worst CLS Web Vitals'),
  138. titleTooltip: getTermHelp(organization, PerformanceTerm.CLS),
  139. fields: ['measurements.cls'],
  140. vitalStops: {
  141. poor: 0.25,
  142. meh: 0.1,
  143. },
  144. dataType: GenericPerformanceWidgetDataType.VITALS,
  145. },
  146. [PerformanceWidgetSetting.TPM_AREA]: {
  147. title: t('Transactions Per Minute'),
  148. titleTooltip: getTermHelp(organization, PerformanceTerm.TPM),
  149. fields: ['tpm()'],
  150. dataType: GenericPerformanceWidgetDataType.AREA,
  151. chartColor: WIDGET_PALETTE[1],
  152. allowsOpenInDiscover: true,
  153. },
  154. [PerformanceWidgetSetting.APDEX_AREA]: {
  155. title: t('Apdex'),
  156. titleTooltip: getTermHelp(organization, PerformanceTerm.APDEX),
  157. fields: ['apdex()'],
  158. dataType: GenericPerformanceWidgetDataType.AREA,
  159. chartColor: WIDGET_PALETTE[4],
  160. allowsOpenInDiscover: true,
  161. },
  162. [PerformanceWidgetSetting.P50_DURATION_AREA]: {
  163. title: t('p50 Duration'),
  164. titleTooltip: getTermHelp(organization, PerformanceTerm.P50),
  165. fields: ['p50(transaction.duration)'],
  166. dataType: GenericPerformanceWidgetDataType.AREA,
  167. chartColor: WIDGET_PALETTE[3],
  168. allowsOpenInDiscover: true,
  169. },
  170. [PerformanceWidgetSetting.P75_DURATION_AREA]: {
  171. title: t('p75 Duration'),
  172. titleTooltip: getTermHelp(organization, PerformanceTerm.P75),
  173. fields: ['p75(transaction.duration)'],
  174. dataType: GenericPerformanceWidgetDataType.AREA,
  175. chartColor: WIDGET_PALETTE[3],
  176. allowsOpenInDiscover: true,
  177. },
  178. [PerformanceWidgetSetting.P95_DURATION_AREA]: {
  179. title: t('p95 Duration'),
  180. titleTooltip: getTermHelp(organization, PerformanceTerm.P95),
  181. fields: ['p95(transaction.duration)'],
  182. dataType: GenericPerformanceWidgetDataType.AREA,
  183. chartColor: WIDGET_PALETTE[3],
  184. allowsOpenInDiscover: true,
  185. },
  186. [PerformanceWidgetSetting.P99_DURATION_AREA]: {
  187. title: t('p99 Duration'),
  188. titleTooltip: getTermHelp(organization, PerformanceTerm.P99),
  189. fields: ['p99(transaction.duration)'],
  190. dataType: GenericPerformanceWidgetDataType.AREA,
  191. chartColor: WIDGET_PALETTE[3],
  192. allowsOpenInDiscover: true,
  193. },
  194. [PerformanceWidgetSetting.P75_LCP_AREA]: {
  195. title: t('p75 LCP'),
  196. titleTooltip: getTermHelp(organization, PerformanceTerm.P75),
  197. fields: ['p75(measurements.lcp)'],
  198. dataType: GenericPerformanceWidgetDataType.AREA,
  199. chartColor: WIDGET_PALETTE[1],
  200. allowsOpenInDiscover: true,
  201. },
  202. [PerformanceWidgetSetting.FAILURE_RATE_AREA]: {
  203. title: t('Failure Rate'),
  204. titleTooltip: getTermHelp(organization, PerformanceTerm.FAILURE_RATE),
  205. fields: ['failure_rate()'],
  206. dataType: GenericPerformanceWidgetDataType.AREA,
  207. chartColor: WIDGET_PALETTE[2],
  208. allowsOpenInDiscover: true,
  209. },
  210. [PerformanceWidgetSetting.USER_MISERY_AREA]: {
  211. title: t('User Misery'),
  212. titleTooltip: getTermHelp(organization, PerformanceTerm.USER_MISERY),
  213. fields: [`user_misery()`],
  214. dataType: GenericPerformanceWidgetDataType.AREA,
  215. chartColor: WIDGET_PALETTE[0],
  216. allowsOpenInDiscover: true,
  217. },
  218. [PerformanceWidgetSetting.COLD_STARTUP_AREA]: {
  219. title: t('Cold Startup Time'),
  220. titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_COLD),
  221. fields: ['p75(measurements.app_start_cold)'],
  222. dataType: GenericPerformanceWidgetDataType.AREA,
  223. chartColor: WIDGET_PALETTE[4],
  224. allowsOpenInDiscover: true,
  225. },
  226. [PerformanceWidgetSetting.WARM_STARTUP_AREA]: {
  227. title: t('Warm Startup Time'),
  228. titleTooltip: getTermHelp(organization, PerformanceTerm.APP_START_WARM),
  229. fields: ['p75(measurements.app_start_warm)'],
  230. dataType: GenericPerformanceWidgetDataType.AREA,
  231. chartColor: WIDGET_PALETTE[3],
  232. allowsOpenInDiscover: true,
  233. },
  234. [PerformanceWidgetSetting.SLOW_FRAMES_AREA]: {
  235. title: t('Slow Frames'),
  236. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES),
  237. fields: ['p75(measurements.frames_slow_rate)'],
  238. dataType: GenericPerformanceWidgetDataType.AREA,
  239. chartColor: WIDGET_PALETTE[0],
  240. allowsOpenInDiscover: true,
  241. },
  242. [PerformanceWidgetSetting.FROZEN_FRAMES_AREA]: {
  243. title: t('Frozen Frames'),
  244. titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES),
  245. fields: ['p75(measurements.frames_frozen_rate)'],
  246. dataType: GenericPerformanceWidgetDataType.AREA,
  247. chartColor: WIDGET_PALETTE[5],
  248. allowsOpenInDiscover: true,
  249. },
  250. [PerformanceWidgetSetting.MOST_RELATED_ERRORS]: {
  251. title: t('Most Related Errors'),
  252. titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ERRORS),
  253. fields: [`failure_count()`],
  254. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  255. chartColor: WIDGET_PALETTE[0],
  256. },
  257. [PerformanceWidgetSetting.MOST_RELATED_ISSUES]: {
  258. title: t('Most Related Issues'),
  259. titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_ISSUES),
  260. fields: [`count()`],
  261. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  262. chartColor: WIDGET_PALETTE[0],
  263. },
  264. [PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES]: {
  265. title: t('Most Time-Consuming Queries'),
  266. subTitle: t('Top queries by total duration'),
  267. titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_SPENT_DB_QUERIES),
  268. fields: [`time_spent_percentage()`],
  269. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  270. chartColor: WIDGET_PALETTE[0],
  271. },
  272. [PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES]: {
  273. title: t('Most Time Consuming Resources'),
  274. subTitle: t('Render blocking for pages'),
  275. titleTooltip: getTermHelp(
  276. organization,
  277. PerformanceTerm.MOST_TIME_CONSUMING_RESOURCES
  278. ),
  279. fields: [`time_spent_percentage()`],
  280. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  281. chartColor: WIDGET_PALETTE[0],
  282. },
  283. [PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS]: {
  284. title: t('Highest Cache Miss Rates'),
  285. subTitle: t('Suggested Transactions'),
  286. titleTooltip: getTermHelp(
  287. organization,
  288. PerformanceTerm.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS
  289. ),
  290. fields: [`cache_miss_rate()`],
  291. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  292. chartColor: WIDGET_PALETTE[0],
  293. },
  294. [PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS]: {
  295. title: t('Most Time-Consuming Domains'),
  296. subTitle: t('Top outgoing HTTP request domains by time spent'),
  297. titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_CONSUMING_DOMAINS),
  298. fields: [`time_spent_percentage()`],
  299. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  300. chartColor: WIDGET_PALETTE[0],
  301. },
  302. [PerformanceWidgetSetting.HIGHEST_OPPORTUNITY_PAGES]: {
  303. title: t('Best Page Opportunities'),
  304. subTitle: t('Pages to improve your performance score'),
  305. titleTooltip: '',
  306. fields: [`count()`],
  307. dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE_LIST,
  308. },
  309. [PerformanceWidgetSetting.OVERALL_PERFORMANCE_SCORE]: {
  310. title: t('Performance Score'),
  311. subTitle: t('The overall performance score across selected frontend projects only'),
  312. titleTooltip: '',
  313. fields: [],
  314. dataType: GenericPerformanceWidgetDataType.PERFORMANCE_SCORE,
  315. },
  316. [PerformanceWidgetSetting.SLOW_HTTP_OPS]: {
  317. title: t('Slow HTTP Ops'),
  318. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS),
  319. fields: [`p75(spans.http)`, 'p75(spans.db)'],
  320. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  321. chartColor: WIDGET_PALETTE[0],
  322. },
  323. [PerformanceWidgetSetting.SLOW_BROWSER_OPS]: {
  324. title: t('Slow Browser Ops'),
  325. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS),
  326. fields: [`p75(spans.browser)`],
  327. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  328. chartColor: WIDGET_PALETTE[0],
  329. },
  330. [PerformanceWidgetSetting.SLOW_RESOURCE_OPS]: {
  331. title: t('Slow Resource Ops'),
  332. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS),
  333. fields: [`p75(spans.resource)`],
  334. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  335. chartColor: WIDGET_PALETTE[0],
  336. },
  337. [PerformanceWidgetSetting.SLOW_DB_OPS]: {
  338. title: t('Slow DB Ops'),
  339. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS),
  340. fields: [`p75(spans.db)`, 'p75(spans.http)'],
  341. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  342. chartColor: WIDGET_PALETTE[0],
  343. },
  344. [PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY]: {
  345. title: t('Time to Initial Display'),
  346. titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_INITIAL_DISPLAY),
  347. fields: ['p75(measurements.time_to_initial_display)'],
  348. dataType: GenericPerformanceWidgetDataType.AREA,
  349. chartColor: WIDGET_PALETTE[4],
  350. allowsOpenInDiscover: true,
  351. },
  352. [PerformanceWidgetSetting.TIME_TO_FULL_DISPLAY]: {
  353. title: t('Time to Full Display'),
  354. titleTooltip: getTermHelp(organization, PerformanceTerm.TIME_TO_FULL_DISPLAY),
  355. fields: ['p75(measurements.time_to_full_display)'],
  356. dataType: GenericPerformanceWidgetDataType.AREA,
  357. chartColor: WIDGET_PALETTE[4],
  358. allowsOpenInDiscover: true,
  359. },
  360. [PerformanceWidgetSetting.MOST_SLOW_FRAMES]: {
  361. title: t('Most Slow Frames'),
  362. titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_FRAMES),
  363. fields: ['avg(measurements.frames_slow)'],
  364. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  365. chartColor: WIDGET_PALETTE[0],
  366. },
  367. [PerformanceWidgetSetting.MOST_FROZEN_FRAMES]: {
  368. title: t('Most Frozen Frames'),
  369. titleTooltip: getTermHelp(organization, PerformanceTerm.FROZEN_FRAMES),
  370. fields: ['avg(measurements.frames_frozen)'],
  371. dataType: GenericPerformanceWidgetDataType.LINE_LIST,
  372. chartColor: WIDGET_PALETTE[0],
  373. },
  374. [PerformanceWidgetSetting.MOST_IMPROVED]: {
  375. title: t('Most Improved (P95)'),
  376. titleTooltip: t(
  377. 'This compares the baseline (%s) of the past with the present.',
  378. 'improved'
  379. ),
  380. fields: [],
  381. dataType: GenericPerformanceWidgetDataType.TRENDS,
  382. },
  383. [PerformanceWidgetSetting.MOST_REGRESSED]: {
  384. title: t('Most Regressed (P95)'),
  385. titleTooltip: t(
  386. 'This compares the baseline (%s) of the past with the present.',
  387. 'regressed'
  388. ),
  389. fields: [],
  390. dataType: GenericPerformanceWidgetDataType.TRENDS,
  391. },
  392. [PerformanceWidgetSetting.MOST_CHANGED]: {
  393. title: t('Most Changed (P95)'),
  394. titleTooltip: t(
  395. 'This compares the baseline (%s) of the past with the present.',
  396. 'changed'
  397. ),
  398. fields: [],
  399. dataType: GenericPerformanceWidgetDataType.TRENDS,
  400. },
  401. [PerformanceWidgetSetting.SPAN_OPERATIONS]: {
  402. title: t('Span Operations Breakdown'),
  403. titleTooltip: '',
  404. fields: SPAN_OP_BREAKDOWN_FIELDS.map(spanOp => `p75(${spanOp})`),
  405. dataType: GenericPerformanceWidgetDataType.STACKED_AREA,
  406. },
  407. [PerformanceWidgetSetting.SLOW_SCREENS_BY_TTID]: {
  408. title: t('Average TTIDs'),
  409. titleTooltip: '',
  410. subTitle: t('Top screens by count'),
  411. fields: ['avg(measurements.time_to_initial_display)'],
  412. dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_TTID,
  413. },
  414. [PerformanceWidgetSetting.SLOW_SCREENS_BY_COLD_START]: {
  415. title: t('Average Cold Start'),
  416. titleTooltip: '',
  417. subTitle: t('Top screens by start count'),
  418. fields: ['avg(measurements.app_start_cold)'],
  419. dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_COLD_START,
  420. },
  421. [PerformanceWidgetSetting.SLOW_SCREENS_BY_WARM_START]: {
  422. title: t('Average Warm Start'),
  423. titleTooltip: '',
  424. subTitle: t('Top screens by start count'),
  425. fields: ['avg(measurements.app_start_warm)'],
  426. dataType: GenericPerformanceWidgetDataType.SLOW_SCREENS_BY_WARM_START,
  427. },
  428. });