feat(dashboards): open spans table row in explore (#97703)

### Changes

Add a cell action that opens the widget table row in explore, which add
the table row in the search bar so only relevant samples appear.

Also filtered out duplicate columns (from the aggregates) and filtered
out `timestamp` from `groupBy` as it was breaking the charts.

Only visible when the `discover-cell-actions-v2` flag is enabled.

### Video


https://github.com/user-attachments/assets/036b2eff-6369-4cfc-94cd-211d091ee0ad

Author: lzhao-sentry

static/app/components/modals/widgetViewerModal.tsx

@@ -70,6 +70,8 @@ import useProjects from 'sentry/utils/useProjects';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import withPageFilters from 'sentry/utils/withPageFilters';
+// eslint-disable-next-line no-restricted-imports
+import withSentryRouter from 'sentry/utils/withSentryRouter';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
 import {checkUserHasEditAccess} from 'sentry/views/dashboards/detail';
 import {DiscoverSplitAlert} from 'sentry/views/dashboards/discoverSplitAlert';
@@ -171,7 +173,9 @@ const MemoizedWidgetCardChartContainer = memo(
   WidgetCardChartContainer,
   shouldWidgetCardChartMemo
 );
-const MemoizedWidgetCardChart = memo(WidgetCardChart, shouldWidgetCardChartMemo);
+const MemoizedWidgetCardChart = withSentryRouter(
+  memo(WidgetCardChart, shouldWidgetCardChartMemo)
+);
 
 async function fetchDiscoverTotal(
   api: Client,
@@ -921,7 +925,6 @@ function WidgetViewerModal(props: Props) {
                 tableResults={tableData}
                 errorMessage={undefined}
                 loading={false}
-                location={location}
                 widget={widget}
                 selection={selection}
                 organization={organization}

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

@@ -11,6 +11,7 @@ import {
 } from 'sentry/utils/discover/fields';
 import {FieldKind, getFieldDefinition} from 'sentry/utils/fields';
 import {decodeBoolean, decodeScalar, decodeSorts} from 'sentry/utils/queryString';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType} from 'sentry/views/dashboards/types';
@@ -19,6 +20,7 @@ import {
   eventViewFromWidget,
   getWidgetInterval,
 } from 'sentry/views/dashboards/utils';
+import type {TabularRow} from 'sentry/views/dashboards/widgets/common/types';
 import {
   LOGS_AGGREGATE_FN_KEY,
   LOGS_AGGREGATE_PARAM_KEY,
@@ -162,7 +164,8 @@ function _getWidgetExploreUrl(
   dashboardFilters: DashboardFilters | undefined,
   selection: PageFilters,
   organization: Organization,
-  preferMode?: Mode
+  preferMode?: Mode,
+  overrideQuery?: MutableSearch
 ) {
   const eventView = eventViewFromWidget(widget.title, widget.queries[0]!, selection);
   const locationQueryParams = eventView.generateQueryStringObject();
@@ -215,7 +218,9 @@ function _getWidgetExploreUrl(
 
   let groupBy: string[] =
     defined(query.fields) && widget.displayType === DisplayType.TABLE
-      ? query.fields.filter(field => !isAggregateFieldOrEquation(field))
+      ? query.fields.filter(
+          field => !isAggregateFieldOrEquation(field) && field !== 'timestamp'
+        )
       : [...query.columns];
   if (groupBy && groupBy.length === 0) {
     // Force the groupBy to be an array with a single empty string
@@ -226,7 +231,7 @@ function _getWidgetExploreUrl(
   }
 
   const yAxisFields: string[] = locationQueryParams.yAxes.flatMap(getAggregateArguments);
-  const fields = [...groupBy, ...yAxisFields].filter(Boolean);
+  const fields = [...new Set([...groupBy, ...yAxisFields])].filter(Boolean);
 
   const sortDirection = widget.queries[0]?.orderby?.startsWith('-') ? '-' : '';
   const sortColumn = trimStart(widget.queries[0]?.orderby ?? '', '-');
@@ -273,7 +278,7 @@ function _getWidgetExploreUrl(
     groupBy: visualize.length > 0 ? groupBy : [],
     field: fields,
     query: applyDashboardFilters(
-      decodeScalar(locationQueryParams.query),
+      overrideQuery?.formatString() ?? decodeScalar(locationQueryParams.query),
       dashboardFilters
     ),
     sort: sort || undefined,
@@ -325,3 +330,40 @@ function _getWidgetExploreUrlForMultipleQueries(
     interval: getWidgetInterval(widget, currentSelection.datetime),
   });
 }
+
+export function getWidgetTableRowExploreUrlFunction(
+  selection: PageFilters,
+  widget: Widget,
+  organization: Organization,
+  dashboardFilters?: DashboardFilters
+) {
+  return (dataRow: TabularRow) => {
+    let fields: string[] = [];
+    if (widget.queries[0]?.fields) {
+      fields = widget.queries[0].fields.filter(
+        (field: string) => !isAggregateFieldOrEquation(field)
+      );
+    }
+
+    const query = new MutableSearch('');
+    fields.map(field => {
+      const value = dataRow[field];
+      if (!defined(value)) {
+        return query.addFilterValue('!has', field);
+      }
+      if (Array.isArray(value)) {
+        return query.addFilterValues(field, value);
+      }
+      return query.addFilterValue(field, String(value));
+    });
+
+    return _getWidgetExploreUrl(
+      widget,
+      dashboardFilters,
+      selection,
+      organization,
+      Mode.SAMPLES,
+      query
+    );
+  };
+}

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

@@ -4,7 +4,6 @@ import type {Theme} from '@emotion/react';
 import {withTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {LegendComponentOption} from 'echarts';
-import type {Location} from 'history';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 
@@ -31,6 +30,7 @@ import type {
   EChartEventHandler,
   ReactEchartsRef,
 } from 'sentry/types/echarts';
+import type {InjectedRouter, WithRouterProps} from 'sentry/types/legacyReactRouter';
 import type {Confidence, Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import {
@@ -58,19 +58,22 @@ import {
 import getDynamicText from 'sentry/utils/getDynamicText';
 import {decodeSorts} from 'sentry/utils/queryString';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
-import type {Widget} from 'sentry/views/dashboards/types';
+import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
 import {getBucketSize} from 'sentry/views/dashboards/utils/getBucketSize';
+import {getWidgetTableRowExploreUrlFunction} from 'sentry/views/dashboards/utils/getWidgetExploreUrl';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
 import type WidgetLegendSelectionState from 'sentry/views/dashboards/widgetLegendSelectionState';
 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 {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
 import {
   convertTableDataToTabularData,
   decodeColumnAliases,
 } from 'sentry/views/dashboards/widgets/tableWidget/utils';
+import {Actions} from 'sentry/views/discover/table/cellAction';
 import {decodeColumnOrder} from 'sentry/views/discover/utils';
 import {ConfidenceFooter} from 'sentry/views/explore/spans/charts/confidenceFooter';
 
@@ -87,38 +90,40 @@ type TableResultProps = Pick<
 type WidgetCardChartProps = Pick<
   GenericWidgetQueriesChildrenProps,
   'timeseriesResults' | 'tableResults' | 'errorMessage' | 'loading'
-> & {
-  location: Location;
-  organization: Organization;
-  selection: PageFilters;
-  theme: Theme;
-  widget: Widget;
-  widgetLegendState: WidgetLegendSelectionState;
-  chartGroup?: string;
-  confidence?: Confidence;
-  disableTableActions?: boolean;
-  disableZoom?: boolean;
-  expandNumbers?: boolean;
-  isMobile?: boolean;
-  isSampled?: boolean | null;
-  legendOptions?: LegendComponentOption;
-  minTableColumnWidth?: number;
-  noPadding?: boolean;
-  onLegendSelectChanged?: EChartEventHandler<{
-    name: string;
-    selected: Record<string, boolean>;
-    type: 'legendselectchanged';
-  }>;
-  onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
-  onWidgetTableSort?: (sort: Sort) => void;
-  onZoom?: EChartDataZoomHandler;
-  sampleCount?: number;
-  shouldResize?: boolean;
-  showConfidenceWarning?: boolean;
-  showLoadingText?: boolean;
-  timeseriesResultsTypes?: Record<string, AggregationOutputType>;
-  windowWidth?: number;
-};
+> &
+  WithRouterProps & {
+    organization: Organization;
+    selection: PageFilters;
+    theme: Theme;
+    widget: Widget;
+    widgetLegendState: WidgetLegendSelectionState;
+    chartGroup?: string;
+    confidence?: Confidence;
+    dashboardFilters?: DashboardFilters;
+    disableTableActions?: boolean;
+    disableZoom?: boolean;
+    expandNumbers?: boolean;
+    isMobile?: boolean;
+    isSampled?: boolean | null;
+    legendOptions?: LegendComponentOption;
+    minTableColumnWidth?: number;
+    noPadding?: boolean;
+    onLegendSelectChanged?: EChartEventHandler<{
+      name: string;
+      selected: Record<string, boolean>;
+      type: 'legendselectchanged';
+    }>;
+    onWidgetTableResizeColumn?: (columns: TabularColumn[]) => void;
+    onWidgetTableSort?: (sort: Sort) => void;
+    onZoom?: EChartDataZoomHandler;
+    router?: InjectedRouter;
+    sampleCount?: number;
+    shouldResize?: boolean;
+    showConfidenceWarning?: boolean;
+    showLoadingText?: boolean;
+    timeseriesResultsTypes?: Record<string, AggregationOutputType>;
+    windowWidth?: number;
+  };
 
 class WidgetCardChart extends Component<WidgetCardChartProps> {
   shouldComponentUpdate(nextProps: WidgetCardChartProps): boolean {
@@ -162,6 +167,8 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       onWidgetTableSort,
       onWidgetTableResizeColumn,
       disableTableActions,
+      dashboardFilters,
+      router,
     } = this.props;
     if (loading || !tableResults?.[0]) {
       // Align height to other charts.
@@ -208,6 +215,13 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       }
 
       const useCellActionsV2 = organization.features.includes('discover-cell-actions-v2');
+      let cellActions = ALLOWED_CELL_ACTIONS;
+      if (disableTableActions || !useCellActionsV2) {
+        cellActions = [];
+      } else if (widget.widgetType === WidgetType.SPANS) {
+        cellActions = [...ALLOWED_CELL_ACTIONS, Actions.OPEN_ROW_IN_EXPLORE];
+      }
+
       return (
         <TableWrapper key={`table:${result.title}`}>
           {organization.features.includes('dashboards-use-widget-table-visualization') ? (
@@ -242,9 +256,18 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
                 } satisfies RenderFunctionBaggage;
               }}
               onResizeColumn={onWidgetTableResizeColumn}
-              allowedCellActions={
-                disableTableActions || !useCellActionsV2 ? [] : undefined
-              }
+              allowedCellActions={cellActions}
+              onTriggerCellAction={(action, _value, dataRow) => {
+                if (action === Actions.OPEN_ROW_IN_EXPLORE) {
+                  const getExploreUrl = getWidgetTableRowExploreUrlFunction(
+                    selection,
+                    widget,
+                    organization,
+                    dashboardFilters
+                  );
+                  router.push(getExploreUrl(dataRow));
+                }
+              }}
             />
           ) : (
             <StyledSimpleTableChart

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

@@ -19,6 +19,8 @@ import type {Organization} from 'sentry/types/organization';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
+// eslint-disable-next-line no-restricted-imports
+import withSentryRouter from 'sentry/utils/withSentryRouter';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
@@ -70,6 +72,8 @@ type Props = {
   windowWidth?: number;
 };
 
+const WidgetCardChartWithRouter = withSentryRouter(WidgetCardChart);
+
 export function WidgetCardChartContainer({
   organization,
   selection,
@@ -190,13 +194,12 @@ export function WidgetCardChartContainer({
             {typeof renderErrorMessage === 'function'
               ? renderErrorMessage(errorOrEmptyMessage)
               : null}
-            <WidgetCardChart
+            <WidgetCardChartWithRouter
               disableZoom={disableZoom}
               timeseriesResults={modifiedTimeseriesResults}
               tableResults={tableResults}
               errorMessage={errorOrEmptyMessage}
               loading={loading}
-              location={location}
               widget={widget}
               selection={selection}
               organization={organization}
@@ -227,6 +230,7 @@ export function WidgetCardChartContainer({
               onWidgetTableSort={onWidgetTableSort}
               onWidgetTableResizeColumn={onWidgetTableResizeColumn}
               disableTableActions={disableTableActions}
+              dashboardFilters={dashboardFilters}
             />
           </Fragment>
         );

static/app/views/dashboards/widgets/common/settings.tsx

@@ -1,5 +1,6 @@
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {Actions} from 'sentry/views/discover/table/cellAction';
 
 // NOTE: This is a subset! Some types like `"string"`, `"date"`, and
 // `"percent_change"` are not supported yet. Once we support them, we can remove
@@ -26,3 +27,9 @@ export const DEFAULT_FIELD = 'unknown'; // Numeric data might, in theory, have a
 export const MISSING_DATA_MESSAGE = t('No Data');
 export const NO_PLOTTABLE_VALUES = t('The data does not contain any plottable values.');
 export const NON_FINITE_NUMBER_MESSAGE = t('Value is not a finite number.');
+
+export const ALLOWED_CELL_ACTIONS = [
+  Actions.OPEN_INTERNAL_LINK,
+  Actions.COPY_TO_CLIPBOARD,
+  Actions.OPEN_EXTERNAL_LINK,
+];

static/app/views/dashboards/widgets/tableWidget/tableWidgetVisualization.spec.tsx

@@ -285,7 +285,7 @@ describe('TableWidgetVisualization', function () {
 
     it('Uses onTriggerCellAction if supplied on action click', async function () {
       const onTriggerCellActionMock = jest.fn(
-        (_actions: Actions, _value: string | number) => {}
+        (_actions: Actions, _value: string | number, _dataRow: TabularRow) => {}
       );
       Object.assign(navigator, {
         clipboard: {
@@ -307,7 +307,8 @@ describe('TableWidgetVisualization', function () {
       await waitFor(() =>
         expect(onTriggerCellActionMock).toHaveBeenCalledWith(
           Actions.COPY_TO_CLIPBOARD,
-          sampleHTTPRequestTableData.data[0]!['http.request_method']
+          sampleHTTPRequestTableData.data[0]!['http.request_method'],
+          sampleHTTPRequestTableData.data[0]
         )
       );
     });