data.tsx 27 KB

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