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 modal: Override UI theme via URL param for Share link, rendered panel, or embedded panel, Closes #1701

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-04-02 09:21:38 +02:00
parent 3b737999d6
commit e6492f7db9
11 changed files with 104 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

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

2
docs/sources/guides/whats-new-in-v2.md
View File

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

5
pkg/api/index.go
View File

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

81
public/app/features/dashboard/partials/shareModal.html
View File

@ -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>
<p>
<em>
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</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="shareLinkOptions.html">
<div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="section">
<div class="tight-form">
<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>
</script>
<script type="text/ng-template" id="shareLink.html">
<h5>Link options</h5>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
</div>
<div class="share-modal-big-icon">
<i class="fa fa-external-link"></i>
</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 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 style="margin: 10px 0">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl">
<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">

8
public/app/features/dashboard/shareModalCtrl.js
View File

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

2
public/css/bootstrap.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/css/bootstrap.light.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/css/grafana.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/css/grafana.light.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
public/css/less/grafana.less
View File

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

14
public/test/specs/shareModalCtrl-specs.js
View File

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