data.tsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
  1. import {Location} from 'history';
  2. import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
  3. import {wrapQueryInWildcards} from 'sentry/components/performance/searchBar';
  4. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  5. import {t} from 'sentry/locale';
  6. import {NewQuery, Organization, Project, SelectValue} from 'sentry/types';
  7. import EventView from 'sentry/utils/discover/eventView';
  8. import {WEB_VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
  9. import {decodeScalar} from 'sentry/utils/queryString';
  10. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  11. import {getCurrentTrendParameter} from 'sentry/views/performance/trends/utils';
  12. import {getCurrentLandingDisplay, LandingDisplayField} from './landing/utils';
  13. import {
  14. getVitalDetailTableMehStatusFunction,
  15. getVitalDetailTablePoorStatusFunction,
  16. vitalNameFromLocation,
  17. } from './vitalDetail/utils';
  18. export const DEFAULT_STATS_PERIOD = '7d';
  19. export const DEFAULT_PROJECT_THRESHOLD_METRIC = 'duration';
  20. export const DEFAULT_PROJECT_THRESHOLD = 300;
  21. export const COLUMN_TITLES = [
  22. 'transaction',
  23. 'project',
  24. 'tpm',
  25. 'p50',
  26. 'p95',
  27. 'failure rate',
  28. 'apdex',
  29. 'users',
  30. 'user misery',
  31. ];
  32. const TOKEN_KEYS_SUPPORTED_IN_LIMITED_SEARCH = ['transaction'];
  33. export const getDefaultStatsPeriod = (organization: Organization) => {
  34. if (organization?.features?.includes('performance-landing-page-stats-period')) {
  35. return '14d';
  36. }
  37. return DEFAULT_STATS_PERIOD;
  38. };
  39. export enum PERFORMANCE_TERM {
  40. TPM = 'tpm',
  41. THROUGHPUT = 'throughput',
  42. FAILURE_RATE = 'failureRate',
  43. P50 = 'p50',
  44. P75 = 'p75',
  45. P95 = 'p95',
  46. P99 = 'p99',
  47. LCP = 'lcp',
  48. FCP = 'fcp',
  49. FID = 'fid',
  50. CLS = 'cls',
  51. STATUS_BREAKDOWN = 'statusBreakdown',
  52. DURATION_DISTRIBUTION = 'durationDistribution',
  53. USER_MISERY = 'userMisery',
  54. APDEX = 'apdex',
  55. APP_START_COLD = 'appStartCold',
  56. APP_START_WARM = 'appStartWarm',
  57. SLOW_FRAMES = 'slowFrames',
  58. FROZEN_FRAMES = 'frozenFrames',
  59. STALL_PERCENTAGE = 'stallPercentage',
  60. MOST_ISSUES = 'mostIssues',
  61. MOST_ERRORS = 'mostErrors',
  62. SLOW_HTTP_SPANS = 'slowHTTPSpans',
  63. }
  64. export type TooltipOption = SelectValue<string> & {
  65. tooltip: string;
  66. };
  67. export function getAxisOptions(organization: Organization): TooltipOption[] {
  68. return [
  69. {
  70. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APDEX),
  71. value: 'apdex()',
  72. label: t('Apdex'),
  73. },
  74. {
  75. tooltip: getTermHelp(organization, PERFORMANCE_TERM.TPM),
  76. value: 'tpm()',
  77. label: t('Transactions Per Minute'),
  78. },
  79. {
  80. tooltip: getTermHelp(organization, PERFORMANCE_TERM.FAILURE_RATE),
  81. value: 'failure_rate()',
  82. label: t('Failure Rate'),
  83. },
  84. {
  85. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P50),
  86. value: 'p50()',
  87. label: t('p50 Duration'),
  88. },
  89. {
  90. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P95),
  91. value: 'p95()',
  92. label: t('p95 Duration'),
  93. },
  94. {
  95. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P99),
  96. value: 'p99()',
  97. label: t('p99 Duration'),
  98. },
  99. ];
  100. }
  101. export type AxisOption = TooltipOption & {
  102. field: string;
  103. label: string;
  104. backupOption?: AxisOption;
  105. isDistribution?: boolean;
  106. isLeftDefault?: boolean;
  107. isRightDefault?: boolean;
  108. };
  109. export function getFrontendAxisOptions(organization: Organization): AxisOption[] {
  110. return [
  111. {
  112. tooltip: getTermHelp(organization, PERFORMANCE_TERM.LCP),
  113. value: `p75(lcp)`,
  114. label: t('LCP p75'),
  115. field: 'p75(measurements.lcp)',
  116. isLeftDefault: true,
  117. backupOption: {
  118. tooltip: getTermHelp(organization, PERFORMANCE_TERM.FCP),
  119. value: `p75(fcp)`,
  120. label: t('FCP p75'),
  121. field: 'p75(measurements.fcp)',
  122. },
  123. },
  124. {
  125. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  126. value: 'lcp_distribution',
  127. label: t('LCP Distribution'),
  128. field: 'measurements.lcp',
  129. isDistribution: true,
  130. isRightDefault: true,
  131. backupOption: {
  132. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  133. value: 'fcp_distribution',
  134. label: t('FCP Distribution'),
  135. field: 'measurements.fcp',
  136. isDistribution: true,
  137. },
  138. },
  139. {
  140. tooltip: getTermHelp(organization, PERFORMANCE_TERM.TPM),
  141. value: 'tpm()',
  142. label: t('Transactions Per Minute'),
  143. field: 'tpm()',
  144. },
  145. ];
  146. }
  147. export function getFrontendOtherAxisOptions(organization: Organization): AxisOption[] {
  148. return [
  149. {
  150. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P50),
  151. value: `p50()`,
  152. label: t('Duration p50'),
  153. field: 'p50(transaction.duration)',
  154. },
  155. {
  156. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P75),
  157. value: `p75()`,
  158. label: t('Duration p75'),
  159. field: 'p75(transaction.duration)',
  160. isLeftDefault: true,
  161. },
  162. {
  163. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P95),
  164. value: `p95()`,
  165. label: t('Duration p95'),
  166. field: 'p95(transaction.duration)',
  167. },
  168. {
  169. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  170. value: 'duration_distribution',
  171. label: t('Duration Distribution'),
  172. field: 'transaction.duration',
  173. isDistribution: true,
  174. isRightDefault: true,
  175. },
  176. ];
  177. }
  178. export function getBackendAxisOptions(organization: Organization): AxisOption[] {
  179. return [
  180. {
  181. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P50),
  182. value: `p50()`,
  183. label: t('Duration p50'),
  184. field: 'p50(transaction.duration)',
  185. },
  186. {
  187. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P75),
  188. value: `p75()`,
  189. label: t('Duration p75'),
  190. field: 'p75(transaction.duration)',
  191. isLeftDefault: true,
  192. },
  193. {
  194. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P95),
  195. value: `p95()`,
  196. label: t('Duration p95'),
  197. field: 'p95(transaction.duration)',
  198. },
  199. {
  200. tooltip: getTermHelp(organization, PERFORMANCE_TERM.P99),
  201. value: `p99()`,
  202. label: t('Duration p99'),
  203. field: 'p99(transaction.duration)',
  204. },
  205. {
  206. tooltip: getTermHelp(organization, PERFORMANCE_TERM.TPM),
  207. value: 'tpm()',
  208. label: t('Transactions Per Minute'),
  209. field: 'tpm()',
  210. },
  211. {
  212. tooltip: getTermHelp(organization, PERFORMANCE_TERM.FAILURE_RATE),
  213. value: 'failure_rate()',
  214. label: t('Failure Rate'),
  215. field: 'failure_rate()',
  216. },
  217. {
  218. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  219. value: 'duration_distribution',
  220. label: t('Duration Distribution'),
  221. field: 'transaction.duration',
  222. isDistribution: true,
  223. isRightDefault: true,
  224. },
  225. {
  226. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APDEX),
  227. value: 'apdex()',
  228. label: t('Apdex'),
  229. field: 'apdex()',
  230. },
  231. ];
  232. }
  233. export function getMobileAxisOptions(organization: Organization): AxisOption[] {
  234. return [
  235. {
  236. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_COLD),
  237. value: `p50(measurements.app_start_cold)`,
  238. label: t('Cold Start Duration p50'),
  239. field: 'p50(measurements.app_start_cold)',
  240. },
  241. {
  242. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_COLD),
  243. value: `p75(measurements.app_start_cold)`,
  244. label: t('Cold Start Duration p75'),
  245. field: 'p75(measurements.app_start_cold)',
  246. isLeftDefault: true,
  247. },
  248. {
  249. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_COLD),
  250. value: `p95(measurements.app_start_cold)`,
  251. label: t('Cold Start Duration p95'),
  252. field: 'p95(measurements.app_start_cold)',
  253. },
  254. {
  255. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_COLD),
  256. value: `p99(measurements.app_start_cold)`,
  257. label: t('Cold Start Duration p99'),
  258. field: 'p99(measurements.app_start_cold)',
  259. },
  260. {
  261. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  262. value: 'app_start_cold_distribution',
  263. label: t('Cold Start Distribution'),
  264. field: 'measurements.app_start_cold',
  265. isDistribution: true,
  266. isRightDefault: true,
  267. },
  268. {
  269. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_WARM),
  270. value: `p50(measurements.app_start_warm)`,
  271. label: t('Warm Start Duration p50'),
  272. field: 'p50(measurements.app_start_warm)',
  273. },
  274. {
  275. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_WARM),
  276. value: `p75(measurements.app_start_warm)`,
  277. label: t('Warm Start Duration p75'),
  278. field: 'p75(measurements.app_start_warm)',
  279. },
  280. {
  281. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_WARM),
  282. value: `p95(measurements.app_start_warm)`,
  283. label: t('Warm Start Duration p95'),
  284. field: 'p95(measurements.app_start_warm)',
  285. },
  286. {
  287. tooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_WARM),
  288. value: `p99(measurements.app_start_warm)`,
  289. label: t('Warm Start Duration p99'),
  290. field: 'p99(measurements.app_start_warm)',
  291. },
  292. {
  293. tooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
  294. value: 'app_start_warm_distribution',
  295. label: t('Warm Start Distribution'),
  296. field: 'measurements.app_start_warm',
  297. isDistribution: true,
  298. },
  299. {
  300. tooltip: getTermHelp(organization, PERFORMANCE_TERM.TPM),
  301. value: 'tpm()',
  302. label: t('Transactions Per Minute'),
  303. field: 'tpm()',
  304. },
  305. {
  306. tooltip: getTermHelp(organization, PERFORMANCE_TERM.FAILURE_RATE),
  307. value: 'failure_rate()',
  308. label: t('Failure Rate'),
  309. field: 'failure_rate()',
  310. },
  311. ];
  312. }
  313. type TermFormatter = (organization: Organization) => string;
  314. export const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
  315. tpm: () => t('TPM is the number of recorded transaction events per minute.'),
  316. throughput: () =>
  317. t('Throughput is the number of recorded transaction events per minute.'),
  318. failureRate: () =>
  319. t(
  320. 'Failure rate is the percentage of recorded transactions that had a known and unsuccessful status.'
  321. ),
  322. p50: () => t('p50 indicates the duration that 50% of transactions are faster than.'),
  323. p75: () => t('p75 indicates the duration that 75% of transactions are faster than.'),
  324. p95: () => t('p95 indicates the duration that 95% of transactions are faster than.'),
  325. p99: () => t('p99 indicates the duration that 99% of transactions are faster than.'),
  326. lcp: () =>
  327. t('Largest contentful paint (LCP) is a web vital meant to represent user load times'),
  328. fcp: () =>
  329. t('First contentful paint (FCP) is a web vital meant to represent user load times'),
  330. fid: () =>
  331. t(
  332. 'First input delay (FID) is a web vital representing load for the first user interaction on a page.'
  333. ),
  334. cls: () =>
  335. t(
  336. 'Cumulative layout shift (CLS) is a web vital measuring unexpected visual shifting a user experiences.'
  337. ),
  338. statusBreakdown: () =>
  339. t(
  340. 'The breakdown of transaction statuses. This may indicate what type of failure it is.'
  341. ),
  342. durationDistribution: () =>
  343. t(
  344. 'Distribution buckets counts of transactions at specifics times for your current date range'
  345. ),
  346. userMisery: () =>
  347. t(
  348. "User Misery is a score that represents the number of unique users who have experienced load times 4x the project's configured threshold. Adjust project threshold in project performance settings."
  349. ),
  350. apdex: () =>
  351. t(
  352. 'Apdex is the ratio of both satisfactory and tolerable response times to all response times. To adjust the tolerable threshold, go to project performance settings.'
  353. ),
  354. appStartCold: () =>
  355. t('Cold start is a measure of the application start up time from scratch.'),
  356. appStartWarm: () =>
  357. t('Warm start is a measure of the application start up time while still in memory.'),
  358. slowFrames: () => t('The count of the number of slow frames in the transaction.'),
  359. frozenFrames: () => t('The count of the number of frozen frames in the transaction.'),
  360. mostErrors: () => t('Transactions with the most associated errors.'),
  361. mostIssues: () => t('The most instances of an issue for a related transaction.'),
  362. slowHTTPSpans: () => t('The transactions with the slowest spans of a certain type.'),
  363. stallPercentage: () =>
  364. t(
  365. 'The percentage of the transaction duration in which the application is in a stalled state.'
  366. ),
  367. };
  368. export function getTermHelp(
  369. organization: Organization,
  370. term: keyof typeof PERFORMANCE_TERMS
  371. ): string {
  372. if (!PERFORMANCE_TERMS.hasOwnProperty(term)) {
  373. return '';
  374. }
  375. return PERFORMANCE_TERMS[term](organization);
  376. }
  377. function prepareQueryForLandingPage(searchQuery, withStaticFilters) {
  378. const conditions = new MutableSearch(searchQuery);
  379. // If there is a bare text search, we want to treat it as a search
  380. // on the transaction name.
  381. if (conditions.freeText.length > 0) {
  382. const parsedFreeText = conditions.freeText.join(' ');
  383. // the query here is a user entered condition, no need to escape it
  384. conditions.setFilterValues(
  385. 'transaction',
  386. [wrapQueryInWildcards(parsedFreeText)],
  387. false
  388. );
  389. conditions.freeText = [];
  390. }
  391. if (withStaticFilters) {
  392. conditions.tokens = conditions.tokens.filter(
  393. token => token.key && TOKEN_KEYS_SUPPORTED_IN_LIMITED_SEARCH.includes(token.key)
  394. );
  395. }
  396. return conditions.formatString();
  397. }
  398. function generateGenericPerformanceEventView(
  399. location: Location,
  400. withStaticFilters: boolean,
  401. organization: Organization
  402. ): EventView {
  403. const {query} = location;
  404. const fields = [
  405. 'team_key_transaction',
  406. 'transaction',
  407. 'project',
  408. 'tpm()',
  409. 'p50()',
  410. 'p95()',
  411. 'failure_rate()',
  412. 'apdex()',
  413. 'count_unique(user)',
  414. 'count_miserable(user)',
  415. 'user_misery()',
  416. ];
  417. const hasStartAndEnd = query.start && query.end;
  418. const savedQuery: NewQuery = {
  419. id: undefined,
  420. name: t('Performance'),
  421. query: 'event.type:transaction',
  422. projects: [],
  423. fields,
  424. version: 2,
  425. };
  426. const widths = Array(savedQuery.fields.length).fill(COL_WIDTH_UNDEFINED);
  427. widths[savedQuery.fields.length - 1] = '110';
  428. savedQuery.widths = widths;
  429. if (!query.statsPeriod && !hasStartAndEnd) {
  430. savedQuery.range = getDefaultStatsPeriod(organization);
  431. }
  432. savedQuery.orderby = decodeScalar(query.sort, '-tpm');
  433. const searchQuery = decodeScalar(query.query, '');
  434. savedQuery.query = prepareQueryForLandingPage(searchQuery, withStaticFilters);
  435. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  436. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  437. if (query.trendParameter) {
  438. // projects and projectIds are not necessary here since trendParameter will always
  439. // be present in location and will not be determined based on the project type
  440. const trendParameter = getCurrentTrendParameter(location, [], []);
  441. if (WEB_VITAL_DETAILS[trendParameter.column]) {
  442. eventView.additionalConditions.addFilterValues('has', [trendParameter.column]);
  443. }
  444. }
  445. return eventView;
  446. }
  447. function generateBackendPerformanceEventView(
  448. location: Location,
  449. withStaticFilters: boolean,
  450. organization: Organization
  451. ): EventView {
  452. const {query} = location;
  453. const fields = [
  454. 'team_key_transaction',
  455. 'transaction',
  456. 'project',
  457. 'transaction.op',
  458. 'http.method',
  459. 'tpm()',
  460. 'p50()',
  461. 'p95()',
  462. 'failure_rate()',
  463. 'apdex()',
  464. 'count_unique(user)',
  465. 'count_miserable(user)',
  466. 'user_misery()',
  467. ];
  468. const hasStartAndEnd = query.start && query.end;
  469. const savedQuery: NewQuery = {
  470. id: undefined,
  471. name: t('Performance'),
  472. query: 'event.type:transaction',
  473. projects: [],
  474. fields,
  475. version: 2,
  476. };
  477. const widths = Array(savedQuery.fields.length).fill(COL_WIDTH_UNDEFINED);
  478. widths[savedQuery.fields.length - 1] = '110';
  479. savedQuery.widths = widths;
  480. if (!query.statsPeriod && !hasStartAndEnd) {
  481. savedQuery.range = getDefaultStatsPeriod(organization);
  482. }
  483. savedQuery.orderby = decodeScalar(query.sort, '-tpm');
  484. const searchQuery = decodeScalar(query.query, '');
  485. savedQuery.query = prepareQueryForLandingPage(searchQuery, withStaticFilters);
  486. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  487. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  488. return eventView;
  489. }
  490. function generateMobilePerformanceEventView(
  491. location: Location,
  492. projects: Project[],
  493. genericEventView: EventView,
  494. withStaticFilters: boolean,
  495. organization: Organization
  496. ): EventView {
  497. const {query} = location;
  498. const fields = [
  499. 'team_key_transaction',
  500. 'transaction',
  501. 'project',
  502. 'transaction.op',
  503. 'tpm()',
  504. 'p75(measurements.frames_slow_rate)',
  505. 'p75(measurements.frames_frozen_rate)',
  506. ];
  507. // At this point, all projects are mobile projects.
  508. // If in addition to that, all projects are react-native projects,
  509. // then show the stall percentage as well.
  510. const projectIds = genericEventView.project;
  511. if (projectIds.length > 0 && projectIds[0] !== ALL_ACCESS_PROJECTS) {
  512. const selectedProjects = projects.filter(p =>
  513. projectIds.includes(parseInt(p.id, 10))
  514. );
  515. if (
  516. selectedProjects.length > 0 &&
  517. selectedProjects.every(project => project.platform === 'react-native')
  518. ) {
  519. fields.push('p75(measurements.stall_percentage)');
  520. }
  521. }
  522. const hasStartAndEnd = query.start && query.end;
  523. const savedQuery: NewQuery = {
  524. id: undefined,
  525. name: t('Performance'),
  526. query: 'event.type:transaction',
  527. projects: [],
  528. fields: [...fields, 'count_unique(user)', 'count_miserable(user)', 'user_misery()'],
  529. version: 2,
  530. };
  531. const widths = Array(savedQuery.fields.length).fill(COL_WIDTH_UNDEFINED);
  532. widths[savedQuery.fields.length - 1] = '110';
  533. savedQuery.widths = widths;
  534. if (!query.statsPeriod && !hasStartAndEnd) {
  535. savedQuery.range = getDefaultStatsPeriod(organization);
  536. }
  537. savedQuery.orderby = decodeScalar(query.sort, '-tpm');
  538. const searchQuery = decodeScalar(query.query, '');
  539. savedQuery.query = prepareQueryForLandingPage(searchQuery, withStaticFilters);
  540. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  541. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  542. return eventView;
  543. }
  544. function generateFrontendPageloadPerformanceEventView(
  545. location: Location,
  546. withStaticFilters: boolean,
  547. organization: Organization
  548. ): EventView {
  549. const {query} = location;
  550. const fields = [
  551. 'team_key_transaction',
  552. 'transaction',
  553. 'project',
  554. 'tpm()',
  555. 'p75(measurements.fcp)',
  556. 'p75(measurements.lcp)',
  557. 'p75(measurements.fid)',
  558. 'p75(measurements.cls)',
  559. 'count_unique(user)',
  560. 'count_miserable(user)',
  561. 'user_misery()',
  562. ];
  563. const hasStartAndEnd = query.start && query.end;
  564. const savedQuery: NewQuery = {
  565. id: undefined,
  566. name: t('Performance'),
  567. query: 'event.type:transaction',
  568. projects: [],
  569. fields,
  570. version: 2,
  571. };
  572. const widths = Array(savedQuery.fields.length).fill(COL_WIDTH_UNDEFINED);
  573. widths[savedQuery.fields.length - 1] = '110';
  574. savedQuery.widths = widths;
  575. if (!query.statsPeriod && !hasStartAndEnd) {
  576. savedQuery.range = getDefaultStatsPeriod(organization);
  577. }
  578. savedQuery.orderby = decodeScalar(query.sort, '-tpm');
  579. const searchQuery = decodeScalar(query.query, '');
  580. savedQuery.query = prepareQueryForLandingPage(searchQuery, withStaticFilters);
  581. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  582. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  583. eventView.additionalConditions.addFilterValues('transaction.op', ['pageload']);
  584. return eventView;
  585. }
  586. function generateFrontendOtherPerformanceEventView(
  587. location: Location,
  588. withStaticFilters: boolean,
  589. organization: Organization
  590. ): EventView {
  591. const {query} = location;
  592. const fields = [
  593. 'team_key_transaction',
  594. 'transaction',
  595. 'project',
  596. 'transaction.op',
  597. 'tpm()',
  598. 'p50(transaction.duration)',
  599. 'p75(transaction.duration)',
  600. 'p95(transaction.duration)',
  601. 'count_unique(user)',
  602. 'count_miserable(user)',
  603. 'user_misery()',
  604. ];
  605. const hasStartAndEnd = query.start && query.end;
  606. const savedQuery: NewQuery = {
  607. id: undefined,
  608. name: t('Performance'),
  609. query: 'event.type:transaction',
  610. projects: [],
  611. fields,
  612. version: 2,
  613. };
  614. const widths = Array(savedQuery.fields.length).fill(COL_WIDTH_UNDEFINED);
  615. widths[savedQuery.fields.length - 1] = '110';
  616. savedQuery.widths = widths;
  617. if (!query.statsPeriod && !hasStartAndEnd) {
  618. savedQuery.range = getDefaultStatsPeriod(organization);
  619. }
  620. savedQuery.orderby = decodeScalar(query.sort, '-tpm');
  621. const searchQuery = decodeScalar(query.query, '');
  622. savedQuery.query = prepareQueryForLandingPage(searchQuery, withStaticFilters);
  623. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  624. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  625. return eventView;
  626. }
  627. export function generatePerformanceEventView(
  628. location: Location,
  629. projects: Project[],
  630. {isTrends = false, withStaticFilters = false} = {},
  631. organization: Organization
  632. ) {
  633. const eventView = generateGenericPerformanceEventView(
  634. location,
  635. withStaticFilters,
  636. organization
  637. );
  638. if (isTrends) {
  639. return eventView;
  640. }
  641. const display = getCurrentLandingDisplay(location, projects, eventView);
  642. switch (display?.field) {
  643. case LandingDisplayField.FRONTEND_PAGELOAD:
  644. return generateFrontendPageloadPerformanceEventView(
  645. location,
  646. withStaticFilters,
  647. organization
  648. );
  649. case LandingDisplayField.FRONTEND_OTHER:
  650. return generateFrontendOtherPerformanceEventView(
  651. location,
  652. withStaticFilters,
  653. organization
  654. );
  655. case LandingDisplayField.BACKEND:
  656. return generateBackendPerformanceEventView(
  657. location,
  658. withStaticFilters,
  659. organization
  660. );
  661. case LandingDisplayField.MOBILE:
  662. return generateMobilePerformanceEventView(
  663. location,
  664. projects,
  665. eventView,
  666. withStaticFilters,
  667. organization
  668. );
  669. default:
  670. return eventView;
  671. }
  672. }
  673. export function generatePerformanceVitalDetailView(
  674. location: Location,
  675. organization: Organization
  676. ): EventView {
  677. const {query} = location;
  678. const vitalName = vitalNameFromLocation(location);
  679. const hasStartAndEnd = query.start && query.end;
  680. const savedQuery: NewQuery = {
  681. id: undefined,
  682. name: t('Vitals Performance Details'),
  683. query: 'event.type:transaction',
  684. projects: [],
  685. fields: [
  686. 'team_key_transaction',
  687. 'transaction',
  688. 'project',
  689. 'count_unique(user)',
  690. 'count()',
  691. `p50(${vitalName})`,
  692. `p75(${vitalName})`,
  693. `p95(${vitalName})`,
  694. getVitalDetailTablePoorStatusFunction(vitalName),
  695. getVitalDetailTableMehStatusFunction(vitalName),
  696. ],
  697. version: 2,
  698. yAxis: [`p75(${vitalName})`],
  699. };
  700. if (!query.statsPeriod && !hasStartAndEnd) {
  701. savedQuery.range = getDefaultStatsPeriod(organization);
  702. }
  703. savedQuery.orderby = decodeScalar(query.sort, '-count');
  704. const searchQuery = decodeScalar(query.query, '');
  705. savedQuery.query = prepareQueryForLandingPage(searchQuery, false);
  706. const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
  707. eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
  708. eventView.additionalConditions.addFilterValues('has', [vitalName]);
  709. return eventView;
  710. }