[Shortcuts] Fixes shortcuts for moving time range backwards and forwards (#18305)

Closes #18159

public/app/core/services/keybindingSrv.ts

@@ -162,11 +162,11 @@ export class KeybindingSrv {
     });
 
     this.bind('t left', () => {
-      scope.appEvent('shift-time-backward');
+      scope.appEvent('shift-time', -1);
     });
 
     this.bind('t right', () => {
-      scope.appEvent('shift-time-forward');
+      scope.appEvent('shift-time', 1);
     });
 
     // edit panel

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

 // Libaries
 import React, { Component } from 'react';
-import { toUtc, dateMath } from '@grafana/data';
+import { dateMath } from '@grafana/data';
 
 // Types
 import { DashboardModel } from '../../state';
@@ -16,7 +16,6 @@ import { TimePicker, RefreshPicker } from '@grafana/ui';
 // Utils & Services
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { defaultSelectOptions } from '@grafana/ui/src/components/TimePicker/TimePicker';
-import { getShiftedTimeRange } from 'app/core/utils/timePicker';
 
 export interface Props {
   $injector: any;
@@ -43,18 +42,12 @@ export class DashNavTimeControls extends Component<Props> {
     return Promise.resolve();
   };
 
-  onMoveTimePicker = (direction: number) => {
-    const range = this.timeSrv.timeRange();
-    const { from, to } = getShiftedTimeRange(direction, range);
-
-    this.timeSrv.setTime({
-      from: toUtc(from),
-      to: toUtc(to),
-    });
+  onMoveBack = () => {
+    this.$rootScope.appEvent('shift-time', -1);
+  };
+  onMoveForward = () => {
+    this.$rootScope.appEvent('shift-time', 1);
   };
-
-  onMoveForward = () => this.onMoveTimePicker(1);
-  onMoveBack = () => this.onMoveTimePicker(-1);
 
   onChangeTimePicker = (timeRange: TimeRange) => {
     const { dashboard } = this.props;

public/app/features/dashboard/services/TimeSrv.ts

@@ -12,7 +12,7 @@ import { ITimeoutService, ILocationService } from 'angular';
 import { ContextSrv } from 'app/core/services/context_srv';
 import { DashboardModel } from '../state/DashboardModel';
 import { toUtc, dateTime, isDateTime } from '@grafana/data';
-import { getZoomedTimeRange } from 'app/core/utils/timePicker';
+import { getZoomedTimeRange, getShiftedTimeRange } from 'app/core/utils/timePicker';
 
 export class TimeSrv {
   time: any;
@@ -35,6 +35,7 @@ export class TimeSrv {
     this.time = { from: '6h', to: 'now' };
 
     $rootScope.$on('zoom-out', this.zoomOut.bind(this));
+    $rootScope.$on('shift-time', this.shiftTime.bind(this));
     $rootScope.$on('$routeUpdate', this.routeUpdated.bind(this));
 
     document.addEventListener('visibilitychange', () => {
@@ -243,6 +244,16 @@ export class TimeSrv {
 
     this.setTime({ from: toUtc(from), to: toUtc(to) });
   }
+
+  shiftTime(e: any, direction: number) {
+    const range = this.timeRange();
+    const { from, to } = getShiftedTimeRange(direction, range);
+
+    this.setTime({
+      from: toUtc(from),
+      to: toUtc(to),
+    });
+  }
 }
 
 let singleton: TimeSrv;