pageOverviewSidebar.tsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. import {Fragment} from 'react';
  2. import {useTheme} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import ChartZoom from 'sentry/components/charts/chartZoom';
  5. import {LineChart, LineChartSeries} from 'sentry/components/charts/lineChart';
  6. import QuestionTooltip from 'sentry/components/questionTooltip';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import {getDuration} from 'sentry/utils/formatters';
  10. import usePageFilters from 'sentry/utils/usePageFilters';
  11. import useRouter from 'sentry/utils/useRouter';
  12. import {MiniAggregateWaterfall} from 'sentry/views/performance/browser/webVitals/components/miniAggregateWaterfall';
  13. import {ProjectScore} from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
  14. import {useProjectWebVitalsQuery} from 'sentry/views/performance/browser/webVitals/utils/useProjectWebVitalsQuery';
  15. import {useProjectWebVitalsValuesTimeseriesQuery} from 'sentry/views/performance/browser/webVitals/utils/useProjectWebVitalsValuesTimeseriesQuery';
  16. import {SidebarSpacer} from 'sentry/views/performance/transactionSummary/utils';
  17. const CHART_HEIGHTS = 100;
  18. type Props = {
  19. transaction: string;
  20. projectScore?: ProjectScore;
  21. };
  22. export function PageOverviewSidebar({projectScore, transaction}: Props) {
  23. const theme = useTheme();
  24. const router = useRouter();
  25. const pageFilters = usePageFilters();
  26. const {period, start, end, utc} = pageFilters.selection.datetime;
  27. const {data: pageData} = useProjectWebVitalsQuery({transaction});
  28. const {data: seriesData, isLoading: isLoadingSeries} =
  29. useProjectWebVitalsValuesTimeseriesQuery({transaction});
  30. const throughtputData: LineChartSeries[] = [
  31. {
  32. data: !isLoadingSeries
  33. ? seriesData.eps.map(({name, value}) => ({
  34. name,
  35. value,
  36. }))
  37. : [],
  38. seriesName: 'Throughput',
  39. },
  40. ];
  41. const durationData: LineChartSeries[] = [
  42. {
  43. data: !isLoadingSeries
  44. ? seriesData.duration.map(({name, value}) => ({
  45. name,
  46. value,
  47. }))
  48. : [],
  49. seriesName: 'Duration',
  50. },
  51. ];
  52. const errorData: LineChartSeries[] = [
  53. {
  54. data: !isLoadingSeries
  55. ? seriesData.errors.map(({name, value}) => ({
  56. name,
  57. value,
  58. }))
  59. : [],
  60. seriesName: '5XX Responses',
  61. },
  62. ];
  63. const epsDiff = !isLoadingSeries
  64. ? seriesData.eps[seriesData.eps.length - 1].value / seriesData.eps[0].value
  65. : undefined;
  66. const initialEps = !isLoadingSeries
  67. ? `${Math.round(seriesData.eps[0].value * 100) / 100}/s`
  68. : undefined;
  69. const currentEps = !isLoadingSeries
  70. ? `${Math.round(seriesData.eps[seriesData.eps.length - 1].value * 100) / 100}/s`
  71. : undefined;
  72. const durationDiff = !isLoadingSeries
  73. ? seriesData.duration[seriesData.duration.length - 1].value /
  74. seriesData.duration[0].value
  75. : undefined;
  76. const initialDuration = !isLoadingSeries
  77. ? getDuration(seriesData.duration[0].value / 1000, 2, true)
  78. : undefined;
  79. const currentDuration = !isLoadingSeries
  80. ? getDuration(
  81. seriesData.duration[seriesData.duration.length - 1].value / 1000,
  82. 2,
  83. true
  84. )
  85. : undefined;
  86. const diffToColor = (diff?: number, reverse?: boolean) => {
  87. if (diff === undefined) {
  88. return undefined;
  89. }
  90. if (diff > 1) {
  91. if (reverse) {
  92. return theme.red300;
  93. }
  94. return theme.green300;
  95. }
  96. if (diff < 1) {
  97. if (reverse) {
  98. return theme.green300;
  99. }
  100. return theme.red300;
  101. }
  102. return undefined;
  103. };
  104. return (
  105. <Fragment>
  106. <SectionHeading>
  107. {t('Performance Score')}
  108. <QuestionTooltip size="sm" title={undefined} />
  109. </SectionHeading>
  110. <SidebarPerformanceScoreValue>
  111. {projectScore?.totalScore ?? '-'}
  112. </SidebarPerformanceScoreValue>
  113. <SidebarSpacer />
  114. <SectionHeading>
  115. {t('Throughput')}
  116. {/* TODO: Add a proper tooltip */}
  117. <QuestionTooltip size="sm" title={undefined} />
  118. </SectionHeading>
  119. <ChartValue>{currentEps}</ChartValue>
  120. <ChartSubText color={diffToColor(epsDiff)}>
  121. {getChartSubText(epsDiff, initialEps, currentEps)}
  122. </ChartSubText>
  123. <ChartZoom router={router} period={period} start={start} end={end} utc={utc}>
  124. {zoomRenderProps => (
  125. <LineChart
  126. {...zoomRenderProps}
  127. height={CHART_HEIGHTS}
  128. series={throughtputData}
  129. xAxis={{show: false}}
  130. grid={{
  131. left: 0,
  132. right: 15,
  133. top: 10,
  134. bottom: -10,
  135. }}
  136. yAxis={{axisLabel: {formatter: value => `${value}/s`}}}
  137. tooltip={{valueFormatter: value => `${Math.round(value * 100) / 100}/s`}}
  138. />
  139. )}
  140. </ChartZoom>
  141. <SidebarSpacer />
  142. <SectionHeading>
  143. {t('Duration (P75)')}
  144. {/* TODO: Add a proper tooltip */}
  145. <QuestionTooltip size="sm" title={undefined} />
  146. </SectionHeading>
  147. <ChartValue>{currentDuration}</ChartValue>
  148. <ChartSubText color={diffToColor(durationDiff, true)}>
  149. {getChartSubText(durationDiff, initialDuration, currentDuration)}
  150. </ChartSubText>
  151. <ChartZoom router={router} period={period} start={start} end={end} utc={utc}>
  152. {zoomRenderProps => (
  153. <LineChart
  154. {...zoomRenderProps}
  155. height={CHART_HEIGHTS}
  156. series={durationData}
  157. xAxis={{show: false}}
  158. grid={{
  159. left: 0,
  160. right: 15,
  161. top: 10,
  162. bottom: -10,
  163. }}
  164. yAxis={{axisLabel: {formatter: getAxisLabelFormattedDuration}}}
  165. tooltip={{valueFormatter: getFormattedDuration}}
  166. />
  167. )}
  168. </ChartZoom>
  169. <SidebarSpacer />
  170. <SectionHeading>
  171. {t('5XX Responses')}
  172. {/* TODO: Add a proper tooltip */}
  173. <QuestionTooltip size="sm" title={undefined} />
  174. </SectionHeading>
  175. <ChartValue>{pageData?.data[0]['failure_count()']}</ChartValue>
  176. <ChartZoom router={router} period={period} start={start} end={end} utc={utc}>
  177. {zoomRenderProps => (
  178. <LineChart
  179. {...zoomRenderProps}
  180. height={CHART_HEIGHTS}
  181. series={errorData}
  182. xAxis={{show: false}}
  183. grid={{
  184. left: 0,
  185. right: 15,
  186. top: 10,
  187. bottom: -10,
  188. }}
  189. />
  190. )}
  191. </ChartZoom>
  192. <SidebarSpacer />
  193. <SectionHeading>
  194. {t('Aggregate Spans')}
  195. {/* TODO: Add a proper tooltip */}
  196. <QuestionTooltip size="sm" title={undefined} />
  197. </SectionHeading>
  198. <MiniAggregateWaterfallContainer>
  199. <MiniAggregateWaterfall transaction={transaction} />
  200. </MiniAggregateWaterfallContainer>
  201. </Fragment>
  202. );
  203. }
  204. const getFormattedDuration = (value: number) => {
  205. if (value < 1000) {
  206. return getDuration(value / 1000, 0, true);
  207. }
  208. return getDuration(value / 1000, 2, true);
  209. };
  210. const getAxisLabelFormattedDuration = (value: number) => {
  211. return getDuration(value / 1000, 0, true);
  212. };
  213. const getChartSubText = (
  214. diff?: number,
  215. value?: string | number,
  216. newValue?: string | number
  217. ) => {
  218. if (diff === undefined || value === undefined) {
  219. return null;
  220. }
  221. if (diff > 1) {
  222. const relativeDiff = Math.round((diff - 1) * 1000) / 10;
  223. if (relativeDiff === Infinity) {
  224. return `Up from ${value} to ${newValue}`;
  225. }
  226. return `Up ${relativeDiff}% from ${value}`;
  227. }
  228. if (diff < 1) {
  229. const relativeDiff = Math.round((1 - diff) * 1000) / 10;
  230. return `Down ${relativeDiff}% from ${value}`;
  231. }
  232. return t('No Change');
  233. };
  234. const SidebarPerformanceScoreValue = styled('div')`
  235. font-weight: bold;
  236. font-size: 32px;
  237. `;
  238. const ChartValue = styled('div')`
  239. font-size: ${p => p.theme.fontSizeExtraLarge};
  240. `;
  241. const ChartSubText = styled('div')<{color?: string}>`
  242. font-size: ${p => p.theme.fontSizeMedium};
  243. color: ${p => p.color ?? p.theme.subText};
  244. `;
  245. const SectionHeading = styled('h4')`
  246. display: inline-grid;
  247. grid-auto-flow: column;
  248. gap: ${space(1)};
  249. align-items: center;
  250. color: ${p => p.theme.subText};
  251. font-size: ${p => p.theme.fontSizeMedium};
  252. margin: 0;
  253. `;
  254. const MiniAggregateWaterfallContainer = styled('div')`
  255. margin-top: ${space(1)};
  256. margin-bottom: ${space(1)};
  257. `;