Fullscreen & edit state persisted to url is nearing completion, refactored…

Fullscreen & edit state persisted to url is nearing completion, refactored fullscreen state management to a special dashboardViewState object, Issue #672

src/app/controllers/dash.js

@@ -8,6 +8,8 @@ define([
 function (angular, $, config, _) {
   "use strict";
 
+  var module = angular.module('grafana.controllers');
+
   module.controller('DashCtrl', function($scope, $rootScope, dashboardKeybindings, filterSrv, dashboardSrv, panelMoveSrv, timer) {
 
     $scope.editor = { index: 0 };
@@ -21,9 +23,9 @@ function (angular, $, config, _) {
     $scope.setupDashboard = function(event, dashboardData) {
       timer.cancel_all();
 
-      $rootScope.fullscreen = false;
-
       $scope.dashboard = dashboardSrv.create(dashboardData);
+      $scope.dashboardViewState = dashboardSrv.createViewState();
+
       $scope.grafana.style = $scope.dashboard.style;
 
       $scope.filter = filterSrv;

src/app/controllers/dashLoader.js

@@ -14,6 +14,7 @@ function (angular, _, moment, config) {
 
     $scope.init = function() {
       $scope.db = datasourceSrv.getGrafanaDB();
+
       $scope.onAppEvent('save-dashboard', function() {
         $scope.saveDashboard();
       });

src/app/partials/dashLoader.html

@@ -4,7 +4,7 @@
   }
 </style>
 
-<li ng-show="fullscreen">
+<li ng-show="dashboardViewState.fullscreen">
   <a ng-click="exitFullscreen()">
     Back to dashboard
   </a>

src/app/partials/dashboard.html

-<div ng-controller="DashCtrl" body-class>
+<div ng-controller="DashCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
   <div class="navbar navbar-static-top">
     <div class="navbar-inner">

src/app/routes/dashboard-from-db.js

@@ -30,13 +30,7 @@ function (angular) {
 
     db.getDashboard($routeParams.id, isTemp)
       .then(function(dashboard) {
-
-        dashboard.$state = {
-          panelId: parseInt($routeParams.panelId)
-        };
-
         $scope.emitAppEvent('setup-dashboard', dashboard);
-
       }).then(null, function(error) {
         alertSrv.set('Error', error, 'error');
       });

src/app/services/dashboard/dashboardKeyBindings.js

@@ -12,16 +12,12 @@ function(angular, $) {
 
     this.shortcuts = function(scope) {
 
-      scope.onAppEvent('panel-fullscreen-enter', function() {
-        $rootScope.fullscreen = true;
-      });
-
       scope.onAppEvent('panel-fullscreen-exit', function() {
-        $rootScope.fullscreen = false;
+        scope.dashboardViewState.update({ fullscreen: false });
       });
 
       scope.onAppEvent('dashboard-saved', function() {
-        if ($rootScope.fullscreen) {
+        if (scope.dashboardViewState.fullscreen) {
           scope.emitAppEvent('panel-fullscreen-exit');
         }
       });

src/app/services/dashboard/dashboardSrv.js

@@ -10,7 +10,7 @@ function (angular, $, kbn, _) {
 
   var module = angular.module('grafana.services');
 
-  module.service('dashboardSrv', function(timer, $rootScope, $timeout) {
+  module.factory('dashboardSrv', function(timer, $rootScope, $timeout, $location) {
 
     function DashboardModel (data) {
 
@@ -150,9 +150,35 @@ 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/panelSrv.js

@@ -7,7 +7,7 @@ function (angular, _, $) {
   'use strict';
 
   var module = angular.module('grafana.services');
-  module.service('panelSrv', function($rootScope, $timeout, datasourceSrv, $location) {
+  module.service('panelSrv', function($rootScope, $timeout, datasourceSrv) {
 
     this.init = function($scope) {
       if (!$scope.panel.span) {
@@ -101,12 +101,11 @@ function (angular, _, $) {
 
         $(window).scrollTop(0);
 
-        $scope.fullscreen = true;
+        $scope.dashboardViewState.update({ fullscreen: true, edit: $scope.editMode, panelId: $scope.panel.id });
 
-        $rootScope.$emit('panel-fullscreen-enter');
+        $scope.fullscreen = true;
 
         $timeout(function() {
-          $location.search({panelId: $scope.panel.id, mode: $scope.editMode ? 'edit' : 'full' });
           $scope.$emit('render');
         });
 
@@ -155,7 +154,7 @@ function (angular, _, $) {
       };
 
       $scope.otherPanelInFullscreenMode = function() {
-        return $rootScope.fullscreen && !$scope.fullscreen;
+        return $scope.dashboardViewState.fullscreen && !$scope.fullscreen;
       };
 
       // Post init phase
@@ -168,9 +167,9 @@ function (angular, _, $) {
       $scope.datasources = datasourceSrv.getMetricSources();
       $scope.setDatasource($scope.panel.datasource);
 
-//       if ($scope.dashboard.$state.panelId === $scope.panel.id) {
-//         $scope.enterFullscreenMode({edit: false});
-//       }
+      if ($scope.dashboardViewState.panelId === $scope.panel.id) {
+        $scope.enterFullscreenMode({edit: $scope.dashboardViewState.edit});
+      }
 
       if ($scope.get_data) {
         var panel_get_data = $scope.get_data;

src/index.html

@@ -27,7 +27,7 @@
       <strong>{{alert.title}}</strong> <span ng-bind-html='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div>
     </div>
 
-    <div ng-view ng-class="{'dashboard-fullscreen': fullscreen}"></div>
+    <div ng-view ></div>
 
   </body>
 </html>

src/test/specs/dashboardSrv-specs.js

@@ -78,5 +78,35 @@ define([
 
   });
 
+  describe('when updating view state', function() {
+    var viewState, location;
+
+    beforeEach(module('grafana.services'));
+
+    beforeEach(inject(function(dashboardSrv, $location) {
+      viewState = dashboardSrv.createViewState();
+      location = $location;
+    }));
+
+    describe('to fullscreen true and edit true', function() {
+      it('should update querystring and view state', function() {
+        var updateState = { fullscreen: true, edit: true, panelId: 1 };
+        viewState.update(updateState);
+        expect(location.search()).to.eql(updateState);
+        expect(viewState).to.eql(updateState);
+      });
+    });
+
+    describe('to fullscreen false', function() {
+      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({});
+      });
+    });
+
+  });
 
 });

src/test/specs/helpers.js

@@ -26,6 +26,7 @@ define([
         self.scope.panel = {};
         self.scope.row = { panels:[] };
         self.scope.filter = new FilterSrvStub();
+        self.scope.dashboardViewState = { update: function() {} };
 
         $rootScope.colors = [];
         for (var i = 0; i < 50; i++) { $rootScope.colors.push('#' + i); }