feat(dashboards): add details widget type

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

@@ -193,6 +193,7 @@ export const SpansConfig: DatasetConfig<
     DisplayType.LINE,
     DisplayType.TABLE,
     DisplayType.TOP_N,
+    DisplayType.DETAILS,
   ],
   getTableRequest: (
     api: Client,

static/app/views/dashboards/types.tsx

@@ -24,6 +24,7 @@ export enum DisplayType {
   LINE = 'line',
   TABLE = 'table',
   BIG_NUMBER = 'big_number',
+  DETAILS = 'details',
   TOP_N = 'top_n',
 }
 

static/app/views/dashboards/utils.tsx

@@ -702,3 +702,12 @@ export function applyDashboardFilters(
   }
   return baseQuery;
 }
+
+export const isChartDisplayType = (displayType?: DisplayType) => {
+  if (!displayType) {
+    return true;
+  }
+  return ![DisplayType.BIG_NUMBER, DisplayType.TABLE, DisplayType.DETAILS].includes(
+    displayType
+  );
+};

static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx

@@ -144,7 +144,7 @@ export function SortBySelectors({
         title={disableSortReason}
         disabled={!disableSort || (disableSortDirection && disableSort)}
       >
-        {displayType === DisplayType.TABLE ? (
+        {displayType === DisplayType.TABLE || displayType === DisplayType.DETAILS ? (
           <Select
             name="sortBy"
             aria-label={t('Sort by')}

static/app/views/dashboards/widgetBuilder/components/typeSelector.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Select} from 'sentry/components/core/select';
 import {components} from 'sentry/components/forms/controls/reactSelectWrapper';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
-import {IconGraph, IconNumber, IconTable} from 'sentry/icons';
+import {IconGraph, IconNumber, IconSettings, IconTable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -24,15 +24,16 @@ const typeIcons = {
   [DisplayType.LINE]: <IconGraph key="line" type="line" />,
   [DisplayType.TABLE]: <IconTable key="table" />,
   [DisplayType.BIG_NUMBER]: <IconNumber key="number" />,
+  [DisplayType.DETAILS]: <IconSettings key="details" />,
 };
 
-const displayTypes = {
+const BASE_DISPLAY_TYPES: Partial<Record<DisplayType, string>> = {
   [DisplayType.AREA]: t('Area'),
   [DisplayType.BAR]: t('Bar'),
   [DisplayType.LINE]: t('Line'),
   [DisplayType.TABLE]: t('Table'),
   [DisplayType.BIG_NUMBER]: t('Big Number'),
-};
+} as const;
 
 interface WidgetBuilderTypeSelectorProps {
   error?: Record<string, any>;
@@ -46,6 +47,11 @@ function WidgetBuilderTypeSelector({error, setError}: WidgetBuilderTypeSelectorP
   const isEditing = useIsEditingWidget();
   const organization = useOrganization();
 
+  const displayTypes = {...BASE_DISPLAY_TYPES};
+  if (organization.features.includes('dashboards-details-widget')) {
+    displayTypes[DisplayType.DETAILS] = t('Details');
+  }
+
   return (
     <Fragment>
       <SectionHeader

static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx

@@ -41,6 +41,7 @@ import {
   WidgetType,
   type LinkedDashboard,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {SectionHeader} from 'sentry/views/dashboards/widgetBuilder/components/common/sectionHeader';
 import SortableVisualizeFieldWrapper from 'sentry/views/dashboards/widgetBuilder/components/common/sortableFieldWrapper';
 import {ExploreArithmeticBuilder} from 'sentry/views/dashboards/widgetBuilder/components/exploreArithmeticBuilder';
@@ -277,9 +278,7 @@ function Visualize({error, setError}: VisualizeProps) {
   const isEditing = useIsEditingWidget();
   const disableTransactionWidget = useDisableTransactionWidget();
 
-  const isChartWidget =
-    state.displayType !== DisplayType.TABLE &&
-    state.displayType !== DisplayType.BIG_NUMBER;
+  const isChartWidget = isChartDisplayType(state.displayType);
   const isBigNumberWidget = state.displayType === DisplayType.BIG_NUMBER;
   const isTableWidget = state.displayType === DisplayType.TABLE;
   const {tags: numericSpanTags} = useTraceItemTags('number');

static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx

@@ -20,6 +20,7 @@ import {AggregationKey} from 'sentry/utils/fields';
 import useOrganization from 'sentry/utils/useOrganization';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   AggregateCompactSelect,
   getAggregateValueKey,
@@ -116,9 +117,7 @@ export function SelectRow({
   const datasetConfig = getDatasetConfig(state.dataset);
   const columnSelectRef = useRef<HTMLDivElement>(null);
 
-  const isChartWidget =
-    state.displayType !== DisplayType.TABLE &&
-    state.displayType !== DisplayType.BIG_NUMBER;
+  const isChartWidget = isChartDisplayType(state.displayType);
 
   const updateAction = isChartWidget
     ? BuilderStateAction.SET_Y_AXIS

static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx

@@ -28,6 +28,7 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import WidgetBuilderDatasetSelector from 'sentry/views/dashboards/widgetBuilder/components/datasetSelector';
 import WidgetBuilderFilterBar from 'sentry/views/dashboards/widgetBuilder/components/filtersBar';
@@ -122,9 +123,9 @@ function WidgetBuilderSlideout({
     : isEditing
       ? t('Edit Widget')
       : t('Custom Widget Builder');
-  const isChartWidget =
-    state.displayType !== DisplayType.BIG_NUMBER &&
-    state.displayType !== DisplayType.TABLE;
+  const isChartWidget = isChartDisplayType(state.displayType);
+
+  const showVisualizeSection = state.displayType !== DisplayType.DETAILS;
 
   const customPreviewRef = useRef<HTMLDivElement>(null);
   const templatesPreviewRef = useRef<HTMLDivElement>(null);
@@ -340,9 +341,11 @@ function WidgetBuilderSlideout({
                   <WidgetBuilderFilterBar releases={dashboard.filters?.release ?? []} />
                 </Section>
               )}
-              <Section>
-                <Visualize error={error} setError={setError} />
-              </Section>
+              {showVisualizeSection && (
+                <Section>
+                  <Visualize error={error} setError={setError} />
+                </Section>
+              )}
               <Section>
                 <WidgetBuilderQueryFilterBuilder
                   onQueryConditionChange={onQueryConditionChange}

static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx

@@ -14,6 +14,7 @@ import {
   type DashboardDetails,
   type DashboardFilters,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
@@ -63,9 +64,7 @@ function WidgetPreview({
       false,
   };
 
-  const isChart =
-    widget.displayType !== DisplayType.TABLE &&
-    widget.displayType !== DisplayType.BIG_NUMBER;
+  const isChart = isChartDisplayType(widget.displayType);
 
   // the spans dataset doesn't handle timeseries for duplicate yAxes/aggregates
   // automatically, so we need to dedupe them

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

@@ -23,6 +23,7 @@ import {
   WidgetType,
   type LinkedDashboard,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import type {ThresholdsConfig} from 'sentry/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholds';
 import {
   DISABLED_SORT,
@@ -32,12 +33,22 @@ import {
   DEFAULT_RESULTS_LIMIT,
   getResultsLimit,
 } from 'sentry/views/dashboards/widgetBuilder/utils';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
 import {FieldValueKind} from 'sentry/views/discover/table/types';
+import {SpanFields} from 'sentry/views/insights/types';
 
 // For issues dataset, events and users are sorted descending and do not use '-'
 // All other issues fields are sorted ascending
 const REVERSED_ORDER_FIELD_SORT_LIST = ['freq', 'user'];
 
+const DETAIL_WIDGET_FIELDS: DefaultDetailWidgetFields[] = [
+  SpanFields.ID,
+  SpanFields.SPAN_OP,
+  SpanFields.SPAN_GROUP,
+  SpanFields.SPAN_DESCRIPTION,
+  SpanFields.SPAN_CATEGORY,
+] as const;
+
 export const MAX_NUM_Y_AXES = 3;
 
 export type WidgetBuilderStateQueryParams = {
@@ -296,6 +307,16 @@ function useWidgetBuilderState(): {
             // Columns are ignored for big number widgets because there is no grouping
             setFields([...aggregatesWithoutAlias, ...(yAxisWithoutAlias ?? [])], options);
             setQuery(query?.slice(0, 1), options);
+          } else if (action.payload === DisplayType.DETAILS) {
+            setLimit(undefined, options);
+            setSort([], options);
+            setYAxis([], options);
+            setLegendAlias([], options);
+            setFields(
+              DETAIL_WIDGET_FIELDS.map(field => ({field, kind: FieldValueKind.FIELD})),
+              options
+            );
+            setQuery(query?.slice(0, 1), options);
           } else {
             setFields(columnsWithoutAlias, options);
             const nextAggregates = [
@@ -344,10 +365,16 @@ function useWidgetBuilderState(): {
             config.defaultWidgetQuery.fields?.map(field => explodeField({field})),
             options
           );
-          if (
-            nextDisplayType === DisplayType.TABLE ||
-            nextDisplayType === DisplayType.BIG_NUMBER
-          ) {
+          if (isChartDisplayType(nextDisplayType)) {
+            setFields([], options);
+            setYAxis(
+              config.defaultWidgetQuery.aggregates?.map(aggregate =>
+                explodeField({field: aggregate})
+              ),
+              options
+            );
+            setSort(decodeSorts(config.defaultWidgetQuery.orderby), options);
+          } else {
             setYAxis([], options);
             setFields(
               config.defaultWidgetQuery.fields?.map(field => explodeField({field})),
@@ -359,15 +386,6 @@ function useWidgetBuilderState(): {
                 : decodeSorts(config.defaultWidgetQuery.orderby),
               options
             );
-          } else {
-            setFields([], options);
-            setYAxis(
-              config.defaultWidgetQuery.aggregates?.map(aggregate =>
-                explodeField({field: aggregate})
-              ),
-              options
-            );
-            setSort(decodeSorts(config.defaultWidgetQuery.orderby), options);
           }
 
           setThresholds(undefined, options);

static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts

@@ -7,6 +7,7 @@ import {
   type Widget,
   type WidgetQuery,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   serializeSorts,
   type WidgetBuilderState,
@@ -39,7 +40,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
     .filter(Boolean);
 
   const fields =
-    state.displayType === DisplayType.TABLE
+    state.displayType === DisplayType.TABLE || state.displayType === DisplayType.DETAILS
       ? state.fields?.map(generateFieldAsString)
       : [...(columns ?? []), ...(aggregates ?? [])];
 
@@ -69,12 +70,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
     };
   });
 
-  const limit = [DisplayType.BIG_NUMBER, DisplayType.TABLE].includes(
-    state.displayType ?? DisplayType.TABLE
-  )
-    ? undefined
-    : state.limit;
-
+  const limit = isChartDisplayType(state.displayType) ? state.limit : undefined;
   return {
     title: state.title ?? '',
     description: state.description,

static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts

@@ -5,6 +5,7 @@ import {
   type Widget,
   type WidgetQuery,
 } from 'sentry/views/dashboards/types';
+import {isChartDisplayType} from 'sentry/views/dashboards/utils';
 import {
   serializeFields,
   serializeThresholds,
@@ -37,15 +38,12 @@ export function convertWidgetToBuilderStateParams(
   const firstWidgetQuery = widget.queries[0];
   let yAxis = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'aggregates') : [];
   let field: string[] = [];
-  if (
-    widget.displayType === DisplayType.TABLE ||
-    widget.displayType === DisplayType.BIG_NUMBER
-  ) {
+  if (isChartDisplayType(widget.displayType)) {
+    field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'columns') : [];
+  } else {
     field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'fields') : [];
     yAxis = [];
     legendAlias = [];
-  } else {
-    field = firstWidgetQuery ? stringifyFields(firstWidgetQuery, 'columns') : [];
   }
 
   return {

static/app/views/dashboards/widgetCard/chart.tsx

@@ -70,6 +70,8 @@ import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegen
 import {BigNumberWidgetVisualization} from 'sentry/views/dashboards/widgets/bigNumberWidget/bigNumberWidgetVisualization';
 import {ALLOWED_CELL_ACTIONS} from 'sentry/views/dashboards/widgets/common/settings';
 import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
+import {DetailsWidgetVisualization} from 'sentry/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
 import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
 import {
   convertTableDataToTabularData,
@@ -78,6 +80,7 @@ import {
 import {Actions} from 'sentry/views/discover/table/cellAction';
 import {decodeColumnOrder} from 'sentry/views/discover/utils';
 import {ConfidenceFooter} from 'sentry/views/explore/spans/charts/confidenceFooter';
+import {type SpanResponse} from 'sentry/views/insights/types';
 
 import type {GenericWidgetQueriesChildrenProps} from './genericWidgetQueries';
 
@@ -198,6 +201,15 @@ function WidgetCardChart(props: WidgetCardChartProps) {
     );
   }
 
+  if (widget.displayType === DisplayType.DETAILS) {
+    return (
+      <TransitionChart loading={loading} reloading={loading}>
+        <LoadingScreen loading={loading} showLoadingText={showLoadingText} />
+        <DetailsComponent tableResults={tableResults} {...props} />
+      </TransitionChart>
+    );
+  }
+
   const {start, end, period, utc} = selection.datetime;
   const {projects, environments} = selection;
 
@@ -658,6 +670,21 @@ function BigNumberComponent({
   });
 }
 
+function DetailsComponent(props: TableComponentProps): React.ReactNode {
+  const {tableResults} = props;
+
+  const singleSpan = tableResults?.[0]?.data?.[0] as
+    | Pick<SpanResponse, DefaultDetailWidgetFields>
+    | undefined;
+
+  // TODO: Handle this case gracefully
+  if (!singleSpan) {
+    return null;
+  }
+
+  return <DetailsWidgetVisualization span={singleSpan} />;
+}
+
 function getChartComponent(chartProps: any, widget: Widget): React.ReactNode {
   const stacked = widget.queries[0]?.columns.length! > 0;
 

static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx

@@ -16,7 +16,10 @@ import type {OnDemandControlContext} from 'sentry/utils/performance/contexts/onD
 import type {DatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import type {DashboardFilters, Widget, WidgetQuery} from 'sentry/views/dashboards/types';
 import {DEFAULT_TABLE_LIMIT, DisplayType} from 'sentry/views/dashboards/types';
-import {dashboardFiltersToString} from 'sentry/views/dashboards/utils';
+import {
+  dashboardFiltersToString,
+  isChartDisplayType,
+} from 'sentry/views/dashboards/utils';
 import type {WidgetQueryQueue} from 'sentry/views/dashboards/utils/widgetQueryQueue';
 import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
 
@@ -419,10 +422,10 @@ class GenericWidgetQueries<SeriesResponse, TableResponse> extends Component<
     onDataFetchStart?.();
 
     try {
-      if ([DisplayType.TABLE, DisplayType.BIG_NUMBER].includes(widget.displayType)) {
-        await this.fetchTableData(queryFetchID);
-      } else {
+      if (isChartDisplayType(widget.displayType)) {
         await this.fetchSeriesData(queryFetchID);
+      } else {
+        await this.fetchTableData(queryFetchID);
       }
     } catch (err: any) {
       if (this._isMounted) {