monitorHeaderActions.tsx 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import {deleteMonitor, updateMonitor} from 'sentry/actionCreators/monitors';
  2. import {Button} from 'sentry/components/button';
  3. import ButtonBar from 'sentry/components/buttonBar';
  4. import Confirm from 'sentry/components/confirm';
  5. import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
  6. import {IconDelete, IconEdit, IconSubscribed, IconUnsubscribed} from 'sentry/icons';
  7. import {t} from 'sentry/locale';
  8. import {browserHistory} from 'sentry/utils/browserHistory';
  9. import useApi from 'sentry/utils/useApi';
  10. import usePageFilters from 'sentry/utils/usePageFilters';
  11. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  12. import type {Monitor} from '../types';
  13. import {StatusToggleButton} from './statusToggleButton';
  14. type Props = {
  15. monitor: Monitor;
  16. onUpdate: (data: Monitor) => void;
  17. orgSlug: string;
  18. };
  19. function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) {
  20. const api = useApi();
  21. const {selection} = usePageFilters();
  22. const endpointOptions = {
  23. query: {
  24. project: selection.projects,
  25. environment: selection.environments,
  26. },
  27. };
  28. const handleDelete = async () => {
  29. await deleteMonitor(api, orgSlug, monitor);
  30. browserHistory.push(
  31. normalizeUrl({
  32. pathname: `/organizations/${orgSlug}/crons/`,
  33. query: endpointOptions.query,
  34. })
  35. );
  36. };
  37. const handleUpdate = async (data: Partial<Monitor>) => {
  38. const resp = await updateMonitor(api, orgSlug, monitor, data);
  39. if (resp !== null) {
  40. onUpdate?.(resp);
  41. }
  42. };
  43. return (
  44. <ButtonBar gap={1}>
  45. <FeedbackWidgetButton />
  46. <Button
  47. size="sm"
  48. icon={monitor.isMuted ? <IconSubscribed /> : <IconUnsubscribed />}
  49. onClick={() => handleUpdate({isMuted: !monitor.isMuted})}
  50. >
  51. {monitor.isMuted ? t('Unmute') : t('Mute')}
  52. </Button>
  53. <StatusToggleButton
  54. size="sm"
  55. monitor={monitor}
  56. onToggleStatus={status => handleUpdate({status})}
  57. />
  58. <Confirm
  59. onConfirm={handleDelete}
  60. message={t('Are you sure you want to permanently delete this cron monitor?')}
  61. >
  62. <Button size="sm" icon={<IconDelete size="xs" />} aria-label={t('Delete')} />
  63. </Confirm>
  64. <Button
  65. priority="primary"
  66. size="sm"
  67. icon={<IconEdit />}
  68. to={{
  69. pathname: `/organizations/${orgSlug}/crons/${monitor.project.slug}/${monitor.slug}/edit/`,
  70. // TODO(davidenwang): Right now we have to pass the environment
  71. // through the URL so that when we save the monitor and are
  72. // redirected back to the details page it queries the backend
  73. // for a monitor environment with check-in data
  74. query: {
  75. environment: selection.environments,
  76. project: selection.projects,
  77. },
  78. }}
  79. >
  80. {t('Edit')}
  81. </Button>
  82. </ButtonBar>
  83. );
  84. }
  85. export default MonitorHeaderActions;