Skip to content

N
nexpie-grafana-theme
Commit 7db37032 by Torkel Ödegaard
Options

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
parent 36a94896
Showing with 117 additions and 29 deletions
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,39 +15,34 @@
</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>
<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
</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>
</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>
<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 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>
src/app/features/dashboard/partials/sharePanel.html 0 → 100644
<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);
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment