banner.tsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import {useTheme} from '@emotion/react';
  2. import tourAlert from 'sentry-images/spot/discover-tour-alert.svg';
  3. import tourExplore from 'sentry-images/spot/discover-tour-explore.svg';
  4. import tourFilter from 'sentry-images/spot/discover-tour-filter.svg';
  5. import tourGroup from 'sentry-images/spot/discover-tour-group.svg';
  6. import Banner from 'sentry/components/banner';
  7. import {Button} from 'sentry/components/button';
  8. import FeatureTourModal, {
  9. TourImage,
  10. TourStep,
  11. TourText,
  12. } from 'sentry/components/modals/featureTourModal';
  13. import {t} from 'sentry/locale';
  14. import {Organization} from 'sentry/types';
  15. import {trackAnalytics} from 'sentry/utils/analytics';
  16. import useMedia from 'sentry/utils/useMedia';
  17. import BackgroundSpace from './backgroundSpace';
  18. const docsUrl = 'https://docs.sentry.io/product/discover-queries/';
  19. const docsLink = (
  20. <Button external href={docsUrl}>
  21. {t('View Docs')}
  22. </Button>
  23. );
  24. const TOUR_STEPS: TourStep[] = [
  25. {
  26. title: t('Explore Data over Time'),
  27. image: <TourImage src={tourExplore} />,
  28. body: (
  29. <TourText>
  30. {t(
  31. 'Analyze and visualize all of your data over time to find answers to your most complex problems.'
  32. )}
  33. </TourText>
  34. ),
  35. actions: docsLink,
  36. },
  37. {
  38. title: t('Filter on Event Attributes.'),
  39. image: <TourImage src={tourFilter} />,
  40. body: (
  41. <TourText>
  42. {t(
  43. 'Drill down on data by any custom tag or field to reduce noise and hone in on specific areas.'
  44. )}
  45. </TourText>
  46. ),
  47. actions: docsLink,
  48. },
  49. {
  50. title: t('Group Data by Tags'),
  51. image: <TourImage src={tourGroup} />,
  52. body: (
  53. <TourText>
  54. {t(
  55. 'Go beyond Issues and create custom groupings to investigate events from a different lens.'
  56. )}
  57. </TourText>
  58. ),
  59. actions: docsLink,
  60. },
  61. {
  62. title: t('Save, Share and Alert'),
  63. image: <TourImage src={tourAlert} />,
  64. body: (
  65. <TourText>
  66. {t('Send insights to your team and set alerts to monitor any future spikes.')}
  67. </TourText>
  68. ),
  69. },
  70. ];
  71. type Props = {
  72. organization: Organization;
  73. resultsUrl: string;
  74. showBuildNewQueryButton?: boolean;
  75. };
  76. function DiscoverBanner({
  77. organization,
  78. resultsUrl,
  79. showBuildNewQueryButton = true,
  80. }: Props) {
  81. function onAdvance(step: number, duration: number) {
  82. trackAnalytics('discover_v2.tour.advance', {
  83. organization,
  84. step,
  85. duration,
  86. });
  87. }
  88. function onCloseModal(step: number, duration: number) {
  89. trackAnalytics('discover_v2.tour.close', {organization, step, duration});
  90. }
  91. const theme = useTheme();
  92. const isSmallBanner = useMedia(`(max-width: ${theme.breakpoints.medium})`);
  93. return (
  94. <Banner
  95. title={t('Discover Trends')}
  96. subtitle={t(
  97. 'Customize and save queries by search conditions, event fields, and tags'
  98. )}
  99. backgroundComponent={<BackgroundSpace />}
  100. dismissKey="discover"
  101. >
  102. {showBuildNewQueryButton && (
  103. <Button
  104. size={isSmallBanner ? 'xs' : undefined}
  105. translucentBorder
  106. to={resultsUrl}
  107. onClick={() => {
  108. trackAnalytics('discover_v2.build_new_query', {organization});
  109. }}
  110. >
  111. {t('Build a new query')}
  112. </Button>
  113. )}
  114. <FeatureTourModal
  115. steps={TOUR_STEPS}
  116. doneText={t('View all Events')}
  117. doneUrl={resultsUrl}
  118. onAdvance={onAdvance}
  119. onCloseModal={onCloseModal}
  120. >
  121. {({showModal}) => (
  122. <Button
  123. size={isSmallBanner ? 'xs' : undefined}
  124. translucentBorder
  125. onClick={() => {
  126. trackAnalytics('discover_v2.tour.start', {organization});
  127. showModal();
  128. }}
  129. >
  130. {t('Get a Tour')}
  131. </Button>
  132. )}
  133. </FeatureTourModal>
  134. </Banner>
  135. );
  136. }
  137. export default DiscoverBanner;