feat(explore): Handle aggregate fields in saved explore queries (#92999)

This starts using aggregate fields for saved explore queries instead of
group by and visualizes.

Author: Zylphrex

static/app/views/explore/contexts/pageParamsContext/aggregateFields.tsx

@@ -18,7 +18,7 @@ export interface GroupBy {
   groupBy: string;
 }
 
-function _isBaseVisualize(value: any): value is BaseVisualize {
+function isBaseVisualize(value: any): value is BaseVisualize {
   return (
     typeof value === 'object' &&
     Array.isArray(value.yAxes) &&
@@ -77,7 +77,7 @@ export function getAggregateFieldsFromLocation(
     if (isGroupBy(groupByOrBaseVisualize)) {
       aggregateFields.push(groupByOrBaseVisualize);
       hasGroupBys = true;
-    } else if (_isBaseVisualize(groupByOrBaseVisualize)) {
+    } else if (isBaseVisualize(groupByOrBaseVisualize)) {
       for (const yAxis of groupByOrBaseVisualize.yAxes) {
         aggregateFields.push(
           new Visualize([yAxis], {
@@ -112,7 +112,7 @@ export function updateLocationWithAggregateFields(
 ) {
   if (defined(aggregateFields)) {
     location.query.aggregateField = aggregateFields.map(aggregateField => {
-      if (_isBaseVisualize(aggregateField)) {
+      if (isBaseVisualize(aggregateField)) {
         return JSON.stringify(Visualize.fromJSON(aggregateField).toJSON());
       }
       return JSON.stringify(aggregateField);

static/app/views/explore/hooks/useExploreAggregatesTable.tsx

@@ -6,11 +6,11 @@ import EventView from 'sentry/utils/discover/eventView';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {
+  useExploreAggregateFields,
   useExploreDataset,
-  useExploreGroupBys,
   useExploreSortBys,
-  useExploreVisualizes,
 } from 'sentry/views/explore/contexts/pageParamsContext';
+import {isGroupBy} from 'sentry/views/explore/contexts/pageParamsContext/aggregateFields';
 import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys';
 import type {SpansRPCQueryExtras} from 'sentry/views/explore/hooks/useProgressiveQuery';
 import {useProgressiveQuery} from 'sentry/views/explore/hooks/useProgressiveQuery';
@@ -60,33 +60,32 @@ function useExploreAggregatesTableImp({
   const {selection} = usePageFilters();
 
   const dataset = useExploreDataset();
-  const groupBys = useExploreGroupBys();
+  const aggregateFields = useExploreAggregateFields();
   const sorts = useExploreSortBys();
-  const visualizes = useExploreVisualizes();
 
   const fields = useMemo(() => {
     // When rendering the table, we want the group bys first
     // then the aggregates.
     const allFields: string[] = [];
 
-    for (const groupBy of groupBys) {
-      if (allFields.includes(groupBy)) {
-        continue;
-      }
-      allFields.push(groupBy);
-    }
-
-    for (const visualize of visualizes) {
-      for (const yAxis of visualize.yAxes) {
-        if (allFields.includes(yAxis)) {
+    for (const aggregateField of aggregateFields) {
+      if (isGroupBy(aggregateField)) {
+        if (allFields.includes(aggregateField.groupBy)) {
           continue;
         }
-        allFields.push(yAxis);
+        allFields.push(aggregateField.groupBy);
+      } else {
+        for (const yAxis of aggregateField.yAxes) {
+          if (allFields.includes(yAxis)) {
+            continue;
+          }
+          allFields.push(yAxis);
+        }
       }
     }
 
     return allFields.filter(Boolean);
-  }, [groupBys, visualizes]);
+  }, [aggregateFields]);
 
   const eventView = useMemo(() => {
     const search = new MutableSearch(query);

static/app/views/explore/hooks/useGetSavedQueries.tsx

@@ -1,23 +1,78 @@
-import {useCallback} from 'react';
+import {useCallback, useMemo} from 'react';
 
 import type {Actor} from 'sentry/types/core';
 import {defined} from 'sentry/utils';
 import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 
-type Query = {
+export type RawGroupBy = {
+  groupBy: string;
+};
+
+function isRawGroupBy(value: any): value is RawGroupBy {
+  return typeof value === 'object' && typeof value.groupBy === 'string';
+}
+
+export type RawVisualize = {
+  yAxes: string[];
+  chartType?: number;
+};
+
+export function isRawVisualize(value: any): value is RawVisualize {
+  return (
+    typeof value === 'object' &&
+    Array.isArray(value.yAxes) &&
+    value.yAxes.every((v: any) => typeof v === 'string')
+  );
+}
+
+type ReadableQuery = {
   fields: string[];
-  groupby: string[];
   mode: Mode;
   orderby: string;
   query: string;
-  visualize: Array<{
-    chartType: number;
-    yAxes: string[];
-  }>;
+
+  // a query can have either
+  // - `aggregateField` which contains a list of group bys and visualizes merged together
+  // - `groupby` and `visualize` which contains the group bys and visualizes separately
+  aggregateField?: Array<RawGroupBy | RawVisualize>;
+  groupby?: string[];
+  visualize?: RawVisualize[];
 };
 
+class Query {
+  fields: string[];
+  mode: Mode;
+  orderby: string;
+  query: string;
+
+  aggregateField: Array<RawGroupBy | RawVisualize>;
+  groupby: string[];
+  visualize: RawVisualize[];
+
+  constructor(query: ReadableQuery) {
+    this.fields = query.fields;
+    this.mode = query.mode;
+    this.orderby = query.orderby;
+    this.query = query.query;
+
+    // for compatibility, we ensure that aggregate fields, group bys and visualizes are all populated
+    // we ensure that group bys + visualizes = aggregate fields
+    this.groupby =
+      query.aggregateField
+        ?.filter<RawGroupBy>(isRawGroupBy)
+        .map(groupBy => groupBy.groupBy) ??
+      query.groupby ??
+      [];
+    this.visualize =
+      query.aggregateField?.filter<RawVisualize>(isRawVisualize) ?? query.visualize ?? [];
+    this.aggregateField = defined(query.aggregateField)
+      ? query.aggregateField
+      : [...this.groupby.map(groupBy => ({groupBy})), ...this.visualize];
+  }
+}
+
 export type SortOption =
   | 'name'
   | '-name'
@@ -30,7 +85,7 @@ export type SortOption =
   | 'mostStarred';
 
 // Comes from ExploreSavedQueryModelSerializer
-export type SavedQuery = {
+type ReadableSavedQuery = {
   dateAdded: string;
   dateUpdated: string;
   id: number;
@@ -39,7 +94,7 @@ export type SavedQuery = {
   name: string;
   position: number | null;
   projects: number[];
-  query: [Query, ...Query[]];
+  query: [ReadableQuery, ...ReadableQuery[]];
   queryDataset: string;
   starred: boolean;
   createdBy?: Actor;
@@ -50,6 +105,49 @@ export type SavedQuery = {
   start?: string;
 };
 
+export class SavedQuery {
+  dateAdded: string;
+  dateUpdated: string;
+  id: number;
+  interval: string;
+  lastVisited: string;
+  name: string;
+  position: number | null;
+  projects: number[];
+  query: [Query, ...Query[]];
+  queryDataset: string;
+  starred: boolean;
+  createdBy?: Actor;
+  end?: string;
+  environment?: string[];
+  isPrebuilt?: boolean;
+  range?: string;
+  start?: string;
+
+  constructor(savedQuery: ReadableSavedQuery) {
+    this.dateAdded = savedQuery.dateAdded;
+    this.dateUpdated = savedQuery.dateUpdated;
+    this.id = savedQuery.id;
+    this.interval = savedQuery.interval;
+    this.lastVisited = savedQuery.lastVisited;
+    this.name = savedQuery.name;
+    this.position = savedQuery.position;
+    this.projects = savedQuery.projects;
+    this.query = [
+      new Query(savedQuery.query[0]),
+      ...savedQuery.query.slice(1).map(q => new Query(q)),
+    ];
+    this.queryDataset = savedQuery.queryDataset;
+    this.starred = savedQuery.starred;
+    this.createdBy = savedQuery.createdBy;
+    this.end = savedQuery.end;
+    this.environment = savedQuery.environment;
+    this.isPrebuilt = savedQuery.isPrebuilt;
+    this.range = savedQuery.range;
+    this.start = savedQuery.start;
+  }
+}
+
 type Props = {
   cursor?: string;
   exclude?: 'owned' | 'shared';
@@ -69,7 +167,7 @@ export function useGetSavedQueries({
 }: Props) {
   const organization = useOrganization();
 
-  const {data, isLoading, getResponseHeader, ...rest} = useApiQuery<SavedQuery[]>(
+  const {data, isLoading, getResponseHeader, ...rest} = useApiQuery<ReadableSavedQuery[]>(
     [
       `/organizations/${organization.slug}/explore/saved/`,
       {
@@ -90,7 +188,8 @@ export function useGetSavedQueries({
 
   const pageLinks = getResponseHeader?.('Link');
 
-  return {data, isLoading, pageLinks, ...rest};
+  const savedQueries = useMemo(() => data?.map(q => new SavedQuery(q)), [data]);
+  return {data: savedQueries, isLoading, pageLinks, ...rest};
 }
 
 export function useInvalidateSavedQueries() {
@@ -106,14 +205,15 @@ export function useInvalidateSavedQueries() {
 
 export function useGetSavedQuery(id?: string) {
   const organization = useOrganization();
-  const {data, isLoading, ...rest} = useApiQuery<SavedQuery>(
+  const {data, isLoading, ...rest} = useApiQuery<ReadableSavedQuery>(
     [`/organizations/${organization.slug}/explore/saved/${id}/`],
     {
       staleTime: 0,
       enabled: defined(id),
     }
   );
-  return {data, isLoading, ...rest};
+  const savedQuery = useMemo(() => (defined(data) ? new SavedQuery(data) : data), [data]);
+  return {data: savedQuery, isLoading, ...rest};
 }
 
 export function useInvalidateSavedQuery(id?: string) {

static/app/views/explore/hooks/useSaveQuery.tsx

@@ -27,8 +27,6 @@ export function useSaveQuery() {
   const invalidateSavedQueries = useInvalidateSavedQueries();
   const invalidateSavedQuery = useInvalidateSavedQuery(id);
 
-  const visualize = visualizes.map(v => v.toJSON());
-
   const data = useMemo(() => {
     return {
       name: title,
@@ -45,15 +43,15 @@ export function useSaveQuery() {
           orderby: sortBys[0] ? encodeSort(sortBys[0]) : undefined,
           groupby: groupBys.filter(groupBy => groupBy !== ''),
           query: query ?? '',
-          visualize,
+          visualize: visualizes.map(visualize => visualize.toJSON()),
           mode,
         },
       ],
     };
   }, [
     groupBys,
     sortBys,
-    visualize,
+    visualizes,
     fields,
     query,
     mode,

static/app/views/explore/utils.tsx

@@ -22,14 +22,22 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {determineSeriesSampleCountAndIsSampled} from 'sentry/views/alerts/rules/metric/utils/determineSeriesSampleCount';
 import type {TimeSeries} from 'sentry/views/dashboards/widgets/common/types';
 import {newExploreTarget} from 'sentry/views/explore/contexts/pageParamsContext';
+import type {GroupBy} from 'sentry/views/explore/contexts/pageParamsContext/aggregateFields';
+import {isGroupBy} from 'sentry/views/explore/contexts/pageParamsContext/aggregateFields';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import type {
   BaseVisualize,
   Visualize,
 } from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
-import type {SavedQuery} from 'sentry/views/explore/hooks/useGetSavedQueries';
+import type {
+  RawGroupBy,
+  RawVisualize,
+  SavedQuery,
+} from 'sentry/views/explore/hooks/useGetSavedQueries';
+import {isRawVisualize} from 'sentry/views/explore/hooks/useGetSavedQueries';
 import type {ReadableExploreQueryParts} from 'sentry/views/explore/multiQueryMode/locationUtils';
 import type {ChartType} from 'sentry/views/insights/common/components/chart';
+import {isChartType} from 'sentry/views/insights/common/components/chart';
 import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
 import {makeTracesPathname} from 'sentry/views/traces/pathnames';
 
@@ -38,6 +46,7 @@ export function getExploreUrl({
   selection,
   interval,
   mode,
+  aggregateField,
   visualize,
   query,
   groupBy,
@@ -47,7 +56,7 @@ export function getExploreUrl({
   title,
 }: {
   organization: Organization;
-  visualize: BaseVisualize[];
+  aggregateField?: Array<GroupBy | BaseVisualize>;
   field?: string[];
   groupBy?: string[];
   id?: number;
@@ -57,6 +66,7 @@ export function getExploreUrl({
   selection?: PageFilters;
   sort?: string;
   title?: string;
+  visualize?: BaseVisualize[];
 }) {
   const {start, end, period: statsPeriod, utc} = selection?.datetime ?? {};
   const {environments, projects} = selection ?? {};
@@ -69,7 +79,8 @@ export function getExploreUrl({
     interval,
     mode,
     query,
-    visualize: visualize.map(v => JSON.stringify(v)),
+    aggregateField: aggregateField?.map(v => JSON.stringify(v)),
+    visualize: visualize?.map(v => JSON.stringify(v)),
     groupBy,
     sort,
     field,
@@ -97,13 +108,25 @@ export function getExploreUrlFromSavedQueryUrl({
     return getExploreMultiQueryUrl({
       organization,
       ...savedQuery,
-      queries: savedQuery.query.map(q => ({
-        ...q,
-        chartType: q.visualize[0]?.chartType as ChartType, // Multi Query View only supports a single visualize per query
-        yAxes: q.visualize[0]?.yAxes ?? [],
-        groupBys: q.groupby,
-        sortBys: decodeSorts(q.orderby),
-      })),
+      queries: savedQuery.query.map(q => {
+        const groupBys: string[] | undefined =
+          q.aggregateField
+            ?.filter<RawGroupBy>(isGroupBy)
+            ?.map(groupBy => groupBy.groupBy) ?? q.groupby;
+        const visualize: RawVisualize | undefined =
+          q.aggregateField?.find<RawVisualize>(isRawVisualize) ?? q.visualize?.[0];
+        const chartType: ChartType | undefined = isChartType(visualize?.chartType)
+          ? visualize.chartType
+          : undefined;
+
+        return {
+          ...q,
+          chartType,
+          yAxes: (visualize?.yAxes ?? []).slice(),
+          groupBys: groupBys ?? [],
+          sortBys: decodeSorts(q.orderby),
+        };
+      }),
       title: savedQuery.name,
       selection: {
         datetime: {