Share Panel: The share modal now has an embed option, gives you an iframe that…

Share Panel: The share modal now has an embed option, gives you an iframe that you can use to embedd a single graph on another web site, #1622

CHANGELOG.md

 # 2.0.0 (unreleased)
 
 **New features**
+- [Issue #1622](https://github.com/grafana/grafana/issues/1622). Share Panel: The share modal now has an embed option, gives you an iframe that you can use to embedd a single graph on another web site
 - [Issue #718](https://github.com/grafana/grafana/issues/718).   Dashboard: When saving a dashboard and another user has made changes inbetween the user is promted with a warning if he really wants to overwrite the other's changes
 - [Issue #1331](https://github.com/grafana/grafana/issues/1331). Graph & Singlestat: New axis/unit format selector and more units (kbytes, Joule, Watt, eV), and new design for graph axis & grid tab and single stat options tab views
 - [Issue #1241](https://github.com/grafana/grafana/issues/1242). Timepicker: New option in timepicker (under dashboard settings), to change ``now`` to be for example ``now-1m``, usefull when you want to ignore last minute because it contains incomplete data

src/app/features/dashboard/dashboardNavCtrl.js

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

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

@@ -15,19 +15,13 @@
 		</button>
 	</div>
 
-	<div class="gf-box-body">
-
+	<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" ng-if="panel">
-				<div class="gf-form-row">
-					<editor-checkbox text="This panel only" model="options.toPanel" 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>
@@ -45,9 +39,10 @@
 			<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>
+					<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
+				</div>
 			</div>
 		</div>
-
 	</div>
+
 </div>

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

+<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>

src/app/features/dashboard/sharePanelCtrl.js

@@ -72,8 +72,11 @@ function (angular, _, require, config) {
       });
 
       $scope.shareUrl = baseUrl + "?" + paramsArray.join('&');
-      $scope.imageUrl = $scope.shareUrl.replace('/dashboard/db/', '/render/dashboard/solo/');
 
+      $scope.soloUrl = $scope.shareUrl.replace('/dashboard/db/', '/dashboard/solo/');
+      $scope.iframeHtml = '<iframe src="' + $scope.soloUrl + '" width="450" height="200" frameborder="0"></iframe>';
+
+      $scope.imageUrl = $scope.shareUrl.replace('/dashboard/db/', '/render/dashboard/solo/');
       $scope.imageUrl += '&width=1000';
       $scope.imageUrl += '&height=500';
     };

src/app/features/panel/panelSrv.js

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

src/app/features/panel/soloPanelCtrl.js

@@ -7,10 +7,22 @@ function (angular, $) {
 
   var module = angular.module('grafana.routes');
 
-  module.controller('SoloPanelCtrl', function($scope, backendSrv, $routeParams, dashboardSrv, timeSrv, $location, templateValuesSrv) {
+  module.controller('SoloPanelCtrl',
+    function(
+      $scope,
+      backendSrv,
+      $routeParams,
+      dashboardSrv,
+      timeSrv,
+      $location,
+      templateValuesSrv,
+      contextSrv) {
+
     var panelId;
 
     $scope.init = function() {
+      contextSrv.sidemenu = false;
+
       var params = $location.search();
       panelId = parseInt(params.panelId);
 
@@ -26,7 +38,7 @@ function (angular, $) {
       $scope.dashboard = dashboardSrv.create(dashboard.model);
 
       $scope.row = {
-        height: $(window).height() + 'px',
+        height: ($(window).height() - 10) + 'px',
       };
 
       $scope.test = "Hej";

src/css/less/forms.less

@@ -46,5 +46,11 @@ input[type="checkbox"]:checked+label {
     height: 100%;
     box-sizing: border-box;
   }
+  textarea {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
 }
 

src/test/specs/soloPanelCtrl-specs.js

@@ -10,11 +10,13 @@ define([
     var backendSrv = {};
     var routeParams = {};
     var search = {};
+    var contextSrv = {};
 
     beforeEach(module('grafana.routes'));
     beforeEach(module('grafana.services'));
     beforeEach(ctx.providePhase({
       $routeParams: routeParams,
+      contextSrv: contextSrv,
       $location: {
         search: function() {
           return search;
@@ -57,6 +59,10 @@ define([
         expect(ctx.scope.panel.some).to.be('prop');
       });
 
+      it('should hide sidemenu', function() {
+        expect(contextSrv.sidemenu).to.be(false);
+      });
+
     });
 
   });