awsLambdaCloudformation.tsx 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. import {Component, Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import debounce from 'lodash/debounce';
  4. import * as qs from 'query-string';
  5. import {addErrorMessage, addLoadingMessage} from 'sentry/actionCreators/indicator';
  6. import Button from 'sentry/components/actions/button';
  7. import SelectField from 'sentry/components/forms/fields/selectField';
  8. import TextField from 'sentry/components/forms/fields/textField';
  9. import List from 'sentry/components/list';
  10. import ListItem from 'sentry/components/list/listItem';
  11. import {t} from 'sentry/locale';
  12. import {Organization} from 'sentry/types';
  13. import {uniqueId} from 'sentry/utils/guid';
  14. import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
  15. import FooterWithButtons from './components/footerWithButtons';
  16. import HeaderWithHelp from './components/headerWithHelp';
  17. // let the browser generate and store the external ID
  18. // this way the same user always has the same external ID if they restart the pipeline
  19. const ID_NAME = 'AWS_EXTERNAL_ID';
  20. const getAwsExternalId = () => {
  21. let awsExternalId = window.localStorage.getItem(ID_NAME);
  22. if (!awsExternalId) {
  23. awsExternalId = uniqueId();
  24. window.localStorage.setItem(ID_NAME, awsExternalId);
  25. }
  26. return awsExternalId;
  27. };
  28. const accountNumberRegex = /^\d{12}$/;
  29. const testAccountNumber = (arn: string) => accountNumberRegex.test(arn);
  30. type Props = {
  31. baseCloudformationUrl: string;
  32. initialStepNumber: number;
  33. organization: Organization;
  34. regionList: string[];
  35. stackName: string;
  36. templateUrl: string;
  37. accountNumber?: string;
  38. awsExternalId?: string;
  39. error?: string;
  40. region?: string;
  41. };
  42. type State = {
  43. accountNumber?: string;
  44. accountNumberError?: string;
  45. awsExternalId?: string;
  46. region?: string;
  47. showInputs?: boolean;
  48. submitting?: boolean;
  49. };
  50. export default class AwsLambdaCloudformation extends Component<Props, State> {
  51. state: State = {
  52. accountNumber: this.props.accountNumber,
  53. region: this.props.region,
  54. awsExternalId: this.props.awsExternalId ?? getAwsExternalId(),
  55. showInputs: !!this.props.awsExternalId,
  56. };
  57. componentDidMount() {
  58. // show the error if we have it
  59. const {error} = this.props;
  60. if (error) {
  61. addErrorMessage(error, {duration: 10000});
  62. }
  63. }
  64. get initialData() {
  65. const {region, accountNumber} = this.props;
  66. const {awsExternalId} = this.state;
  67. return {
  68. awsExternalId,
  69. region,
  70. accountNumber,
  71. };
  72. }
  73. get cloudformationUrl() {
  74. // generate the cloudformation URL using the params we get from the server
  75. // and the external id we generate
  76. const {baseCloudformationUrl, templateUrl, stackName} = this.props;
  77. // always us the generated AWS External ID in local storage
  78. const awsExternalId = getAwsExternalId();
  79. const query = qs.stringify({
  80. templateURL: templateUrl,
  81. stackName,
  82. param_ExternalId: awsExternalId,
  83. });
  84. return `${baseCloudformationUrl}?${query}`;
  85. }
  86. get regionOptions() {
  87. return this.props.regionList.map(region => ({value: region, label: region}));
  88. }
  89. handleSubmit = (e: React.MouseEvent) => {
  90. this.setState({submitting: true});
  91. e.preventDefault();
  92. // use the external ID from the form on on the submission
  93. const {accountNumber, region, awsExternalId} = this.state;
  94. const data = {
  95. accountNumber,
  96. region,
  97. awsExternalId,
  98. };
  99. addLoadingMessage(t('Submitting\u2026'));
  100. const {
  101. location: {origin},
  102. } = window;
  103. // redirect to the extensions endpoint with the form fields as query params
  104. // this is needed so we don't restart the pipeline loading from the original
  105. // OrganizationIntegrationSetupView route
  106. const newUrl = `${origin}/extensions/aws_lambda/setup/?${qs.stringify(data)}`;
  107. window.location.assign(newUrl);
  108. };
  109. validateAccountNumber = (value: string) => {
  110. // validate the account number
  111. let accountNumberError = '';
  112. if (!value) {
  113. accountNumberError = t('Account ID required');
  114. } else if (!testAccountNumber(value)) {
  115. accountNumberError = t('Invalid Account ID');
  116. }
  117. this.setState({accountNumberError});
  118. };
  119. handleChangeArn = (accountNumber: string) => {
  120. this.debouncedTrackValueChanged('accountNumber');
  121. // reset the error if we ever get a valid account number
  122. if (testAccountNumber(accountNumber)) {
  123. this.setState({accountNumberError: ''});
  124. }
  125. this.setState({accountNumber});
  126. };
  127. handleChangeRegion = (region: string) => {
  128. this.debouncedTrackValueChanged('region');
  129. this.setState({region});
  130. };
  131. handleChangeExternalId = (awsExternalId: string) => {
  132. this.debouncedTrackValueChanged('awsExternalId');
  133. awsExternalId = awsExternalId.trim();
  134. this.setState({awsExternalId});
  135. };
  136. handleChangeShowInputs = () => {
  137. this.setState({showInputs: true});
  138. trackIntegrationAnalytics('integrations.installation_input_value_changed', {
  139. integration: 'aws_lambda',
  140. integration_type: 'first_party',
  141. field_name: 'showInputs',
  142. organization: this.props.organization,
  143. });
  144. };
  145. get formValid() {
  146. const {accountNumber, region, awsExternalId} = this.state;
  147. return !!region && testAccountNumber(accountNumber || '') && !!awsExternalId;
  148. }
  149. // debounce so we don't send a request on every input change
  150. debouncedTrackValueChanged = debounce((fieldName: string) => {
  151. trackIntegrationAnalytics('integrations.installation_input_value_changed', {
  152. integration: 'aws_lambda',
  153. integration_type: 'first_party',
  154. field_name: fieldName,
  155. organization: this.props.organization,
  156. });
  157. }, 200);
  158. trackOpenCloudFormation = () => {
  159. trackIntegrationAnalytics('integrations.cloudformation_link_clicked', {
  160. integration: 'aws_lambda',
  161. integration_type: 'first_party',
  162. organization: this.props.organization,
  163. });
  164. };
  165. render() {
  166. const {initialStepNumber} = this.props;
  167. const {
  168. accountNumber,
  169. region,
  170. accountNumberError,
  171. submitting,
  172. awsExternalId,
  173. showInputs,
  174. } = this.state;
  175. return (
  176. <Fragment>
  177. <HeaderWithHelp docsUrl="https://docs.sentry.io/product/integrations/cloud-monitoring/aws-lambda/" />
  178. <StyledList symbol="colored-numeric" initialCounterValue={initialStepNumber}>
  179. <ListItem>
  180. <h3>{t("Add Sentry's CloudFormation")}</h3>
  181. <StyledButton
  182. priority="primary"
  183. onClick={this.trackOpenCloudFormation}
  184. external
  185. href={this.cloudformationUrl}
  186. >
  187. {t('Go to AWS')}
  188. </StyledButton>
  189. {!showInputs && (
  190. <Fragment>
  191. <p>
  192. {t(
  193. "Once you've created Sentry's CloudFormation stack (or if you already have one) press the button below to continue."
  194. )}
  195. </p>
  196. <Button name="showInputs" onClick={this.handleChangeShowInputs}>
  197. {t("I've created the stack")}
  198. </Button>
  199. </Fragment>
  200. )}
  201. </ListItem>
  202. {showInputs ? (
  203. <ListItem>
  204. <h3>{t('Add AWS Account Information')}</h3>
  205. <TextField
  206. name="accountNumber"
  207. value={accountNumber}
  208. onChange={this.handleChangeArn}
  209. onBlur={this.validateAccountNumber}
  210. error={accountNumberError}
  211. inline={false}
  212. stacked
  213. label={t('AWS Account ID')}
  214. showHelpInTooltip
  215. help={t(
  216. 'Your Account ID can be found on the right side of the header in AWS'
  217. )}
  218. />
  219. <SelectField
  220. name="region"
  221. value={region}
  222. onChange={this.handleChangeRegion}
  223. options={this.regionOptions}
  224. allowClear={false}
  225. inline={false}
  226. stacked
  227. label={t('AWS Region')}
  228. showHelpInTooltip
  229. help={t(
  230. 'Your current region can be found on the right side of the header in AWS'
  231. )}
  232. />
  233. <TextField
  234. name="awsExternalId"
  235. value={awsExternalId}
  236. onChange={this.handleChangeExternalId}
  237. inline={false}
  238. stacked
  239. error={awsExternalId ? '' : t('External ID Required')}
  240. label={t('External ID')}
  241. showHelpInTooltip
  242. help={t(
  243. 'Do not edit unless you are copying from a previously created CloudFormation stack'
  244. )}
  245. />
  246. </ListItem>
  247. ) : (
  248. <Fragment />
  249. )}
  250. </StyledList>
  251. <FooterWithButtons
  252. buttonText={t('Next')}
  253. onClick={this.handleSubmit}
  254. disabled={submitting || !this.formValid}
  255. />
  256. </Fragment>
  257. );
  258. }
  259. }
  260. const StyledList = styled(List)`
  261. padding: 100px 50px 50px 50px;
  262. `;
  263. const StyledButton = styled(Button)`
  264. margin-bottom: 20px;
  265. `;