layout.tsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import {Fragment, memo, useCallback} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as Sentry from '@sentry/react';
  4. import emptyStateImg from 'sentry-images/spot/custom-metrics-empty-state.svg';
  5. import FeatureBadge from 'sentry/components/badge/featureBadge';
  6. import {Button} from 'sentry/components/button';
  7. import ButtonBar from 'sentry/components/buttonBar';
  8. import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
  9. import * as Layout from 'sentry/components/layouts/thirds';
  10. import LoadingIndicator from 'sentry/components/loadingIndicator';
  11. import OnboardingPanel from 'sentry/components/onboardingPanel';
  12. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  13. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  14. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  15. import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
  16. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  17. import {t} from 'sentry/locale';
  18. import {space} from 'sentry/styles/space';
  19. import {trackAnalytics} from 'sentry/utils/analytics';
  20. import {METRICS_DOCS_URL} from 'sentry/utils/metrics/constants';
  21. import useDismissAlert from 'sentry/utils/useDismissAlert';
  22. import useOrganization from 'sentry/utils/useOrganization';
  23. import usePageFilters from 'sentry/utils/usePageFilters';
  24. import {useMetricsContext} from 'sentry/views/metrics/context';
  25. import {useMetricsOnboardingSidebar} from 'sentry/views/metrics/ddmOnboarding/useMetricsOnboardingSidebar';
  26. import {IntervalSelect} from 'sentry/views/metrics/intervalSelect';
  27. import {PageHeaderActions} from 'sentry/views/metrics/pageHeaderActions';
  28. import {Queries} from 'sentry/views/metrics/queries';
  29. import {MetricScratchpad} from 'sentry/views/metrics/scratchpad';
  30. import {WidgetDetails} from 'sentry/views/metrics/widgetDetails';
  31. export const MetricsLayout = memo(() => {
  32. const organization = useOrganization();
  33. const pageFilters = usePageFilters();
  34. const selectedProjects = pageFilters.selection.projects.join();
  35. const {hasCustomMetrics, hasPerformanceMetrics, isHasMetricsLoading} =
  36. useMetricsContext();
  37. const {activateSidebar} = useMetricsOnboardingSidebar();
  38. const {dismiss: emptyStateDismiss, isDismissed: isEmptyStateDismissed} =
  39. useDismissAlert({
  40. key: `${organization.id}:${selectedProjects}:metrics-empty-state-dismissed`,
  41. });
  42. const addCustomMetric = useCallback(
  43. (referrer: 'header' | 'onboarding_panel') => {
  44. Sentry.metrics.increment('ddm.add_custom_metric', 1, {
  45. tags: {
  46. referrer,
  47. },
  48. });
  49. trackAnalytics('ddm.open-onboarding', {
  50. organization,
  51. source: referrer,
  52. });
  53. activateSidebar();
  54. },
  55. [activateSidebar, organization]
  56. );
  57. const viewPerformanceMetrics = useCallback(() => {
  58. Sentry.metrics.increment('ddm.view_performance_metrics', 1);
  59. trackAnalytics('ddm.view_performance_metrics', {
  60. organization,
  61. });
  62. emptyStateDismiss();
  63. }, [emptyStateDismiss, organization]);
  64. return (
  65. <Fragment>
  66. <Layout.Header>
  67. <Layout.HeaderContent>
  68. <Layout.Title>
  69. {t('Metrics')}
  70. <PageHeadingQuestionTooltip
  71. docsUrl={METRICS_DOCS_URL}
  72. title={t(
  73. 'Metrics help you track and visualize the data points you care about, making it easier to monitor your application health and identify issues.'
  74. )}
  75. />
  76. <FeatureBadge type="beta" />
  77. </Layout.Title>
  78. </Layout.HeaderContent>
  79. <Layout.HeaderActions>
  80. <PageHeaderActions
  81. showCustomMetricButton={hasCustomMetrics || isEmptyStateDismissed}
  82. addCustomMetric={() => addCustomMetric('header')}
  83. />
  84. </Layout.HeaderActions>
  85. </Layout.Header>
  86. <Layout.Body>
  87. <FloatingFeedbackWidget />
  88. <Layout.Main fullWidth>
  89. <FilterContainer>
  90. <PageFilterBar condensed>
  91. <ProjectPageFilter />
  92. <EnvironmentPageFilter />
  93. <DatePageFilter />
  94. </PageFilterBar>
  95. <IntervalSelect />
  96. </FilterContainer>
  97. {isHasMetricsLoading ? (
  98. <LoadingIndicator />
  99. ) : hasCustomMetrics || isEmptyStateDismissed ? (
  100. <Fragment>
  101. <Queries />
  102. <MetricScratchpad />
  103. <WidgetDetails />
  104. </Fragment>
  105. ) : (
  106. <OnboardingPanel image={<EmptyStateImage src={emptyStateImg} />}>
  107. <h3>{t('Get started with custom metrics')}</h3>
  108. <p>
  109. {t(
  110. "Send your own metrics to Sentry to track your system's behaviour and profit from the same powerful features as you do with errors, like alerting and dashboards."
  111. )}
  112. </p>
  113. <div>
  114. <ButtonList gap={1}>
  115. <Button
  116. priority="primary"
  117. onClick={() => addCustomMetric('onboarding_panel')}
  118. >
  119. {t('Add Custom Metric')}
  120. </Button>
  121. {hasPerformanceMetrics && (
  122. <Button onClick={viewPerformanceMetrics}>
  123. {t('View Performance Metrics')}
  124. </Button>
  125. )}
  126. </ButtonList>
  127. </div>
  128. </OnboardingPanel>
  129. )}
  130. </Layout.Main>
  131. </Layout.Body>
  132. </Fragment>
  133. );
  134. });
  135. const FilterContainer = styled('div')`
  136. margin-bottom: ${space(2)};
  137. display: flex;
  138. justify-content: flex-start;
  139. flex-wrap: wrap;
  140. gap: ${space(1)};
  141. `;
  142. const EmptyStateImage = styled('img')`
  143. @media (min-width: ${p => p.theme.breakpoints.small}) {
  144. user-select: none;
  145. position: absolute;
  146. top: 0;
  147. bottom: 0;
  148. width: 220px;
  149. margin-top: auto;
  150. margin-bottom: auto;
  151. transform: translateX(-50%);
  152. left: 50%;
  153. }
  154. @media (min-width: ${p => p.theme.breakpoints.large}) {
  155. transform: translateX(-60%);
  156. width: 280px;
  157. }
  158. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  159. transform: translateX(-75%);
  160. width: 320px;
  161. }
  162. `;
  163. const ButtonList = styled(ButtonBar)`
  164. grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  165. `;