create.tsx 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import {Fragment} from 'react';
  2. import {Breadcrumbs} from 'sentry/components/breadcrumbs';
  3. import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
  4. import * as Layout from 'sentry/components/layouts/thirds';
  5. import {t} from 'sentry/locale';
  6. import HookStore from 'sentry/stores/hookStore';
  7. import {browserHistory} from 'sentry/utils/browserHistory';
  8. import useOrganization from 'sentry/utils/useOrganization';
  9. import usePageFilters from 'sentry/utils/usePageFilters';
  10. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  11. import MonitorForm from './components/monitorForm';
  12. import type {Monitor} from './types';
  13. function CreateMonitor() {
  14. const organization = useOrganization();
  15. const orgSlug = organization.slug;
  16. const {selection} = usePageFilters();
  17. const monitorCreationCallbacks = HookStore.get('callback:on-monitor-created');
  18. function onSubmitSuccess(data: Monitor) {
  19. const endpointOptions = {
  20. query: {
  21. project: selection.projects,
  22. environment: selection.environments,
  23. },
  24. };
  25. browserHistory.push(
  26. normalizeUrl({
  27. pathname: `/organizations/${orgSlug}/crons/${data.project.slug}/${data.slug}/`,
  28. query: endpointOptions.query,
  29. })
  30. );
  31. monitorCreationCallbacks.map(cb => cb(organization));
  32. }
  33. return (
  34. <Fragment>
  35. <Layout.Header>
  36. <Layout.HeaderContent>
  37. <Breadcrumbs
  38. crumbs={[
  39. {
  40. label: t('Crons'),
  41. to: `/organizations/${orgSlug}/crons/`,
  42. },
  43. {
  44. label: t('Add Monitor'),
  45. },
  46. ]}
  47. />
  48. <Layout.Title>{t('Add Monitor')}</Layout.Title>
  49. </Layout.HeaderContent>
  50. <Layout.HeaderActions>
  51. <FeedbackWidgetButton />
  52. </Layout.HeaderActions>
  53. </Layout.Header>
  54. <Layout.Body>
  55. <Layout.Main fullWidth>
  56. <MonitorForm
  57. apiMethod="POST"
  58. apiEndpoint={`/organizations/${orgSlug}/monitors/`}
  59. onSubmitSuccess={onSubmitSuccess}
  60. submitLabel={t('Create')}
  61. />
  62. </Layout.Main>
  63. </Layout.Body>
  64. </Fragment>
  65. );
  66. }
  67. export default CreateMonitor;