feat(ddm): code locations (#60539)

Author: obostjancic

static/app/utils/metrics/features.tsx

@@ -1,6 +1,7 @@
 import type {Organization} from 'sentry/types';
 import {Dataset} from 'sentry/views/alerts/rules/metric/types';
 
+// TODO(ddm): rename this since dashboards and code locations are also behind it
 export function hasDdmAlertsSupport(organization: Organization) {
   return organization.features.includes('ddm-experimental');
 }

static/app/utils/metrics/index.tsx

@@ -70,6 +70,17 @@ export type MetricsQuery = {
   query?: string;
 };
 
+export type MetricMetaCodeLocation = {
+  frames: {
+    absPath?: string;
+    filename?: string;
+    function?: string;
+    lineNo?: number;
+    module?: string;
+  }[];
+  mri: string;
+  timestamp: number;
+};
 export function getDdmUrl(
   orgSlug: string,
   {

static/app/utils/metrics/useMetricsCodeLocations.tsx

@@ -0,0 +1,32 @@
+import isArray from 'lodash/isArray';
+
+import {PageFilters} from 'sentry/types';
+import {MetricMetaCodeLocation} from 'sentry/utils/metrics';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function useMetricsCodeLocations(
+  mri: string | undefined,
+  projects?: PageFilters['projects']
+) {
+  const organization = useOrganization();
+
+  const {data, isLoading} = useApiQuery<{codeLocations: MetricMetaCodeLocation[]}>(
+    [
+      `/organizations/${organization.slug}/ddm/meta/`,
+      {query: {metric: mri, project: projects}},
+    ],
+    {
+      enabled: !!mri,
+      staleTime: Infinity,
+    }
+  );
+
+  if (data && isArray(data?.codeLocations)) {
+    data.codeLocations = data.codeLocations.filter(
+      codeLocation => codeLocation.mri === mri
+    );
+  }
+
+  return {data, isLoading};
+}

static/app/views/ddm/codeLocations.tsx

@@ -0,0 +1,112 @@
+import {useState} from 'react';
+import styled from '@emotion/styled';
+import isArray from 'lodash/isArray';
+
+import {Button} from 'sentry/components/button';
+import DefaultTitle from 'sentry/components/events/interfaces/frame/defaultTitle';
+import {tn} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {Frame} from 'sentry/types';
+import {hasDdmAlertsSupport} from 'sentry/utils/metrics/features';
+import {useMetricsCodeLocations} from 'sentry/utils/metrics/useMetricsCodeLocations';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function CodeLocations({mri}: {mri: string}) {
+  const {data} = useMetricsCodeLocations(mri);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const organization = useOrganization();
+
+  if (!hasDdmAlertsSupport(organization)) {
+    return null;
+  }
+
+  if (!isArray(data?.codeLocations) || data?.codeLocations.length === 0) {
+    return null;
+  }
+
+  const frameToShow = data?.codeLocations[0].frames[0];
+  const otherFrames = data?.codeLocations[0].frames.slice(1) ?? [];
+
+  if (!frameToShow) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      <DefaultLine className="title">
+        <DefaultLineTitleWrapper>
+          <LeftLineTitle>
+            <DefaultTitle
+              frame={frameToShow as Frame}
+              platform="other"
+              isHoverPreviewed={false}
+            />
+          </LeftLineTitle>
+        </DefaultLineTitleWrapper>
+        <ToggleButton size="xs" borderless onClick={() => setIsExpanded(curr => !curr)}>
+          {isExpanded
+            ? tn(
+                'Hide %s more code location',
+                'Hide %s more code locations',
+                otherFrames.length
+              )
+            : tn(
+                'Show %s more code location',
+                'Show %s more code locations',
+                otherFrames.length
+              )}
+        </ToggleButton>
+      </DefaultLine>
+      {isExpanded &&
+        otherFrames.map(frame => (
+          <DefaultLine className="title" key={frame.absPath}>
+            <DefaultLineTitleWrapper>
+              <LeftLineTitle>
+                <DefaultTitle
+                  frame={frame as Frame}
+                  platform="other"
+                  isHoverPreviewed={false}
+                />
+              </LeftLineTitle>
+            </DefaultLineTitleWrapper>
+          </DefaultLine>
+        ))}
+    </Wrapper>
+  );
+}
+
+const ToggleButton = styled(Button)`
+  color: ${p => p.theme.subText};
+  font-style: italic;
+  font-weight: normal;
+  padding: ${space(0.25)} ${space(0.5)};
+
+  &:hover {
+    color: ${p => p.theme.subText};
+  }
+`;
+
+const Wrapper = styled('div')`
+  margin-top: ${space(1)};
+  background-color: ${p => p.theme.backgroundTertiary};
+  padding: ${space(0.25)} ${space(0.5)};
+  border-radius: ${p => p.theme.borderRadius};
+`;
+
+const DefaultLine = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const DefaultLineTitleWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-style: italic;
+`;
+
+const LeftLineTitle = styled('div')`
+  display: flex;
+  align-items: center;
+`;

static/app/views/ddm/widget.tsx

@@ -28,6 +28,7 @@ import {decodeList} from 'sentry/utils/queryString';
 import theme from 'sentry/utils/theme';
 import useRouter from 'sentry/utils/useRouter';
 import {MetricChart} from 'sentry/views/ddm/chart';
+import {CodeLocations} from 'sentry/views/ddm/codeLocations';
 import {MetricWidgetContextMenu} from 'sentry/views/ddm/contextMenu';
 import {QueryBuilder} from 'sentry/views/ddm/queryBuilder';
 import {SummaryTable} from 'sentry/views/ddm/summaryTable';
@@ -247,6 +248,7 @@ function MetricWidgetBody({
           setHoveredLegend={focusedSeries ? undefined : setHoveredLegend}
         />
       )}
+      <CodeLocations mri={metricsQuery.mri} />
     </StyledMetricWidgetBody>
   );
 }