Home Explore Help
Sign In
SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry
1
0
Fork 0
Files
Browse Source

feat(performance): Make txn name obvious in threshold modal (#27340)

Add the transaction name to thre transaction threshold modal
and a success toast with the transaction name when threshold
is updated from the perf landing page.
Shruthi 3 years ago
parent
4080966af7
commit
040c33735e
2 changed files with 21 additions and 2 deletions
Split View Show Diff Stats
  1. 7 0
      static/app/views/performance/table.tsx
  2. 14 2
      static/app/views/performance/transactionSummary/transactionThresholdModal.tsx

+ 7 - 0
static/app/views/performance/table.tsx
View File 

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import * as ReactRouter from 'react-router';
 
 import {Location, LocationDescriptorObject} from 'history';
 
 
+import {addSuccessMessage} from 'app/actionCreators/indicator';
 
 import {openModal} from 'app/actionCreators/modal';
 
 import {fetchLegacyKeyTransactionsCount} from 'app/actionCreators/performance';
 
 import GuideAnchor from 'app/components/assistant/guideAnchor';
 
@@ -11,6 +12,7 @@ import Link from 'app/components/links/link';
 
 import Pagination from 'app/components/pagination';
 
 import Tooltip from 'app/components/tooltip';
 
 import {IconStar} from 'app/icons';
 
+import {tct} from 'app/locale';
 
 import {Organization, Project} from 'app/types';
 
 import {defined} from 'app/utils';
 
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 
@@ -126,6 +128,11 @@ class Table extends React.Component<Props, State> {
 
                     transactionThresholdMetric: metric,
 
                   });
 
                 }
 
+                addSuccessMessage(
 
+                  tct('[transactionName] updated successfully', {
 
+                    transactionName,
 
+                  })
 
+                );
 
               }}
 
             />
 
           ),

+ 14 - 2
static/app/views/performance/transactionSummary/transactionThresholdModal.tsx
View File 

@@ -22,6 +22,8 @@ import withProjects from 'app/utils/withProjects';
 
 import Input from 'app/views/settings/components/forms/controls/input';
 
 import Field from 'app/views/settings/components/forms/field';
 
 
+import {transactionSummaryRouteWithQuery} from './utils';
 
+
 
 export enum TransactionThresholdMetric {
 
   TRANSACTION_DURATION = 'duration',
 
   LARGEST_CONTENTFUL_PAINT = 'lcp',
 
@@ -229,10 +231,19 @@ class TransactionThresholdModal extends React.Component<Props, State> {
 
   }
 
 
   render() {
 
-    const {Header, Body, Footer, organization} = this.props;
 
+    const {Header, Body, Footer, organization, transactionName, eventView} = this.props;
 
 
     const project = this.getProject();
 
 
+    const summaryView = eventView.clone();
 
+    summaryView.query = summaryView.getQueryWithAdditionalConditions();
 
+    const target = transactionSummaryRouteWithQuery({
 
+      orgSlug: organization.slug,
 
+      transaction: transactionName,
 
+      query: summaryView.generateQueryStringObject(),
 
+      projectID: project?.id,
 
+    });
 
+
 
     return (
 
       <React.Fragment>
 
         <Header closeButton>
 
@@ -243,8 +254,9 @@ class TransactionThresholdModal extends React.Component<Props, State> {
 
         <Body>
 
           <Instruction>
 
             {tct(
 
-              'The changes below will only be applied to this Transaction. To set it at a more global level, go to [projectSettings: Project Settings].',
 
+              'The changes below will only be applied to [transaction]. To set it at a more global level, go to [projectSettings: Project Settings].',
 
               {
 
+                transaction: <Link to={target}>{transactionName}</Link>,
 
                 projectSettings: (
 
                   <Link
 
                     to={`/settings/${organization.slug}/projects/${project?.slug}/performance/`}