Events: Migrate old timeRangeUpdate event to new event system to get rid of console.log warning (#35767)

* Events: Migrate old timeRangeUpdate event to new event system to get rid of console.log warning

* Review feedback

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

@@ -5,7 +5,6 @@ import { css } from '@emotion/css';
 
 // Types
 import { DashboardModel } from '../../state';
-import { CoreEvents } from 'app/types';
 
 // Components
 import { defaultIntervals, RefreshPicker, stylesFactory } from '@grafana/ui';
@@ -14,7 +13,8 @@ import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePicker
 // Utils & Services
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { appEvents } from 'app/core/core';
-import { ShiftTimeEvent, ShiftTimeEventPayload, ZoomOutEvent } from '../../../../types/events';
+import { ShiftTimeEvent, ShiftTimeEventPayload, TimeRangeUpdatedEvent, ZoomOutEvent } from '../../../../types/events';
+import { Unsubscribable } from 'rxjs';
 
 export interface Props {
   dashboard: DashboardModel;
@@ -22,21 +22,16 @@ export interface Props {
 }
 
 export class DashNavTimeControls extends Component<Props> {
+  private sub?: Unsubscribable;
+
   componentDidMount() {
-    // Only reason for this is that sometimes time updates can happen via redux location changes
-    // and this happens before timeSrv has had chance to update state (as it listens to angular route-updated)
-    // This can be removed after timeSrv listens redux location
-    this.props.dashboard.on(CoreEvents.timeRangeUpdated, this.triggerForceUpdate);
+    this.sub = this.props.dashboard.events.subscribe(TimeRangeUpdatedEvent, () => this.forceUpdate());
   }
 
   componentWillUnmount() {
-    this.props.dashboard.off(CoreEvents.timeRangeUpdated, this.triggerForceUpdate);
+    this.sub?.unsubscribe();
   }
 
-  triggerForceUpdate = () => {
-    this.forceUpdate();
-  };
-
   onChangeRefreshInterval = (interval: string) => {
     getTimeSrv().setAutoRefresh(interval);
     this.forceUpdate();

public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useReducer } from 'react';
-import { Icon, IconName, Tooltip } from '@grafana/ui';
+import React, { FC } from 'react';
+import { Icon, IconName, Tooltip, useForceUpdate } from '@grafana/ui';
 import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { DashboardLinksDashboard } from './DashboardLinksDashboard';
 import { getLinkSrv } from '../../../panel/panellinks/link_srv';
@@ -8,8 +8,8 @@ import { DashboardModel } from '../../state';
 import { DashboardLink } from '../../state/DashboardModel';
 import { linkIconMap } from '../LinksSettings/LinkSettingsEdit';
 import { useEffectOnce } from 'react-use';
-import { CoreEvents } from 'app/types';
 import { selectors } from '@grafana/e2e-selectors';
+import { TimeRangeUpdatedEvent } from 'app/types/events';
 
 export interface Props {
   dashboard: DashboardModel;
@@ -17,15 +17,11 @@ export interface Props {
 }
 
 export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
-  // Emulate forceUpdate (https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate)
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  const forceUpdate = useForceUpdate();
 
   useEffectOnce(() => {
-    dashboard.on(CoreEvents.timeRangeUpdated, forceUpdate);
-
-    return () => {
-      dashboard.off(CoreEvents.timeRangeUpdated, forceUpdate);
-    };
+    const sub = dashboard.events.subscribe(TimeRangeUpdatedEvent, forceUpdate);
+    return () => sub.unsubscribe();
   });
 
   if (!links.length) {

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -148,7 +148,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       const prevUrlParams = prevProps.queryParams;
       const urlParams = this.props.queryParams;
 
-      if (urlParams?.from !== prevUrlParams?.from && urlParams?.to !== prevUrlParams?.to) {
+      if (urlParams?.from !== prevUrlParams?.from || urlParams?.to !== prevUrlParams?.to) {
         getTimeSrv().updateTimeRangeFromUrl();
       }
 

public/app/features/dashboard/state/DashboardModel.ts

@@ -41,7 +41,7 @@ import { variableAdapters } from 'app/features/variables/adapters';
 import { onTimeRangeUpdated } from 'app/features/variables/state/actions';
 import { dispatch } from '../../../store/store';
 import { isAllVariable } from '../../variables/utils';
-import { DashboardPanelsChangedEvent, RefreshEvent, RenderEvent } from 'app/types/events';
+import { DashboardPanelsChangedEvent, RefreshEvent, RenderEvent, TimeRangeUpdatedEvent } from 'app/types/events';
 import { getTimeSrv } from '../services/TimeSrv';
 
 export interface CloneOptions {
@@ -318,7 +318,7 @@ export class DashboardModel {
   }
 
   timeRangeUpdated(timeRange: TimeRange) {
-    this.events.emit(CoreEvents.timeRangeUpdated, timeRange);
+    this.events.publish(new TimeRangeUpdatedEvent(timeRange));
     dispatch(onTimeRangeUpdated(timeRange));
   }
 

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -16,9 +16,10 @@ import { auto } from 'angular';
 import { getProcessedDataFrames } from 'app/features/query/state/runRequest';
 import { DataProcessor } from '../graph/data_processor';
 import { LegacyResponseData, PanelEvents, DataFrame, rangeUtil } from '@grafana/data';
-import { CoreEvents } from 'app/types';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import appEvents from 'app/core/app_events';
+import { ZoomOutEvent } from 'app/types/events';
 
 const X_BUCKET_NUMBER_DEFAULT = 30;
 const Y_BUCKET_NUMBER_DEFAULT = 10;
@@ -160,7 +161,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   }
 
   zoomOut(evt: any) {
-    this.publishAppEvent(CoreEvents.zoomOut, 2);
+    appEvents.publish(new ZoomOutEvent(2));
   }
 
   onRender() {

public/app/types/events.ts

@@ -90,30 +90,18 @@ export interface PanelChangeViewPayload {}
  * Events
  */
 
-export const dashLinksUpdated = eventFactory('dash-links-updated');
-export const searchQuery = eventFactory('search-query');
-
 export const dsRequestResponse = eventFactory<DataSourceResponsePayload>('ds-request-response');
 export const dsRequestError = eventFactory<any>('ds-request-error');
-
 export const toggleSidemenuMobile = eventFactory('toggle-sidemenu-mobile');
 export const toggleSidemenuHidden = eventFactory('toggle-sidemenu-hidden');
-
-export const toggleKioskMode = eventFactory<ToggleKioskModePayload>('toggle-kiosk-mode');
-
-export const timeRangeUpdated = eventFactory<TimeRange>('time-range-updated');
 export const templateVariableValueUpdated = eventFactory('template-variable-value-updated');
-
 export const graphClicked = eventFactory<GraphClickedPayload>('graph-click');
 
+/**
+ * @internal
+ */
 export const thresholdChanged = eventFactory<ThresholdChangedPayload>('threshold-changed');
 
-export const zoomOut = eventFactory<number>('zoom-out');
-
-export const shiftTime = eventFactory<number>('shift-time');
-
-export const routeUpdated = eventFactory('$routeUpdate');
-
 /**
  * Used for syncing queries badge count in panel edit queries tab
  * Think we can get rid of this soon
@@ -209,3 +197,7 @@ export class AnnotationQueryStarted extends BusEventWithPayload<AnnotationQuery>
 export class AnnotationQueryFinished extends BusEventWithPayload<AnnotationQuery> {
   static type = 'annotation-query-finished';
 }
+
+export class TimeRangeUpdatedEvent extends BusEventWithPayload<TimeRange> {
+  static type = 'time-range-updated';
+}