From fc686ca6182dd255bfb93b53a42589af1dfcf7b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Aug 2014 10:07:32 +0200 Subject: [PATCH] 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 | 6 ++-- src/app/controllers/dashLoader.js | 1 + src/app/partials/dashLoader.html | 2 +- src/app/partials/dashboard.html | 2 +- src/app/routes/dashboard-from-db.js | 6 ---- .../dashboard/dashboardKeyBindings.js | 8 ++--- src/app/services/dashboard/dashboardSrv.js | 28 ++++++++++++++++- src/app/services/panelSrv.js | 15 +++++----- src/index.html | 2 +- src/test/specs/dashboardSrv-specs.js | 30 +++++++++++++++++++ src/test/specs/helpers.js | 1 + 11 files changed, 75 insertions(+), 26 deletions(-) diff --git a/src/app/controllers/dash.js b/src/app/controllers/dash.js index 2ea23e46889..492c86fa3f5 100644 --- a/src/app/controllers/dash.js +++ b/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; diff --git a/src/app/controllers/dashLoader.js b/src/app/controllers/dashLoader.js index 27071213d8f..7756151e6c9 100644 --- a/src/app/controllers/dashLoader.js +++ b/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(); }); diff --git a/src/app/partials/dashLoader.html b/src/app/partials/dashLoader.html index 4fd73b864c9..28413d32c0b 100644 --- a/src/app/partials/dashLoader.html +++ b/src/app/partials/dashLoader.html @@ -4,7 +4,7 @@ } -
  • +
  • Back to dashboard diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 39a287489dd..013b924c77a 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/src/app/routes/dashboard-from-db.js b/src/app/routes/dashboard-from-db.js index d10de12939d..dfbcf3af3b1 100644 --- a/src/app/routes/dashboard-from-db.js +++ b/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'); }); diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index 304e10ea5d3..ef245839233 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/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'); } }); diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 865946ea86b..26c1c3b8f5b 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/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); } }; diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index c4d18fdd2e8..8ea70df999f 100644 --- a/src/app/services/panelSrv.js +++ b/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.dashboardViewState.update({ fullscreen: true, edit: $scope.editMode, panelId: $scope.panel.id }); + $scope.fullscreen = true; - $rootScope.$emit('panel-fullscreen-enter'); - $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; diff --git a/src/index.html b/src/index.html index 3d9d95ed484..8c5c8ff5c91 100644 --- a/src/index.html +++ b/src/index.html @@ -27,7 +27,7 @@ {{alert.title}}
    {{$index + 1}} alert(s)
    -
    +
    diff --git a/src/test/specs/dashboardSrv-specs.js b/src/test/specs/dashboardSrv-specs.js index c2684cfdae5..51bf2104f75 100644 --- a/src/test/specs/dashboardSrv-specs.js +++ b/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({}); + }); + }); + + }); }); diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 0383b69b5c0..3b850ecfc2d 100644 --- a/src/test/specs/helpers.js +++ b/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); }