add epm to explore

Author: DominikB2014

static/app/utils/fields/index.ts

@@ -833,6 +833,7 @@ export const ALLOWED_EXPLORE_VISUALIZE_FIELDS: SpanIndexedField[] = [
 
 export const ALLOWED_EXPLORE_VISUALIZE_AGGREGATES: AggregationKey[] = [
   AggregationKey.COUNT, // DO NOT RE-ORDER: the first element is used as the default
+  AggregationKey.EPM,
   AggregationKey.COUNT_UNIQUE,
   AggregationKey.AVG,
   AggregationKey.P50,
@@ -846,7 +847,7 @@ export const ALLOWED_EXPLORE_VISUALIZE_AGGREGATES: AggregationKey[] = [
   AggregationKey.MAX,
 ];
 
-const SPAN_AGGREGATION_FIELDS: Record<AggregationKey, FieldDefinition> = {
+export const SPAN_AGGREGATION_FIELDS: Record<AggregationKey, FieldDefinition> = {
   ...AGGREGATION_FIELDS,
   [AggregationKey.COUNT]: {
     ...AGGREGATION_FIELDS[AggregationKey.COUNT],

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

@@ -8,6 +8,7 @@ import {
   AggregationKey,
   ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
   ALLOWED_EXPLORE_VISUALIZE_FIELDS,
+  SPAN_AGGREGATION_FIELDS,
 } from 'sentry/utils/fields';
 import {decodeList} from 'sentry/utils/queryString';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
@@ -150,6 +151,8 @@ export function updateVisualizeAggregate({
   oldAggregate: string;
   oldArgument: string;
 }): string {
+  const functionDefinition = SPAN_AGGREGATION_FIELDS[newAggregate as AggregationKey];
+
   // the default aggregate only has 1 allowed field
   if (newAggregate === DEFAULT_VISUALIZATION_AGGREGATE) {
     return DEFAULT_VISUALIZATION;
@@ -169,7 +172,17 @@ export function updateVisualizeAggregate({
     return `${newAggregate}(${DEFAULT_VISUALIZATION_FIELD})`;
   }
 
-  return `${newAggregate}(${oldArgument})`;
+  let newArgument = oldArgument;
+  if (functionDefinition) {
+    const hasParameters =
+      functionDefinition.parameters && functionDefinition.parameters.length > 0;
+    if (!hasParameters) {
+      newArgument = '';
+    }
+    // TODO: check if old parameter is valid for new function
+  }
+
+  return `${newAggregate}(${newArgument})`;
 }
 
 const FUNCTION_TO_CHART_TYPE: Record<string, ChartType> = {

static/app/views/explore/toolbar/toolbarVisualize.tsx

@@ -12,7 +12,11 @@ import {IconAdd} from 'sentry/icons';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {parseFunction} from 'sentry/utils/discover/fields';
-import {ALLOWED_EXPLORE_VISUALIZE_AGGREGATES} from 'sentry/utils/fields';
+import type {AggregationKey} from 'sentry/utils/fields';
+import {
+  ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
+  SPAN_AGGREGATION_FIELDS,
+} from 'sentry/utils/fields';
 import {
   useExploreVisualizes,
   useSetExploreVisualizes,
@@ -165,7 +169,11 @@ function VisualizeDropdown({
   // We want to lock down the fields dropdown when using count so that we can
   // render `count(spans)` for better legibility. However, for backwards
   // compatibility, we don't want to lock down all `count` queries immediately.
-  const lockOptions = yAxis === DEFAULT_VISUALIZATION;
+  const functionDefinition =
+    SPAN_AGGREGATION_FIELDS[parsedVisualize?.name as AggregationKey];
+  const shouldHaveParameters =
+    functionDefinition?.parameters && functionDefinition.parameters.length > 0;
+  const lockOptions = yAxis === DEFAULT_VISUALIZATION || !shouldHaveParameters;
 
   const countFieldOptions: Array<SelectOption<string>> = useMemo(
     () => [
@@ -183,7 +191,7 @@ function VisualizeDropdown({
   });
   const fieldOptions = lockOptions ? countFieldOptions : defaultFieldOptions;
 
-  const aggregateOptions: Array<SelectOption<string>> = useMemo(() => {
+  const aggregateOptions: Array<SelectOption<AggregationKey>> = useMemo(() => {
     return ALLOWED_EXPLORE_VISUALIZE_AGGREGATES.map(aggregate => {
       return {
         label: aggregate,