Skip to content

N
nexpie-grafana-theme
Commit e6492f7d by Torkel Ödegaard
Options

Share modal: Override UI theme via URL param for Share link, rendered panel, or… 

Share modal: Override UI theme via URL param for Share link, rendered panel, or embedded panel, Closes #1701
parent 3b737999
Showing with 99 additions and 29 deletions
CHANGELOG.md
# 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
......
docs/sources/guides/whats-new-in-v2.md
......@@ -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
......
pkg/api/index.go
......@@ -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
......
public/app/features/dashboard/partials/shareModal.html
......@@ -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="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>
<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>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
</div>
</script>
<script type="text/ng-template" id="shareLink.html">
<div class="share-modal-big-icon">
<i class="fa fa-external-link"></i>
</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">
......
public/app/features/dashboard/shareModalCtrl.js
......@@ -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;
......
public/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
public/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
public/css/grafana.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
public/css/grafana.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
public/css/less/grafana.less
......@@ -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 {
......
public/test/specs/shareModalCtrl-specs.js
......@@ -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' });
......
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