create.tsx 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import {Component, Fragment} from 'react';
  2. import {browserHistory, 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 {trackAnalyticsEvent} from 'sentry/utils/analytics';
  11. import EventView from 'sentry/utils/discover/eventView';
  12. import {uniqueId} from 'sentry/utils/guid';
  13. import Teams from 'sentry/utils/teams';
  14. import BuilderBreadCrumbs from 'sentry/views/alerts/builder/builderBreadCrumbs';
  15. import IncidentRulesCreate from 'sentry/views/alerts/incidentRules/create';
  16. import IssueRuleEditor from 'sentry/views/alerts/issueRuleEditor';
  17. import {
  18. AlertType as WizardAlertType,
  19. AlertWizardAlertNames,
  20. WizardRuleTemplate,
  21. } from 'sentry/views/alerts/wizard/options';
  22. import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils';
  23. type RouteParams = {
  24. orgId: string;
  25. projectId: string;
  26. };
  27. type Props = RouteComponentProps<RouteParams, {}> & {
  28. hasMetricAlerts: boolean;
  29. organization: Organization;
  30. project: Project;
  31. };
  32. type AlertType = 'metric' | 'issue';
  33. type State = {
  34. alertType: AlertType;
  35. };
  36. class Create extends Component<Props, State> {
  37. state = this.getInitialState();
  38. getInitialState(): State {
  39. const {organization, location, project} = this.props;
  40. const {createFromDiscover, createFromWizard, aggregate, dataset, eventTypes} =
  41. location?.query ?? {};
  42. let alertType: AlertType = 'issue';
  43. // Alerts can only be created via create from discover or alert wizard
  44. if (createFromDiscover) {
  45. alertType = 'metric';
  46. } else if (createFromWizard) {
  47. if (aggregate && dataset && eventTypes) {
  48. alertType = 'metric';
  49. } else {
  50. // Just to be explicit
  51. alertType = 'issue';
  52. }
  53. } else {
  54. browserHistory.replace(
  55. `/organizations/${organization.slug}/alerts/${project.slug}/wizard`
  56. );
  57. }
  58. return {alertType};
  59. }
  60. componentDidMount() {
  61. const {organization, project} = this.props;
  62. trackAnalyticsEvent({
  63. eventKey: 'new_alert_rule.viewed',
  64. eventName: 'New Alert Rule: Viewed',
  65. organization_id: organization.id,
  66. project_id: project.id,
  67. session_id: this.sessionId,
  68. alert_type: this.state.alertType,
  69. });
  70. }
  71. /** Used to track analytics within one visit to the creation page */
  72. sessionId = uniqueId();
  73. render() {
  74. const {
  75. hasMetricAlerts,
  76. organization,
  77. project,
  78. params: {projectId},
  79. location,
  80. routes,
  81. } = this.props;
  82. const {alertType} = this.state;
  83. const {aggregate, dataset, eventTypes, createFromWizard, createFromDiscover} =
  84. location?.query ?? {};
  85. const wizardTemplate: WizardRuleTemplate = {aggregate, dataset, eventTypes};
  86. const eventView = createFromDiscover ? EventView.fromLocation(location) : undefined;
  87. let wizardAlertType: undefined | WizardAlertType;
  88. if (createFromWizard && alertType === 'metric') {
  89. wizardAlertType = wizardTemplate
  90. ? getAlertTypeFromAggregateDataset(wizardTemplate)
  91. : 'issues';
  92. }
  93. const title = t('New Alert Rule');
  94. return (
  95. <Fragment>
  96. <SentryDocumentTitle title={title} projectSlug={projectId} />
  97. <Layout.Header>
  98. <StyledHeaderContent>
  99. <BuilderBreadCrumbs
  100. orgSlug={organization.slug}
  101. alertName={t('Set Conditions')}
  102. title={wizardAlertType ? t('Select Alert') : title}
  103. projectSlug={projectId}
  104. routes={routes}
  105. location={location}
  106. canChangeProject
  107. />
  108. <Layout.Title>
  109. {wizardAlertType
  110. ? `${t('Set Conditions for')} ${AlertWizardAlertNames[wizardAlertType]}`
  111. : title}
  112. </Layout.Title>
  113. </StyledHeaderContent>
  114. </Layout.Header>
  115. <AlertConditionsBody>
  116. <StyledLayoutMain fullWidth>
  117. <Teams provideUserTeams>
  118. {({teams, initiallyLoaded}) =>
  119. initiallyLoaded ? (
  120. <Fragment>
  121. {(!hasMetricAlerts || alertType === 'issue') && (
  122. <IssueRuleEditor
  123. {...this.props}
  124. project={project}
  125. userTeamIds={teams.map(({id}) => id)}
  126. />
  127. )}
  128. {hasMetricAlerts && alertType === 'metric' && (
  129. <IncidentRulesCreate
  130. {...this.props}
  131. eventView={eventView}
  132. wizardTemplate={wizardTemplate}
  133. sessionId={this.sessionId}
  134. project={project}
  135. isCustomMetric={wizardAlertType === 'custom'}
  136. userTeamIds={teams.map(({id}) => id)}
  137. />
  138. )}
  139. </Fragment>
  140. ) : (
  141. <LoadingIndicator />
  142. )
  143. }
  144. </Teams>
  145. </StyledLayoutMain>
  146. </AlertConditionsBody>
  147. </Fragment>
  148. );
  149. }
  150. }
  151. const AlertConditionsBody = styled(Layout.Body)`
  152. margin-bottom: -${space(3)};
  153. `;
  154. const StyledLayoutMain = styled(Layout.Main)`
  155. max-width: 1000px;
  156. `;
  157. const StyledHeaderContent = styled(Layout.HeaderContent)`
  158. overflow: visible;
  159. `;
  160. export default Create;