[WIP] feat(preprod): add pre-built app size monitoring dashboard

static/app/utils/discover/charts.tsx

@@ -4,6 +4,7 @@ import type {LegendComponentOption} from 'echarts';
 import type {Series} from 'sentry/types/echarts';
 import {defined} from 'sentry/utils';
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
+import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import type {AggregationOutputType, RateUnit} from 'sentry/utils/discover/fields';
 import {axisDuration} from 'sentry/utils/duration/axisDuration';
 import getDuration from 'sentry/utils/duration/getDuration';
@@ -46,6 +47,8 @@ export function tooltipFormatterUsingAggregateOutputType(
       return getDuration(value / 1000, 2, true);
     case 'size':
       return formatBytesBase2(value);
+    case 'size_base10':
+      return formatBytesBase10(value);
     default:
       return value.toString();
   }
@@ -94,6 +97,8 @@ export function axisLabelFormatterUsingAggregateOutputType(
       return axisDuration(value, durationUnit);
     case 'size':
       return formatBytesBase2(value, 0);
+    case 'size_base10':
+      return formatBytesBase10(value, 0);
     case 'rate':
       return formatRate(value, rateUnit);
     default:

static/app/utils/discover/fields.tsx

@@ -630,6 +630,7 @@ export type AggregationOutputType = Extract<
   | 'percentage'
   | 'string'
   | 'size'
+  | 'size_base10'
   | 'rate'
   | 'score'
 >;

static/app/utils/fields/index.ts

@@ -290,6 +290,7 @@ export enum FieldValueType {
   STRING = 'string',
   NEVER = 'never',
   SIZE = 'size',
+  SIZE_BASE10 = 'size_base10',
   RATE = 'rate',
   PERCENT_CHANGE = 'percent_change',
   SCORE = 'score',

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

@@ -32,6 +32,7 @@ import {ErrorsConfig} from './errors';
 import {ErrorsAndTransactionsConfig} from './errorsAndTransactions';
 import {IssuesConfig} from './issues';
 import {LogsConfig} from './logs';
+import {MobileAppSizeConfig} from './mobileAppSize';
 import {ReleasesConfig} from './releases';
 import {SpansConfig} from './spans';
 import {TraceMetricsConfig} from './traceMetrics';
@@ -285,7 +286,9 @@ export function getDatasetConfig<T extends WidgetType | undefined>(
             ? typeof SpansConfig
             : T extends WidgetType.TRACEMETRICS
               ? typeof TraceMetricsConfig
-              : typeof ErrorsAndTransactionsConfig;
+              : T extends WidgetType.MOBILE_APP_SIZE
+                ? typeof MobileAppSizeConfig
+                : typeof ErrorsAndTransactionsConfig;
 
 export function getDatasetConfig(
   widgetType?: WidgetType
@@ -297,7 +300,8 @@ export function getDatasetConfig(
   | typeof TransactionsConfig
   | typeof LogsConfig
   | typeof SpansConfig
-  | typeof TraceMetricsConfig {
+  | typeof TraceMetricsConfig
+  | typeof MobileAppSizeConfig {
   switch (widgetType) {
     case WidgetType.ISSUE:
       return IssuesConfig;
@@ -313,6 +317,8 @@ export function getDatasetConfig(
       return SpansConfig;
     case WidgetType.TRACEMETRICS:
       return TraceMetricsConfig;
+    case WidgetType.MOBILE_APP_SIZE:
+      return MobileAppSizeConfig;
     case WidgetType.DISCOVER:
     default:
       return ErrorsAndTransactionsConfig;

static/app/views/dashboards/datasetConfig/mobileAppSize.spec.tsx

@@ -0,0 +1,292 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {WidgetFixture} from 'sentry-fixture/widget';
+
+import {WidgetType} from 'sentry/views/dashboards/types';
+
+import type {AppSizeResponse} from './mobileAppSize';
+import {MobileAppSizeConfig} from './mobileAppSize';
+
+describe('MobileAppSizeConfig', () => {
+  const organization = OrganizationFixture();
+
+  describe('transformSeries', () => {
+    it('transforms API response to series data', () => {
+      const data: AppSizeResponse[] = [
+        {
+          data: [
+            [1609459200, [{count: 1000000}]],
+            [1609545600, [{count: 1100000}]],
+            [1609632000, [{count: 1200000}]],
+          ],
+          start: 1609459200,
+          end: 1609632000,
+          meta: {fields: {}},
+        },
+      ];
+
+      const widgetQuery = {
+        conditions: 'app_id=com.example.app',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.transformSeries!(
+        data,
+        widgetQuery,
+        organization
+      );
+
+      expect(result).toHaveLength(1);
+      expect(result[0]!.seriesName).toBe('com.example.app : max(max_install_size)');
+      expect(result[0]!.data).toHaveLength(3);
+      expect(result[0]!.data[0]).toEqual({
+        name: 1609459200000,
+        value: 1000000,
+      });
+    });
+
+    it('filters out null and undefined values', () => {
+      const data: AppSizeResponse[] = [
+        {
+          data: [
+            [1609459200, [{count: 1000000}]],
+            [1609545600, [{count: null}]],
+            [1609632000, []],
+            [1609718400, [{count: 1200000}]],
+          ],
+          start: 1609459200,
+          end: 1609718400,
+          meta: {fields: {}},
+        },
+      ];
+
+      const widgetQuery = {
+        conditions: '',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.transformSeries!(
+        data,
+        widgetQuery,
+        organization
+      );
+
+      expect(result[0]!.data).toHaveLength(2);
+      expect(result[0]!.data[0]!.value).toBe(1000000);
+      expect(result[0]!.data[1]!.value).toBe(1200000);
+    });
+
+    it('includes artifact type in series name', () => {
+      const data: AppSizeResponse[] = [
+        {
+          data: [[1609459200, [{count: 1000000}]]],
+          start: 1609459200,
+          end: 1609459200,
+          meta: {fields: {}},
+        },
+      ];
+
+      const widgetQuery = {
+        conditions: 'app_id=com.example.app&artifact_type=2',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.transformSeries!(
+        data,
+        widgetQuery,
+        organization
+      );
+
+      expect(result[0]!.seriesName).toContain('com.example.app');
+      expect(result[0]!.seriesName).toContain('apk');
+      expect(result[0]!.seriesName).toContain('max(max_install_size)');
+    });
+
+    it('includes branch and build config in series name', () => {
+      const data: AppSizeResponse[] = [
+        {
+          data: [[1609459200, [{count: 1000000}]]],
+          start: 1609459200,
+          end: 1609459200,
+          meta: {fields: {}},
+        },
+      ];
+
+      const widgetQuery = {
+        conditions:
+          'app_id=com.example.app&git_head_ref=main&build_configuration_name=Release',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.transformSeries!(
+        data,
+        widgetQuery,
+        organization
+      );
+
+      expect(result[0]!.seriesName).toContain('com.example.app');
+      expect(result[0]!.seriesName).toContain('main');
+      expect(result[0]!.seriesName).toContain('Release');
+      expect(result[0]!.seriesName).toContain('max(max_install_size)');
+    });
+
+    it('uses correct aggregate for download size', () => {
+      const data: AppSizeResponse[] = [
+        {
+          data: [[1609459200, [{count: 500000}]]],
+          start: 1609459200,
+          end: 1609459200,
+          meta: {fields: {}},
+        },
+      ];
+
+      const widgetQuery = {
+        conditions: 'app_id=com.example.app&size_type=download',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.transformSeries!(
+        data,
+        widgetQuery,
+        organization
+      );
+
+      expect(result[0]!.seriesName).toBe('com.example.app : max(max_download_size)');
+    });
+  });
+
+  describe('getSeriesRequest', () => {
+    it('uses install size field by default', async () => {
+      const api = new MockApiClient();
+      const widget = WidgetFixture({
+        widgetType: WidgetType.MOBILE_APP_SIZE,
+        queries: [
+          {
+            conditions: 'app_id=com.example.app',
+            aggregates: [],
+            fields: [],
+            columns: [],
+            fieldAliases: [],
+            name: '',
+            orderby: '',
+          },
+        ],
+      });
+
+      const mockRequest = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/preprod/app-size-stats/`,
+        body: {
+          data: [[1609459200, [{count: 1000000}]]],
+          start: 1609459200,
+          end: 1609459200,
+          meta: {fields: {}},
+        },
+      });
+
+      await MobileAppSizeConfig.getSeriesRequest!(api, widget, 0, organization, {
+        datetime: {start: null, end: null, period: '14d', utc: false},
+        environments: [],
+        projects: [1],
+      });
+
+      expect(mockRequest).toHaveBeenCalledWith(
+        `/organizations/${organization.slug}/preprod/app-size-stats/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            field: 'max(max_install_size)',
+          }),
+        })
+      );
+    });
+
+    it('uses download size field when size_type=download', async () => {
+      const api = new MockApiClient();
+      const widget = WidgetFixture({
+        widgetType: WidgetType.MOBILE_APP_SIZE,
+        queries: [
+          {
+            conditions: 'app_id=com.example.app&size_type=download',
+            aggregates: [],
+            fields: [],
+            columns: [],
+            fieldAliases: [],
+            name: '',
+            orderby: '',
+          },
+        ],
+      });
+
+      const mockRequest = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/preprod/app-size-stats/`,
+        body: {
+          data: [[1609459200, [{count: 500000}]]],
+          start: 1609459200,
+          end: 1609459200,
+          meta: {fields: {}},
+        },
+      });
+
+      await MobileAppSizeConfig.getSeriesRequest!(api, widget, 0, organization, {
+        datetime: {start: null, end: null, period: '14d', utc: false},
+        environments: [],
+        projects: [1],
+      });
+
+      expect(mockRequest).toHaveBeenCalledWith(
+        `/organizations/${organization.slug}/preprod/app-size-stats/`,
+        expect.objectContaining({
+          query: expect.objectContaining({
+            field: 'max(max_download_size)',
+          }),
+        })
+      );
+    });
+  });
+
+  describe('getSeriesResultType', () => {
+    it('returns size_base10 output type for both install and download aggregates', () => {
+      const data: AppSizeResponse[] = [];
+      const widgetQuery = {
+        conditions: '',
+        aggregates: [],
+        fields: [],
+        columns: [],
+        fieldAliases: [],
+        name: '',
+        orderby: '',
+      };
+
+      const result = MobileAppSizeConfig.getSeriesResultType!(data, widgetQuery);
+
+      // Both aggregates should be registered to handle multi-query widgets
+      expect(result).toEqual({
+        'max(max_install_size)': 'size_base10',
+        'max(max_download_size)': 'size_base10',
+      });
+    });
+  });
+});