data.tsx 24 KB

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