ref(dam): Use cols and aggregates (#32441)

Read from columns and aggregates instead of fields to
build widgets. Fields are still used to maintain order on
table widgets.

Author: shruthilayaj

static/app/components/dashboards/issueWidgetQueriesForm.tsx

@@ -77,7 +77,9 @@ class IssueWidgetQueriesForm extends React.Component<Props, State> {
 
   render() {
     const {organization, error, query, tags, fieldOptions, onChange} = this.props;
-    const explodedFields = query.fields.map(field => explodeField({field}));
+    const explodedFields = (query.fields ?? [...query.columns, ...query.aggregates]).map(
+      field => explodeField({field})
+    );
     const {blurTimeout} = this.state;
 
     return (

static/app/components/dashboards/widgetQueriesForm.tsx

@@ -12,11 +12,12 @@ import {IconAdd, IconDelete} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, PageFilters, SelectValue} from 'sentry/types';
+import {defined} from 'sentry/utils';
 import {
   explodeField,
   generateFieldAsString,
   getAggregateAlias,
-  getColumnsAndAggregates,
+  getColumnsAndAggregatesAsStrings,
   isEquation,
   stripEquationPrefix,
 } from 'sentry/utils/discover/fields';
@@ -181,7 +182,10 @@ class WidgetQueriesForm extends React.Component<Props> {
     const isMetrics = widgetType === WidgetType.METRICS;
 
     const hideLegendAlias = ['table', 'world_map', 'big_number'].includes(displayType);
-    const explodedFields = queries[0].fields.map(field => explodeField({field}));
+    const query = queries[0];
+    const explodedFields = defined(query.fields)
+      ? query.fields.map(field => explodeField({field}))
+      : [...query.columns, ...query.aggregates].map(field => explodeField({field}));
 
     return (
       <QueryWrapper>
@@ -247,19 +251,22 @@ class WidgetQueriesForm extends React.Component<Props> {
           fields={explodedFields}
           organization={organization}
           onChange={fields => {
+            const {aggregates, columns} = getColumnsAndAggregatesAsStrings(fields);
             const fieldStrings = fields.map(field => generateFieldAsString(field));
             const aggregateAliasFieldStrings = isMetrics
               ? fieldStrings
               : fieldStrings.map(field => getAggregateAlias(field));
             queries.forEach((widgetQuery, queryIndex) => {
               const descending = widgetQuery.orderby.startsWith('-');
               const orderbyAggregateAliasField = widgetQuery.orderby.replace('-', '');
-              const prevAggregateAliasFieldStrings = widgetQuery.fields.map(field =>
+              const prevAggregateAliasFields = defined(widgetQuery.fields)
+                ? widgetQuery.fields
+                : [...widgetQuery.columns, ...widgetQuery.aggregates];
+              const prevAggregateAliasFieldStrings = prevAggregateAliasFields.map(field =>
                 isMetrics ? field : getAggregateAlias(field)
               );
               const newQuery = cloneDeep(widgetQuery);
               newQuery.fields = fieldStrings;
-              const {columns, aggregates} = getColumnsAndAggregates(fieldStrings);
               newQuery.aggregates = aggregates;
               newQuery.columns = columns;
               if (
@@ -295,7 +302,8 @@ class WidgetQueriesForm extends React.Component<Props> {
               name="orderby"
               options={generateOrderOptions({
                 widgetType,
-                ...getColumnsAndAggregates(queries[0].fields),
+                columns: queries[0].columns,
+                aggregates: queries[0].aggregates,
               })}
               onChange={(option: SelectValue<string>) =>
                 this.handleFieldChange(0, 'orderby')(option.value)

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -33,6 +33,7 @@ import {
   SelectValue,
   TagCollection,
 } from 'sentry/types';
+import {defined} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {getColumnsAndAggregates} from 'sentry/utils/discover/fields';
 import Measurements from 'sentry/utils/measurements/measurements';
@@ -159,17 +160,13 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const {widget, defaultTitle, displayType} = props;
+    const {widget, defaultTitle, displayType, defaultWidgetQuery} = props;
     if (!widget) {
       this.state = {
         title: defaultTitle ?? '',
         displayType: displayType ?? DisplayType.TABLE,
         interval: '5m',
-        queries: [
-          this.defaultWidgetQueries
-            ? {...this.defaultWidgetQueries}
-            : {...newDiscoverQuery},
-        ],
+        queries: [defaultWidgetQuery ? {...defaultWidgetQuery} : {...newDiscoverQuery}],
         errors: undefined,
         loading: !!this.omitDashboardProp,
         dashboards: [],
@@ -201,16 +198,6 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
     }
   }
 
-  get defaultWidgetQueries() {
-    const {defaultWidgetQuery} = this.props;
-    if (defaultWidgetQuery) {
-      const {columns, aggregates} = getColumnsAndAggregates(defaultWidgetQuery.fields);
-      defaultWidgetQuery.aggregates = aggregates;
-      defaultWidgetQuery.columns = columns;
-    }
-    return defaultWidgetQuery;
-  }
-
   get omitDashboardProp() {
     // when opening from discover or issues page, the user selects the dashboard in the widget UI
     return [
@@ -315,7 +302,10 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
       } = {
         queryNames: [],
         queryConditions: [],
-        queryFields: widgetData.queries[0].fields,
+        queryFields: [
+          ...widgetData.queries[0].columns,
+          ...widgetData.queries[0].aggregates,
+        ],
         queryOrderby: widgetData.queries[0].orderby,
       };
       widgetData.queries.forEach(query => {
@@ -428,12 +418,11 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
           } else if (newDisplayType === displayType) {
             // When switching back to original display type, default fields back to the fields provided from the discover query
             normalized.forEach(query => {
-              query.fields = [...defaultWidgetQuery.fields];
-              const {columns, aggregates} = getColumnsAndAggregates([
-                ...defaultWidgetQuery.fields,
-              ]);
-              query.aggregates = aggregates;
-              query.columns = columns;
+              query.aggregates = [...defaultWidgetQuery.aggregates];
+              query.columns = [...defaultWidgetQuery.columns];
+              query.fields = defined(defaultWidgetQuery.fields)
+                ? [...defaultWidgetQuery.fields]
+                : [...defaultWidgetQuery.columns, ...defaultWidgetQuery.aggregates];
               query.orderby = defaultWidgetQuery.orderby;
             });
           }

static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx

@@ -45,7 +45,9 @@ class DashboardWidgetQuerySelectorModal extends React.Component<Props> {
       // Pull a max of 3 valid Y-Axis from the widget
       const yAxisOptions = eventView.getYAxisOptions().map(({value}) => value);
       discoverLocation.query.yAxis = [
-        ...new Set(query.fields.filter(field => yAxisOptions.includes(field))),
+        ...new Set(
+          query.aggregates.filter(aggregate => yAxisOptions.includes(aggregate))
+        ),
       ].slice(0, 3);
       switch (widget.displayType) {
         case DisplayType.BAR:

static/app/components/modals/widgetViewerModal.tsx

@@ -20,7 +20,9 @@ import Tooltip from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, PageFilters, SelectValue} from 'sentry/types';
+import {defined} from 'sentry/utils';
 import {getUtcDateString} from 'sentry/utils/dates';
+import {isAggregateField} from 'sentry/utils/discover/fields';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {decodeInteger, decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
@@ -122,16 +124,20 @@ function WidgetViewerModal(props: Props) {
     ...cloneDeep({...widget, queries: [sortedQueries[selectedQueryIndex]]}),
     displayType: DisplayType.TABLE,
   };
-  const fields = tableWidget.queries[0].fields;
+  const {aggregates, columns} = tableWidget.queries[0];
+
+  const fields = defined(tableWidget.queries[0].fields)
+    ? tableWidget.queries[0].fields
+    : [...columns, ...aggregates];
 
   // World Map view should always have geo.country in the table chart
   if (
     widget.displayType === DisplayType.WORLD_MAP &&
-    !fields.includes(GEO_COUNTRY_CODE)
+    !columns.includes(GEO_COUNTRY_CODE)
   ) {
     fields.unshift(GEO_COUNTRY_CODE);
+    columns.unshift(GEO_COUNTRY_CODE);
   }
-
   // Default table columns for visualizations that don't have a column setting
   const shouldReplaceTableColumns = [
     DisplayType.AREA,
@@ -147,6 +153,11 @@ function WidgetViewerModal(props: Props) {
       fields.length,
       ...['title', 'event.type', 'project', 'user.display', 'timestamp']
     );
+    columns.splice(
+      0,
+      fields.length,
+      ...['title', 'event.type', 'project', 'user.display', 'timestamp']
+    );
   }
 
   const prependColumnWidths = shouldReplaceTableColumns
@@ -160,8 +171,15 @@ function WidgetViewerModal(props: Props) {
       if (Array.isArray(fields) && !fields.includes(term)) {
         fields.unshift(term);
       }
+      if (isAggregateField(term) && !aggregates.includes(term)) {
+        aggregates.unshift(term);
+      }
+      if (!isAggregateField(term) && !columns.includes(term)) {
+        columns.unshift(term);
+      }
     });
   }
+
   const eventView = eventViewFromWidget(
     tableWidget.title,
     tableWidget.queries[0],

static/app/utils/discover/fields.tsx

@@ -1009,6 +1009,30 @@ export function getColumnsAndAggregates(fields: string[]): {
   return {columns, aggregates};
 }
 
+export function getColumnsAndAggregatesAsStrings(fields: QueryFieldValue[]): {
+  aggregates: string[];
+  columns: string[];
+} {
+  const aggregateFields: string[] = [];
+  const nonAggregateFields: string[] = [];
+
+  for (const field of fields) {
+    const fieldString = generateFieldAsString(field);
+    if (field.kind === 'function') {
+      aggregateFields.push(fieldString);
+    } else if (field.kind === 'equation') {
+      if (isAggregateEquation(fieldString)) {
+        aggregateFields.push(fieldString);
+      } else {
+        nonAggregateFields.push(fieldString);
+      }
+    } else {
+      nonAggregateFields.push(fieldString);
+    }
+  }
+  return {aggregates: aggregateFields, columns: nonAggregateFields};
+}
+
 /**
  * Convert a function string into type it will output.
  * This is useful when you need to format values in tooltips,

static/app/views/dashboardsV2/types.tsx

@@ -28,12 +28,15 @@ export enum WidgetType {
 }
 
 export type WidgetQuery = {
+  aggregates: string[];
+  columns: string[];
   conditions: string;
-  fields: string[];
   name: string;
   orderby: string;
-  aggregates?: string[];
-  columns?: string[];
+  // Fields is replaced with aggregates + columns. It
+  // is currently used to track column order on table
+  // widgets.
+  fields?: string[];
 };
 
 export type Widget = {

static/app/views/dashboardsV2/utils.tsx

@@ -13,6 +13,7 @@ import WidgetWorldMap from 'sentry-images/dashboard/widget-world-map.svg';
 import {parseArithmetic} from 'sentry/components/arithmeticInput/parser';
 import {getDiffInMinutes, getInterval} from 'sentry/components/charts/utils';
 import {Organization, PageFilters} from 'sentry/types';
+import {defined} from 'sentry/utils';
 import {getUtcDateString, parsePeriodToHours} from 'sentry/utils/dates';
 import EventView from 'sentry/utils/discover/eventView';
 import {
@@ -45,9 +46,9 @@ export function eventViewFromWidget(
   // World Map requires an additional column (geo.country_code) to display in discover when navigating from the widget
   const fields =
     widgetDisplayType === DisplayType.WORLD_MAP &&
-    !query.fields.includes('geo.country_code')
-      ? ['geo.country_code', ...query.fields]
-      : query.fields;
+    !query.columns.includes('geo.country_code')
+      ? ['geo.country_code', ...query.columns, ...query.aggregates]
+      : [...query.columns, ...query.aggregates];
   const conditions =
     widgetDisplayType === DisplayType.WORLD_MAP &&
     !query.conditions.includes('has:geo.country_code')
@@ -189,7 +190,9 @@ export function getWidgetDiscoverUrl(
   // Pull a max of 3 valid Y-Axis from the widget
   const yAxisOptions = eventView.getYAxisOptions().map(({value}) => value);
   discoverLocation.query.yAxis = [
-    ...new Set(widget.queries[0].fields.filter(field => yAxisOptions.includes(field))),
+    ...new Set(
+      widget.queries[0].aggregates.filter(aggregate => yAxisOptions.includes(aggregate))
+    ),
   ].slice(0, 3);
 
   // Visualization specific transforms
@@ -203,10 +206,10 @@ export function getWidgetDiscoverUrl(
     case DisplayType.TOP_N:
       discoverLocation.query.display = DisplayModes.TOP5;
       // Last field is used as the yAxis
-      const fields = widget.queries[0].fields;
-      discoverLocation.query.yAxis = fields[fields.length - 1];
-      if (fields.slice(0, -1).includes(fields[fields.length - 1])) {
-        discoverLocation.query.field = fields.slice(0, -1);
+      const aggregates = widget.queries[0].aggregates;
+      discoverLocation.query.yAxis = aggregates[aggregates.length - 1];
+      if (aggregates.slice(0, -1).includes(aggregates[aggregates.length - 1])) {
+        discoverLocation.query.field = aggregates.slice(0, -1);
       }
       break;
     default:
@@ -215,7 +218,11 @@ export function getWidgetDiscoverUrl(
 
   // Equation fields need to have their terms explicitly selected as columns in the discover table
   const fields = discoverLocation.query.field;
-  const equationFields = getFieldsFromEquations(widget.queries[0].fields);
+  const query = widget.queries[0];
+  const queryFields = defined(query.fields)
+    ? query.fields
+    : [...query.columns, ...query.aggregates];
+  const equationFields = getFieldsFromEquations(queryFields);
   // Updates fields by adding any individual terms from equation fields as a column
   equationFields.forEach(term => {
     if (Array.isArray(fields) && !fields.includes(term)) {

static/app/views/dashboardsV2/widgetBuilder/columnFields.tsx

@@ -12,20 +12,24 @@ import {WidgetType} from '../types';
 import {DisplayType} from './utils';
 
 interface Props {
+  aggregates: QueryFieldValue[];
   columns: QueryFieldValue[];
   displayType: DisplayType;
   fieldOptions: ReturnType<typeof generateFieldOptions>;
+  fields: QueryFieldValue[];
   onChange: (newColumns: QueryFieldValue[]) => void;
   organization: Organization;
   widgetType: WidgetType;
   errors?: Record<string, string>[];
 }
 
 export function ColumnFields({
+  aggregates,
+  columns,
   displayType,
   fieldOptions,
   widgetType,
-  columns,
+  fields,
   organization,
   errors,
   onChange,
@@ -39,17 +43,17 @@ export function ColumnFields({
     >
       {displayType === DisplayType.TABLE ? (
         <ColumnCollectionEdit
-          columns={columns}
+          columns={fields}
           onChange={onChange}
           fieldOptions={fieldOptions}
           organization={organization}
           source={widgetType}
         />
       ) : (
         <ColumnCollectionEdit
-          columns={columns.slice(0, columns.length - 1)}
+          columns={[...columns, ...aggregates.slice(0, aggregates.length - 1)]}
           onChange={newColumns => {
-            onChange([...newColumns, columns[columns.length - 1]]);
+            onChange([...newColumns, fields[fields.length - 1]]);
           }}
           fieldOptions={fieldOptions}
           organization={organization}