From f89be4319869dfc3f400965151346c970bcd5028 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Thu, 16 May 2024 17:41:57 +0200
Subject: [PATCH] feat(metrics): Add guides (#71018)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/getsentry/sentry/assets/9060071/6a5db38c-50ab-4d8a-a40e-458dcb12261c

The last step has nicer text if you have Trace Explorer—we add there
that you can filter by span-specific tags.

Closes https://github.com/getsentry/sentry/issues/70212

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
---
 .../components/assistant/getGuidesContent.tsx |  59 +++++++++-
 .../metricWidgetViewerModal/queries.tsx       |   1 +
 static/app/stores/guideStore.tsx              |   2 +-
 static/app/views/metrics/layout.tsx           |   2 +
 static/app/views/metrics/queries.tsx          |  18 +--
 static/app/views/metrics/queryBuilder.tsx     | 105 ++++++++++--------
 static/app/views/metrics/widget.tsx           |  23 ++--
 static/app/views/metrics/widgetDetails.tsx    |   7 +-
 8 files changed, 150 insertions(+), 67 deletions(-)

diff --git a/static/app/components/assistant/getGuidesContent.tsx b/static/app/components/assistant/getGuidesContent.tsx
index 57111fe1b67a8..2138e0444d0ab 100644
--- a/static/app/components/assistant/getGuidesContent.tsx
+++ b/static/app/components/assistant/getGuidesContent.tsx
@@ -3,8 +3,11 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
+import type {Organization} from 'sentry/types';
 
-export default function getGuidesContent(orgSlug: string | null): GuidesContent {
+export default function getGuidesContent(
+  organization: Organization | null
+): GuidesContent {
   if (ConfigStore.get('demoMode')) {
     return getDemoModeGuides();
   }
@@ -90,7 +93,11 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
           description: tct(
             `Today only admins in your organization can create alert rules but we recommend [link:allowing members to create alerts], too.`,
             {
-              link: <Link to={orgSlug ? `/settings/${orgSlug}` : `/settings`} />,
+              link: (
+                <Link
+                  to={organization?.slug ? `/settings/${organization.slug}` : `/settings`}
+                />
+              ),
             }
           ),
           nextText: t('Allow'),
@@ -174,6 +181,54 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'metrics_onboarding',
+      requiredTargets: ['metrics_onboarding'],
+      steps: [
+        {
+          title: t('Metrics Selector'),
+          target: 'metrics_selector',
+          description: t('Your metrics are available here.'),
+        },
+        {
+          title: t('Aggregate Metrics'),
+          target: 'metrics_aggregate',
+          description: t('See different facets of your metric through aggregations.'),
+        },
+        {
+          title: t('Grouping & Filtering'),
+          target: 'metrics_groupby',
+          description: t('Segment or filter your data by the tags you’ve attached.'),
+        },
+        {
+          title: t('Multiple Metrics'),
+          target: 'add_metric_query',
+          description: t('Plot a second metric to see correlations.'),
+        },
+        {
+          title: t('Visualization'),
+          target: 'metrics_chart',
+          description: t(
+            'View plotted metrics, dots on the chart represent associated sample spans.'
+          ),
+        },
+        {
+          title: t('Span Samples'),
+          target: 'metrics_table',
+          description: tct(
+            'See sample spans summarized in a table format. [openInTraces]',
+            {
+              openInTraces:
+                organization?.features.includes(
+                  'performance-trace-explorer-with-metrics'
+                ) && organization?.features.includes('performance-trace-explorer')
+                  ? t('To filter by tags found only on spans, click "Open in Traces".')
+                  : '',
+            }
+          ),
+        },
+      ],
+    },
   ];
 }
 
