edit.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import {Component, Fragment} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import * as Layout from 'sentry/components/layouts/thirds';
  4. import LoadingIndicator from 'sentry/components/loadingIndicator';
  5. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  6. import {t} from 'sentry/locale';
  7. import type {Member, Organization, Project} from 'sentry/types';
  8. import {trackAnalytics} from 'sentry/utils/analytics';
  9. import Teams from 'sentry/utils/teams';
  10. import BuilderBreadCrumbs from 'sentry/views/alerts/builder/builderBreadCrumbs';
  11. import IssueEditor from 'sentry/views/alerts/rules/issue';
  12. import MetricRulesEdit from 'sentry/views/alerts/rules/metric/edit';
  13. import {AlertRuleType} from 'sentry/views/alerts/types';
  14. type RouteParams = {
  15. projectId: string;
  16. ruleId: string;
  17. };
  18. type Props = RouteComponentProps<RouteParams, {}> & {
  19. hasMetricAlerts: boolean;
  20. members: Member[] | undefined;
  21. organization: Organization;
  22. project: Project;
  23. };
  24. type State = {
  25. ruleName: string;
  26. };
  27. class ProjectAlertsEditor extends Component<Props, State> {
  28. state: State = {
  29. ruleName: '',
  30. };
  31. componentDidMount() {
  32. const {organization, project} = this.props;
  33. trackAnalytics('edit_alert_rule.viewed', {
  34. organization,
  35. project_id: project.id,
  36. alert_type: this.getAlertType(),
  37. });
  38. }
  39. handleChangeTitle = (ruleName: string) => {
  40. this.setState({ruleName});
  41. };
  42. getTitle() {
  43. const {ruleName} = this.state;
  44. return `${ruleName}`;
  45. }
  46. getAlertType(): AlertRuleType {
  47. return location.pathname.includes('/alerts/metric-rules/')
  48. ? AlertRuleType.METRIC
  49. : AlertRuleType.ISSUE;
  50. }
  51. render() {
  52. const {hasMetricAlerts, organization, project, members, location} = this.props;
  53. const alertType = this.getAlertType();
  54. // TODO(telemetry-experience): Remove once the migration is complete
  55. const isMigration = location?.query?.migration === '1';
  56. return (
  57. <Fragment>
  58. <SentryDocumentTitle
  59. title={this.getTitle()}
  60. orgSlug={organization.slug}
  61. projectSlug={project.slug}
  62. />
  63. <Layout.Header>
  64. <Layout.HeaderContent>
  65. <BuilderBreadCrumbs
  66. organization={organization}
  67. title={isMigration ? t('Review Thresholds') : t('Edit Alert Rule')}
  68. projectSlug={project.slug}
  69. />
  70. <Layout.Title>{this.getTitle()}</Layout.Title>
  71. </Layout.HeaderContent>
  72. </Layout.Header>
  73. <Layout.Body>
  74. <Teams provideUserTeams>
  75. {({teams, initiallyLoaded}) =>
  76. initiallyLoaded ? (
  77. <Fragment>
  78. {(!hasMetricAlerts || alertType === AlertRuleType.ISSUE) && (
  79. <IssueEditor
  80. {...this.props}
  81. project={project}
  82. onChangeTitle={this.handleChangeTitle}
  83. userTeamIds={teams.map(({id}) => id)}
  84. members={members}
  85. />
  86. )}
  87. {hasMetricAlerts && alertType === AlertRuleType.METRIC && (
  88. <MetricRulesEdit
  89. {...this.props}
  90. project={project}
  91. onChangeTitle={this.handleChangeTitle}
  92. userTeamIds={teams.map(({id}) => id)}
  93. />
  94. )}
  95. </Fragment>
  96. ) : (
  97. <LoadingIndicator />
  98. )
  99. }
  100. </Teams>
  101. </Layout.Body>
  102. </Fragment>
  103. );
  104. }
  105. }
  106. export default ProjectAlertsEditor;