transactionsList.tsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655
  1. import React from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location, LocationDescriptor, Query} from 'history';
  5. import GuideAnchor from 'app/components/assistant/guideAnchor';
  6. import DiscoverButton from 'app/components/discoverButton';
  7. import DropdownButton from 'app/components/dropdownButton';
  8. import DropdownControl, {DropdownItem} from 'app/components/dropdownControl';
  9. import SortLink from 'app/components/gridEditable/sortLink';
  10. import Link from 'app/components/links/link';
  11. import LoadingIndicator from 'app/components/loadingIndicator';
  12. import Pagination from 'app/components/pagination';
  13. import PanelTable from 'app/components/panels/panelTable';
  14. import {t} from 'app/locale';
  15. import overflowEllipsis from 'app/styles/overflowEllipsis';
  16. import space from 'app/styles/space';
  17. import {Organization} from 'app/types';
  18. import DiscoverQuery, {TableData, TableDataRow} from 'app/utils/discover/discoverQuery';
  19. import EventView, {MetaType} from 'app/utils/discover/eventView';
  20. import {getFieldRenderer} from 'app/utils/discover/fieldRenderers';
  21. import {
  22. Alignments,
  23. fieldAlignment,
  24. getAggregateAlias,
  25. Sort,
  26. } from 'app/utils/discover/fields';
  27. import {generateEventSlug} from 'app/utils/discover/urls';
  28. import {getDuration} from 'app/utils/formatters';
  29. import BaselineQuery, {
  30. BaselineQueryResults,
  31. } from 'app/utils/performance/baseline/baselineQuery';
  32. import {TrendsEventsDiscoverQuery} from 'app/utils/performance/trends/trendsDiscoverQuery';
  33. import {decodeScalar} from 'app/utils/queryString';
  34. import {stringifyQueryObject, tokenizeSearch} from 'app/utils/tokenizeSearch';
  35. import CellAction, {Actions} from 'app/views/eventsV2/table/cellAction';
  36. import {TableColumn} from 'app/views/eventsV2/table/types';
  37. import {decodeColumnOrder} from 'app/views/eventsV2/utils';
  38. import {GridCell, GridCellNumber} from 'app/views/performance/styles';
  39. import {spanOperationBreakdownSingleColumns} from 'app/views/performance/transactionSummary/filter';
  40. import {
  41. TrendChangeType,
  42. TrendsDataEvents,
  43. TrendView,
  44. } from 'app/views/performance/trends/types';
  45. import {getTransactionComparisonUrl} from 'app/views/performance/utils';
  46. const DEFAULT_TRANSACTION_LIMIT = 5;
  47. export type DropdownOption = {
  48. /**
  49. * The sort to apply to the eventView when this is selected.
  50. */
  51. sort: Sort;
  52. /**
  53. * The unique name to use for this option.
  54. */
  55. value: string;
  56. /**
  57. * The label to display in the dropdown
  58. */
  59. label: string;
  60. /**
  61. * Included if the option is for a trend
  62. */
  63. trendType?: TrendChangeType;
  64. /**
  65. * overide the eventView query
  66. */
  67. query?: [string, string][];
  68. };
  69. type Props = {
  70. location: Location;
  71. eventView: EventView;
  72. trendView?: TrendView;
  73. organization: Organization;
  74. /**
  75. * The currently selected option on the dropdown.
  76. */
  77. selected: DropdownOption;
  78. /**
  79. * The available options for the dropdown.
  80. */
  81. options: DropdownOption[];
  82. /**
  83. * The callback for when the dropdown option changes.
  84. */
  85. handleDropdownChange: (k: string) => void;
  86. /**
  87. * The callback to generate a cell action handler for a column
  88. */
  89. handleCellAction?: (
  90. c: TableColumn<React.ReactText>
  91. ) => (a: Actions, v: React.ReactText) => void;
  92. /**
  93. * The name of the url parameter that contains the cursor info.
  94. */
  95. cursorName: string;
  96. /**
  97. * The limit to the number of results to fetch.
  98. */
  99. limit: number;
  100. /**
  101. * A list of preferred table headers to use over the field names.
  102. */
  103. titles?: string[];
  104. /**
  105. * A map of callbacks to generate a link for a column based on the title.
  106. */
  107. generateLink?: Record<
  108. string,
  109. (
  110. organization: Organization,
  111. tableRow: TableDataRow,
  112. query: Query
  113. ) => LocationDescriptor
  114. >;
  115. /**
  116. * The name of the transaction to find a baseline for.
  117. */
  118. baseline?: string;
  119. /**
  120. * The callback for when a baseline cell is clicked.
  121. */
  122. handleBaselineClick?: (e: React.MouseEvent<Element>) => void;
  123. /**
  124. * The callback for when Open in Discover is clicked.
  125. */
  126. handleOpenInDiscoverClick?: (e: React.MouseEvent<Element>) => void;
  127. /**
  128. * Show a loading indicator instead of the table, used for transaction summary p95.
  129. */
  130. forceLoading?: boolean;
  131. };
  132. class TransactionsList extends React.Component<Props> {
  133. static defaultProps = {
  134. cursorName: 'transactionCursor',
  135. limit: DEFAULT_TRANSACTION_LIMIT,
  136. };
  137. handleCursor = (cursor: string, pathname: string, query: Query) => {
  138. const {cursorName} = this.props;
  139. browserHistory.push({
  140. pathname,
  141. query: {...query, [cursorName]: cursor},
  142. });
  143. };
  144. getEventView() {
  145. const {eventView, selected} = this.props;
  146. const sortedEventView = eventView.withSorts([selected.sort]);
  147. if (selected.query) {
  148. const query = tokenizeSearch(sortedEventView.query);
  149. selected.query.forEach(item => query.setTagValues(item[0], [item[1]]));
  150. sortedEventView.query = stringifyQueryObject(query);
  151. }
  152. return sortedEventView;
  153. }
  154. renderHeader(): React.ReactNode {
  155. const {
  156. organization,
  157. selected,
  158. options,
  159. handleDropdownChange,
  160. handleOpenInDiscoverClick,
  161. } = this.props;
  162. return (
  163. <React.Fragment>
  164. <div>
  165. <DropdownControl
  166. data-test-id="filter-transactions"
  167. button={({isOpen, getActorProps}) => (
  168. <StyledDropdownButton
  169. {...getActorProps()}
  170. isOpen={isOpen}
  171. prefix={t('Filter')}
  172. size="small"
  173. >
  174. {selected.label}
  175. </StyledDropdownButton>
  176. )}
  177. >
  178. {options.map(({value, label}) => (
  179. <DropdownItem
  180. data-test-id={`option-${value}`}
  181. key={value}
  182. onSelect={handleDropdownChange}
  183. eventKey={value}
  184. isActive={value === selected.value}
  185. >
  186. {label}
  187. </DropdownItem>
  188. ))}
  189. </DropdownControl>
  190. </div>
  191. {!this.isTrend() && (
  192. <GuideAnchor target="release_transactions_open_in_discover">
  193. <DiscoverButton
  194. onClick={handleOpenInDiscoverClick}
  195. to={this.getEventView().getResultsViewUrlTarget(organization.slug)}
  196. size="small"
  197. data-test-id="discover-open"
  198. >
  199. {t('Open in Discover')}
  200. </DiscoverButton>
  201. </GuideAnchor>
  202. )}
  203. </React.Fragment>
  204. );
  205. }
  206. renderTransactionTable(): React.ReactNode {
  207. const {
  208. location,
  209. organization,
  210. handleCellAction,
  211. cursorName,
  212. limit,
  213. titles,
  214. generateLink,
  215. baseline,
  216. forceLoading,
  217. } = this.props;
  218. const eventView = this.getEventView();
  219. const columnOrder = eventView.getColumns();
  220. const cursor = decodeScalar(location.query?.[cursorName]);
  221. const baselineTransactionName = organization.features.includes(
  222. 'transaction-comparison'
  223. )
  224. ? baseline ?? null
  225. : null;
  226. let tableRenderer = ({isLoading, pageLinks, tableData, baselineData}) => (
  227. <React.Fragment>
  228. <Header>
  229. {this.renderHeader()}
  230. <StyledPagination
  231. pageLinks={pageLinks}
  232. onCursor={this.handleCursor}
  233. size="small"
  234. />
  235. </Header>
  236. <TransactionsTable
  237. eventView={eventView}
  238. organization={organization}
  239. location={location}
  240. isLoading={isLoading}
  241. tableData={tableData}
  242. baselineData={baselineData ?? null}
  243. columnOrder={columnOrder}
  244. titles={titles}
  245. generateLink={generateLink}
  246. baselineTransactionName={baselineTransactionName}
  247. handleCellAction={handleCellAction}
  248. />
  249. </React.Fragment>
  250. );
  251. if (forceLoading) {
  252. return tableRenderer({
  253. isLoading: true,
  254. pageLinks: null,
  255. tableData: null,
  256. baselineData: null,
  257. });
  258. }
  259. if (baselineTransactionName) {
  260. const orgTableRenderer = tableRenderer;
  261. tableRenderer = ({isLoading, pageLinks, tableData}) => (
  262. <BaselineQuery eventView={eventView} orgSlug={organization.slug}>
  263. {baselineQueryProps => {
  264. return orgTableRenderer({
  265. isLoading: isLoading || baselineQueryProps.isLoading,
  266. pageLinks,
  267. tableData,
  268. baselineData: baselineQueryProps.results,
  269. });
  270. }}
  271. </BaselineQuery>
  272. );
  273. }
  274. return (
  275. <DiscoverQuery
  276. location={location}
  277. eventView={eventView}
  278. orgSlug={organization.slug}
  279. limit={limit}
  280. cursor={cursor}
  281. referrer="api.discover.transactions-list"
  282. >
  283. {tableRenderer}
  284. </DiscoverQuery>
  285. );
  286. }
  287. renderTrendsTable(): React.ReactNode {
  288. const {
  289. trendView,
  290. location,
  291. selected,
  292. organization,
  293. cursorName,
  294. generateLink,
  295. } = this.props;
  296. const sortedEventView: TrendView = trendView!.clone();
  297. sortedEventView.sorts = [selected.sort];
  298. sortedEventView.trendType = selected.trendType;
  299. if (selected.query) {
  300. const query = tokenizeSearch(sortedEventView.query);
  301. selected.query.forEach(item => query.setTagValues(item[0], [item[1]]));
  302. sortedEventView.query = stringifyQueryObject(query);
  303. }
  304. const cursor = decodeScalar(location.query?.[cursorName]);
  305. return (
  306. <TrendsEventsDiscoverQuery
  307. eventView={sortedEventView}
  308. orgSlug={organization.slug}
  309. location={location}
  310. cursor={cursor}
  311. limit={5}
  312. >
  313. {({isLoading, trendsData, pageLinks}) => (
  314. <React.Fragment>
  315. <Header>
  316. {this.renderHeader()}
  317. <StyledPagination
  318. pageLinks={pageLinks}
  319. onCursor={this.handleCursor}
  320. size="small"
  321. />
  322. </Header>
  323. <TransactionsTable
  324. eventView={sortedEventView}
  325. organization={organization}
  326. location={location}
  327. isLoading={isLoading}
  328. tableData={trendsData}
  329. baselineData={null}
  330. titles={['transaction', 'percentage', 'difference']}
  331. columnOrder={decodeColumnOrder([
  332. {field: 'transaction'},
  333. {field: 'trend_percentage()'},
  334. {field: 'trend_difference()'},
  335. ])}
  336. generateLink={generateLink}
  337. baselineTransactionName={null}
  338. />
  339. </React.Fragment>
  340. )}
  341. </TrendsEventsDiscoverQuery>
  342. );
  343. }
  344. isTrend(): boolean {
  345. const {selected} = this.props;
  346. return selected.trendType !== undefined;
  347. }
  348. render() {
  349. return (
  350. <React.Fragment>
  351. {this.isTrend() ? this.renderTrendsTable() : this.renderTransactionTable()}
  352. </React.Fragment>
  353. );
  354. }
  355. }
  356. type TableProps = {
  357. eventView: EventView;
  358. organization: Organization;
  359. location: Location;
  360. isLoading: boolean;
  361. tableData: TableData | TrendsDataEvents | null;
  362. columnOrder: TableColumn<React.ReactText>[];
  363. titles?: string[];
  364. baselineTransactionName: string | null;
  365. baselineData: BaselineQueryResults | null;
  366. handleBaselineClick?: (e: React.MouseEvent<Element>) => void;
  367. generateLink?: Record<
  368. string,
  369. (
  370. organization: Organization,
  371. tableRow: TableDataRow,
  372. query: Query
  373. ) => LocationDescriptor
  374. >;
  375. handleCellAction?: (
  376. c: TableColumn<React.ReactText>
  377. ) => (a: Actions, v: React.ReactText) => void;
  378. };
  379. class TransactionsTable extends React.PureComponent<TableProps> {
  380. getTitles() {
  381. const {eventView, titles} = this.props;
  382. return titles ?? eventView.getFields();
  383. }
  384. renderHeader() {
  385. const {tableData, columnOrder, baselineTransactionName} = this.props;
  386. const tableMeta = tableData?.meta;
  387. const generateSortLink = () => undefined;
  388. const tableTitles = this.getTitles();
  389. const headers = tableTitles.map((title, index) => {
  390. const column = columnOrder[index];
  391. const isIndividualSpanColumn = !!spanOperationBreakdownSingleColumns.find(
  392. c => c === column.name
  393. );
  394. const align: Alignments = isIndividualSpanColumn
  395. ? 'left'
  396. : fieldAlignment(column.name, column.type, tableMeta);
  397. if (column.key === 'span_ops_breakdown.relative') {
  398. return (
  399. <HeadCellContainer key={index}>
  400. <GuideAnchor target="span_op_relative_breakdowns">
  401. <SortLink
  402. align={align}
  403. title={title}
  404. direction={undefined}
  405. canSort={false}
  406. generateSortLink={generateSortLink}
  407. />
  408. </GuideAnchor>
  409. </HeadCellContainer>
  410. );
  411. }
  412. return (
  413. <HeadCellContainer key={index}>
  414. <SortLink
  415. align={align}
  416. title={title}
  417. direction={undefined}
  418. canSort={false}
  419. generateSortLink={generateSortLink}
  420. />
  421. </HeadCellContainer>
  422. );
  423. });
  424. if (baselineTransactionName) {
  425. headers.push(
  426. <HeadCellContainer key="baseline">
  427. <SortLink
  428. align="right"
  429. title={t('Compared to Baseline')}
  430. direction={undefined}
  431. canSort={false}
  432. generateSortLink={generateSortLink}
  433. />
  434. </HeadCellContainer>
  435. );
  436. }
  437. return headers;
  438. }
  439. renderRow(
  440. row: TableDataRow,
  441. rowIndex: number,
  442. columnOrder: TableColumn<React.ReactText>[],
  443. tableMeta: MetaType
  444. ): React.ReactNode[] {
  445. const {
  446. eventView,
  447. organization,
  448. location,
  449. generateLink,
  450. baselineTransactionName,
  451. baselineData,
  452. handleBaselineClick,
  453. handleCellAction,
  454. titles,
  455. } = this.props;
  456. const fields = eventView.getFields();
  457. if (titles && titles.length) {
  458. // Slice to match length of given titles
  459. columnOrder = columnOrder.slice(0, titles.length);
  460. }
  461. const resultsRow = columnOrder.map((column, index) => {
  462. const field = String(column.key);
  463. // TODO add a better abstraction for this in fieldRenderers.
  464. const fieldName = getAggregateAlias(field);
  465. const fieldType = tableMeta[fieldName];
  466. const fieldRenderer = getFieldRenderer(field, tableMeta);
  467. let rendered = fieldRenderer(row, {organization, location});
  468. const target = generateLink?.[field]?.(organization, row, location.query);
  469. if (target) {
  470. rendered = (
  471. <Link data-test-id={`view-${fields[index]}`} to={target}>
  472. {rendered}
  473. </Link>
  474. );
  475. }
  476. const isNumeric = ['integer', 'number', 'duration'].includes(fieldType);
  477. const key = `${rowIndex}:${column.key}:${index}`;
  478. rendered = isNumeric ? (
  479. <GridCellNumber>{rendered}</GridCellNumber>
  480. ) : (
  481. <GridCell>{rendered}</GridCell>
  482. );
  483. if (handleCellAction) {
  484. rendered = (
  485. <CellAction
  486. column={column}
  487. dataRow={row}
  488. handleCellAction={handleCellAction(column)}
  489. >
  490. {rendered}
  491. </CellAction>
  492. );
  493. }
  494. return <BodyCellContainer key={key}>{rendered}</BodyCellContainer>;
  495. });
  496. if (baselineTransactionName) {
  497. if (baselineData) {
  498. const currentTransactionDuration: number =
  499. Number(row['transaction.duration']) || 0;
  500. const duration = baselineData['transaction.duration'];
  501. const delta = Math.abs(currentTransactionDuration - duration);
  502. const relativeSpeed =
  503. currentTransactionDuration < duration
  504. ? t('faster')
  505. : currentTransactionDuration > duration
  506. ? t('slower')
  507. : '';
  508. const target = getTransactionComparisonUrl({
  509. organization,
  510. baselineEventSlug: generateEventSlug(baselineData),
  511. regressionEventSlug: generateEventSlug(row),
  512. transaction: baselineTransactionName,
  513. query: location.query,
  514. });
  515. resultsRow.push(
  516. <BodyCellContainer
  517. data-test-id="baseline-cell"
  518. key={`${rowIndex}-baseline`}
  519. style={{textAlign: 'right'}}
  520. >
  521. <GridCell>
  522. <Link to={target} onClick={handleBaselineClick}>
  523. {`${getDuration(delta / 1000, delta < 1000 ? 0 : 2)} ${relativeSpeed}`}
  524. </Link>
  525. </GridCell>
  526. </BodyCellContainer>
  527. );
  528. } else {
  529. resultsRow.push(
  530. <BodyCellContainer data-test-id="baseline-cell" key={`${rowIndex}-baseline`}>
  531. {'\u2014'}
  532. </BodyCellContainer>
  533. );
  534. }
  535. }
  536. return resultsRow;
  537. }
  538. renderResults() {
  539. const {isLoading, tableData, columnOrder} = this.props;
  540. let cells: React.ReactNode[] = [];
  541. if (isLoading) {
  542. return cells;
  543. }
  544. if (!tableData || !tableData.meta || !tableData.data) {
  545. return cells;
  546. }
  547. tableData.data.forEach((row, i: number) => {
  548. // Another check to appease tsc
  549. if (!tableData.meta) {
  550. return;
  551. }
  552. cells = cells.concat(this.renderRow(row, i, columnOrder, tableData.meta));
  553. });
  554. return cells;
  555. }
  556. render() {
  557. const {isLoading, tableData} = this.props;
  558. const hasResults =
  559. tableData && tableData.data && tableData.meta && tableData.data.length > 0;
  560. // Custom set the height so we don't have layout shift when results are loaded.
  561. const loader = <LoadingIndicator style={{margin: '70px auto'}} />;
  562. return (
  563. <PanelTable
  564. isEmpty={!hasResults}
  565. emptyMessage={t('No transactions found')}
  566. headers={this.renderHeader()}
  567. isLoading={isLoading}
  568. disablePadding
  569. loader={loader}
  570. >
  571. {this.renderResults()}
  572. </PanelTable>
  573. );
  574. }
  575. }
  576. const Header = styled('div')`
  577. display: grid;
  578. grid-template-columns: 1fr auto auto;
  579. margin-bottom: ${space(1)};
  580. `;
  581. const StyledDropdownButton = styled(DropdownButton)`
  582. min-width: 145px;
  583. `;
  584. const HeadCellContainer = styled('div')`
  585. padding: ${space(2)};
  586. `;
  587. const BodyCellContainer = styled('div')`
  588. padding: ${space(1)} ${space(2)};
  589. ${overflowEllipsis};
  590. `;
  591. const StyledPagination = styled(Pagination)`
  592. margin: 0 0 0 ${space(1)};
  593. `;
  594. export default TransactionsList;