align refresh interval

public/app/features/dashboard/timeSrv.js

@@ -65,11 +65,17 @@ define([
       }
     };
 
-    this.setAutoRefresh = function (interval) {
+    this.setAutoRefresh = function (interval, align) {
       this.dashboard.refresh = interval;
       if (interval) {
         var _i = kbn.interval_to_ms(interval);
-        this.start_scheduled_refresh(_i);
+        var wait_ms = 0;
+        if (align) {
+          wait_ms = _i - (Date.now() % _i);
+        }
+        $timeout(function () {
+          self.start_scheduled_refresh(_i);
+        }, wait_ms);
       } else {
         this.cancel_scheduled_refresh();
       }

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

@@ -40,6 +40,7 @@
 			<div class="gf-form max-width-28">
 				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
 			</div>
+			<editor-checkbox text="Align" model="ctrl.refresh.align"></editor-checkbox>
 			<div class="gf-form">
 				<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
 			</div>

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

@@ -109,7 +109,7 @@ export class TimePickerCtrl {
 
   applyCustom() {
     if (this.refresh.value !== this.dashboard.refresh) {
-      this.timeSrv.setAutoRefresh(this.refresh.value);
+      this.timeSrv.setAutoRefresh(this.refresh.value, this.refresh.align);
     }
 
     this.timeSrv.setTime(this.timeRaw, true);