Browse Source

feat(perf): Add guide for tag explorer (#25896)

This adds a guide hovercard for tag explorer to the existing span ops guide as seen in mocks.
k-fish 3 years ago
parent
commit
2828faf29f

+ 5 - 1
src/sentry/assistant/guides.py

@@ -34,7 +34,11 @@ GUIDES = {
     },
     "span_op_breakdowns_and_tag_explorer": {
         "id": 17,
-        "required_targets": ["span_op_breakdowns_filter", "span_op_relative_breakdowns"],
+        "required_targets": [
+            "span_op_breakdowns_filter",
+            "span_op_relative_breakdowns",
+            "tag_explorer",
+        ],
     },
 }
 

+ 12 - 0
static/app/components/assistant/getGuidesContent.tsx

@@ -272,6 +272,18 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
             }
           ),
         },
+        {
+          title: t('Suspect Tags'),
+          target: 'tag_explorer',
+          description: tct(
+            "See which tags often correspond to slower transactions. You'll want to investigate these more. [link:Learn more]",
+            {
+              link: (
+                <ExternalLink href="https://docs.sentry.io/product/performance/transaction-summary/#suspect-tags" />
+              ),
+            }
+          ),
+        },
       ],
     },
   ];

+ 4 - 1
static/app/views/performance/transactionSummary/tagExplorer.tsx

@@ -3,6 +3,7 @@ import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location, LocationDescriptorObject, Query} from 'history';
 
+import {GuideAnchor} from 'app/components/assistant/guideAnchor';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumn,
@@ -430,7 +431,9 @@ class _TagExplorer extends React.Component<Props> {
         {({isLoading, tableData, pageLinks}) => {
           return (
             <React.Fragment>
-              <TagsHeader organization={organization} pageLinks={pageLinks} />
+              <GuideAnchor target="tag_explorer">
+                <TagsHeader organization={organization} pageLinks={pageLinks} />
+              </GuideAnchor>
               <GridEditable
                 isLoading={isLoading}
                 data={tableData && tableData.data ? tableData.data : []}