changeExplorer.tsx 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Location} from 'history';
  4. import moment from 'moment';
  5. import {Button} from 'sentry/components/button';
  6. import {getArbitraryRelativePeriod} from 'sentry/components/organizations/timeRangeSelector/utils';
  7. import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
  8. import {IconFire, IconOpen} from 'sentry/icons';
  9. import {t} from 'sentry/locale';
  10. import {space} from 'sentry/styles/space';
  11. import {Organization, Project} from 'sentry/types';
  12. import {trackAnalytics} from 'sentry/utils/analytics';
  13. import theme from 'sentry/utils/theme';
  14. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  15. import {
  16. DisplayModes,
  17. transactionSummaryRouteWithQuery,
  18. } from 'sentry/views/performance/transactionSummary/utils';
  19. import {FunctionsList} from 'sentry/views/performance/trends/changeExplorerUtils/functionsList';
  20. import {MetricsTable} from 'sentry/views/performance/trends/changeExplorerUtils/metricsTable';
  21. import {SpansList} from 'sentry/views/performance/trends/changeExplorerUtils/spansList';
  22. import {Chart} from 'sentry/views/performance/trends/chart';
  23. import {
  24. NormalizedTrendsTransaction,
  25. TrendChangeType,
  26. TrendParameter,
  27. TrendsStats,
  28. TrendView,
  29. } from 'sentry/views/performance/trends/types';
  30. import {getTrendProjectId} from 'sentry/views/performance/trends/utils';
  31. import DetailPanel from 'sentry/views/starfish/components/detailPanel';
  32. type PerformanceChangeExplorerProps = {
  33. collapsed: boolean;
  34. isLoading: boolean;
  35. location: Location;
  36. onClose: () => void;
  37. organization: Organization;
  38. projects: Project[];
  39. statsData: TrendsStats;
  40. transaction: NormalizedTrendsTransaction;
  41. trendChangeType: TrendChangeType;
  42. trendFunction: string;
  43. trendParameter: TrendParameter;
  44. trendView: TrendView;
  45. };
  46. type ExplorerBodyProps = {
  47. isLoading: boolean;
  48. location: Location;
  49. organization: Organization;
  50. projects: Project[];
  51. statsData: TrendsStats;
  52. transaction: NormalizedTrendsTransaction;
  53. trendChangeType: TrendChangeType;
  54. trendFunction: string;
  55. trendParameter: TrendParameter;
  56. trendView: TrendView;
  57. };
  58. type HeaderProps = {
  59. organization: Organization;
  60. projects: Project[];
  61. transaction: NormalizedTrendsTransaction;
  62. trendChangeType: TrendChangeType;
  63. trendFunction: string;
  64. trendParameter: TrendParameter;
  65. trendView: TrendView;
  66. };
  67. export function PerformanceChangeExplorer({
  68. collapsed,
  69. transaction,
  70. onClose,
  71. trendChangeType,
  72. trendFunction,
  73. trendView,
  74. statsData,
  75. isLoading,
  76. organization,
  77. projects,
  78. trendParameter,
  79. location,
  80. }: PerformanceChangeExplorerProps) {
  81. return (
  82. <DetailPanel detailKey={!collapsed ? transaction.transaction : ''} onClose={onClose}>
  83. {!collapsed && (
  84. <PanelBodyWrapper>
  85. <ExplorerBody
  86. transaction={transaction}
  87. trendChangeType={trendChangeType}
  88. trendFunction={trendFunction}
  89. trendView={trendView}
  90. statsData={statsData}
  91. isLoading={isLoading}
  92. organization={organization}
  93. projects={projects}
  94. trendParameter={trendParameter}
  95. location={location}
  96. />
  97. </PanelBodyWrapper>
  98. )}
  99. </DetailPanel>
  100. );
  101. }
  102. function ExplorerBody(props: ExplorerBodyProps) {
  103. const {
  104. transaction,
  105. trendChangeType,
  106. trendFunction,
  107. trendView,
  108. trendParameter,
  109. isLoading,
  110. location,
  111. organization,
  112. projects,
  113. } = props;
  114. const breakpointDate = transaction.breakpoint
  115. ? moment(transaction.breakpoint * 1000).format('ddd, DD MMM YYYY HH:mm:ss z')
  116. : '';
  117. const start = moment(trendView.start).format('DD MMM YYYY HH:mm:ss z');
  118. const end = moment(trendView.end).format('DD MMM YYYY HH:mm:ss z');
  119. return (
  120. <Fragment>
  121. <Header
  122. transaction={transaction}
  123. trendChangeType={trendChangeType}
  124. trendView={trendView}
  125. projects={projects}
  126. organization={organization}
  127. trendFunction={trendFunction}
  128. trendParameter={trendParameter}
  129. />
  130. <div style={{display: 'flex', gap: space(4)}}>
  131. <InfoItem
  132. label={
  133. trendChangeType === TrendChangeType.REGRESSION
  134. ? t('Regression Metric')
  135. : t('Improvement Metric')
  136. }
  137. value={trendFunction}
  138. />
  139. <InfoItem label={t('Start Time')} value={breakpointDate} />
  140. </div>
  141. <GraphPanel data-test-id="pce-graph">
  142. <strong>{`${trendParameter.label} (${trendFunction})`}</strong>
  143. <ExplorerText color={theme.gray300} margin={`-${space(3)}`}>
  144. {trendView.statsPeriod
  145. ? DEFAULT_RELATIVE_PERIODS[trendView.statsPeriod] ||
  146. getArbitraryRelativePeriod(trendView.statsPeriod)[trendView.statsPeriod]
  147. : `${start} - ${end}`}
  148. </ExplorerText>
  149. <Chart
  150. query={trendView.query}
  151. project={trendView.project}
  152. environment={trendView.environment}
  153. start={trendView.start}
  154. end={trendView.end}
  155. statsPeriod={trendView.statsPeriod}
  156. disableXAxis
  157. disableLegend
  158. neutralColor
  159. {...props}
  160. />
  161. </GraphPanel>
  162. <MetricsTable
  163. isLoading={isLoading}
  164. location={location}
  165. transaction={transaction}
  166. trendFunction={trendFunction}
  167. trendView={trendView}
  168. organization={organization}
  169. />
  170. <SpansList
  171. location={location}
  172. organization={organization}
  173. trendView={trendView}
  174. transaction={transaction}
  175. breakpoint={transaction.breakpoint!}
  176. trendChangeType={trendChangeType}
  177. />
  178. <FunctionsList
  179. location={location}
  180. organization={organization}
  181. trendView={trendView}
  182. transaction={transaction}
  183. breakpoint={transaction.breakpoint!}
  184. trendChangeType={trendChangeType}
  185. />
  186. </Fragment>
  187. );
  188. }
  189. function InfoItem({label, value}: {label: string; value: string}) {
  190. return (
  191. <div>
  192. <InfoLabel>{label}</InfoLabel>
  193. <InfoText>{value}</InfoText>
  194. </div>
  195. );
  196. }
  197. function Header(props: HeaderProps) {
  198. const {
  199. transaction,
  200. trendChangeType,
  201. trendView,
  202. projects,
  203. organization,
  204. trendFunction,
  205. trendParameter,
  206. } = props;
  207. const regression = trendChangeType === TrendChangeType.REGRESSION;
  208. const transactionSummaryLink = getTransactionSummaryLink(
  209. trendView,
  210. transaction,
  211. projects,
  212. organization,
  213. trendFunction,
  214. trendParameter
  215. );
  216. const handleClickAnalytics = () => {
  217. trackAnalytics('performance_views.performance_change_explorer.summary_link_clicked', {
  218. organization,
  219. transaction: transaction.transaction,
  220. });
  221. };
  222. return (
  223. <HeaderWrapper data-test-id="pce-header">
  224. <FireIcon regression={regression}>
  225. <IconFire color="white" />
  226. </FireIcon>
  227. <HeaderTextWrapper>
  228. <ChangeType regression={regression}>
  229. {regression ? t('Ongoing Regression') : t('Ongoing Improvement')}
  230. </ChangeType>
  231. <TransactionNameWrapper>
  232. <TransactionName>{transaction.transaction}</TransactionName>
  233. <ViewTransactionButton
  234. borderless
  235. to={normalizeUrl(transactionSummaryLink)}
  236. icon={<IconOpen />}
  237. aria-label={t('View transaction summary')}
  238. onClick={handleClickAnalytics}
  239. />
  240. </TransactionNameWrapper>
  241. </HeaderTextWrapper>
  242. </HeaderWrapper>
  243. );
  244. }
  245. function getTransactionSummaryLink(
  246. eventView: TrendView,
  247. transaction: NormalizedTrendsTransaction,
  248. projects: Project[],
  249. organization: Organization,
  250. currentTrendFunction: string,
  251. trendParameter: TrendParameter
  252. ) {
  253. const summaryView = eventView.clone();
  254. const projectID = getTrendProjectId(transaction, projects);
  255. const target = transactionSummaryRouteWithQuery({
  256. orgSlug: organization.slug,
  257. transaction: String(transaction.transaction),
  258. query: summaryView.generateQueryStringObject(),
  259. projectID,
  260. display: DisplayModes.TREND,
  261. trendFunction: currentTrendFunction,
  262. additionalQuery: {
  263. trendParameter: trendParameter.column,
  264. },
  265. });
  266. return target;
  267. }
  268. const PanelBodyWrapper = styled('div')`
  269. padding: 0 ${space(2)};
  270. margin-top: ${space(1)};
  271. `;
  272. const HeaderWrapper = styled('div')`
  273. display: flex;
  274. flex-wrap: nowrap;
  275. margin-bottom: ${space(3)};
  276. `;
  277. const HeaderTextWrapper = styled('div')`
  278. ${p => p.theme.overflowEllipsis};
  279. `;
  280. type ChangeTypeProps = {regression: boolean};
  281. const ChangeType = styled('p')<ChangeTypeProps>`
  282. color: ${p => (p.regression ? p.theme.danger : p.theme.success)};
  283. margin-bottom: ${space(0)};
  284. `;
  285. const FireIcon = styled('div')<ChangeTypeProps>`
  286. padding: ${space(1.5)};
  287. background-color: ${p => (p.regression ? p.theme.danger : p.theme.success)};
  288. border-radius: ${space(0.5)};
  289. margin-right: ${space(2)};
  290. float: left;
  291. height: 40px;
  292. `;
  293. const TransactionName = styled('h4')`
  294. margin-right: ${space(1)};
  295. margin-bottom: ${space(0)};
  296. ${p => p.theme.overflowEllipsis};
  297. `;
  298. const TransactionNameWrapper = styled('div')`
  299. display: flex;
  300. align-items: center;
  301. margin-bottom: ${space(3)};
  302. max-width: fit-content;
  303. `;
  304. const ViewTransactionButton = styled(Button)`
  305. padding: ${space(0)};
  306. height: min-content;
  307. min-height: 0px;
  308. `;
  309. const InfoLabel = styled('strong')`
  310. color: ${p => p.theme.gray300};
  311. `;
  312. const InfoText = styled('h3')`
  313. font-weight: normal;
  314. `;
  315. const GraphPanel = styled('div')`
  316. border: 1px solid ${p => p.theme.border};
  317. border-radius: ${p => p.theme.panelBorderRadius};
  318. margin-bottom: ${space(2)};
  319. padding: ${space(3)};
  320. display: block;
  321. `;
  322. export const ExplorerText = styled('p')<{
  323. align?: string;
  324. color?: string;
  325. margin?: string;
  326. }>`
  327. margin-bottom: ${p => (p.margin ? p.margin : space(0))};
  328. color: ${p => p.color};
  329. text-align: ${p => p.align};
  330. `;