create.tsx 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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 {Member, Organization, Project} from 'sentry/types';
  9. import EventView from 'sentry/utils/discover/eventView';
  10. import {uniqueId} from 'sentry/utils/guid';
  11. import withRouteAnalytics, {
  12. WithRouteAnalyticsProps,
  13. } from 'sentry/utils/routeAnalytics/withRouteAnalytics';
  14. import Teams from 'sentry/utils/teams';
  15. import BuilderBreadCrumbs from 'sentry/views/alerts/builder/builderBreadCrumbs';
  16. import IssueRuleEditor from 'sentry/views/alerts/rules/issue';
  17. import MetricRulesCreate from 'sentry/views/alerts/rules/metric/create';
  18. import MetricRulesDuplicate from 'sentry/views/alerts/rules/metric/duplicate';
  19. import {AlertRuleType} from 'sentry/views/alerts/types';
  20. import {
  21. AlertType as WizardAlertType,
  22. AlertWizardAlertNames,
  23. DEFAULT_WIZARD_TEMPLATE,
  24. WizardRuleTemplate,
  25. } from 'sentry/views/alerts/wizard/options';
  26. import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils';
  27. type RouteParams = {
  28. alertType?: AlertRuleType;
  29. projectId?: string;
  30. };
  31. type Props = RouteComponentProps<RouteParams, {}> &
  32. WithRouteAnalyticsProps & {
  33. hasMetricAlerts: boolean;
  34. members: Member[] | undefined;
  35. organization: Organization;
  36. project: Project;
  37. };
  38. type State = {
  39. alertType: AlertRuleType;
  40. };
  41. class Create extends Component<Props, State> {
  42. state = this.getInitialState();
  43. getInitialState(): State {
  44. const {organization, location, project, params, router} = this.props;
  45. const {aggregate, dataset, eventTypes, createFromDuplicate} = location?.query ?? {};
  46. const alertType = params.alertType || AlertRuleType.METRIC;
  47. // TODO(taylangocmen): Remove redirect with aggregate && dataset && eventTypes, init from template
  48. if (
  49. alertType === AlertRuleType.METRIC &&
  50. !(aggregate && dataset && eventTypes) &&
  51. !createFromDuplicate
  52. ) {
  53. router.replace({
  54. ...location,
  55. pathname: `/organizations/${organization.slug}/alerts/new/${alertType}`,
  56. query: {
  57. ...location.query,
  58. ...DEFAULT_WIZARD_TEMPLATE,
  59. project: project.slug,
  60. },
  61. });
  62. }
  63. return {alertType};
  64. }
  65. componentDidMount() {
  66. const {project} = this.props;
  67. this.props.setRouteAnalyticsParams({
  68. project_id: project.id,
  69. session_id: this.sessionId,
  70. alert_type: this.state.alertType,
  71. duplicate_rule: this.isDuplicateRule ? 'true' : 'false',
  72. wizard_v3: 'true',
  73. });
  74. this.props.setEventNames('new_alert_rule.viewed', 'New Alert Rule: Viewed');
  75. }
  76. /** Used to track analytics within one visit to the creation page */
  77. sessionId = uniqueId();
  78. get isDuplicateRule(): boolean {
  79. const {location} = this.props;
  80. const createFromDuplicate = location?.query.createFromDuplicate === 'true';
  81. return createFromDuplicate && location?.query.duplicateRuleId;
  82. }
  83. render() {
  84. const {hasMetricAlerts, organization, project, location, routes, members} =
  85. this.props;
  86. const {alertType} = this.state;
  87. const {aggregate, dataset, eventTypes, createFromWizard, createFromDiscover} =
  88. location?.query ?? {};
  89. const wizardTemplate: WizardRuleTemplate = {
  90. aggregate: aggregate ?? DEFAULT_WIZARD_TEMPLATE.aggregate,
  91. dataset: dataset ?? DEFAULT_WIZARD_TEMPLATE.dataset,
  92. eventTypes: eventTypes ?? DEFAULT_WIZARD_TEMPLATE.eventTypes,
  93. };
  94. const eventView = createFromDiscover ? EventView.fromLocation(location) : undefined;
  95. let wizardAlertType: undefined | WizardAlertType;
  96. if (createFromWizard && alertType === AlertRuleType.METRIC) {
  97. wizardAlertType = wizardTemplate
  98. ? getAlertTypeFromAggregateDataset(wizardTemplate)
  99. : 'issues';
  100. }
  101. const title = t('New Alert Rule');
  102. return (
  103. <Fragment>
  104. <SentryDocumentTitle title={title} projectSlug={project.slug} />
  105. <Layout.Header>
  106. <StyledHeaderContent>
  107. <BuilderBreadCrumbs
  108. organization={organization}
  109. alertName={t('Set Conditions')}
  110. title={wizardAlertType ? t('Select Alert') : title}
  111. projectSlug={project.slug}
  112. alertType={alertType}
  113. routes={routes}
  114. location={location}
  115. canChangeProject
  116. />
  117. <Layout.Title>
  118. {wizardAlertType
  119. ? `${t('Set Conditions for')} ${AlertWizardAlertNames[wizardAlertType]}`
  120. : title}
  121. </Layout.Title>
  122. </StyledHeaderContent>
  123. </Layout.Header>
  124. <Body>
  125. <Teams provideUserTeams>
  126. {({teams, initiallyLoaded}) =>
  127. initiallyLoaded ? (
  128. <Fragment>
  129. {(!hasMetricAlerts || alertType === AlertRuleType.ISSUE) && (
  130. <IssueRuleEditor
  131. {...this.props}
  132. project={project}
  133. userTeamIds={teams.map(({id}) => id)}
  134. members={members}
  135. />
  136. )}
  137. {hasMetricAlerts &&
  138. alertType === AlertRuleType.METRIC &&
  139. (this.isDuplicateRule ? (
  140. <MetricRulesDuplicate
  141. {...this.props}
  142. eventView={eventView}
  143. wizardTemplate={wizardTemplate}
  144. sessionId={this.sessionId}
  145. project={project}
  146. userTeamIds={teams.map(({id}) => id)}
  147. />
  148. ) : (
  149. <MetricRulesCreate
  150. {...this.props}
  151. eventView={eventView}
  152. wizardTemplate={wizardTemplate}
  153. sessionId={this.sessionId}
  154. project={project}
  155. userTeamIds={teams.map(({id}) => id)}
  156. />
  157. ))}
  158. </Fragment>
  159. ) : (
  160. <LoadingIndicator />
  161. )
  162. }
  163. </Teams>
  164. </Body>
  165. </Fragment>
  166. );
  167. }
  168. }
  169. const StyledHeaderContent = styled(Layout.HeaderContent)`
  170. overflow: visible;
  171. `;
  172. const Body = styled(Layout.Body)`
  173. && {
  174. padding: 0;
  175. gap: 0;
  176. }
  177. grid-template-rows: 1fr;
  178. @media (min-width: ${p => p.theme.breakpoints.large}) {
  179. grid-template-columns: minmax(100px, auto) 400px;
  180. }
  181. `;
  182. export default withRouteAnalytics(Create);