feat(ddm): ddm dashboard widget type (#60080)

Author: obostjancic

static/app/actionCreators/metrics.tsx

@@ -3,8 +3,9 @@ import {getInterval} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {DateString, MetricsApiResponse, Organization} from 'sentry/types';
 import {defined} from 'sentry/utils';
+import {getDateTimeParams, getMetricsInterval, parseMRI} from 'sentry/utils/metrics';
 
-export type DoMetricsRequestOptions = {
+export type DoReleaseHealthRequestOptions = {
   field: string[];
   orgSlug: Organization['slug'];
   cursor?: string;
@@ -25,7 +26,7 @@ export type DoMetricsRequestOptions = {
   statsPeriodStart?: string;
 };
 
-export const doMetricsRequest = (
+export const doReleaseHealthRequest = (
   api: Client,
   {
     field,
@@ -44,7 +45,7 @@ export const doMetricsRequest = (
     statsPeriodStart,
     statsPeriodEnd,
     ...dateTime
-  }: DoMetricsRequestOptions
+  }: DoReleaseHealthRequestOptions
 ): Promise<MetricsApiResponse | [MetricsApiResponse, string, ResponseMeta]> => {
   const {start, end, statsPeriod} = normalizeDateTimeParams(dateTime, {
     allowEmptyPeriod: true,
@@ -75,3 +76,70 @@ export const doMetricsRequest = (
 
   return api.requestPromise(pathname, {includeAllArgs, query: urlQuery});
 };
+
+export type DoMetricsRequestOptions = {
+  field: string[];
+  orgSlug: Organization['slug'];
+  cursor?: string;
+  end?: DateString;
+  environment?: Readonly<string[]>;
+  groupBy?: string[];
+  includeAllArgs?: boolean;
+  includeSeries?: number;
+  includeTotals?: number;
+  interval?: string;
+  limit?: number;
+  orderBy?: string;
+  project?: Readonly<number[]>;
+  query?: string;
+  start?: DateString;
+  statsPeriod?: string | null;
+  statsPeriodEnd?: string;
+  statsPeriodStart?: string;
+};
+
+export const doMetricsRequest = (
+  api: Client,
+  {
+    field,
+    orgSlug,
+    environment,
+    groupBy,
+    interval,
+    limit,
+    project,
+    query,
+    includeAllArgs = false,
+    ...dateTime
+  }: DoReleaseHealthRequestOptions
+): Promise<MetricsApiResponse | [MetricsApiResponse, string, ResponseMeta]> => {
+  const {useCase} = parseMRI(field[0]) ?? {useCase: 'custom'};
+
+  const {start, end, statsPeriod, utc} = normalizeDateTimeParams(dateTime, {
+    allowEmptyPeriod: true,
+    allowAbsoluteDatetime: true,
+    allowAbsolutePageDatetime: true,
+  });
+
+  // @ts-expect-error
+  const datetime = getDateTimeParams({start, end, period: statsPeriod, utc});
+
+  const metricsInterval = getMetricsInterval(datetime, useCase);
+
+  const urlQuery = {
+    ...datetime,
+    query,
+    project,
+    environment,
+    field,
+    useCase,
+    interval: interval || metricsInterval,
+    groupBy,
+    per_page: limit,
+    useNewMetricsLayer: false,
+  };
+
+  const pathname = `/organizations/${orgSlug}/metrics/data/`;
+
+  return api.requestPromise(pathname, {includeAllArgs, query: urlQuery});
+};

static/app/components/modals/widgetViewerModal.tsx

@@ -84,6 +84,7 @@ import {
 } from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
 import {GenericWidgetQueriesChildrenProps} from 'sentry/views/dashboards/widgetCard/genericWidgetQueries';
 import IssueWidgetQueries from 'sentry/views/dashboards/widgetCard/issueWidgetQueries';
+import MetricWidgetQueries from 'sentry/views/dashboards/widgetCard/metricWidgetQueries';
 import ReleaseWidgetQueries from 'sentry/views/dashboards/widgetCard/releaseWidgetQueries';
 import {WidgetCardChartContainer} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
 import WidgetQueries from 'sentry/views/dashboards/widgetCard/widgetQueries';
@@ -790,6 +791,32 @@ function WidgetViewerModal(props: Props) {
             {renderReleaseTable}
           </ReleaseWidgetQueries>
         );
+      case WidgetType.METRICS:
+        if (tableData && chartUnmodified && widget.displayType === DisplayType.TABLE) {
+          return renderReleaseTable({
+            tableResults: tableData,
+            loading: false,
+            pageLinks: defaultPageLinks,
+          });
+        }
+        return (
+          <MetricWidgetQueries
+            api={api}
+            organization={organization}
+            widget={tableWidget}
+            selection={modalTableSelection}
+            limit={
+              widget.displayType === DisplayType.TABLE
+                ? FULL_TABLE_ITEM_LIMIT
+                : HALF_TABLE_ITEM_LIMIT
+            }
+            cursor={cursor}
+            dashboardFilters={dashboardFilters}
+          >
+            {/* TODO(ddm): Check if we need to use a diffrent implementation, for now we fallback to release table */}
+            {renderReleaseTable}
+          </MetricWidgetQueries>
+        );
       case WidgetType.DISCOVER:
       default:
         if (tableData && chartUnmodified && widget.displayType === DisplayType.TABLE) {

static/app/utils/metrics.tsx

@@ -139,7 +139,7 @@ export function useMetricsData({
   const useCase = getUseCaseFromMRI(mri);
   const field = op ? `${op}(${mri})` : mri;
 
-  const interval = getMetricsInterval(datetime, mri);
+  const interval = getMetricsInterval(datetime, useCase);
 
   const queryToSend = {
     ...getDateTimeParams(datetime),
@@ -240,15 +240,14 @@ export function useMetricsDataZoom(props: MetricsQuery) {
 }
 
 // Wraps getInterval since other users of this function, and other metric use cases do not have support for 10s granularity
-function getMetricsInterval(dateTimeObj: DateTimeObject, mri: string) {
+export function getMetricsInterval(dateTimeObj: DateTimeObject, useCase: UseCase) {
   const interval = getInterval(dateTimeObj, 'metrics');
 
   if (interval !== '1m') {
     return interval;
   }
 
   const diffInMinutes = getDiffInMinutes(dateTimeObj);
-  const useCase = getUseCaseFromMRI(mri);
 
   if (diffInMinutes <= 60 && useCase === 'custom') {
     return '10s';
@@ -257,7 +256,7 @@ function getMetricsInterval(dateTimeObj: DateTimeObject, mri: string) {
   return interval;
 }
 
-function getDateTimeParams({start, end, period}: PageFilters['datetime']) {
+export function getDateTimeParams({start, end, period}: PageFilters['datetime']) {
   return period
     ? {statsPeriod: period}
     : {start: moment(start).toISOString(), end: moment(end).toISOString()};

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

@@ -23,6 +23,7 @@ import {getNumEquations} from '../utils';
 
 import {ErrorsAndTransactionsConfig} from './errorsAndTransactions';
 import {IssuesConfig} from './issues';
+import {MetricsConfig} from './metrics';
 import {ReleasesConfig} from './releases';
 
 export type WidgetBuilderSearchBarProps = {
@@ -212,16 +213,24 @@ export function getDatasetConfig<T extends WidgetType | undefined>(
   ? typeof IssuesConfig
   : T extends WidgetType.RELEASE
   ? typeof ReleasesConfig
+  : T extends WidgetType.METRICS
+  ? typeof MetricsConfig
   : typeof ErrorsAndTransactionsConfig;
 
 export function getDatasetConfig(
   widgetType?: WidgetType
-): typeof IssuesConfig | typeof ReleasesConfig | typeof ErrorsAndTransactionsConfig {
+):
+  | typeof IssuesConfig
+  | typeof ReleasesConfig
+  | typeof MetricsConfig
+  | typeof ErrorsAndTransactionsConfig {
   switch (widgetType) {
     case WidgetType.ISSUE:
       return IssuesConfig;
     case WidgetType.RELEASE:
       return ReleasesConfig;
+    case WidgetType.METRICS:
+      return MetricsConfig;
     case WidgetType.DISCOVER:
     default:
       return ErrorsAndTransactionsConfig;