feat(metrics): settings cardinality indicator (#72207)

Author: obostjancic

static/app/types/metrics.tsx

@@ -13,7 +13,7 @@ export type MetricsAggregate =
 
 export type MetricType = 'c' | 'd' | 'g' | 'e' | 's';
 
-export type UseCase = 'custom' | 'transactions' | 'sessions' | 'spans';
+export type UseCase = 'custom' | 'transactions' | 'sessions' | 'spans' | 'metric_stats';
 
 export type MRI = `${MetricType}:${UseCase}${string}@${string}`;
 

static/app/utils/metrics/constants.tsx

@@ -13,6 +13,8 @@ import {
 
 export const METRICS_DOCS_URL = 'https://docs.sentry.io/product/metrics/';
 
+export const DEFAULT_METRICS_CARDINALITY_LIMIT = 5000;
+
 export const metricDisplayTypeOptions = [
   {
     value: MetricDisplayType.LINE,

static/app/utils/metrics/useMetricsCardinality.tsx

@@ -0,0 +1,52 @@
+import type {MRI} from 'sentry/types';
+import type {Project} from 'sentry/types/project';
+import {useMetricsQuery} from 'sentry/utils/metrics/useMetricsQuery';
+
+type Props = {
+  project: Project;
+};
+
+const CARDINALITY_QUERIES = [
+  {
+    name: 'a',
+    mri: 'g:metric_stats/cardinality@none' as MRI,
+    op: 'max',
+    groupBy: ['mri'],
+    query: '!mri:"" cardinality.window:3600',
+    orderBy: 'desc' as 'desc' | 'asc',
+  },
+];
+
+const CARDINALITY_DATE_TIME = {
+  period: '1h',
+  start: null,
+  end: null,
+  utc: null,
+};
+
+const CARDINALITY_INTERVAL = '1h';
+
+export function useMetricsCardinality({project}: Props) {
+  const cardinalityQuery = useMetricsQuery(
+    CARDINALITY_QUERIES,
+    {
+      environments: [],
+      datetime: CARDINALITY_DATE_TIME,
+      projects: [parseInt(project.id, 10)],
+    },
+    {interval: CARDINALITY_INTERVAL, includeSeries: false}
+  );
+
+  if (cardinalityQuery.data?.data[0]) {
+    const data = cardinalityQuery.data.data[0].reduce(
+      (acc, group) => {
+        acc[group.by.mri] = group.totals;
+        return acc;
+      },
+      {} as Record<string, number>
+    );
+    return {...cardinalityQuery, data};
+  }
+
+  return {...cardinalityQuery, data: undefined};
+}

static/app/utils/metrics/useMetricsQuery.spec.tsx

@@ -62,6 +62,7 @@ describe('getMetricsQueryApiRequestPayload', () => {
       end: '2023-01-31T00:00:00.000Z',
       project: [1],
       environment: ['production'],
+      includeSeries: true,
       interval: '2h',
     });
 
@@ -96,6 +97,7 @@ describe('getMetricsQueryApiRequestPayload', () => {
       statsPeriod: '7d',
       project: [1],
       environment: ['production'],
+      includeSeries: true,
       interval: '30m',
     });
 
@@ -126,13 +128,15 @@ describe('getMetricsQueryApiRequestPayload', () => {
 
     const result = getMetricsQueryApiRequestPayload([metric], filters, {
       interval: '123m',
+      includeSeries: false,
     });
 
     expect(result.query).toEqual({
       start: '2023-01-01T00:00:00.000Z',
       end: '2023-01-02T00:00:00.000Z',
       project: [1],
       environment: ['production'],
+      includeSeries: false,
       interval: '123m',
     });
 
@@ -169,6 +173,7 @@ describe('getMetricsQueryApiRequestPayload', () => {
       end: '2023-01-02T00:00:00.000Z',
       project: [1],
       environment: ['production'],
+      includeSeries: true,
       interval: '5m',
     });
 
@@ -204,6 +209,7 @@ describe('getMetricsQueryApiRequestPayload', () => {
       end: '2023-01-02T00:00:00.000Z',
       project: [1],
       environment: ['production'],
+      includeSeries: true,
       interval: '5m',
     });
 
@@ -241,6 +247,7 @@ describe('getMetricsQueryApiRequestPayload', () => {
       end: '2023-01-02T00:00:00.000Z',
       project: [1],
       environment: ['production'],
+      includeSeries: true,
       interval: '5m',
     });
 

static/app/utils/metrics/useMetricsQuery.tsx

@@ -77,8 +77,9 @@ export function getMetricsQueryApiRequestPayload(
   {
     intervalLadder,
     interval: intervalParam,
+    includeSeries = true,
   }: {
-    autoOrder?: boolean;
+    includeSeries?: boolean;
     interval?: string;
     intervalLadder?: MetricsDataIntervalLadder;
   } = {}
@@ -151,6 +152,7 @@ export function getMetricsQueryApiRequestPayload(
       project: projects,
       environment: environments,
       interval,
+      includeSeries,
     },
     body: {
       queries: requestQueries,
@@ -162,7 +164,11 @@ export function getMetricsQueryApiRequestPayload(
 export function useMetricsQuery(
   queries: MetricsQueryApiQueryParams[],
   {projects, environments, datetime}: PageFilters,
-  overrides: {interval?: string; intervalLadder?: MetricsDataIntervalLadder} = {},
+  overrides: {
+    includeSeries?: boolean;
+    interval?: string;
+    intervalLadder?: MetricsDataIntervalLadder;
+  } = {},
   enableRefetch = true
 ) {
   const organization = useOrganization();

static/app/views/settings/projectMetrics/cardinalityLimit.tsx

@@ -10,17 +10,19 @@ import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
 import useOrganization from 'sentry/utils/useOrganization';
 
+import {DEFAULT_METRICS_CARDINALITY_LIMIT} from '../../../utils/metrics/constants';
+
 type Props = {
   project: Project;
 };
 
-const DEFAULT_LIMIT = '5000';
-
 function transformData(data) {
   const limit = data.relayCustomMetricCardinalityLimit;
   return {
     relayCustomMetricCardinalityLimit:
-      limit === '' || limit === DEFAULT_LIMIT ? null : limit,
+      limit === '' || limit === DEFAULT_METRICS_CARDINALITY_LIMIT.toString()
+        ? null
+        : limit,
   };
 }
 
@@ -35,7 +37,8 @@ export function CardinalityLimit({project}: Props) {
       saveOnBlur
       initialData={{
         relayCustomMetricCardinalityLimit:
-          project.relayCustomMetricCardinalityLimit ?? DEFAULT_LIMIT,
+          project.relayCustomMetricCardinalityLimit ??
+          DEFAULT_METRICS_CARDINALITY_LIMIT.toString(),
       }}
     >
       <Panel>

static/app/views/settings/projectMetrics/projectMetrics.tsx

@@ -12,19 +12,27 @@ import {PanelTable} from 'sentry/components/panels/panelTable';
 import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {TabList, TabPanels, Tabs} from 'sentry/components/tabs';
+import {Tooltip} from 'sentry/components/tooltip';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
+import {IconArrow, IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {MetricMeta, Organization, Project} from 'sentry/types';
-import {browserHistory} from 'sentry/utils/browserHistory';
-import {METRICS_DOCS_URL} from 'sentry/utils/metrics/constants';
+import type {MetricMeta} from 'sentry/types/metrics';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
+import {
+  DEFAULT_METRICS_CARDINALITY_LIMIT,
+  METRICS_DOCS_URL,
+} from 'sentry/utils/metrics/constants';
 import {getReadableMetricType} from 'sentry/utils/metrics/formatters';
 import {formatMRI} from 'sentry/utils/metrics/mri';
 import {useBlockMetric} from 'sentry/utils/metrics/useBlockMetric';
+import {useMetricsCardinality} from 'sentry/utils/metrics/useMetricsCardinality';
 import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
 import {decodeScalar} from 'sentry/utils/queryString';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import {middleEllipsis} from 'sentry/utils/string/middleEllipsis';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useMetricsOnboardingSidebar} from 'sentry/views/metrics/ddmOnboarding/useMetricsOnboardingSidebar';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
@@ -43,35 +51,68 @@ enum BlockingStatusTab {
   DISABLED = 'disabled',
 }
 
+type MetricWithCardinality = MetricMeta & {cardinality: number};
+
 function ProjectMetrics({project, location}: Props) {
-  const {data: meta, isLoading} = useMetricsMeta(
+  const metricsMeta = useMetricsMeta(
     {projects: [parseInt(project.id, 10)]},
     ['custom'],
     false
   );
+
+  const metricsCardinality = useMetricsCardinality({
+    project,
+  });
+
+  const sortedMeta = useMemo(() => {
+    if (!metricsMeta.data) {
+      return [];
+    }
+
+    if (!metricsCardinality.data) {
+      return metricsMeta.data.map(meta => ({...meta, cardinality: 0}));
+    }
+
+    return metricsMeta.data
+      .map(({mri, ...rest}) => {
+        return {
+          mri,
+          cardinality: metricsCardinality.data[mri] ?? 0,
+          ...rest,
+        };
+      })
+      .sort((a, b) => {
+        return b.cardinality - a.cardinality;
+      }) as MetricWithCardinality[];
+  }, [metricsCardinality.data, metricsMeta.data]);
+
   const query = decodeScalar(location.query.query, '').trim();
-  const {activateSidebar} = useMetricsOnboardingSidebar();
-  const [selectedTab, setSelectedTab] = useState(BlockingStatusTab.ACTIVE);
 
+  const metrics = sortedMeta.filter(
+    ({mri, type, unit}) =>
+      mri.includes(query) ||
+      getReadableMetricType(type).includes(query) ||
+      unit.includes(query)
+  );
+
+  const isLoading = metricsMeta.isLoading || metricsCardinality.isLoading;
+
+  const navigate = useNavigate();
   const debouncedSearch = useMemo(
     () =>
       debounce(
         (searchQuery: string) =>
-          browserHistory.replace({
+          navigate({
             pathname: location.pathname,
             query: {...location.query, query: searchQuery},
           }),
         DEFAULT_DEBOUNCE_DURATION
       ),
-    [location.pathname, location.query]
+    [location.pathname, location.query, navigate]
   );
 
-  const metrics = meta.filter(
-    ({mri, type, unit}) =>
-      mri.includes(query) ||
-      getReadableMetricType(type).includes(query) ||
-      unit.includes(query)
-  );
+  const {activateSidebar} = useMetricsOnboardingSidebar();
+  const [selectedTab, setSelectedTab] = useState(BlockingStatusTab.ACTIVE);
 
   return (
     <Fragment>
@@ -151,21 +192,27 @@ function ProjectMetrics({project, location}: Props) {
 
 interface MetricsTableProps {
   isLoading: boolean;
-  metrics: MetricMeta[];
+  metrics: MetricWithCardinality[];
   project: Project;
   query: string;
 }
 
 function MetricsTable({metrics, isLoading, query, project}: MetricsTableProps) {
   const blockMetricMutation = useBlockMetric(project);
   const {hasAccess} = useAccess({access: ['project:write']});
+  const cardinalityLimit =
+    project.relayCustomMetricCardinalityLimit ?? DEFAULT_METRICS_CARDINALITY_LIMIT;
 
   return (
     <StyledPanelTable
       headers={[
         t('Metric'),
+        <Cell right key="cardinality">
+          <IconArrow size="xs" direction="down" />
+
+          {t('Cardinality')}
+        </Cell>,
         <Cell right key="type">
-          {' '}
           {t('Type')}
         </Cell>,
         <Cell right key="unit">
@@ -183,8 +230,9 @@ function MetricsTable({metrics, isLoading, query, project}: MetricsTableProps) {
       isEmpty={metrics.length === 0}
       isLoading={isLoading}
     >
-      {metrics.map(({mri, type, unit, blockingStatus}) => {
+      {metrics.map(({mri, type, unit, cardinality, blockingStatus}) => {
         const isBlocked = blockingStatus[0]?.isBlocked;
+        const isCardinalityLimited = cardinality >= cardinalityLimit;
         return (
           <Fragment key={mri}>
             <Cell>
@@ -196,6 +244,19 @@ function MetricsTable({metrics, isLoading, query, project}: MetricsTableProps) {
                 {middleEllipsis(formatMRI(mri), 65, /\.|-|_/)}
               </Link>
             </Cell>
+            <Cell right>
+              {isCardinalityLimited && (
+                <Tooltip
+                  title={tct(
+                    'The tag cardinality of this metric exceeded our limit of [cardinalityLimit], which led to the data being dropped',
+                    {cardinalityLimit}
+                  )}
+                >
+                  <StyledIconWarning size="sm" color="red300" />
+                </Tooltip>
+              )}
+              {cardinality}
+            </Cell>
             <Cell right>
               <Tag>{getReadableMetricType(type)}</Tag>
             </Cell>
@@ -241,14 +302,22 @@ const SearchWrapper = styled('div')`
 `;
 
 const StyledPanelTable = styled(PanelTable)`
-  grid-template-columns: 1fr repeat(3, minmax(115px, min-content));
+  grid-template-columns: 1fr repeat(4, min-content);
 `;
 
 const Cell = styled('div')<{right?: boolean}>`
   display: flex;
   align-items: center;
   align-self: stretch;
+  gap: ${space(0.5)};
   justify-content: ${p => (p.right ? 'flex-end' : 'flex-start')};
 `;
 
+const StyledIconWarning = styled(IconWarning)`
+  margin-top: ${space(0.5)};
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
 export default ProjectMetrics;