Merge branch 'utkarshcmu-move'

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Enhancements
 * **InfluxDB**: Changed multi query encoding to work with InfluxDB 0.11 & 0.12, closes [#4533](https://github.com/grafana/grafana/issues/4533)
+* **Timepicker**: Add arrows and shortcuts for moving back and forth in current dashboard, closes [#119](https://github.com/grafana/grafana/issues/119)
 
 ### Bug fixes
 * **Postgres**: Fixed page render crash when using postgres, fixes [#4558](https://github.com/grafana/grafana/issues/4558)

public/app/features/dashboard/keybindings.js

@@ -60,6 +60,14 @@ function(angular, $) {
         scope.appEvent('zoom-out', evt);
       }, { 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) {
         scope.appEvent('export-dashboard', evt);
       }, { inputDisabled: true });

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

@@ -1,5 +1,15 @@
 <ul class="nav gf-timepicker-nav">
 
+	<li class="dashnav-move-timeframe" style="padding-top: 2px">
+                <a class='small' ng-click='ctrl.move(-1)'>
+                        <i class="fa fa-arrow-left"></i>
+                </a>
+        </li>
+	<li class="dashnav-move-timeframe" style="padding-top: 2px">
+                <a class='small' ng-click='ctrl.move(1)'>
+                        <i class="fa fa-arrow-right"></i>
+                </a>
+        </li>
 	<li class="dashnav-zoom-out" style="padding-top: 2px">
 		<a class='small' ng-click='ctrl.zoom(2)'>
 			Zoom Out

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

@@ -30,6 +30,8 @@ export class TimePickerCtrl {
     $scope.ctrl = this;
 
     $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('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) });
   }
 
+  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() {
     this.init();
     this.isOpen = true;

public/app/partials/help_modal.html

@@ -28,6 +28,14 @@
 				<td><span class="label label-info">R</span></td>
 				<td>Refresh (Fetches new data and rerenders panels)</td>
 			</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>Save dashboard</td>

public/sass/_old_responsive.scss

@@ -24,6 +24,7 @@
     max-width: 120px;
   }
   .dashnav-zoom-out,
+  .dashnav-move-timeframe,
   .dashnav-action-icons {
     display: none;
   }
@@ -40,6 +41,11 @@
   .gf-timepicker-nav-btn {
     max-width: 120px;
   }
+
+  .dashnav-move-timeframe {
+    display: none;
+  }
+
   .panel-in-fullscreen {
     .dashnav-action-icons {
       display: none;
@@ -60,6 +66,9 @@
   .dashnav-zoom-out {
     display: block;
   }
+  .dashnav-move-timeframe {
+    display: block;
+  }
 }
 
 @include media-breakpoint-up(xl) {

public/sass/pages/_dashboard.scss

@@ -96,7 +96,8 @@
   .add-row-panel-hint,
   .dashnav-refresh-action,
   .dashnav-zoom-out,
-  .dashnav-action-icons {
+  .dashnav-action-icons,
+  .dashnav-move-timeframe  {
     display: none;
   }