projectServiceHookDetails.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. import {Fragment} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import {
  4. addErrorMessage,
  5. addLoadingMessage,
  6. clearIndicators,
  7. } from 'sentry/actionCreators/indicator';
  8. import {Button} from 'sentry/components/button';
  9. import MiniBarChart from 'sentry/components/charts/miniBarChart';
  10. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  11. import EmptyMessage from 'sentry/components/emptyMessage';
  12. import ErrorBoundary from 'sentry/components/errorBoundary';
  13. import FieldGroup from 'sentry/components/forms/fieldGroup';
  14. import Panel from 'sentry/components/panels/panel';
  15. import PanelAlert from 'sentry/components/panels/panelAlert';
  16. import PanelBody from 'sentry/components/panels/panelBody';
  17. import PanelHeader from 'sentry/components/panels/panelHeader';
  18. import TextCopyInput from 'sentry/components/textCopyInput';
  19. import {t} from 'sentry/locale';
  20. import type {Organization, ServiceHook} from 'sentry/types';
  21. import getDynamicText from 'sentry/utils/getDynamicText';
  22. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  23. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  24. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  25. import ServiceHookSettingsForm from 'sentry/views/settings/project/serviceHookSettingsForm';
  26. type Params = {
  27. hookId: string;
  28. projectId: string;
  29. };
  30. type StatsProps = {
  31. organization: Organization;
  32. params: Params;
  33. };
  34. type StatsState = {
  35. stats: {total: number; ts: number}[] | null;
  36. } & DeprecatedAsyncComponent['state'];
  37. class HookStats extends DeprecatedAsyncComponent<StatsProps, StatsState> {
  38. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  39. const until = Math.floor(new Date().getTime() / 1000);
  40. const since = until - 3600 * 24 * 30;
  41. const {organization} = this.props;
  42. const {hookId, projectId} = this.props.params;
  43. return [
  44. [
  45. 'stats',
  46. `/projects/${organization.slug}/${projectId}/hooks/${hookId}/stats/`,
  47. {
  48. query: {
  49. since,
  50. until,
  51. resolution: '1d',
  52. },
  53. },
  54. ],
  55. ];
  56. }
  57. renderBody() {
  58. const {stats} = this.state;
  59. if (stats === null) {
  60. return null;
  61. }
  62. let emptyStats = true;
  63. const series = {
  64. seriesName: t('Events'),
  65. data: stats.map(p => {
  66. if (p.total) {
  67. emptyStats = false;
  68. }
  69. return {
  70. name: p.ts * 1000,
  71. value: p.total,
  72. };
  73. }),
  74. };
  75. return (
  76. <Panel>
  77. <PanelHeader>{t('Events in the last 30 days (by day)')}</PanelHeader>
  78. <PanelBody withPadding>
  79. {!emptyStats ? (
  80. <MiniBarChart
  81. isGroupedByDate
  82. showTimeInTooltip
  83. labelYAxisExtents
  84. series={[series]}
  85. height={150}
  86. />
  87. ) : (
  88. <EmptyMessage
  89. title={t('Nothing recorded in the last 30 days.')}
  90. description={t('Total webhooks fired for this configuration.')}
  91. />
  92. )}
  93. </PanelBody>
  94. </Panel>
  95. );
  96. }
  97. }
  98. type Props = {
  99. organization: Organization;
  100. params: Params;
  101. };
  102. type State = {
  103. hook: ServiceHook | null;
  104. } & DeprecatedAsyncView['state'];
  105. export default class ProjectServiceHookDetails extends DeprecatedAsyncView<Props, State> {
  106. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  107. const {organization} = this.props;
  108. const {projectId, hookId} = this.props.params;
  109. return [['hook', `/projects/${organization.slug}/${projectId}/hooks/${hookId}/`]];
  110. }
  111. onDelete = () => {
  112. const {organization} = this.props;
  113. const {projectId, hookId} = this.props.params;
  114. addLoadingMessage(t('Saving changes\u2026'));
  115. this.api.request(`/projects/${organization.slug}/${projectId}/hooks/${hookId}/`, {
  116. method: 'DELETE',
  117. success: () => {
  118. clearIndicators();
  119. browserHistory.push(
  120. normalizeUrl(`/settings/${organization.slug}/projects/${projectId}/hooks/`)
  121. );
  122. },
  123. error: () => {
  124. addErrorMessage(t('Unable to remove application. Please try again.'));
  125. },
  126. });
  127. };
  128. renderBody() {
  129. const {organization, params} = this.props;
  130. const {projectId, hookId} = params;
  131. const {hook} = this.state;
  132. if (!hook) {
  133. return null;
  134. }
  135. return (
  136. <Fragment>
  137. <SettingsPageHeader title={t('Service Hook Details')} />
  138. <ErrorBoundary>
  139. <HookStats params={params} organization={organization} />
  140. </ErrorBoundary>
  141. <ServiceHookSettingsForm
  142. organization={organization}
  143. projectId={projectId}
  144. hookId={hookId}
  145. initialData={{
  146. ...hook,
  147. isActive: hook.status !== 'disabled',
  148. }}
  149. />
  150. <Panel>
  151. <PanelHeader>{t('Event Validation')}</PanelHeader>
  152. <PanelBody>
  153. <PanelAlert type="info" showIcon>
  154. Sentry will send the <code>X-ServiceHook-Signature</code> header built using{' '}
  155. <code>HMAC(SHA256, [secret], [payload])</code>. You should always verify
  156. this signature before trusting the information provided in the webhook.
  157. </PanelAlert>
  158. <FieldGroup
  159. label={t('Secret')}
  160. flexibleControlStateSize
  161. inline={false}
  162. help={t('The shared secret used for generating event HMAC signatures.')}
  163. >
  164. <TextCopyInput>
  165. {getDynamicText({
  166. value: hook.secret,
  167. fixed: 'a dynamic secret value',
  168. })}
  169. </TextCopyInput>
  170. </FieldGroup>
  171. </PanelBody>
  172. </Panel>
  173. <Panel>
  174. <PanelHeader>{t('Delete Hook')}</PanelHeader>
  175. <PanelBody>
  176. <FieldGroup
  177. label={t('Delete Hook')}
  178. help={t('Removing this hook is immediate and permanent.')}
  179. >
  180. <div>
  181. <Button priority="danger" onClick={this.onDelete}>
  182. {t('Delete Hook')}
  183. </Button>
  184. </div>
  185. </FieldGroup>
  186. </PanelBody>
  187. </Panel>
  188. </Fragment>
  189. );
  190. }
  191. }