DashNavTimeControls: remove $injector and rootScope from time picker (#22041)

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

@@ -170,7 +170,7 @@ export class DashNav extends PureComponent<Props> {
   }
 
   render() {
-    const { dashboard, onAddPanel, location, $injector } = this.props;
+    const { dashboard, onAddPanel, location } = this.props;
     const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
     const snapshotUrl = snapshot && snapshot.originalUrl;
@@ -264,12 +264,7 @@ export class DashNav extends PureComponent<Props> {
 
         {!dashboard.timepicker.hidden && (
           <div className="navbar-buttons">
-            <DashNavTimeControls
-              $injector={$injector}
-              dashboard={dashboard}
-              location={location}
-              updateLocation={updateLocation}
-            />
+            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
           </div>
         )}
       </div>

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

@@ -16,7 +16,8 @@ import { RefreshPicker, withTheme, stylesFactory, Themeable } from '@grafana/ui'
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 
 // Utils & Services
-import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { appEvents } from 'app/core/core';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
@@ -29,15 +30,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 });
 
 export interface Props extends Themeable {
-  $injector: any;
   dashboard: DashboardModel;
   updateLocation: typeof updateLocation;
   location: LocationState;
 }
 class UnthemedDashNavTimeControls extends Component<Props> {
-  timeSrv: TimeSrv = getTimeSrv();
-  $rootScope = this.props.$injector.get('$rootScope');
-
   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)
@@ -58,20 +55,20 @@ class UnthemedDashNavTimeControls extends Component<Props> {
   }
 
   onChangeRefreshInterval = (interval: string) => {
-    this.timeSrv.setAutoRefresh(interval);
+    getTimeSrv().setAutoRefresh(interval);
     this.forceUpdate();
   };
 
   onRefresh = () => {
-    this.timeSrv.refreshDashboard();
+    getTimeSrv().refreshDashboard();
     return Promise.resolve();
   };
 
   onMoveBack = () => {
-    this.$rootScope.appEvent(CoreEvents.shiftTime, -1);
+    appEvents.emit(CoreEvents.shiftTime, -1);
   };
   onMoveForward = () => {
-    this.$rootScope.appEvent(CoreEvents.shiftTime, 1);
+    appEvents.emit(CoreEvents.shiftTime, 1);
   };
 
   onChangeTimePicker = (timeRange: TimeRange) => {
@@ -86,17 +83,17 @@ class UnthemedDashNavTimeControls extends Component<Props> {
       to: hasDelay ? 'now-' + panel.nowDelay : adjustedTo,
     };
 
-    this.timeSrv.setTime(nextRange);
+    getTimeSrv().setTime(nextRange);
   };
 
   onZoom = () => {
-    this.$rootScope.appEvent(CoreEvents.zoomOut, 2);
+    appEvents.emit(CoreEvents.zoomOut, 2);
   };
 
   render() {
     const { dashboard, theme } = this.props;
     const intervals = dashboard.timepicker.refresh_intervals;
-    const timePickerValue = this.timeSrv.timeRange();
+    const timePickerValue = getTimeSrv().timeRange();
     const timeZone = dashboard.getTimezone();
     const styles = getStyles(theme);