feat(dashboards): metric table equations (#67223)

getsentry · Mar 19, 2024 · b5f2368 · b5f2368
1 parent 296e2ec
commit b5f2368
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 49 deletions.
diff --git a/static/app/components/modals/metricWidgetViewerModal.tsx b/static/app/components/modals/metricWidgetViewerModal.tsx
@@ -119,14 +119,31 @@ function MetricWidgetViewerModal({
     [setMetricEquations]
   );
 
-  const handleOrderChange = useCallback((order: Order, index: number) => {
-    setMetricQueries(curr => {
-      return curr.map((query, i) => {
-        const orderBy = i === index ? order : undefined;
-        return {...query, orderBy};
-      });
-    });
-  }, []);
+  const handleOrderChange = useCallback(
+    ({id, order}: {id: number; order: Order}) => {
+      const queryIdx = filteredQueries.findIndex(query => query.id === id);
+      if (queryIdx > -1) {
+        setMetricQueries(curr => {
+          return curr.map((query, i) => {
+            const orderBy = i === queryIdx ? order : undefined;
+            return {...query, orderBy};
+          });
+        });
+        return;
+      }
+
+      const equationIdx = filteredEquations.findIndex(equation => equation.id === id);
+      if (equationIdx > -1) {
+        setMetricEquations(curr => {
+          return curr.map((equation, i) => {
+            const orderBy = i === equationIdx ? order : undefined;
+            return {...equation, orderBy};
+          });
+        });
+      }
+    },
+    [filteredEquations, filteredQueries]
+  );
 
   const addQuery = useCallback(() => {
     setMetricQueries(curr => {
@@ -146,6 +163,7 @@ function MetricWidgetViewerModal({
         ...curr,
         {
           formula: '',
+          name: '',
           id: generateEquationId(),
           type: MetricQueryType.FORMULA,
         },

diff --git a/static/app/components/modals/metricWidgetViewerModal/queries.tsx b/static/app/components/modals/metricWidgetViewerModal/queries.tsx
@@ -107,12 +107,9 @@ export function Queries({
           <Button size="sm" icon={<IconAdd isCircled />} onClick={addQuery}>
             {t('Add query')}
           </Button>
-          {/* TODO: Support equations in tables */}
-          {displayType !== DisplayType.TABLE && (
-            <Button size="sm" icon={<IconAdd isCircled />} onClick={addEquation}>
-              {t('Add equation')}
-            </Button>
-          )}
+          <Button size="sm" icon={<IconAdd isCircled />} onClick={addEquation}>
+            {t('Add equation')}
+          </Button>
         </ButtonBar>
       )}
     </QueriesWrapper>

diff --git a/static/app/components/modals/metricWidgetViewerModal/visualization.tsx b/static/app/components/modals/metricWidgetViewerModal/visualization.tsx
@@ -111,7 +111,7 @@ interface MetricVisualizationProps {
   displayType: DisplayType;
   onDisplayTypeChange: (displayType: DisplayType) => void;
   queries: MetricsQueryApiQueryParams[];
-  onOrderChange?: (order: Order, index: number) => void;
+  onOrderChange?: ({id, order}: {id: number; order: Order}) => void;
 }
 
 export function MetricVisualization({
@@ -211,7 +211,7 @@ interface MetricTableVisualizationProps {
   isLoading: boolean;
   queries: MetricsQueryApiQueryParams[];
   timeseriesData: MetricsQueryApiResponse;
-  onOrderChange?: (order: Order, index: number) => void;
+  onOrderChange?: ({id, order}: {id: number; order: Order}) => void;
 }
 
 function MetricTableVisualization({
@@ -225,17 +225,10 @@ function MetricTableVisualization({
   }, [timeseriesData, queries]);
 
   const handleOrderChange = useCallback(
-    (column: any) => {
-      if (!onOrderChange) {
-        return;
-      }
-      const queryIdx = queries.findIndex(q => q.name === column.name);
-      if (queryIdx < 0) {
-        return;
-      }
-      onOrderChange?.(column.order, queryIdx);
+    (column: {id: number; order: Order}) => {
+      onOrderChange?.(column);
     },
-    [onOrderChange, queries]
+    [onOrderChange]
   );
 
   return (

diff --git a/static/app/views/dashboards/metrics/table.spec.tsx b/static/app/views/dashboards/metrics/table.spec.tsx
@@ -123,15 +123,17 @@ describe('getTableSeries', () => {
       {order: undefined, label: 'event_type', name: 'event_type', type: 'tag'},
       {
         order: undefined,
-        label: 'p50(d:custom/sentry.event_manager.save@second)',
+        label: 'p50(sentry.event_manager.save)',
         name: 'a',
         type: 'field',
+        id: undefined,
       },
       {
         order: undefined,
-        label: 'p90(d:custom/sentry.event_manager.save_attachments@second)',
+        label: 'p90(sentry.event_manager.save_attachments)',
         name: 'b',
         type: 'field',
+        id: undefined,
       },
     ]);
 

diff --git a/static/app/views/dashboards/metrics/table.tsx b/static/app/views/dashboards/metrics/table.tsx
@@ -7,8 +7,9 @@ import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {MetricsQueryApiResponse} from 'sentry/types';
-import {formatMetricsUsingUnitAndOp} from 'sentry/utils/metrics/formatters';
-import {formatMRIField, MRIToField, parseMRI} from 'sentry/utils/metrics/mri';
+import {unescapeMetricsFormula} from 'sentry/utils/metrics';
+import {formatMetricUsingUnit} from 'sentry/utils/metrics/formatters';
+import {formatMRIField, MRIToField} from 'sentry/utils/metrics/mri';
 import {
   isMetricFormula,
   type MetricsQueryApiQueryParams,
@@ -46,7 +47,7 @@ interface MetricTableProps {
   data: TableData;
   isLoading: boolean;
   borderless?: boolean;
-  onOrderChange?: ({name, order}: {name: string; order: string}) => void;
+  onOrderChange?: ({id, order}: {id: number; order: Order}) => void;
 }
 
 export function MetricTable({
@@ -94,7 +95,6 @@ export function MetricTable({
     <StyledPanelTable
       borderless={borderless}
       headers={data.headers.map((column, index) => {
-        const header = formatMRIField(column.label);
         return (
           <HeaderCell
             key={index}
@@ -105,7 +105,7 @@ export function MetricTable({
             {column.order && (
               <IconArrow direction={column.order === 'asc' ? 'up' : 'down'} size="xs" />
             )}
-            <TextOverflow>{header}</TextOverflow>
+            <TextOverflow>{column.label}</TextOverflow>
           </HeaderCell>
         );
       })}
@@ -164,10 +164,9 @@ export function getTableData(
   const filteredQueries = queries.filter(
     query => !isMetricFormula(query)
   ) as MetricsQueryApiRequestQuery[];
-
   const tags = [...new Set(filteredQueries.flatMap(query => query.groupBy ?? []))];
 
-  const normalizedResults = filteredQueries.map((query, index) => {
+  const normalizedResults = queries.map((query, index) => {
     const queryResults = data.data[index];
     const meta = data.meta[index];
     const lastMetaEntry = data.meta[index]?.[meta.length - 1];
@@ -177,11 +176,7 @@ export function getTableData(
       return {
         by: {...getEmptyGroup(tags), ...group.by},
         totals: group.totals,
-        formattedValue: formatMetricsUsingUnitAndOp(
-          group.totals,
-          metaUnit ?? parseMRI(query.mri)?.unit!,
-          query.op
-        ),
+        formattedValue: formatMetricUsingUnit(group.totals, metaUnit),
       };
     });
 
@@ -211,9 +206,13 @@ export function getTableData(
       type: 'tag',
       order: undefined,
     })),
-    ...filteredQueries.map(query => ({
+    ...queries.map(query => ({
       name: query.name,
-      label: MRIToField(query.mri, query.op),
+      // @ts-expect-error use DashboardMetricsExpression type
+      id: query.id,
+      label: isMetricFormula(query)
+        ? unescapeMetricsFormula(query.formula)
+        : formatMRIField(MRIToField(query.mri, query.op)),
       type: 'field',
       order: query.orderBy,
     })),

diff --git a/static/app/views/dashboards/metrics/utils.tsx b/static/app/views/dashboards/metrics/utils.tsx
@@ -118,7 +118,7 @@ export function getMetricQueries(
 
 export function getMetricEquations(widget: Widget): DashboardMetricsEquation[] {
   const usedIds = new Set<number>();
-  const indizesWithoutId: number[] = [];
+  const indicesWithoutId: number[] = [];
 
   const equations = widget.queries.map(
     (query, index): DashboardMetricsEquation | null => {
@@ -128,7 +128,7 @@ export function getMetricEquations(widget: Widget): DashboardMetricsEquation[] {
 
       const id = getExpressionIdFromWidgetQuery(query);
       if (id === NO_QUERY_ID) {
-        indizesWithoutId.push(index);
+        indicesWithoutId.push(index);
       } else {
         usedIds.add(id);
       }
@@ -141,7 +141,7 @@ export function getMetricEquations(widget: Widget): DashboardMetricsEquation[] {
     }
   );
 
-  return fillMissingExpressionIds(equations, indizesWithoutId, usedIds).filter(
+  return fillMissingExpressionIds(equations, indicesWithoutId, usedIds).filter(
     (query): query is DashboardMetricsEquation => query !== null
   );
 }
@@ -255,9 +255,5 @@ export function filterEquationsByDisplayType(
   if (displayType === DisplayType.BIG_NUMBER) {
     return [];
   }
-  // TODO: Add support for table
-  if (displayType === DisplayType.TABLE) {
-    return [];
-  }
   return equations;
 }