Lots of complicated code for dealing with panel state

src/app/services/dashboard/dashboardViewStateSrv.js

@@ -1,13 +1,14 @@
 define([
   'angular',
   'lodash',
+  'jquery',
 ],
-function (angular, _) {
+function (angular, _, $) {
   'use strict';
 
   var module = angular.module('grafana.services');
 
-  module.factory('dashboardViewStateSrv', function($location, $route) {
+  module.factory('dashboardViewStateSrv', function($location, $timeout) {
 
     // represents the transient view state
     // like fullscreen panel & edit
@@ -15,45 +16,127 @@ function (angular, _) {
       var self = this;
 
       $scope.onAppEvent('$routeUpdate', function() {
-        var current = $route.current.params;
+        var urlState = self.getQueryStringState();
-        console.log('Route updated', current);
+        if (self.needsSync(urlState)) {
-        if (self.fullscreen && !current.fullscreen) {
+          self.update(urlState, true);
-          console.log('emit panel exit');
-          $scope.emitAppEvent('panel-fullscreen-exit');
-        }
-        if (!self.fullscreen && current.fullscreen) {
-          $scope.emitAppEvent('dashboard-view-state-mismatch', current);
         }
       });
 
       this.panelScopes = [];
+      this.$scope = $scope;
 
-      var queryParams = $location.search();
+      this.update(this.getQueryStringState(), true);
-      this.update({
-        panelId: parseInt(queryParams.panelId),
-        fullscreen: queryParams.fullscreen ? true : false,
-        edit: queryParams.edit ? true : false
-      });
     }
 
-    DashboardViewState.prototype.update = function(state) {
+    DashboardViewState.prototype.needsSync = function(urlState) {
-      _.extend(this, state);
+      if (urlState.fullscreen !== this.fullscreen) { return true; }
-      if (!this.fullscreen) {
+      if (urlState.edit !== this.edit) { return true; }
-        delete this.fullscreen;
+      if (urlState.panelId !== this.panelId) { return true; }
-        delete this.panelId;
+      return false;
-        delete this.edit;
-      }
-      if (!this.edit) { delete this.edit; }
-
-      $location.search(this);
     };
 
-    DashboardViewState.prototype.test = function() {
+    DashboardViewState.prototype.getQueryStringState = function() {
+      var queryParams = $location.search();
+      return {
+        panelId: parseInt(queryParams.panelId) || null,
+        fullscreen: queryParams.fullscreen ? true : false,
+        edit: queryParams.edit ? true : false
+      };
+    };
 
+    DashboardViewState.prototype.update = function(state, skipUrlSync) {
+      console.log('viewstate update: ', state);
+
+      _.extend(this, state);
+      if (!this.fullscreen) {
+        this.panelId = null;
+        this.edit = false;
+      }
+
+      if (!skipUrlSync) {
+        $location.search({
+          fullscreen: this.fullscreen ? true : null,
+          panelId: this.panelId,
+          edit: this.edit ? true : null
+        });
+      }
+
+      this.syncState();
+    };
+
+    DashboardViewState.prototype.syncState = function() {
+      if (this.panelScopes.length === 0) { return; }
+
+      if (this.fullscreen) {
+        if (this.fullscreenPanel) {
+          this.leaveFullscreen(false);
+        }
+        var panelScope = this.getPanelScope(this.panelId);
+        this.enterFullscreen(panelScope);
+        return;
+      }
+
+      if (this.fullscreenPanel) {
+        this.leaveFullscreen(true);
+      }
+    };
+
+    DashboardViewState.prototype.getPanelScope = function(id) {
+      return _.find(this.panelScopes, function(panelScope) {
+        return panelScope.panel.id === id;
+      });
+    };
+
+    DashboardViewState.prototype.leaveFullscreen = function(render) {
+      var self = this;
+
+      self.fullscreenPanel.editMode = false;
+      self.fullscreenPanel.fullscreen = false;
+      delete self.fullscreenPanel.height;
+
+      if (!render) { return false;}
+
+      $timeout(function() {
+        if (self.oldTimeRange !== self.fullscreenPanel.range) {
+          self.$scope.dashboard.emit_refresh();
+        }
+        else {
+          self.fullscreenPanel.$emit('render');
+        }
+        delete self.fullscreenPanel;
+      });
+    };
+
+    DashboardViewState.prototype.enterFullscreen = function(panelScope) {
+      var docHeight = $(window).height();
+      var editHeight = Math.floor(docHeight * 0.3);
+      var fullscreenHeight = Math.floor(docHeight * 0.7);
+      this.oldTimeRange = panelScope.range;
+
+      panelScope.height = this.edit ? editHeight : fullscreenHeight;
+      panelScope.editMode = this.edit;
+      this.fullscreenPanel = panelScope;
+
+      $(window).scrollTop(0);
+
+      panelScope.fullscreen = true;
+
+      $timeout(function() {
+        panelScope.$emit('render');
+      });
     };
 
     DashboardViewState.prototype.registerPanel = function(panelScope) {
-      this.panelScopes.push(panelScope);
+      var self = this;
+      self.panelScopes.push(panelScope);
+
+      if (self.panelId === panelScope.panel.id) {
+        self.enterFullscreen(panelScope);
+      }
+
+      panelScope.$on('$destroy', function() {
+        self.panelScopes = _.without(self.panelScopes, panelScope);
+      });
     };
 
     return {

src/app/services/panelSrv.js

@@ -22,12 +22,12 @@ function (angular, _, $) {
         },
         {
           text: 'Edit',
-          click: "toggleFullscreenEdit()",
+          click: "toggleFullscreen(true)",
           condition: $scope.panelMeta.fullscreenEdit
         },
         {
           text: "Fullscreen",
-          click: 'toggleFullscreen()',
+          click: 'toggleFullscreen(false)',
           condition: $scope.panelMeta.fullscreenView
         },
         {
@@ -135,22 +135,8 @@ function (angular, _, $) {
         $scope.get_data();
       };
 
-      $scope.toggleFullscreenEdit = function() {
+      $scope.toggleFullscreen = function(edit) {
-        if ($scope.editMode) {
+        $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
-          $rootScope.$emit('panel-fullscreen-exit');
-          return;
-        }
-
-        $scope.enterFullscreenMode({edit: true});
-      };
-
-      $scope.toggleFullscreen = function() {
-        if ($scope.fullscreen && !$scope.editMode) {
-          $rootScope.$emit('panel-fullscreen-exit');
-          return;
-        }
-
-        $scope.enterFullscreenMode({ edit: false });
       };
 
       $scope.otherPanelInFullscreenMode = function() {
@@ -168,9 +154,6 @@ function (angular, _, $) {
       $scope.setDatasource($scope.panel.datasource);
 
       $scope.dashboardViewState.registerPanel($scope);
-      if ($scope.dashboardViewState.panelId === $scope.panel.id) {
-        $scope.enterFullscreenMode({edit: $scope.dashboardViewState.edit});
-      }
 
       if ($scope.get_data) {
         var panel_get_data = $scope.get_data;