IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-20 22:01:39 -04:00
parent 306358e73c
commit 245c6dbff0
10 changed files with 146 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

2
src/app/features/dashboard/dashboardNavCtrl.js
View File

@ -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
View 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>

53
src/app/features/dashboard/partials/shareModal.html
View File

@ -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
View 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>

5
src/app/features/dashboard/sharePanelCtrl.js
View File

@ -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';
};

2
src/app/features/panel/panelSrv.js
View File

@ -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()
});
};

16
src/app/features/panel/soloPanelCtrl.js
View File

@ -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";

6
src/css/less/forms.less
View File

@ -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;
}
}

6
src/test/specs/soloPanelCtrl-specs.js
View File

@ -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);
});
});
});