pagePerformanceTable.tsx 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. import {useMemo, useState} from 'react';
  2. import {Link} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
  5. import GridEditable, {
  6. COL_WIDTH_UNDEFINED,
  7. GridColumnHeader,
  8. GridColumnOrder,
  9. } from 'sentry/components/gridEditable';
  10. import SearchBar from 'sentry/components/searchBar';
  11. import {Tooltip} from 'sentry/components/tooltip';
  12. import {t} from 'sentry/locale';
  13. import {space} from 'sentry/styles/space';
  14. import {formatAbbreviatedNumber, getDuration} from 'sentry/utils/formatters';
  15. import {useLocation} from 'sentry/utils/useLocation';
  16. import useProjects from 'sentry/utils/useProjects';
  17. import {PerformanceBadge} from 'sentry/views/performance/browser/webVitals/components/performanceBadge';
  18. import {calculateOpportunity} from 'sentry/views/performance/browser/webVitals/utils/calculateOpportunity';
  19. import {calculatePerformanceScore} from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
  20. import {Row} from 'sentry/views/performance/browser/webVitals/utils/types';
  21. import {useProjectWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/useProjectWebVitalsQuery';
  22. import {useTransactionWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/useTransactionWebVitalsQuery';
  23. type RowWithScoreAndOpportunity = Row & {opportunity: number; score: number};
  24. type Column = GridColumnHeader<keyof RowWithScoreAndOpportunity>;
  25. const columnOrder: GridColumnOrder<keyof RowWithScoreAndOpportunity>[] = [
  26. {key: 'transaction', width: COL_WIDTH_UNDEFINED, name: 'Pages'},
  27. {key: 'count()', width: COL_WIDTH_UNDEFINED, name: 'Pageloads'},
  28. {key: 'p75(measurements.lcp)', width: COL_WIDTH_UNDEFINED, name: 'LCP'},
  29. {key: 'p75(measurements.fcp)', width: COL_WIDTH_UNDEFINED, name: 'FCP'},
  30. {key: 'p75(measurements.fid)', width: COL_WIDTH_UNDEFINED, name: 'FID'},
  31. {key: 'p75(measurements.cls)', width: COL_WIDTH_UNDEFINED, name: 'CLS'},
  32. {key: 'p75(measurements.ttfb)', width: COL_WIDTH_UNDEFINED, name: 'TTFB'},
  33. {key: 'score', width: COL_WIDTH_UNDEFINED, name: 'Score'},
  34. {key: 'opportunity', width: COL_WIDTH_UNDEFINED, name: 'Opportunity'},
  35. ];
  36. export function PagePerformanceTable() {
  37. const location = useLocation();
  38. const {projects} = useProjects();
  39. const [search, setSearch] = useState<string | undefined>(undefined);
  40. const project = useMemo(
  41. () => projects.find(p => p.id === String(location.query.project)),
  42. [projects, location.query.project]
  43. );
  44. const {data: projectData, isLoading: isProjectWebVitalsQueryLoading} =
  45. useProjectWebVitalsQuery({transaction: search});
  46. const projectScore = calculatePerformanceScore({
  47. lcp: projectData?.data[0]['p75(measurements.lcp)'] as number,
  48. fcp: projectData?.data[0]['p75(measurements.fcp)'] as number,
  49. cls: projectData?.data[0]['p75(measurements.cls)'] as number,
  50. ttfb: projectData?.data[0]['p75(measurements.ttfb)'] as number,
  51. fid: projectData?.data[0]['p75(measurements.fid)'] as number,
  52. });
  53. const {data, isLoading: isTransactionWebVitalsQueryLoading} =
  54. useTransactionWebVitalsQuery({limit: 10, transaction: search});
  55. const count = projectData?.data[0]['count()'] as number;
  56. const tableData: RowWithScoreAndOpportunity[] = data
  57. .map(row => ({
  58. ...row,
  59. opportunity: calculateOpportunity(
  60. projectScore.totalScore,
  61. count,
  62. row.score,
  63. row['count()']
  64. ),
  65. }))
  66. .sort((a, b) => b.opportunity - a.opportunity);
  67. const getFormattedDuration = (value: number) => {
  68. return getDuration(value, value < 1 ? 0 : 2, true);
  69. };
  70. function renderHeadCell(col: Column) {
  71. if (
  72. [
  73. 'p75(measurements.fcp)',
  74. 'p75(measurements.lcp)',
  75. 'p75(measurements.ttfb)',
  76. 'p75(measurements.fid)',
  77. 'p75(measurements.cls)',
  78. 'count()',
  79. ].includes(col.key)
  80. ) {
  81. return (
  82. <AlignRight>
  83. <span>{col.name}</span>
  84. </AlignRight>
  85. );
  86. }
  87. if (col.key === 'score') {
  88. return (
  89. <AlignCenter>
  90. <span>{col.name}</span>
  91. </AlignCenter>
  92. );
  93. }
  94. if (col.key === 'opportunity') {
  95. return (
  96. <Tooltip
  97. title={t(
  98. 'The biggest opportunities to improve your cumulative performance score.'
  99. )}
  100. >
  101. <OpportunityHeader>{col.name}</OpportunityHeader>
  102. </Tooltip>
  103. );
  104. }
  105. return <span>{col.name}</span>;
  106. }
  107. function renderBodyCell(col: Column, row: RowWithScoreAndOpportunity) {
  108. const {key} = col;
  109. if (key === 'score') {
  110. return (
  111. <AlignCenter>
  112. <PerformanceBadge score={row.score} />
  113. </AlignCenter>
  114. );
  115. }
  116. if (key === 'count()') {
  117. return <AlignRight>{formatAbbreviatedNumber(row['count()'])}</AlignRight>;
  118. }
  119. if (key === 'transaction') {
  120. return (
  121. <NoOverflow>
  122. {project && (
  123. <StyledProjectAvatar
  124. project={project}
  125. direction="left"
  126. size={16}
  127. hasTooltip
  128. tooltip={project.slug}
  129. />
  130. )}
  131. <Link
  132. to={{...location, query: {...location.query, transaction: row.transaction}}}
  133. >
  134. {row.transaction}
  135. </Link>
  136. </NoOverflow>
  137. );
  138. }
  139. if (
  140. [
  141. 'p75(measurements.fcp)',
  142. 'p75(measurements.lcp)',
  143. 'p75(measurements.ttfb)',
  144. 'p75(measurements.fid)',
  145. ].includes(key)
  146. ) {
  147. return <AlignRight>{getFormattedDuration((row[key] as number) / 1000)}</AlignRight>;
  148. }
  149. if (['p75(measurements.cls)', 'opportunity'].includes(key)) {
  150. return <AlignRight>{Math.round((row[key] as number) * 100) / 100}</AlignRight>;
  151. }
  152. return <NoOverflow>{row[key]}</NoOverflow>;
  153. }
  154. return (
  155. <span>
  156. <SearchBarContainer>
  157. <SearchBar
  158. placeholder={t('Search for Pages')}
  159. onSearch={query => {
  160. setSearch(query === '' ? undefined : `*${query}*`);
  161. }}
  162. />
  163. </SearchBarContainer>
  164. <GridContainer>
  165. <GridEditable
  166. isLoading={isProjectWebVitalsQueryLoading || isTransactionWebVitalsQueryLoading}
  167. columnOrder={columnOrder}
  168. columnSortBy={[]}
  169. data={tableData}
  170. grid={{
  171. renderHeadCell,
  172. renderBodyCell,
  173. }}
  174. location={location}
  175. />
  176. </GridContainer>
  177. </span>
  178. );
  179. }
  180. const NoOverflow = styled('span')`
  181. overflow: hidden;
  182. text-overflow: ellipsis;
  183. white-space: nowrap;
  184. `;
  185. const AlignRight = styled('span')<{color?: string}>`
  186. text-align: right;
  187. width: 100%;
  188. ${p => (p.color ? `color: ${p.color};` : '')}
  189. `;
  190. const AlignCenter = styled('span')`
  191. text-align: center;
  192. width: 100%;
  193. `;
  194. const StyledProjectAvatar = styled(ProjectAvatar)`
  195. top: ${space(0.25)};
  196. position: relative;
  197. padding-right: ${space(1)};
  198. `;
  199. const SearchBarContainer = styled('div')`
  200. margin-bottom: ${space(1)};
  201. `;
  202. const GridContainer = styled('div')`
  203. margin-bottom: ${space(1)};
  204. `;
  205. const OpportunityHeader = styled('span')`
  206. ${p => p.theme.tooltipUnderline()};
  207. `;