mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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
This commit is contained in:
parent
306358e73c
commit
245c6dbff0
@ -1,6 +1,7 @@
|
||||
# 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
|
||||
|
@ -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(),
|
||||
});
|
||||
};
|
||||
|
48
src/app/features/dashboard/partials/shareDashboard.html
Normal file
48
src/app/features/dashboard/partials/shareDashboard.html
Normal file
@ -0,0 +1,48 @@
|
||||
<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
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['Link']" 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>
|
@ -1,53 +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
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['Link']" 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">
|
||||
|
||||
<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>
|
||||
</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>
|
65
src/app/features/dashboard/partials/sharePanel.html
Normal file
65
src/app/features/dashboard/partials/sharePanel.html
Normal file
@ -0,0 +1,65 @@
|
||||
<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>
|
@ -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';
|
||||
};
|
||||
|
@ -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()
|
||||
});
|
||||
};
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user