Skip to content

N
nexpie-grafana-theme
Commit 5ccd3e2f by Torkel Ödegaard
Options

Updated share panel/dash look, added copy to clipboard button (using ZeroClipboard lib), #1554

parent 4f8d2279
Showing with 79 additions and 25 deletions
src/app/components/require.config.js
...@@ -13,6 +13,7 @@ require.config({ ...@@ -13,6 +13,7 @@ require.config({
text: '../vendor/require/text', text: '../vendor/require/text',
moment: '../vendor/moment', moment: '../vendor/moment',
filesaver: '../vendor/filesaver', filesaver: '../vendor/filesaver',
ZeroClipboard: '../vendor/ZeroClipboard',
angular: '../vendor/angular/angular', angular: '../vendor/angular/angular',
'angular-route': '../vendor/angular/angular-route', 'angular-route': '../vendor/angular/angular-route',
'angular-sanitize': '../vendor/angular/angular-sanitize', 'angular-sanitize': '../vendor/angular/angular-sanitize',
...@@ -56,6 +57,10 @@ require.config({ ...@@ -56,6 +57,10 @@ require.config({
exports: 'Crypto' exports: 'Crypto'
}, },
ZeroClipboard: {
exports: 'ZeroClipboard'
},
angular: { angular: {
deps: ['jquery','config'], deps: ['jquery','config'],
exports: 'angular' exports: 'angular'
......
src/app/directives/tip.js
...@@ -63,13 +63,21 @@ function (angular, kbn) { ...@@ -63,13 +63,21 @@ function (angular, kbn) {
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : ''; var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : ''; var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
var label = '<label for="' + scope.$id + attrs.model + '" class="checkbox-label">' +
attrs.text + tip + '</label>';
var template = '<label for="' + scope.$id + attrs.model + '" class="checkbox-label">' +
attrs.text + tip + '</label>' + var template = '<input class="cr1" id="' + scope.$id + attrs.model + '" type="checkbox" ' +
'<input class="cr1" id="' + scope.$id + attrs.model + '" type="checkbox" ' +
' ng-model="' + attrs.model + '"' + ngchange + ' ng-model="' + attrs.model + '"' + ngchange +
' ng-checked="' + attrs.model + '"></input>' + ' ng-checked="' + attrs.model + '"></input>' +
' <label for="' + scope.$id + attrs.model + '" class="cr1"></label>'; ' <label for="' + scope.$id + attrs.model + '" class="cr1"></label>';
if (attrs.position === "front") {
template = label + template;
} else {
template = template + label;
}
elem.replaceWith($compile(angular.element(template))(scope)); elem.replaceWith($compile(angular.element(template))(scope));
} }
}; };
......
src/app/features/dashboard/partials/shareModal.html
...@@ -16,20 +16,37 @@ ...@@ -16,20 +16,37 @@
</div> </div>
<div class="gf-box-body"> <div class="gf-box-body">
<div class="editor-row">
<editor-opt-bool text="Current time range" model="forCurrent" change="buildUrl()"></editor-opt-bool>
<editor-opt-bool text="To this panel only" model="toPanel" change="buildUrl()"></editor-opt-bool>
<editor-opt-bool text="Include template variables" model="includeTemplateVars" change="buildUrl()"></editor-opt-bool>
</div>
<div class="editor-row" style="margin-top: 20px;"> <div class="gf-form">
<input type="text" data-share-panel-url class="input input-fluid" ng-model='shareUrl'></input> <div class="gf-form-row">
</div> <editor-checkbox text="Current time range" model="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="toPanel" change="buildUrl()"></editor-checkbox>
</div>
</div>
<div class="gf-form">
<div class="gf-form-row">
<editor-checkbox text="Include template variables" model="includeTemplateVars" change="buildUrl()"></editor-checkbox>
</div>
</div>
<div class="editor-row" style="margin-top: 20px;"> <br>
<a href="{{imageUrl}}" target="_blank">Link to rendered image</a> <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: 15px;" ng-if="toPanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image<a>
</div>
</div> </div>
</div>
</div>
</div> </div>
src/app/features/dashboard/sharePanelCtrl.js
define([ define([
'angular', 'angular',
'lodash' 'lodash',
'require',
], ],
function (angular, _) { function (angular, _, require) {
'use strict'; 'use strict';
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
...@@ -19,6 +20,7 @@ function (angular, _) { ...@@ -19,6 +20,7 @@ function (angular, _) {
$scope.includeTemplateVars = true; $scope.includeTemplateVars = true;
$scope.buildUrl(); $scope.buildUrl();
}; };
$scope.buildUrl = function() { $scope.buildUrl = function() {
...@@ -72,19 +74,21 @@ function (angular, _) { ...@@ -72,19 +74,21 @@ function (angular, _) {
$scope.shareUrl = baseUrl + "?" + paramsArray.join('&'); $scope.shareUrl = baseUrl + "?" + paramsArray.join('&');
$scope.imageUrl = $scope.shareUrl.replace('/dashboard/db/', '/render/dashboard/solo/'); $scope.imageUrl = $scope.shareUrl.replace('/dashboard/db/', '/render/dashboard/solo/');
$scope.imageUrl += '&width=1000'; $scope.imageUrl += '&width=1000';
$scope.imageUrl += '&height=500'; $scope.imageUrl += '&height=500';
$timeout(function() {
var input = $element.find('[data-share-panel-url]');
input.focus();
input.select();
}, 10);
}; };
$scope.init(); $scope.init();
}); });
module.directive('clipboardButton',function() {
return function(scope, elem) {
require(['ZeroClipboard'], function(ZeroClipboard) {
new ZeroClipboard(elem[0]);
});
};
});
}); });
src/css/less/forms.less
...@@ -27,4 +27,24 @@ input[type="checkbox"]:checked+label { ...@@ -27,4 +27,24 @@ input[type="checkbox"]:checked+label {
background: url(@checkboxImageUrl) 0px -18px no-repeat; background: url(@checkboxImageUrl) 0px -18px no-repeat;
} }
.gf-form {
padding-bottom: 10px;
.checkbox-label {
padding-left: 7px;
display: inline;
}
}
.gf-fluid-input {
border: none;
display: block;
overflow: hidden;
padding-right: 10px;
input[type=text] {
width: 100%;
padding: 5px 6px;
height: 100%;
box-sizing: border-box;
}
}
vendor/phantomjs/render.js
...@@ -31,7 +31,7 @@ page.open(params.url, function (status) { ...@@ -31,7 +31,7 @@ page.open(params.url, function (status) {
return $('canvas').length > 0; return $('canvas').length > 0;
}); });
if (canvas || tries === 10000) { if (canvas || tries === 10) {
page.render(params.png); page.render(params.png);
phantom.exit(); phantom.exit();
} }
......
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