Dashboards: Support an auto refresh interval that is based on the query range (#70479)

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -7,6 +7,7 @@ import { defaultIntervals, RefreshPicker } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { appEvents } from 'app/core/core';
 import { t } from 'app/core/internationalization';
+import { AutoRefreshInterval } from 'app/core/services/context_srv';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { ShiftTimeEvent, ShiftTimeEventDirection, ZoomOutEvent } from '../../../../types/events';
@@ -87,6 +88,11 @@ export class DashNavTimeControls extends Component<Props> {
     const fiscalYearStartMonth = dashboard.fiscalYearStartMonth;
     const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
 
+    let text: string | undefined = undefined;
+    if (dashboard.refresh === AutoRefreshInterval) {
+      text = getTimeSrv().getAutoRefreshInteval().interval;
+    }
+
     return (
       <>
         <TimePickerWithHistory
@@ -109,6 +115,8 @@ export class DashNavTimeControls extends Component<Props> {
           isOnCanvas={isOnCanvas}
           tooltip={t('dashboard.toolbar.refresh', 'Refresh dashboard')}
           noIntervalPicker={hideIntervalPicker}
+          showAutoInterval={true}
+          text={text}
         />
       </>
     );