header.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import {FeatureFeedback} from 'sentry/components/featureFeedback';
  2. import * as Layout from 'sentry/components/layouts/thirds';
  3. import Link from 'sentry/components/links/link';
  4. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  5. import {t} from 'sentry/locale';
  6. import {Organization} from 'sentry/types';
  7. type Props = {
  8. activeTab: 'stats' | 'issues' | 'health';
  9. organization: Organization;
  10. };
  11. function StatsHeader({organization, activeTab}: Props) {
  12. return (
  13. <Layout.Header>
  14. <Layout.HeaderContent>
  15. <Layout.Title>
  16. {t('Stats')}
  17. <PageHeadingQuestionTooltip
  18. docsUrl="https://docs.sentry.io/product/stats/"
  19. title={t(
  20. 'A view of the usage data that Sentry has received across your entire organization.'
  21. )}
  22. />
  23. </Layout.Title>
  24. </Layout.HeaderContent>
  25. <Layout.HeaderActions>
  26. {activeTab !== 'stats' && (
  27. <FeatureFeedback buttonProps={{size: 'sm'}} featureName="team-stats" />
  28. )}
  29. </Layout.HeaderActions>
  30. <Layout.HeaderNavTabs underlined>
  31. <li className={`${activeTab === 'stats' ? 'active' : ''}`}>
  32. <Link to={`/organizations/${organization.slug}/stats/`}>{t('Usage')}</Link>
  33. </li>
  34. <li className={`${activeTab === 'issues' ? 'active' : ''}`}>
  35. <Link to={`/organizations/${organization.slug}/stats/issues/`}>
  36. {t('Issues')}
  37. </Link>
  38. </li>
  39. <li className={`${activeTab === 'health' ? 'active' : ''}`}>
  40. <Link to={`/organizations/${organization.slug}/stats/health/`}>
  41. {t('Health')}
  42. </Link>
  43. </li>
  44. </Layout.HeaderNavTabs>
  45. </Layout.Header>
  46. );
  47. }
  48. export default StatsHeader;