projectServiceHookDetails.tsx 5.6 KB

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