projectPerformance.tsx 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import Access from 'sentry/components/acl/access';
  5. import Button from 'sentry/components/button';
  6. import Form from 'sentry/components/forms/form';
  7. import JsonForm from 'sentry/components/forms/jsonForm';
  8. import {Field} from 'sentry/components/forms/type';
  9. import ExternalLink from 'sentry/components/links/externalLink';
  10. import LoadingIndicator from 'sentry/components/loadingIndicator';
  11. import {PanelItem} from 'sentry/components/panels';
  12. import {t, tct} from 'sentry/locale';
  13. import {Organization, Project, Scope} from 'sentry/types';
  14. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  15. import routeTitleGen from 'sentry/utils/routeTitle';
  16. import AsyncView from 'sentry/views/asyncView';
  17. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  18. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  19. type Props = RouteComponentProps<{orgId: string; projectId: string}, {}> & {
  20. organization: Organization;
  21. project: Project;
  22. };
  23. type ProjectThreshold = {
  24. metric: string;
  25. threshold: string;
  26. editedBy?: string;
  27. id?: string;
  28. };
  29. type State = AsyncView['state'] & {
  30. threshold: ProjectThreshold;
  31. };
  32. class ProjectPerformance extends AsyncView<Props, State> {
  33. getTitle() {
  34. const {projectId} = this.props.params;
  35. return routeTitleGen(t('Performance'), projectId, false);
  36. }
  37. getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
  38. const {params} = this.props;
  39. const {orgId, projectId} = params;
  40. const endpoints: ReturnType<AsyncView['getEndpoints']> = [
  41. ['threshold', `/projects/${orgId}/${projectId}/transaction-threshold/configure/`],
  42. ];
  43. return endpoints;
  44. }
  45. handleDelete = () => {
  46. const {orgId, projectId} = this.props.params;
  47. const {organization} = this.props;
  48. this.setState({
  49. loading: true,
  50. });
  51. this.api.request(`/projects/${orgId}/${projectId}/transaction-threshold/configure/`, {
  52. method: 'DELETE',
  53. success: () => {
  54. trackAnalyticsEvent({
  55. eventKey: 'performance_views.project_transaction_threshold.clear',
  56. eventName: 'Project Transaction Threshold: Cleared',
  57. organization_id: organization.id,
  58. });
  59. },
  60. complete: () => this.fetchData(),
  61. });
  62. };
  63. getEmptyMessage() {
  64. return t('There is no threshold set for this project.');
  65. }
  66. renderLoading() {
  67. return (
  68. <LoadingIndicatorContainer>
  69. <LoadingIndicator />
  70. </LoadingIndicatorContainer>
  71. );
  72. }
  73. get formFields(): Field[] {
  74. const fields: Field[] = [
  75. {
  76. name: 'metric',
  77. type: 'select',
  78. label: t('Calculation Method'),
  79. options: [
  80. {value: 'duration', label: t('Transaction Duration')},
  81. {value: 'lcp', label: t('Largest Contentful Paint')},
  82. ],
  83. help: tct(
  84. 'This determines which duration is used to set your thresholds. By default, we use transaction duration which measures the entire length of the transaction. You can also set this to use a [link:Web Vital].',
  85. {
  86. link: (
  87. <ExternalLink href="https://docs.sentry.io/product/performance/web-vitals/" />
  88. ),
  89. }
  90. ),
  91. },
  92. {
  93. name: 'threshold',
  94. type: 'string',
  95. label: t('Response Time Threshold (ms)'),
  96. placeholder: t('300'),
  97. help: tct(
  98. 'Define what a satisfactory response time is based on the calculation method above. This will affect how your [link1:Apdex] and [link2:User Misery] thresholds are calculated. For example, misery will be 4x your satisfactory response time.',
  99. {
  100. link1: (
  101. <ExternalLink href="https://docs.sentry.io/performance-monitoring/performance/metrics/#apdex" />
  102. ),
  103. link2: (
  104. <ExternalLink href="https://docs.sentry.io/product/performance/metrics/#user-misery" />
  105. ),
  106. }
  107. ),
  108. },
  109. ];
  110. return fields;
  111. }
  112. get initialData() {
  113. const {threshold} = this.state;
  114. return {
  115. threshold: threshold.threshold,
  116. metric: threshold.metric,
  117. };
  118. }
  119. renderBody() {
  120. const {organization, project} = this.props;
  121. const endpoint = `/projects/${organization.slug}/${project.slug}/transaction-threshold/configure/`;
  122. const requiredScopes: Scope[] = ['project:write'];
  123. return (
  124. <Fragment>
  125. <SettingsPageHeader title={t('Performance')} />
  126. <PermissionAlert access={requiredScopes} />
  127. <Form
  128. saveOnBlur
  129. allowUndo
  130. initialData={this.initialData}
  131. apiMethod="POST"
  132. apiEndpoint={endpoint}
  133. onSubmitSuccess={resp => {
  134. const initial = this.initialData;
  135. const changedThreshold = initial.metric === resp.metric;
  136. trackAnalyticsEvent({
  137. eventKey: 'performance_views.project_transaction_threshold.change',
  138. eventName: 'Project Transaction Threshold: Changed',
  139. organization_id: organization.id,
  140. from: changedThreshold ? initial.threshold : initial.metric,
  141. to: changedThreshold ? resp.threshold : resp.metric,
  142. key: changedThreshold ? 'threshold' : 'metric',
  143. });
  144. this.setState({threshold: resp});
  145. }}
  146. >
  147. <Access access={requiredScopes}>
  148. {({hasAccess}) => (
  149. <JsonForm
  150. title={t('General')}
  151. fields={this.formFields}
  152. disabled={!hasAccess}
  153. renderFooter={() => (
  154. <Actions>
  155. <Button type="button" onClick={() => this.handleDelete()}>
  156. {t('Reset All')}
  157. </Button>
  158. </Actions>
  159. )}
  160. />
  161. )}
  162. </Access>
  163. </Form>
  164. </Fragment>
  165. );
  166. }
  167. }
  168. const Actions = styled(PanelItem)`
  169. justify-content: flex-end;
  170. `;
  171. const LoadingIndicatorContainer = styled('div')`
  172. margin: 18px 18px 0;
  173. `;
  174. export default ProjectPerformance;