Refactoring fullscreen / edit handling

src/app/controllers/dash.js

@@ -10,7 +10,10 @@ function (angular, $, config, _) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('DashCtrl', function($scope, $rootScope, dashboardKeybindings, filterSrv, dashboardSrv, panelMoveSrv, timer) {
+  module.controller('DashCtrl', function(
+      $scope, $rootScope, dashboardKeybindings,
+      filterSrv, dashboardSrv, dashboardViewStateSrv,
+      panelMoveSrv, timer) {
 
     $scope.editor = { index: 0 };
     $scope.panelNames = config.panels;
@@ -24,7 +27,7 @@ function (angular, $, config, _) {
       timer.cancel_all();
 
       $scope.dashboard = dashboardSrv.create(dashboardData);
-      $scope.dashboardViewState = dashboardSrv.createViewState();
+      $scope.dashboardViewState = dashboardViewStateSrv.create($scope);
 
       $scope.grafana.style = $scope.dashboard.style;
 

src/app/services/all.js

@@ -11,5 +11,6 @@ define([
   './unsavedChangesSrv',
   './dashboard/dashboardKeyBindings',
   './dashboard/dashboardSrv',
+  './dashboard/dashboardViewStateSrv',
 ],
 function () {});

src/app/services/dashboard/dashboardSrv.js

@@ -150,35 +150,9 @@ function (angular, $, kbn, _) {
       this.version = 3;
     };
 
-    // represents the transient view state
-    // like fullscreen panel & edit
-    function DashboardViewState() {
-      var queryParams = $location.search();
-      this.update({
-        panelId: parseInt(queryParams.panelId),
-        fullscreen: queryParams.fullscreen ? true : false,
-        edit: queryParams.edit ? true : false
-      });
-    }
-
-    DashboardViewState.prototype.update = function(state) {
-      _.extend(this, state);
-      if (!this.fullscreen) {
-        delete this.fullscreen;
-        delete this.panelId;
-        delete this.edit;
-      }
-      if (!this.edit) { delete this.edit; }
-
-      $location.search(this);
-    };
-
     return {
       create: function(dashboard) {
         return new DashboardModel(dashboard);
-      },
-      createViewState: function(state) {
-        return new DashboardViewState(state);
       }
     };
 

src/app/services/dashboard/dashboardViewStateSrv.js

@@ -0,0 +1,66 @@
+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('grafana.services');
+
+  module.factory('dashboardViewStateSrv', function($location, $route) {
+
+    // represents the transient view state
+    // like fullscreen panel & edit
+    function DashboardViewState($scope) {
+      var self = this;
+
+      $scope.onAppEvent('$routeUpdate', function() {
+        var current = $route.current.params;
+        console.log('Route updated', current);
+        if (self.fullscreen && !current.fullscreen) {
+          console.log('emit panel exit');
+          $scope.emitAppEvent('panel-fullscreen-exit');
+        }
+        if (!self.fullscreen && current.fullscreen) {
+          $scope.emitAppEvent('dashboard-view-state-mismatch', current);
+        }
+      });
+
+      this.panelScopes = [];
+
+      var queryParams = $location.search();
+      this.update({
+        panelId: parseInt(queryParams.panelId),
+        fullscreen: queryParams.fullscreen ? true : false,
+        edit: queryParams.edit ? true : false
+      });
+    }
+
+    DashboardViewState.prototype.update = function(state) {
+      _.extend(this, state);
+      if (!this.fullscreen) {
+        delete this.fullscreen;
+        delete this.panelId;
+        delete this.edit;
+      }
+      if (!this.edit) { delete this.edit; }
+
+      $location.search(this);
+    };
+
+    DashboardViewState.prototype.test = function() {
+
+    };
+
+    DashboardViewState.prototype.registerPanel = function(panelScope) {
+      this.panelScopes.push(panelScope);
+    };
+
+    return {
+      create: function($scope) {
+        return new DashboardViewState($scope);
+      }
+    };
+
+  });
+});

src/app/services/panelSrv.js

@@ -167,6 +167,7 @@ function (angular, _, $) {
       $scope.datasources = datasourceSrv.getMetricSources();
       $scope.setDatasource($scope.panel.datasource);
 
+      $scope.dashboardViewState.registerPanel($scope);
       if ($scope.dashboardViewState.panelId === $scope.panel.id) {
         $scope.enterFullscreenMode({edit: $scope.dashboardViewState.edit});
       }

src/test/specs/dashboardSrv-specs.js

@@ -101,7 +101,6 @@ define([
       it('should remove params from query string', function() {
         viewState.update({fullscreen: true, panelId: 1, edit: true});
         viewState.update({fullscreen: false});
-
         expect(location.search()).to.eql({});
         expect(viewState).to.eql({});
       });