Backward and forward arrows for time shift

public/app/features/dashboard/keybindings.js

@@ -60,6 +60,14 @@ function(angular, $) {
         scope.appEvent('zoom-out', evt);
         scope.appEvent('zoom-out', evt);
       }, { inputDisabled: true });
       }, { inputDisabled: true });
 
 
+      keyboardManager.bind('left', function(evt) {
+        scope.appEvent('shift-time-backward', evt);
+      }, { inputDisabled: true });
+
+      keyboardManager.bind('right', function(evt) {
+        scope.appEvent('shift-time-forward', evt);
+      }, { inputDisabled: true });
+
       keyboardManager.bind('ctrl+e', function(evt) {
       keyboardManager.bind('ctrl+e', function(evt) {
         scope.appEvent('export-dashboard', evt);
         scope.appEvent('export-dashboard', evt);
       }, { inputDisabled: true });
       }, { inputDisabled: true });

public/app/features/dashboard/timepicker/timepicker.html

 <ul class="nav gf-timepicker-nav">
 <ul class="nav gf-timepicker-nav">
 
 
 	<li class="dashnav-zoom-out" style="padding-top: 2px">
 	<li class="dashnav-zoom-out" style="padding-top: 2px">
+                <a class='small' ng-click='ctrl.move(-1)'>
+                        &lt;
+                </a>
+        </li>
+	<li class="dashnav-zoom-out" style="padding-top: 2px">
+                <a class='small' ng-click='ctrl.move(1)'>
+                        &gt; 
+                </a>
+        </li>
+	<li class="dashnav-zoom-out" style="padding-top: 2px">
 		<a class='small' ng-click='ctrl.zoom(2)'>
 		<a class='small' ng-click='ctrl.zoom(2)'>
 			Zoom Out
 			Zoom Out
 		</a>
 		</a>

public/app/features/dashboard/timepicker/timepicker.ts

@@ -30,6 +30,8 @@ export class TimePickerCtrl {
     $scope.ctrl = this;
     $scope.ctrl = this;
 
 
     $rootScope.onAppEvent('zoom-out', () => this.zoom(2), $scope);
     $rootScope.onAppEvent('zoom-out', () => this.zoom(2), $scope);
+    $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
+    $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope);
     $rootScope.onAppEvent('refresh', () => this.init(), $scope);
     $rootScope.onAppEvent('refresh', () => this.init(), $scope);
     $rootScope.onAppEvent('dash-editor-hidden', () => this.isOpen = false, $scope);
     $rootScope.onAppEvent('dash-editor-hidden', () => this.isOpen = false, $scope);
 
 
@@ -87,6 +89,30 @@ export class TimePickerCtrl {
     this.timeSrv.setTime({from: moment.utc(from), to: moment.utc(to) });
     this.timeSrv.setTime({from: moment.utc(from), to: moment.utc(to) });
   }
   }
 
 
+  move(direction) {
+    var range = this.timeSrv.timeRange();
+
+    var timespan = (range.to.valueOf() - range.from.valueOf());
+    var to, from;
+    if (direction === -1) {
+      to = range.to.valueOf() - timespan;
+      from = range.from.valueOf() - timespan;
+    } else if (direction === 1) {
+      to = range.to.valueOf() + timespan;
+      from = range.from.valueOf() + timespan;
+      if (to > Date.now() && range.to < Date.now()) {
+        to = Date.now();
+        from = range.from.valueOf();
+      }
+    } else {
+      to = range.to.valueOf();
+      from = range.from.valueOf();
+    }
+
+    this.timeSrv.setTime({from: moment.utc(from), to: moment.utc(to) });
+
+  }
+
   openDropdown() {
   openDropdown() {
     this.init();
     this.init();
     this.isOpen = true;
     this.isOpen = true;

public/app/partials/help_modal.html

@@ -29,6 +29,14 @@
 				<td>Refresh (Fetches new data and rerenders panels)</td>
 				<td>Refresh (Fetches new data and rerenders panels)</td>
 			</tr>
 			</tr>
 			<tr>
 			<tr>
+                                <td><span class="label label-info">&lt;</span></td>
+                                <td>Shift time backward</td>
+                        </tr>
+			<tr>
+                                <td><span class="label label-info">&gt;</span></td>
+                                <td>Shift time forward</td>
+                        </tr>
+			<tr>
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td>Save dashboard</td>
 				<td>Save dashboard</td>
 			</tr>
 			</tr>