feat(tracemetrics): Use new timeseries visualization (#105176)

Add the tracemetrics widgets to the new timeseries visualization
allowlist. Also drop the timestamp transformation we're doing because
it's not necessary any more for the new visualizations. Keeping it in
messes up the timestamps on the chart and the release bubble querying.

Author: narsaynorath

static/app/views/dashboards/datasetConfig/traceMetrics.tsx

@@ -182,7 +182,7 @@ export const TraceMetricsConfig: DatasetConfig<EventsTimeSeriesResponse, never>
       }
       return {
         data: timeSeries.values.map(value => ({
-          name: value.timestamp / 1000, // Account for microseconds to milliseconds precision
+          name: value.timestamp,
           value: value.value ?? 0,
         })),
         seriesName: formatTimeSeriesLabel(timeSeries),

static/app/views/dashboards/utils/widgetCanUseTimeSeriesVisualization.tsx

@@ -6,9 +6,7 @@ const SUPPORTED_WIDGET_TYPES = new Set<WidgetType>([
   WidgetType.ISSUE,
   WidgetType.LOGS,
   WidgetType.ERRORS,
-  // TODO(nar): Uncomment this to use new timeseries visualization, there is currently
-  // a bug when adding a new y-axis in the widget builder to use this.
-  // WidgetType.TRACEMETRICS,
+  WidgetType.TRACEMETRICS,
 ]);
 
 const SUPPORTED_DISPLAY_TYPES = new Set<DisplayType>([

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx

@@ -1664,6 +1664,37 @@ describe('useWidgetBuilderState', () => {
 
       expect(result.current.state.sort).toEqual([]);
     });
+
+    it('updates the limit when the y-axis changes', () => {
+      mockedUsedLocation.mockReturnValue(
+        LocationFixture({
+          query: {
+            limit: '5',
+            field: ['event.type'],
+            yAxis: ['count()', 'count_unique(user)'],
+          },
+        })
+      );
+      const {result} = renderHook(() => useWidgetBuilderState(), {
+        wrapper: WidgetBuilderProvider,
+      });
+
+      expect(result.current.state.limit).toBe(5);
+
+      act(() => {
+        result.current.dispatch({
+          type: BuilderStateAction.SET_Y_AXIS,
+          payload: [
+            {function: ['count', '', undefined, undefined], kind: 'function'},
+            {function: ['count_unique', 'user', undefined, undefined], kind: 'function'},
+            {function: ['count_unique', 'title', undefined, undefined], kind: 'function'},
+          ],
+        });
+      });
+
+      // The resulting limit should be at max 3
+      expect(result.current.state.limit).toBe(3);
+    });
   });
 
   describe('sort', () => {

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx

@@ -562,6 +562,15 @@ function useWidgetBuilderState(): {
         }
         case BuilderStateAction.SET_Y_AXIS:
           setYAxis(action.payload, options);
+
+          if (fields?.length && fields.length > 0) {
+            // Check if we need to update the limit for a Top N query
+            const maxLimit = getResultsLimit(query?.length ?? 1, action.payload.length);
+            if (limit && limit > maxLimit) {
+              setLimit(maxLimit, options);
+            }
+          }
+
           if (action.payload.length > 0 && fields?.length === 0) {
             // Clear the sort if there is no grouping
             setSort([], options);