header.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import {navigateTo} from 'sentry/actionCreators/navigation';
  2. import ButtonBar from 'sentry/components/buttonBar';
  3. import {LinkButton} from 'sentry/components/core/button';
  4. import CreateAlertButton from 'sentry/components/createAlertButton';
  5. import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
  6. import * as Layout from 'sentry/components/layouts/thirds';
  7. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  8. import {TabList} from 'sentry/components/tabs';
  9. import {IconSettings} from 'sentry/icons';
  10. import {t} from 'sentry/locale';
  11. import ProjectsStore from 'sentry/stores/projectsStore';
  12. import useOrganization from 'sentry/utils/useOrganization';
  13. import usePageFilters from 'sentry/utils/usePageFilters';
  14. import useRouter from 'sentry/utils/useRouter';
  15. import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
  16. type Props = {
  17. activeTab: 'stream' | 'rules';
  18. };
  19. function AlertHeader({activeTab}: Props) {
  20. const router = useRouter();
  21. const organization = useOrganization();
  22. const {selection} = usePageFilters();
  23. /**
  24. * Incidents list is currently at the organization level, but the link needs to
  25. * go down to a specific project scope.
  26. */
  27. const handleNavigateToSettings = (e: React.MouseEvent) => {
  28. e.preventDefault();
  29. navigateTo(`/settings/${organization.slug}/projects/:projectId/alerts/`, router);
  30. };
  31. const alertRulesLink = (
  32. <TabList.Item
  33. key="rules"
  34. to={makeAlertsPathname({
  35. path: '/rules/',
  36. organization,
  37. })}
  38. >
  39. {t('Alert Rules')}
  40. </TabList.Item>
  41. );
  42. return (
  43. <Layout.Header>
  44. <Layout.HeaderContent>
  45. <Layout.Title>
  46. {t('Alerts')}
  47. <PageHeadingQuestionTooltip
  48. docsUrl="https://docs.sentry.io/product/alerts/"
  49. title={t(
  50. 'Real-time visibility into problems with your code and the impact on your users, along with a view of your existing alert rules, their status, project, team, and creation date.'
  51. )}
  52. />
  53. </Layout.Title>
  54. </Layout.HeaderContent>
  55. <Layout.HeaderActions>
  56. <ButtonBar gap={1}>
  57. <CreateAlertButton
  58. organization={organization}
  59. iconProps={{size: 'sm'}}
  60. size="sm"
  61. priority="primary"
  62. referrer="alert_stream"
  63. showPermissionGuide
  64. projectSlug={
  65. selection.projects.length === 1
  66. ? ProjectsStore.getById(`${selection.projects[0]}`)?.slug
  67. : undefined
  68. }
  69. >
  70. {t('Create Alert')}
  71. </CreateAlertButton>
  72. <FeedbackWidgetButton />
  73. <LinkButton
  74. size="sm"
  75. onClick={handleNavigateToSettings}
  76. href="#"
  77. icon={<IconSettings size="sm" />}
  78. aria-label={t('Settings')}
  79. />
  80. </ButtonBar>
  81. </Layout.HeaderActions>
  82. <Layout.HeaderTabs value={activeTab}>
  83. <TabList hideBorder>
  84. {alertRulesLink}
  85. <TabList.Item
  86. key="stream"
  87. to={makeAlertsPathname({
  88. path: '/',
  89. organization,
  90. })}
  91. >
  92. {t('History')}
  93. </TabList.Item>
  94. </TabList>
  95. </Layout.HeaderTabs>
  96. </Layout.Header>
  97. );
  98. }
  99. export default AlertHeader;