diff --git a/static/app/components/modals/metricWidgetViewerModal/queries.tsx b/static/app/components/modals/metricWidgetViewerModal/queries.tsx
index 97f1f83e265ad..5c1fe0a924e92 100644
--- a/static/app/components/modals/metricWidgetViewerModal/queries.tsx
+++ b/static/app/components/modals/metricWidgetViewerModal/queries.tsx
@@ -124,6 +124,7 @@ export function Queries({
           <ExpressionFormWrapper>
             <ExpressionFormRowWrapper>
               <QueryBuilder
+                index={index}
                 onChange={data => onQueryChange(data, index)}
                 metricsQuery={query}
                 projects={selection.projects}
diff --git a/static/app/stores/guideStore.tsx b/static/app/stores/guideStore.tsx
index 0bf76e810aeeb..3acbc08db1507 100644
--- a/static/app/stores/guideStore.tsx
+++ b/static/app/stores/guideStore.tsx
@@ -168,7 +168,7 @@ const storeConfig: GuideStoreDefinition = {
       return;
     }
 
-    const guidesContent: GuidesContent = getGuidesContent(this.state.orgSlug);
+    const guidesContent: GuidesContent = getGuidesContent(this.state.organization);
     // map server guide state (i.e. seen status) with guide content
     const guides = guidesContent.reduce((acc: Guide[], content) => {
       const serverGuide = data.find(guide => guide.guide === content.guide);
diff --git a/static/app/views/metrics/layout.tsx b/static/app/views/metrics/layout.tsx
index defbc826d81c7..c84a970093379 100644
--- a/static/app/views/metrics/layout.tsx
+++ b/static/app/views/metrics/layout.tsx
@@ -6,6 +6,7 @@ import * as Sentry from '@sentry/react';
 import emptyStateImg from 'sentry-images/spot/custom-metrics-empty-state.svg';
 
 import Alert from 'sentry/components/alert';
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import FeatureBadge from 'sentry/components/badge/featureBadge';
 import Banner from 'sentry/components/banner';
 import {Button} from 'sentry/components/button';
@@ -148,6 +149,7 @@ export const MetricsLayout = memo(() => {
             <LoadingIndicator />
           ) : hasCustomMetrics || isEmptyStateDismissed ? (
             <Fragment>
+              <GuideAnchor target="metrics_onboarding" />
               <Queries />
               <MetricScratchpad />
               <WidgetDetails />
diff --git a/static/app/views/metrics/queries.tsx b/static/app/views/metrics/queries.tsx
index e5fb98f449118..8353d8323d3c0 100644
--- a/static/app/views/metrics/queries.tsx
+++ b/static/app/views/metrics/queries.tsx
@@ -2,6 +2,7 @@ import {Fragment, useCallback, useLayoutEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 import * as echarts from 'echarts/core';
 
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button} from 'sentry/components/button';
 import SwitchButton from 'sentry/components/switchButton';
 import {Tooltip} from 'sentry/components/tooltip';
@@ -118,13 +119,15 @@ export function Queries() {
         ))}
       </Wrapper>
       <ButtonBar addQuerySymbolSpacing={showQuerySymbols}>
-        <Button
-          size="sm"
-          icon={<IconAdd isCircled />}
-          onClick={() => handleAddWidget(MetricExpressionType.QUERY)}
-        >
-          {t('Add metric')}
-        </Button>
+        <GuideAnchor target="add_metric_query" position="bottom">
+          <Button
+            size="sm"
+            icon={<IconAdd isCircled />}
+            onClick={() => handleAddWidget(MetricExpressionType.QUERY)}
+          >
+            {t('Add metric')}
+          </Button>
+        </GuideAnchor>
         <Button
           size="sm"
           icon={<IconAdd isCircled />}
@@ -207,6 +210,7 @@ function Query({
         />
       )}
       <QueryBuilder
+        index={index}
         onChange={handleChange}
         metricsQuery={metricsQuery}
         projects={projects}
diff --git a/static/app/views/metrics/queryBuilder.tsx b/static/app/views/metrics/queryBuilder.tsx
index 515b99ae76c39..2498406980bf7 100644
--- a/static/app/views/metrics/queryBuilder.tsx
+++ b/static/app/views/metrics/queryBuilder.tsx
@@ -2,6 +2,7 @@ import {Fragment, memo, useCallback, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import uniqBy from 'lodash/uniqBy';
 
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {ComboBox} from 'sentry/components/comboBox';
 import type {ComboBoxOption} from 'sentry/components/comboBox/types';
 import type {SelectOption} from 'sentry/components/compactSelect';
@@ -35,6 +36,7 @@ import {MetricListItemDetails} from 'sentry/views/metrics/metricListItemDetails'
 import {MetricSearchBar} from 'sentry/views/metrics/metricSearchBar';
 
 type QueryBuilderProps = {
+  index: number;
   metricsQuery: MetricsQuery;
   onChange: (data: Partial<MetricsQuery>) => void;
   projects: number[];
@@ -73,6 +75,7 @@ export const QueryBuilder = memo(function QueryBuilder({
   metricsQuery,
   projects: projectIds,
   onChange,
+  index,
 }: QueryBuilderProps) {
   const organization = useOrganization();
   const pageFilters = usePageFilters();
@@ -248,54 +251,64 @@ export const QueryBuilder = memo(function QueryBuilder({
   return (
     <QueryBuilderWrapper>
       <FlexBlock>
-        <MetricComboBox
-          aria-label={t('Metric')}
-          placeholder={t('Select a metric')}
-          loadingMessage={t('Loading metrics...')}
-          sizeLimit={100}
-          size="md"
-          menuSize="sm"
-          isLoading={isMetaLoading}
-          onOpenChange={handleOpenMetricsMenu}
-          options={mriOptions}
-          value={metricsQuery.mri}
-          onChange={handleMRIChange}
-          growingInput
-          menuWidth="450px"
-        />
-        <FlexBlock>
-          <OpSelect
-            size="md"
-            triggerProps={{prefix: t('Agg')}}
-            options={
-              selectedMeta?.operations.filter(isAllowedOp).map(op => ({
-                label: op,
-                value: op,
-              })) ?? []
-            }
-            triggerLabel={metricsQuery.op}
-            disabled={!selectedMeta}
-            value={metricsQuery.op}
-            onChange={handleOpChange}
-          />
-          <CompactSelect
-            multiple
+        <GuideAnchor target="metrics_selector" position="bottom" disabled={index !== 0}>
+          <MetricComboBox
+            aria-label={t('Metric')}
+            placeholder={t('Select a metric')}
+            loadingMessage={t('Loading metrics...')}
+            sizeLimit={100}
             size="md"
-            triggerProps={{prefix: t('Group by')}}
-            options={groupByOptions.map(tag => ({
-              label: tag.key,
-              value: tag.key,
-              trailingItems: tag.trailingItems ?? (
-                <Fragment>
-                  {tag.key === 'release' && <IconReleases size="xs" />}
-                  {tag.key === 'transaction' && <IconLightning size="xs" />}
-                </Fragment>
-              ),
-            }))}
-            disabled={!metricsQuery.mri || tagsIsLoading}
-            value={metricsQuery.groupBy}
-            onChange={handleGroupByChange}
+            menuSize="sm"
+            isLoading={isMetaLoading}
+            onOpenChange={handleOpenMetricsMenu}
+            options={mriOptions}
+            value={metricsQuery.mri}
+            onChange={handleMRIChange}
+            growingInput
+            menuWidth="450px"
           />
+        </GuideAnchor>
+        <FlexBlock>
+          <GuideAnchor
+            target="metrics_aggregate"
+            position="bottom"
+            disabled={index !== 0}
+          >
+            <OpSelect
+              size="md"
+              triggerProps={{prefix: t('Agg')}}
+              options={
+                selectedMeta?.operations.filter(isAllowedOp).map(op => ({
+                  label: op,
+                  value: op,
+                })) ?? []
+              }
+              triggerLabel={metricsQuery.op}
+              disabled={!selectedMeta}
+              value={metricsQuery.op}
+              onChange={handleOpChange}
+            />
+          </GuideAnchor>
+          <GuideAnchor target="metrics_groupby" position="bottom" disabled={index !== 0}>
+            <CompactSelect
+              multiple
+              size="md"
+              triggerProps={{prefix: t('Group by')}}
+              options={groupByOptions.map(tag => ({
+                label: tag.key,
+                value: tag.key,
+                trailingItems: tag.trailingItems ?? (
+                  <Fragment>
+                    {tag.key === 'release' && <IconReleases size="xs" />}
+                    {tag.key === 'transaction' && <IconLightning size="xs" />}
+                  </Fragment>
+                ),
+              }))}
+              disabled={!metricsQuery.mri || tagsIsLoading}
+              value={metricsQuery.groupBy}
+              onChange={handleGroupByChange}
+            />
+          </GuideAnchor>
         </FlexBlock>
       </FlexBlock>
       <SearchBarWrapper>
diff --git a/static/app/views/metrics/widget.tsx b/static/app/views/metrics/widget.tsx
index 37a87001d8bd6..ad356814bcb15 100644
--- a/static/app/views/metrics/widget.tsx
+++ b/static/app/views/metrics/widget.tsx
@@ -6,6 +6,7 @@ import moment from 'moment';
 
 import {updateDateTime} from 'sentry/actionCreators/pageFilters';
 import Alert from 'sentry/components/alert';
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import type {DateTimeObject} from 'sentry/components/charts/utils';
 import type {SelectOption} from 'sentry/components/compactSelect';
@@ -547,16 +548,18 @@ const MetricWidgetBody = memo(
           </LimitAlert>
         )}
         <TransparentLoadingMask visible={isLoading} />
-        <MetricChart
-          ref={chartRef}
-          series={chartSeries}
-          displayType={displayType}
-          height={chartHeight}
-          samples={samplesProp}
-          focusArea={focusArea}
-          releases={releasesProp}
-          group={chartGroup}
-        />
+        <GuideAnchor target="metrics_chart" disabled={widgetIndex !== 0}>
+          <MetricChart
+            ref={chartRef}
+            series={chartSeries}
+            displayType={displayType}
+            height={chartHeight}
+            samples={samplesProp}
+            focusArea={focusArea}
+            releases={releasesProp}
+            group={chartGroup}
+          />
+        </GuideAnchor>
         <SummaryTable
           series={chartSeries}
           onSortChange={handleSortChange}
diff --git a/static/app/views/metrics/widgetDetails.tsx b/static/app/views/metrics/widgetDetails.tsx
index 501d3fd9a18a0..1c9194554cc46 100644
--- a/static/app/views/metrics/widgetDetails.tsx
+++ b/static/app/views/metrics/widgetDetails.tsx
@@ -2,6 +2,7 @@ import {Fragment, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button} from 'sentry/components/button';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {
@@ -164,7 +165,11 @@ export function MetricDetails({
       <Tabs value={selectedTab} onChange={handleTabChange}>
         <TabsAndAction>
           <TabList>
-            <TabList.Item key={Tab.SAMPLES}>{t('Sampled Events')}</TabList.Item>
+            <TabList.Item key={Tab.SAMPLES}>
+              <GuideAnchor target="metrics_table" position="top">
+                {t('Span Samples')}
+              </GuideAnchor>
+            </TabList.Item>
             <TabList.Item
               textValue={t('Code Location')}
               key={Tab.CODE_LOCATIONS}