feat(dashboards): allow interval selection similar to explore (#108416)

Allows for interval selection similar to the behaviour of individual charts in explore.

Author: bcoe

…/explore/hooks/useChartInterval.spec.tsx …atic/app/utils/useChartInterval.spec.tsxstatic/app/views/explore/hooks/useChartInterval.spec.tsx renamed to static/app/utils/useChartInterval.spec.tsx static/app/views/explore/hooks/useChartInterval.spec.tsx renamed to static/app/utils/useChartInterval.spec.tsx

@@ -92,6 +92,7 @@ type Props = {
   onNewWidgetScrollComplete?: () => void;
   onSetNewWidget?: () => void;
   useTimeseriesVisualization?: boolean;
+  widgetInterval?: string;
 };
 
 interface LayoutState extends Record<string, Layout[]> {
@@ -116,6 +117,7 @@ function Dashboard({
   onNewWidgetScrollComplete,
   onSetNewWidget,
   useTimeseriesVisualization,
+  widgetInterval,
 }: Props) {
   const theme = useTheme();
   const location = useLocation();
@@ -442,6 +444,7 @@ function Dashboard({
               newlyAddedWidget={newlyAddedWidget}
               onNewWidgetScrollComplete={onNewWidgetScrollComplete}
               useTimeseriesVisualization={useTimeseriesVisualization}
+              widgetInterval={widgetInterval}
             />
           </div>
         ))}

…views/explore/hooks/useChartInterval.tsx static/app/utils/useChartInterval.tsxstatic/app/views/explore/hooks/useChartInterval.tsx renamed to static/app/utils/useChartInterval.tsx static/app/views/explore/hooks/useChartInterval.tsx renamed to static/app/utils/useChartInterval.tsx

@@ -115,6 +115,10 @@ export type WidgetQueryParams = {
    * Skip adding parentheses around widget conditions when applying dashboard filters.
    */
   skipDashboardFilterParens?: boolean;
+  /**
+   * Optional user-selected interval override for timeseries queries.
+   */
+  widgetInterval?: string;
 };
 
 export interface DatasetConfig<SeriesResponse, TableResponse> {

static/app/views/dashboards/dashboard.spec.tsx

@@ -23,13 +23,15 @@ export function getSeriesRequestData(
   organization: Organization,
   pageFilters: PageFilters,
   dataset: DiscoverDatasets,
-  referrer?: string
+  referrer?: string,
+  widgetInterval?: string
 ): EventsStatsOptions<true> {
   const widgetQuery = widget.queries[queryIndex]!;
   const {displayType, limit} = widget;
   const {environments, projects} = pageFilters;
   const {start, end, period: statsPeriod} = pageFilters.datetime;
-  const interval = getWidgetInterval(widget, {start, end, period: statsPeriod}, '1m');
+  const interval =
+    widgetInterval ?? getWidgetInterval(widget, {start, end, period: statsPeriod}, '1m');
 
   let requestData: EventsStatsOptions<true>;
   if (displayType === DisplayType.TOP_N) {

static/app/views/dashboards/dashboard.tsx

@@ -51,6 +51,7 @@ import {OnRouteLeave} from 'sentry/utils/reactRouter6Compat/onRouteLeave';
 import {scheduleMicroTask} from 'sentry/utils/scheduleMicroTask';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useApi from 'sentry/utils/useApi';
+import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -142,6 +143,7 @@ type Props = {
   children?: React.ReactNode;
   onDashboardUpdate?: (updatedDashboard: DashboardDetails) => void;
   useTimeseriesVisualization?: boolean;
+  widgetInterval?: string;
 };
 
 type State = {
@@ -1311,6 +1313,7 @@ class DashboardDetail extends Component<Props, State> {
                                       useTimeseriesVisualization={
                                         useTimeseriesVisualization
                                       }
+                                      widgetInterval={this.props.widgetInterval}
                                     />
                                   </WidgetQueryQueueProvider>
 
@@ -1395,6 +1398,14 @@ export default function DashboardDetailWithInjectedProps(
   const location = useLocation();
   const params = useParams<RouteParams>();
   const router = useRouter();
+  const [chartInterval] = useChartInterval();
+
+  // Always use the validated chart interval so the UI dropdown and widget
+  // requests stay in sync. chartInterval is validated against the current page
+  // filter period (e.g. won't return 1m for a 30d range) and always has a value.
+  const widgetInterval = organization.features.includes('dashboards-interval-selection')
+    ? chartInterval
+    : undefined;
 
   return (
     <DashboardDetail
@@ -1407,6 +1418,7 @@ export default function DashboardDetailWithInjectedProps(
       location={location}
       params={params}
       router={router}
+      widgetInterval={widgetInterval}
     />
   );
 }