fix(zoom): fixed zoom in and out issues when graph is embedded, fixes #5666, fixes #4489

public/app/core/routes/routes.ts

@@ -30,6 +30,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/dashboard-solo/:type/:slug', {
   .when('/dashboard-solo/:type/:slug', {
     templateUrl: 'public/app/features/panel/partials/soloPanel.html',
     templateUrl: 'public/app/features/panel/partials/soloPanel.html',
     controller : 'SoloPanelCtrl',
     controller : 'SoloPanelCtrl',
+    reloadOnSearch: false,
     pageClass: 'page-dashboard',
     pageClass: 'page-dashboard',
   })
   })
   .when('/dashboard/new', {
   .when('/dashboard/new', {

public/app/features/dashboard/timeSrv.js

@@ -13,6 +13,8 @@ define([
   module.service('timeSrv', function($rootScope, $timeout, $routeParams, timer) {
   module.service('timeSrv', function($rootScope, $timeout, $routeParams, timer) {
     var self = this;
     var self = this;
 
 
+    $rootScope.onAppEvent('zoom-out', function(e, factor) { self.zoomOut(factor); }, $rootScope);
+
     this.init = function(dashboard) {
     this.init = function(dashboard) {
       timer.cancel_all();
       timer.cancel_all();
 
 
@@ -137,6 +139,24 @@ define([
       return {from: from, to: to};
       return {from: from, to: to};
     };
     };
 
 
+    this.zoomOut = function(factor) {
+      var range = this.timeRange();
+
+      var timespan = (range.to.valueOf() - range.from.valueOf());
+      var center = range.to.valueOf() - timespan/2;
+
+      var to = (center + (timespan*factor)/2);
+      var from = (center - (timespan*factor)/2);
+
+      if (to > Date.now() && range.to <= Date.now()) {
+        var offset = to - Date.now();
+        from = from - offset;
+        to = Date.now();
+      }
+
+      this.setTime({from: moment.utc(from), to: moment.utc(to) });
+    };
+
   });
   });
 
 
 });
 });

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

@@ -29,7 +29,6 @@ export class TimePickerCtrl {
   constructor(private $scope, private $rootScope, private timeSrv) {
   constructor(private $scope, private $rootScope, private timeSrv) {
     $scope.ctrl = this;
     $scope.ctrl = this;
 
 
-    $rootScope.onAppEvent('zoom-out', () => this.zoom(2), $scope);
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-backward', () => 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);
@@ -72,21 +71,7 @@ export class TimePickerCtrl {
   }
   }
 
 
   zoom(factor) {
   zoom(factor) {
-    var range = this.timeSrv.timeRange();
-
-    var timespan = (range.to.valueOf() - range.from.valueOf());
-    var center = range.to.valueOf() - timespan/2;
-
-    var to = (center + (timespan*factor)/2);
-    var from = (center - (timespan*factor)/2);
-
-    if (to > Date.now() && range.to <= Date.now()) {
-      var offset = to - Date.now();
-      from = from - offset;
-      to = Date.now();
-    }
-
-    this.timeSrv.setTime({from: moment.utc(from), to: moment.utc(to) });
+    this.$rootScope.appEvent('zoom-out', 2);
   }
   }
 
 
   move(direction) {
   move(direction) {

public/app/plugins/panel/graph/module.ts

@@ -157,7 +157,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
   }
 
 
   zoomOut(evt) {
   zoomOut(evt) {
-    this.publishAppEvent('zoom-out', evt);
+    this.publishAppEvent('zoom-out', 2);
   }
   }
 
 
   onDataSnapshotLoad(snapshotData) {
   onDataSnapshotLoad(snapshotData) {