edit.tsx 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import {Component, Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import * as Layout from 'sentry/components/layouts/thirds';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  7. import {t} from 'sentry/locale';
  8. import space from 'sentry/styles/space';
  9. import {Organization, Project} from 'sentry/types';
  10. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  11. import Teams from 'sentry/utils/teams';
  12. import BuilderBreadCrumbs from 'sentry/views/alerts/builder/builderBreadCrumbs';
  13. import IncidentRulesDetails from 'sentry/views/alerts/incidentRules/details';
  14. import IssueEditor from 'sentry/views/alerts/issueRuleEditor';
  15. type RouteParams = {
  16. orgId: string;
  17. projectId: string;
  18. ruleId: string;
  19. };
  20. type Props = RouteComponentProps<RouteParams, {}> & {
  21. hasMetricAlerts: boolean;
  22. organization: Organization;
  23. project: Project;
  24. };
  25. type State = {
  26. ruleName: string;
  27. };
  28. class ProjectAlertsEditor extends Component<Props, State> {
  29. state: State = {
  30. ruleName: '',
  31. };
  32. componentDidMount() {
  33. const {organization, project} = this.props;
  34. trackAdvancedAnalyticsEvent('edit_alert_rule.viewed', {
  35. organization,
  36. project_id: project.id,
  37. alert_type: this.getAlertType(),
  38. });
  39. }
  40. handleChangeTitle = (ruleName: string) => {
  41. this.setState({ruleName});
  42. };
  43. getTitle() {
  44. const {ruleName} = this.state;
  45. return `${ruleName}`;
  46. }
  47. getAlertType(): 'metric' | 'issue' {
  48. return location.pathname.includes('/alerts/metric-rules/') ? 'metric' : 'issue';
  49. }
  50. render() {
  51. const {hasMetricAlerts, location, organization, project, routes} = this.props;
  52. const alertType = this.getAlertType();
  53. return (
  54. <Fragment>
  55. <SentryDocumentTitle
  56. title={this.getTitle()}
  57. orgSlug={organization.slug}
  58. projectSlug={project.slug}
  59. />
  60. <Layout.Header>
  61. <Layout.HeaderContent>
  62. <BuilderBreadCrumbs
  63. orgSlug={organization.slug}
  64. title={t('Edit Alert Rule')}
  65. projectSlug={project.slug}
  66. routes={routes}
  67. location={location}
  68. />
  69. <Layout.Title>{this.getTitle()}</Layout.Title>
  70. </Layout.HeaderContent>
  71. </Layout.Header>
  72. <EditConditionsBody>
  73. <Layout.Main fullWidth>
  74. <Teams provideUserTeams>
  75. {({teams, initiallyLoaded}) =>
  76. initiallyLoaded ? (
  77. <Fragment>
  78. {(!hasMetricAlerts || alertType === 'issue') && (
  79. <IssueEditor
  80. {...this.props}
  81. project={project}
  82. onChangeTitle={this.handleChangeTitle}
  83. userTeamIds={teams.map(({id}) => id)}
  84. />
  85. )}
  86. {hasMetricAlerts && alertType === 'metric' && (
  87. <IncidentRulesDetails
  88. {...this.props}
  89. project={project}
  90. onChangeTitle={this.handleChangeTitle}
  91. userTeamIds={teams.map(({id}) => id)}
  92. />
  93. )}
  94. </Fragment>
  95. ) : (
  96. <LoadingIndicator />
  97. )
  98. }
  99. </Teams>
  100. </Layout.Main>
  101. </EditConditionsBody>
  102. </Fragment>
  103. );
  104. }
  105. }
  106. const EditConditionsBody = styled(Layout.Body)`
  107. margin-bottom: -${space(3)};
  108. *:not(img) {
  109. max-width: 1000px;
  110. }
  111. `;
  112. export default ProjectAlertsEditor;