Refactoring of share modal

public/app/features/dashboard/all.js

@@ -5,7 +5,7 @@ define([
   './saveDashboardAsCtrl',
   './playlistCtrl',
   './rowCtrl',
-  './sharePanelCtrl',
+  './shareModalCtrl',
   './shareSnapshotCtrl',
   './submenuCtrl',
   './dashboardSrv',

public/app/features/dashboard/dashboardNavCtrl.js

@@ -37,7 +37,7 @@ function (angular, _) {
 
     $scope.shareDashboard = function() {
       $scope.appEvent('show-modal', {
-        src: './app/features/dashboard/partials/shareDashboard.html',
+        src: './app/features/dashboard/partials/shareModal.html',
         scope: $scope.$new(),
       });
     };

public/app/features/dashboard/partials/shareDashboard.html → public/app/features/dashboard/partials/shareModal.html

@@ -1,12 +1,12 @@
-<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl">
+<div class="modal-body gf-box gf-box-no-margin" ng-controller="ShareModalCtrl">
 	<div class="gf-box-header">
 		<div class="gf-box-title">
-			<i class="fa fa-share-square-o"></i>
-			Share Dashboard
+			<i class="fa fa-share"></i>
+			{{modalTitle}}
 		</div>
 
-		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-			<div ng-repeat="tab in ['Link', 'Snapshot sharing']" data-title="{{tab}}">
+		<div ng-model="editor.index" bs-tabs>
+			<div ng-repeat="tab in tabs" data-title="{{tab.title}}">
 			</div>
 		</div>
 
@@ -15,38 +15,58 @@
 		</button>
 	</div>
 
-	<div class="gf-box-body" ng-if="editor.index === 0">
-		<br>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
-			</div>
-		</div>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
-			</div>
-		</div>
+	<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
+		<ng-include src="tab.src"></ng-include>
+	</div>
 
-		<br>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
-				<span class="gf-fluid-input">
-					<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
-				</span>
-			</div>
-			<div>
+</div>
 
-				<div class="editor-row" style="margin-top: 5px;" ng-if="options.toPanel">
-					<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
-				</div>
-			</div>
+<script type="text/ng-template" id="shareEmbed.html">
+	<h5>IFrame embedding</h5>
+	<p>
+		<em>
+			The html code below can be pasted and included in another web page. Unless anonymous access
+			is enabled the user viewing that page need to be signed into grafana for the graph to load.
+		</em>
+	</p>
+	<div class="gf-form">
+		<div class="gf-form-row">
+			<span class="gf-fluid-input">
+				<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
+			</span>
 		</div>
+		<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
 	</div>
+</script>
 
-	<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
+<script type="text/ng-template" id="shareLink.html">
+	<h5>Link options</h5>
+	<div class="gf-form">
+		<div class="gf-form-row">
+			<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
+		</div>
+	</div>
+	<div class="gf-form">
+		<div class="gf-form-row">
+			<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
+		</div>
+	</div>
+	<br>
+	<div class="gf-form">
+		<div class="gf-form-row">
+			<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+			<span class="gf-fluid-input">
+				<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
+			</span>
+		</div>
+		<div class="editor-row" style="margin-top: 5px;" ng-show="options.toPanel">
+			<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
+		</div>
+	</div>
+</script>
 
+<script type="text/ng-template" id="shareSnapshot.html">
+	<div class="share-snapshot ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl">
 		<div style="margin: 10px 0">
 			<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
 			<i ng-if="!loading" class="gf-icon gf-icon-snap-multi"></i>
@@ -118,5 +138,4 @@
 			Did you make a mistake? <a href="{{deleteUrl}}" target="_blank">delete snapshot.</a>
 		</div>
 	</div>
-</div>
-
+</script>

public/app/features/dashboard/partials/sharePanel.html

@@ -1,65 +0,0 @@
-<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa fa-share"></i>
-			Share Panel
-		</div>
-
-		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-			<div ng-repeat="tab in ['Link', 'Embed']" data-title="{{tab}}">
-			</div>
-		</div>
-
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</button>
-	</div>
-
-	<div class="gf-box-body" ng-if="editor.index === 0">
-		<br>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
-			</div>
-		</div>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
-			</div>
-		</div>
-
-		<br>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
-				<span class="gf-fluid-input">
-					<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
-				</span>
-			</div>
-			<div>
-
-				<div class="editor-row" style="margin-top: 5px;" ng-if="options.toPanel">
-					<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="gf-box-body" ng-if="editor.index === 1">
-		<h5>IFrame embedding</h5>
-		<p><em>The html code below can be pasted and included in another web page. Unless anonymous access
-			is enabled the user viewing that page need to be signed into grafana for the graph to load.
-		</em>
-		</p>
-		<div class="gf-form">
-			<div class="gf-form-row">
-				<span class="gf-fluid-input">
-					<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
-				</span>
-			</div>
-			<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
-			<br>
-			<br>
-		</div>
-	</div>
-</div>

public/app/features/dashboard/partials/snapshotTopNav.html

@@ -19,6 +19,12 @@
 				</div>
 			</div>
 
+			<ul class="nav pull-left top-nav-dash-actions">
+				<li>
+					<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
+				</li>
+			</ul>
+
 			<ul class="nav pull-right">
 				<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
 					<grafana-simple-panel type="pulldown.type" ng-cloak>

public/app/features/dashboard/sharePanelCtrl.js → public/app/features/dashboard/shareModalCtrl.js

@@ -9,7 +9,7 @@ function (angular, _, require, config) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('SharePanelCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv) {
+  module.controller('ShareModalCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv) {
 
     $scope.init = function() {
       $scope.editor = { index: 0 };
@@ -19,6 +19,18 @@ function (angular, _, require, config) {
         includeTemplateVars: true
       };
 
+      $scope.tabs = [{title: 'Link', src: 'shareLink.html'}];
+
+      if ($scope.options.toPanel) {
+        $scope.modalTitle = 'Share Panel';
+        $scope.tabs.push({title: 'Embed', src: 'shareEmbed.html'});
+      } else {
+        $scope.modalTitle = 'Share Dashboard';
+        if (!$scope.dashboardMeta.isSnapshot) {
+          $scope.tabs.push({title: 'Snapshot sharing', src: 'shareSnapshot.html'});
+        }
+      }
+
       $scope.buildUrl();
     };
 

public/app/features/dashboard/shareSnapshotCtrl.js

@@ -63,6 +63,7 @@ function (angular, _) {
       // remove template queries
       _.each(dash.templating.list, function(variable) {
         variable.query = "";
+        variable.options = [];
         variable.refresh = false;
       });
 

public/app/features/dashboard/snapshotTopNavCtrl.js

@@ -17,6 +17,13 @@ function (angular, moment) {
       }
     };
 
+    $scope.shareDashboard = function() {
+      $scope.appEvent('show-modal', {
+        src: './app/features/dashboard/partials/shareModal.html',
+        scope: $scope.$new(),
+      });
+    };
+
   });
 
 });

public/app/features/panel/panelSrv.js

@@ -26,7 +26,7 @@ function (angular, _, config) {
 
       $scope.sharePanel = function() {
         $scope.appEvent('show-modal', {
-          src: './app/features/dashboard/partials/sharePanel.html',
+          src: './app/features/dashboard/partials/shareModal.html',
           scope: $scope.$new()
         });
       };

public/test/specs/sharePanelCtrl-specs.js → public/test/specs/shareModalCtrl-specs.js

@@ -1,6 +1,6 @@
 define([
   'helpers',
-  'features/dashboard/sharePanelCtrl'
+  'features/dashboard/shareModalCtrl'
 ], function(helpers) {
   'use strict';
 
@@ -16,7 +16,7 @@ define([
     beforeEach(module('grafana.controllers'));
 
     beforeEach(ctx.providePhase());
-    beforeEach(ctx.createControllerPhase('SharePanelCtrl'));
+    beforeEach(ctx.createControllerPhase('ShareModalCtrl'));
 
     describe('shareUrl with current time range and panel', function() {
 

public/test/test-main.js

@@ -132,7 +132,7 @@ require([
     'specs/graph-specs',
     'specs/graph-tooltip-specs',
     'specs/seriesOverridesCtrl-specs',
-    'specs/sharePanelCtrl-specs',
+    'specs/shareModalCtrl-specs',
     'specs/timeSrv-specs',
     'specs/templateSrv-specs',
     'specs/templateValuesSrv-specs',