SharePanelModal: working on share feature, #864

.jsfmtrc

+{
+  "preset" : "default",
+
+  "lineBreak" : {
+    "before" : {
+      "VariableDeclarationWithoutInit" : 0,
+    },
+
+    "after": {
+      "AssignmentOperator": -1,
+      "ArgumentListArrayExpression": ">=1"
+    }
+  },
+
+  "whiteSpace" : {
+    "before" : {
+    },
+    "after" : {
+    }
+  }
+}

src/app/controllers/sharePanelCtrl.js

@@ -11,31 +11,64 @@ function (angular, _) {
 
     $scope.init = function() {
       $scope.editor = { index: 0 };
+      $scope.forCurrent = true;
+      $scope.toPanel = true;
+
+      $scope.buildUrl();
+    };
+
+    $scope.buildUrl = function() {
+      var baseUrl = $location.absUrl();
+      var queryStart = baseUrl.indexOf('?');
+
+      if (queryStart !== -1) {
+        baseUrl = baseUrl.substring(0, queryStart);
+      }
 
-      var currentUrl = $location.absUrl();
       var panelId = $scope.panel.id;
       var range = timeSrv.timeRange(false);
-      var from = range.from;
-      var to = range.to;
-      if (_.isDate(from)) {
-        from = from.getTime();
+      var params = $location.search();
+
+      if (_.isString(range.to) && range.to.indexOf('now')) {
+        range = timeSrv.timeRange();
       }
-      if (_.isDate(to)) {
-        to = to.getTime();
+
+      params.from = range.from;
+      params.to = range.to;
+
+      if (_.isDate(params.from)) { params.from = params.from.getTime(); }
+      if (_.isDate(params.to)) { params.to = params.to.getTime(); }
+
+      if (!$scope.forCurrent) {
+        delete params.from;
+        delete params.to;
       }
 
-      $scope.shareUrl = currentUrl + "?panelId=" + panelId + "&fullscreen";
-      $scope.shareUrl += "&from=" + from;
-      $scope.shareUrl += "&to=" + to;
+      if ($scope.toPanel) {
+        params.panelId = panelId;
+        params.fullscreen = true;
+      } else {
+        delete params.panelId;
+        delete params.fullscreen;
+      }
 
-      $scope.forCurrent = true;
-      $scope.toPanel = true;
+      var paramsArray = [];
+      _.each(params, function(value, key) {
+        var str = key;
+        if (value !== true) {
+          str += '=' + encodeURIComponent(value);
+        }
+        paramsArray.push(str);
+      });
+
+      $scope.shareUrl = baseUrl + "?" + paramsArray.join('&') ;
 
       $timeout(function() {
         var input = $element.find('[data-share-panel-url]');
         input.focus();
         input.select();
-      });
+      }, 10);
+
     };
 
     $scope.init();

src/app/partials/dasheditor.html

@@ -39,7 +39,6 @@
 						</bootstrap-tagsinput>
 						<tip>Press enter to a add tag</tip>
 					</div>
-
 				</div>
 			</div>
 		</div>

src/app/partials/share-panel.html

@@ -15,13 +15,14 @@
 	</div>
 
 	<div class="modal-body">
+
 		<div class="editor-row">
-			<editor-opt-bool name="currentTime" text="Current time range" model="forCurrent"></editor-opt-bool>
-			<editor-opt-bool name="toPanel" text="To this panel only" model="toPanel"></editor-opt-bool>
+			<editor-opt-bool name="currentTime" text="Current time range" model="forCurrent" change="buildUrl()"></editor-opt-bool>
+			<editor-opt-bool name="toPanel" text="To this panel only" model="toPanel" change="buildUrl()"></editor-opt-bool>
 		</div>
 
 		<div class="editor-row" style="margin-top: 20px;">
-			<input type="text" data-share-panel-url ng-model="shareUrl" class="input input-fluid"></input>
+			<input type="text" data-share-panel-url class="input input-fluid" ng-model='shareUrl'></input>
 		</div>
 	</div>
 

src/config.sample.js

@@ -2,8 +2,7 @@
 // config.js is where you will find the core Grafana configuration. This file contains parameter that
 // must be set before Grafana is run for the first time.
 
-define(['settings'],
-function (Settings) {
+define(['settings'], function(Settings) {
   "use strict";
 
   return new Settings({
@@ -107,3 +106,6 @@ function (Settings) {
 
     });
 });
+
+
+

src/css/less/forms.less

@@ -2,6 +2,8 @@ input[type=text].input-fluid {
   width: 100%;
   box-sizing: border-box;
   padding: 14px;
+  -moz-box-sizing: border-box;
+  height: 100%;
 }
 
 input[type="checkbox"].cr1 {

src/test/specs/helpers.js

@@ -8,6 +8,7 @@ define([
     var self = this;
 
     this.datasource = {};
+    this.$element = {};
     this.annotationsSrv = {};
     this.timeSrv = new TimeSrvStub();
     this.templateSrv = new TemplateSrvStub();
@@ -16,18 +17,23 @@ define([
       get: function() { return self.datasource; }
     };
 
-    this.providePhase = function() {
+    this.providePhase = function(mocks) {
       return module(function($provide) {
         $provide.value('datasourceSrv', self.datasourceSrv);
         $provide.value('annotationsSrv', self.annotationsSrv);
         $provide.value('timeSrv', self.timeSrv);
         $provide.value('templateSrv', self.templateSrv);
+        $provide.value('$element', self.$element);
+        _.each(mocks, function(key, value) {
+          $provide.value(key, value);
+        });
       });
     };
 
     this.createControllerPhase = function(controllerName) {
-      return inject(function($controller, $rootScope, $q) {
+      return inject(function($controller, $rootScope, $q, $location) {
         self.scope = $rootScope.$new();
+        self.$location = $location;
         self.scope.panel = {};
         self.scope.row = { panels:[] };
         self.scope.dashboard = {};

src/test/specs/sharePanelCtrl-specs.js

+define([
+  './helpers',
+  'controllers/sharePanelCtrl'
+], function(helpers) {
+  'use strict';
+
+  describe('SharePanelCtrl', function() {
+    var ctx = new helpers.ControllerTestContext();
+
+    beforeEach(module('grafana.controllers'));
+
+    beforeEach(ctx.providePhase());
+    beforeEach(ctx.createControllerPhase('SharePanelCtrl'));
+
+    describe('shareUrl with current time range and panel', function() {
+
+      it('should generate share url relative time', function() {
+        ctx.$location.path('/test');
+        ctx.scope.panel = { id: 22 };
+        ctx.timeSrv.time = { from: 'now-1h', to: 'now' };
+
+        ctx.scope.buildUrl();
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now&panelId=22&fullscreen');
+      });
+
+      it('should generate share url absolute time', function() {
+        ctx.$location.path('/test');
+        ctx.scope.panel = { id: 22 };
+        ctx.timeSrv.time = { from: new Date(2012,1,1), to: new Date(2014,3,5) };
+
+        ctx.scope.buildUrl();
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen');
+      });
+
+      it('should generate share url with time as JSON strings', function() {
+        ctx.$location.path('/test');
+        ctx.scope.panel = { id: 22 };
+        ctx.timeSrv.time = { from: new Date(2012,1,1).toJSON(), to: new Date(2014,3,5).toJSON() };
+
+        ctx.scope.buildUrl();
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen');
+      });
+
+      it('should remove panel id when toPanel is false', function() {
+        ctx.$location.path('/test');
+        ctx.scope.panel = { id: 22 };
+        ctx.scope.toPanel = false;
+        ctx.timeSrv.time = { from: 'now-1h', to: 'now' };
+
+        ctx.scope.buildUrl();
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now');
+      });
+
+    });
+
+  });
+
+});
+

src/test/test-main.js

@@ -131,6 +131,7 @@ require([
     'specs/grafanaGraph-specs',
     'specs/graph-tooltip-specs',
     'specs/seriesOverridesCtrl-specs',
+    'specs/sharePanelCtrl-specs',
     'specs/timeSrv-specs',
     'specs/templateSrv-specs',
     'specs/templateValuesSrv-specs',