projectReleaseTracking.tsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import type {RouteComponentProps} from 'react-router';
  2. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  3. import {Alert} from 'sentry/components/alert';
  4. import AutoSelectText from 'sentry/components/autoSelectText';
  5. import {Button} from 'sentry/components/button';
  6. import Confirm from 'sentry/components/confirm';
  7. import FieldGroup from 'sentry/components/forms/fieldGroup';
  8. import ExternalLink from 'sentry/components/links/externalLink';
  9. import LoadingIndicator from 'sentry/components/loadingIndicator';
  10. import Panel from 'sentry/components/panels/panel';
  11. import PanelBody from 'sentry/components/panels/panelBody';
  12. import PanelHeader from 'sentry/components/panels/panelHeader';
  13. import PluginList from 'sentry/components/pluginList';
  14. import TextCopyInput from 'sentry/components/textCopyInput';
  15. import {t, tct} from 'sentry/locale';
  16. import type {Organization, Plugin, Project} from 'sentry/types';
  17. import getDynamicText from 'sentry/utils/getDynamicText';
  18. import routeTitleGen from 'sentry/utils/routeTitle';
  19. import withPlugins from 'sentry/utils/withPlugins';
  20. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  21. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  22. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  23. const TOKEN_PLACEHOLDER = 'YOUR_TOKEN';
  24. const WEBHOOK_PLACEHOLDER = 'YOUR_WEBHOOK_URL';
  25. import {hasEveryAccess} from 'sentry/components/acl/access';
  26. type Props = {
  27. organization: Organization;
  28. plugins: {loading: boolean; plugins: Plugin[]};
  29. project: Project;
  30. } & RouteComponentProps<{projectId: string}, {}>;
  31. type State = {
  32. data: {
  33. token: string;
  34. webhookUrl: string;
  35. } | null;
  36. } & DeprecatedAsyncView['state'];
  37. const placeholderData = {
  38. token: TOKEN_PLACEHOLDER,
  39. webhookUrl: WEBHOOK_PLACEHOLDER,
  40. };
  41. class ProjectReleaseTracking extends DeprecatedAsyncView<Props, State> {
  42. getTitle() {
  43. const {projectId} = this.props.params;
  44. return routeTitleGen(t('Releases'), projectId, false);
  45. }
  46. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  47. const {organization} = this.props;
  48. const {projectId} = this.props.params;
  49. // Allow 403s
  50. return [
  51. [
  52. 'data',
  53. `/projects/${organization.slug}/${projectId}/releases/token/`,
  54. {},
  55. {allowError: err => err && err.status === 403},
  56. ],
  57. ];
  58. }
  59. handleRegenerateToken = () => {
  60. const {organization} = this.props;
  61. const {projectId} = this.props.params;
  62. this.api.request(`/projects/${organization.slug}/${projectId}/releases/token/`, {
  63. method: 'POST',
  64. data: {project: projectId},
  65. success: data => {
  66. this.setState({
  67. data: {
  68. token: data.token,
  69. webhookUrl: data.webhookUrl,
  70. },
  71. });
  72. addSuccessMessage(
  73. t(
  74. 'Your deploy token has been regenerated. You will need to update any existing deploy hooks.'
  75. )
  76. );
  77. },
  78. error: () => {
  79. addErrorMessage(t('Unable to regenerate deploy token, please try again'));
  80. },
  81. });
  82. };
  83. getReleaseWebhookIntructions() {
  84. const {webhookUrl} = this.state.data || placeholderData;
  85. return (
  86. 'curl ' +
  87. webhookUrl +
  88. ' \\' +
  89. '\n ' +
  90. '-X POST \\' +
  91. '\n ' +
  92. "-H 'Content-Type: application/json' \\" +
  93. '\n ' +
  94. '-d \'{"version": "abcdefg"}\''
  95. );
  96. }
  97. renderBody() {
  98. const {organization, project, plugins} = this.props;
  99. const hasWrite = hasEveryAccess(['project:write'], {organization, project});
  100. if (plugins.loading) {
  101. return <LoadingIndicator />;
  102. }
  103. const pluginList = plugins.plugins.filter(
  104. (p: Plugin) => p.type === 'release-tracking' && p.hasConfiguration
  105. );
  106. let {token, webhookUrl} = this.state.data || placeholderData;
  107. token = getDynamicText({value: token, fixed: '__TOKEN__'});
  108. webhookUrl = getDynamicText({value: webhookUrl, fixed: '__WEBHOOK_URL__'});
  109. return (
  110. <div>
  111. <SettingsPageHeader title={t('Release Tracking')} />
  112. <TextBlock>
  113. {t(
  114. 'Configure release tracking for this project to automatically record new releases of your application.'
  115. )}
  116. </TextBlock>
  117. {!hasWrite && (
  118. <Alert type="warning">
  119. {t(
  120. 'You do not have sufficient permissions to access Release tokens, placeholders are displayed below.'
  121. )}
  122. </Alert>
  123. )}
  124. <Panel>
  125. <PanelHeader>{t('Client Configuration')}</PanelHeader>
  126. <PanelBody withPadding>
  127. <p>
  128. {tct(
  129. 'Start by binding the [release] attribute in your application, take a look at [link] to see how to configure this for the SDK you are using.',
  130. {
  131. link: (
  132. <ExternalLink href="https://docs.sentry.io/platform-redirect/?next=/configuration/releases/">
  133. our docs
  134. </ExternalLink>
  135. ),
  136. release: <code>release</code>,
  137. }
  138. )}
  139. </p>
  140. <p>
  141. {t(
  142. "This will annotate each event with the version of your application, as well as automatically create a release entity in the system the first time it's seen."
  143. )}
  144. </p>
  145. <p>
  146. {t(
  147. 'In addition you may configure a release hook (or use our API) to push a release and include additional metadata with it.'
  148. )}
  149. </p>
  150. </PanelBody>
  151. </Panel>
  152. <Panel>
  153. <PanelHeader>{t('Deploy Token')}</PanelHeader>
  154. <PanelBody>
  155. <FieldGroup
  156. label={t('Token')}
  157. help={t('A unique secret which is used to generate deploy hook URLs')}
  158. >
  159. <TextCopyInput>{token}</TextCopyInput>
  160. </FieldGroup>
  161. <FieldGroup
  162. label={t('Regenerate Token')}
  163. help={t(
  164. 'If a service becomes compromised, you should regenerate the token and re-configure any deploy hooks with the newly generated URL.'
  165. )}
  166. >
  167. <div>
  168. <Confirm
  169. disabled={!hasWrite}
  170. priority="danger"
  171. onConfirm={this.handleRegenerateToken}
  172. message={t(
  173. 'Are you sure you want to regenerate your token? Your current token will no longer be usable.'
  174. )}
  175. >
  176. <Button priority="danger">{t('Regenerate Token')}</Button>
  177. </Confirm>
  178. </div>
  179. </FieldGroup>
  180. </PanelBody>
  181. </Panel>
  182. <Panel>
  183. <PanelHeader>{t('Webhook')}</PanelHeader>
  184. <PanelBody withPadding>
  185. <p>
  186. {t(
  187. 'If you simply want to integrate with an existing system, sometimes its easiest just to use a webhook.'
  188. )}
  189. </p>
  190. <AutoSelectText>
  191. <pre>{webhookUrl}</pre>
  192. </AutoSelectText>
  193. <p>
  194. {t(
  195. 'The release webhook accepts the same parameters as the "Create a new Release" API endpoint.'
  196. )}
  197. </p>
  198. {getDynamicText({
  199. value: (
  200. <AutoSelectText>
  201. <pre>{this.getReleaseWebhookIntructions()}</pre>
  202. </AutoSelectText>
  203. ),
  204. fixed: (
  205. <pre>
  206. {`curl __WEBHOOK_URL__ \\
  207. -X POST \\
  208. -H 'Content-Type: application/json' \\
  209. -d \'{"version": "abcdefg"}\'`}
  210. </pre>
  211. ),
  212. })}
  213. </PanelBody>
  214. </Panel>
  215. <PluginList
  216. organization={organization}
  217. project={project}
  218. pluginList={pluginList}
  219. />
  220. <Panel>
  221. <PanelHeader>{t('API')}</PanelHeader>
  222. <PanelBody withPadding>
  223. <p>
  224. {t(
  225. 'You can notify Sentry when you release new versions of your application via our HTTP API.'
  226. )}
  227. </p>
  228. <p>
  229. {tct('See the [link:releases documentation] for more information.', {
  230. link: <ExternalLink href="https://docs.sentry.io/workflow/releases/" />,
  231. })}
  232. </p>
  233. </PanelBody>
  234. </Panel>
  235. </div>
  236. );
  237. }
  238. }
  239. export default withPlugins(ProjectReleaseTracking);
  240. // Export for tests
  241. export {ProjectReleaseTracking};