projectReleaseTracking.tsx 8.1 KB

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