limitExceededMessage.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import styled from '@emotion/styled';
  2. import {Button} from 'sentry/components/button';
  3. import DiscoverFeature from 'sentry/components/discover/discoverFeature';
  4. import Link from 'sentry/components/links/link';
  5. import {MessageRow} from 'sentry/components/performance/waterfall/messageRow';
  6. import {t, tct} from 'sentry/locale';
  7. import type {Organization} from 'sentry/types/organization';
  8. import {browserHistory} from 'sentry/utils/browserHistory';
  9. import type EventView from 'sentry/utils/discover/eventView';
  10. import {SavedQueryDatasets} from 'sentry/utils/discover/types';
  11. import type {TraceMeta} from 'sentry/utils/performance/quickTrace/types';
  12. import {useLocation} from 'sentry/utils/useLocation';
  13. import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
  14. import type {TraceInfo} from 'sentry/views/performance/traceDetails/types';
  15. interface LimitExceededMessageProps {
  16. meta: TraceMeta | null;
  17. organization: Organization;
  18. traceEventView: EventView;
  19. traceInfo: TraceInfo;
  20. handleLimitChange?: (newLimit: number) => void;
  21. }
  22. const MAX_TRACE_ROWS_LIMIT = 2000;
  23. export const DEFAULT_TRACE_ROWS_LIMIT = 100;
  24. function LimitExceededMessage({
  25. traceInfo,
  26. traceEventView,
  27. organization,
  28. meta,
  29. handleLimitChange,
  30. }: LimitExceededMessageProps) {
  31. // Number of events part of the traceView. Includes errors/issues appearing within txn details ui
  32. // that appears when you click into a txn row.
  33. const displayedEventsCount = traceInfo.transactions.size + traceInfo.errors.size;
  34. const traceMetaEventsCount =
  35. (meta && meta.transactions + meta.errors) ?? displayedEventsCount;
  36. const location = useLocation();
  37. if (traceMetaEventsCount === null || displayedEventsCount >= traceMetaEventsCount) {
  38. return null;
  39. }
  40. const target = traceEventView.getResultsViewUrlTarget(
  41. organization.slug,
  42. false,
  43. hasDatasetSelector(organization) ? SavedQueryDatasets.ERRORS : undefined
  44. );
  45. // Number of rows in the trace view. Doesnot include associated errors/issues appearing in
  46. // txn detail.
  47. const displayedRowsCount = traceInfo.transactions.size + traceInfo.trailingOrphansCount;
  48. // Increment by by multiples of 500.
  49. const increment = displayedRowsCount <= 100 ? 400 : 500;
  50. const discoverLink = (
  51. <DiscoverFeature>
  52. {({hasFeature}) => (
  53. <StyledLink disabled={!hasFeature} to={target}>
  54. {t('Discover')}
  55. </StyledLink>
  56. )}
  57. </DiscoverFeature>
  58. );
  59. const limitExceededMessage = tct(
  60. 'Limited to a view of [count] rows. To view the full list, go to [discover].',
  61. {
  62. count: displayedRowsCount,
  63. discover: discoverLink,
  64. }
  65. );
  66. const loadBiggerTraceMessage = tct(
  67. '[loadMore:Show more] of this trace or go to the full list of events in [discover]',
  68. {
  69. loadMore: (
  70. <Button
  71. priority="link"
  72. onClick={() => {
  73. const newLimit = displayedRowsCount + increment;
  74. if (handleLimitChange) {
  75. handleLimitChange(newLimit);
  76. }
  77. browserHistory.push({
  78. pathname: location.pathname,
  79. query: {...location.query, limit: newLimit},
  80. });
  81. }}
  82. aria-label={t('Load more')}
  83. />
  84. ),
  85. discover: discoverLink,
  86. }
  87. );
  88. return (
  89. <MessageRow>
  90. {organization.features.includes('trace-view-load-more') &&
  91. displayedRowsCount < MAX_TRACE_ROWS_LIMIT
  92. ? loadBiggerTraceMessage
  93. : limitExceededMessage}
  94. </MessageRow>
  95. );
  96. }
  97. const StyledLink = styled(Link)`
  98. margin-left: 0;
  99. `;
  100. export default LimitExceededMessage;