Share modal: Override UI theme via URL param for Share link, rendered panel, or embedded panel, Closes #1701

CHANGELOG.md

@@ -1,5 +1,8 @@
 # 2.0.0-RC1  (unreleased)
 
+**Enhancements**
+- [Issue #1701](https://github.com/grafana/grafana/issues/1701). Share modal: Override UI theme via URL param for Share link, rendered panel, or embedded panel
+
 **FIxes**
 - [Issue #1703](https://github.com/grafana/grafana/issues/1703). Unsaved changes: Do not show for users with role `Viewer`
 - [Issue #1675](https://github.com/grafana/grafana/issues/1675). Data source proxy: Fixed issue with Gzip enabled and data source proxy

docs/sources/guides/whats-new-in-v2.md

@@ -68,7 +68,7 @@ You can embed a single panel on another web page using the panel share dialog. B
 with a graph panel (taken from dashoard snapshot at [snapshot.raintank.io](http://snapshot.raintank.io). Try
 hovering or zooming on the panel below!
 
-<iframe src="http://snapshot.raintank.io/dashboard/solo/snapshot/IQ7iZF00sHalq0Ffjv6OyclJSA1YHYV1?panelId=4&fullscreen&from=1427385145990&to=1427388745990" width="650" height="300" frameborder="0"></iframe>
+<iframe src="http://snapshot.raintank.io/dashboard/solo/snapshot/IQ7iZF00sHalq0Ffjv6OyclJSA1YHYV1?panelId=4&fullscreen" width="650" height="300" frameborder="0"></iframe>
 
 ## New dashboard top header
 

pkg/api/index.go

@@ -28,6 +28,11 @@ func setIndexViewData(c *middleware.Context) error {
 		currentUser.Name = currentUser.Login
 	}
 
+	themeUrlParam := c.Query("theme")
+	if themeUrlParam == "light" {
+		currentUser.LightTheme = true
+	}
+
 	c.Data["User"] = currentUser
 	c.Data["Settings"] = settings
 	c.Data["AppUrl"] = setting.AppUrl

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

@@ -16,19 +16,25 @@
 	</div>
 
 	<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
-		<ng-include src="tab.src"></ng-include>
+		<div ng-include src="tab.src" class="share-modal-body"></div>
 	</div>
 
 </div>
 
 <script type="text/ng-template" id="shareEmbed.html">
-	<h5>IFrame embedding</h5>
+	<div class="share-modal-big-icon">
-	<p>
+		<i class="fa fa-code"></i>
-		<em>
+	</div>
+
+	<div class="share-snapshot-header">
+		<p class="share-snapshot-info-text">
 			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>
-	</p>
+	</div>
+
+	<div ng-include src="'shareLinkOptions.html'"></div>
+
 	<div class="gf-form">
 		<div class="gf-form-row">
 			<span class="gf-fluid-input">
@@ -39,19 +45,54 @@
 	</div>
 </script>
 
-<script type="text/ng-template" id="shareLink.html">
+<script type="text/ng-template" id="shareLinkOptions.html">
-	<h5>Link options</h5>
+	<div class="editor-row" style="margin: 11px 20px 33px 20px">
-	<div class="gf-form">
+		<div class="section">
-		<div class="gf-form-row">
+			<div class="tight-form">
-			<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 170px;">
+						<label class="checkbox-label" for="options.forCurrent">Current time range</label>
+					</li>
+					<li class="tight-form-item last">
+						<input class="cr1" id="options.forCurrent" type="checkbox" ng-model="options.forCurrent" ng-checked="options.forCurrent" ng-change="buildUrl()">
+						<label for="options.forCurrent" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 170px">
+						<label class="checkbox-label" for="options.includeTemplateVars">Include template variables</label>
+					</li>
+					<li class="tight-form-item last">
+						<input class="cr1" id="options.includeTemplateVars" type="checkbox" ng-model="options.includeTemplateVars" ng-checked="options.includeTemplateVars" ng-change="buildUrl()">
+						<label for="options.includeTemplateVars" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 170px">
+						Theme
+					</li>
+					<li>
+						<select class="input-small tight-form-input last" style="width: 211px" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
-	<div class="gf-form">
+</script>
-		<div class="gf-form-row">
+
-			<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
+<script type="text/ng-template" id="shareLink.html">
-		</div>
+	<div class="share-modal-big-icon">
+		<i class="fa fa-external-link"></i>
 	</div>
-	<br>
+
+	<div ng-include src="'shareLinkOptions.html'"></div>
 	<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>
@@ -66,8 +107,8 @@
 </script>
 
 <script type="text/ng-template" id="shareSnapshot.html">
-	<div class="share-snapshot ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl">
+	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl">
-		<div style="margin: 10px 0">
+		<div class="share-modal-big-icon">
 			<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
 			<i ng-if="!loading" class="gf-icon gf-icon-snap-multi"></i>
 		</div>
@@ -91,7 +132,7 @@
 			</p>
 		</div>
 
-		<div class="editor-row" style="margin: 11px 20px 33px 20px">
+		<div class="editor-row share-modal-options" style="">
 			<div class="section" ng-if="step === 1">
 				<div class="tight-form">
 					<ul class="tight-form-list">

public/app/features/dashboard/shareModalCtrl.js

@@ -10,10 +10,10 @@ function (angular, _, require, config) {
   var module = angular.module('grafana.controllers');
 
   module.controller('ShareModalCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv) {
+    $scope.options = { forCurrent: true, includeTemplateVars: true, theme: 'current' };
+    $scope.editor = { index: 0 };
 
     $scope.init = function() {
-      $scope.editor = { index: 0 };
-      $scope.options = { forCurrent: true, includeTemplateVars: true };
       $scope.modeSharePanel = $scope.panel ? true : false;
 
       $scope.tabs = [{title: 'Link', src: 'shareLink.html'}];
@@ -62,6 +62,10 @@ function (angular, _, require, config) {
         delete params.to;
       }
 
+      if ($scope.options.theme !== 'current') {
+        params.theme = $scope.options.theme;
+      }
+
       if ($scope.modeSharePanel) {
         params.panelId = $scope.panel.id;
         params.fullscreen = true;

public/css/less/grafana.less

@@ -296,15 +296,22 @@
   }
 }
 
-.share-snapshot {
+.share-modal-body {
   text-align: center;
+  padding: 10px 0;
 
-  .gf-icon-snap-multi {
+  .tight-form {
-    font-size: 70px;
+    text-align: left;
   }
 
-  .fa-spinner {
+  .share-modal-options {
-    font-size: 70px;
+    margin: 11px 20px 33px 20px;
+  }
+
+  .share-modal-big-icon {
+    .fa, .gf-icon {
+      font-size: 70px;
+    }
   }
 
   .share-snapshot-info-text {

public/test/specs/shareModalCtrl-specs.js

@@ -41,7 +41,7 @@ define([
 
       it('should remove panel id when no panel in scope', function() {
         ctx.$location.path('/test');
-        ctx.scope.options = { forCurrent: true };
+        ctx.scope.options.forCurrent = true;
         ctx.scope.panel = null;
         setTime({ from: 'now-1h', to: 'now' });
 
@@ -49,9 +49,19 @@ define([
         expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now');
       });
 
+      it('should add theme when specified', function() {
+        ctx.$location.path('/test');
+        ctx.scope.options.theme = 'light';
+        ctx.scope.panel = null;
+        setTime({ from: 'now-1h', to: 'now' });
+
+        ctx.scope.init();
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now&theme=light');
+      });
+
       it('should include template variables in url', function() {
         ctx.$location.path('/test');
-        ctx.scope.options = { includeTemplateVars: true, forCurrent: true };
+        ctx.scope.options.includeTemplateVars = true;
 
         ctx.templateSrv.variables = [{ name: 'app', current: {text: 'mupp' }}, {name: 'server', current: {text: 'srv-01'}}];
         setTime({ from: 'now-1h', to: 'now' });