Skip to content

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

feat(panel): working on panel help text and unifying panel links, panel errors,… 

feat(panel): working on panel help text and unifying panel links, panel errors, and panel help into a single panel feature, #4079 , #6847
parent b9043c91
Showing with 54 additions and 45 deletions
public/app/features/panel/panel_ctrl.ts
...@@ -245,7 +245,20 @@ export class PanelCtrl { ...@@ -245,7 +245,20 @@ export class PanelCtrl {
}); });
} }
getPanelInfoContent() { getInfoMode() {
if (this.error) {
return 'error';
}
if (!!this.panel.description) {
return 'info';
}
if (this.panel.links.length > 0) {
return 'links';
}
return '';
}
getInfoContent() {
var markdown = this.error || this.panel.description; var markdown = this.error || this.panel.description;
var linkSrv = this.$injector.get('linkSrv'); var linkSrv = this.$injector.get('linkSrv');
var templateSrv = this.$injector.get('templateSrv'); var templateSrv = this.$injector.get('templateSrv');
...@@ -276,7 +289,7 @@ export class PanelCtrl { ...@@ -276,7 +289,7 @@ export class PanelCtrl {
scope: modalScope scope: modalScope
}); });
} else { } else {
modalScope.html = this.getPanelInfoContent(); modalScope.html = this.getInfoContent();
this.publishAppEvent('show-modal', { this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/panel_info.html', src: 'public/app/features/dashboard/partials/panel_info.html',
scope: modalScope scope: modalScope
......
public/app/features/panel/panel_directive.ts
...@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) {
scope: { ctrl: "=" }, scope: { ctrl: "=" },
link: function(scope, elem) { link: function(scope, elem) {
var panelContainer = elem.find('.panel-container'); var panelContainer = elem.find('.panel-container');
var cornerInfoElem = elem.find('.panel-info-corner'); var cornerInfoElem = elem.find('.panel-info-corner')[0];
var ctrl = scope.ctrl; var ctrl = scope.ctrl;
var infoDrop; var infoDrop;
...@@ -142,26 +142,28 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -142,26 +142,28 @@ module.directive('grafanaPanel', function($rootScope) {
} }
}, scope); }, scope);
// panel corner info function updatePanelCornerInfo() {
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], function() { var cornerMode = ctrl.getInfoMode();
cornerInfoElem.toggleClass('panel-info-corner--has-desc', !!ctrl.panel.description); cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
cornerInfoElem.toggleClass('panel-info-corner--has-error', !!ctrl.error);
if (ctrl.error || ctrl.panel.description) { if (cornerMode) {
if (infoDrop) { if (infoDrop) {
infoDrop.destroy(); infoDrop.destroy();
} }
infoDrop = new Drop({ infoDrop = new Drop({
target: cornerInfoElem[0], target: cornerInfoElem,
content: ctrl.getPanelInfoContent.bind(ctrl), content: ctrl.getInfoContent.bind(ctrl),
position: 'right middle', position: 'right middle',
classes: ctrl.error ? 'drop-error' : 'drop-help', classes: ctrl.error ? 'drop-error' : 'drop-help',
openOn: 'hover', openOn: 'hover',
hoverOpenDelay: 400, hoverOpenDelay: 400,
}); });
} }
}); }
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
elem.on('mouseenter', mouseEnter); elem.on('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave); elem.on('mouseleave', mouseLeave);
......
public/app/features/panel/panel_menu.js
...@@ -9,28 +9,14 @@ function (angular, $, _, Tether) { ...@@ -9,28 +9,14 @@ function (angular, $, _, Tether) {
angular angular
.module('grafana.directives') .module('grafana.directives')
.directive('panelMenu', function($compile, linkSrv) { .directive('panelMenu', function($compile) {
var linkTemplate = var linkTemplate =
'<span class="panel-title drag-handle pointer">' + '<span class="panel-title drag-handle pointer">' +
'<span class="icon-gf panel-alert-icon"></span>' + '<span class="icon-gf panel-alert-icon"></span>' +
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' + '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
'<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
'<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' + '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
'</span>'; '</span>';
function createExternalLinkMenu(ctrl) {
var template = '<div class="panel-menu small">';
template += '<div class="panel-menu-row">';
if (ctrl.panel.links) {
_.each(ctrl.panel.links, function(link) {
var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
});
}
return template;
}
function createMenuTemplate(ctrl) { function createMenuTemplate(ctrl) {
var template = '<div class="panel-menu small">'; var template = '<div class="panel-menu small">';
...@@ -76,7 +62,6 @@ function (angular, $, _, Tether) { ...@@ -76,7 +62,6 @@ function (angular, $, _, Tether) {
restrict: 'A', restrict: 'A',
link: function($scope, elem) { link: function($scope, elem) {
var $link = $(linkTemplate); var $link = $(linkTemplate);
var $panelLinksBtn = $link.find(".panel-links-btn");
var $panelContainer = elem.parents(".panel-container"); var $panelContainer = elem.parents(".panel-container");
var menuScope = null; var menuScope = null;
var ctrl = $scope.ctrl; var ctrl = $scope.ctrl;
...@@ -86,12 +71,6 @@ function (angular, $, _, Tether) { ...@@ -86,12 +71,6 @@ function (angular, $, _, Tether) {
elem.append($link); elem.append($link);
$scope.$watchCollection('ctrl.panel.links', function(newValue) {
var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== '';
// cannot use toggle here, only works for attached elements
$panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
});
function dismiss(time, force) { function dismiss(time, force) {
clearTimeout(timeout); clearTimeout(timeout);
timeout = null; timeout = null;
...@@ -132,11 +111,7 @@ function (angular, $, _, Tether) { ...@@ -132,11 +111,7 @@ function (angular, $, _, Tether) {
} }
var menuTemplate; var menuTemplate;
if ($(e.target).hasClass('fa-external-link')) { menuTemplate = createMenuTemplate(ctrl);
menuTemplate = createExternalLinkMenu(ctrl);
} else {
menuTemplate = createMenuTemplate(ctrl);
}
$menu = $(menuTemplate); $menu = $(menuTemplate);
$menu.mouseleave(function() { $menu.mouseleave(function() {
......
public/sass/components/_drop.scss
...@@ -32,6 +32,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); ...@@ -32,6 +32,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
ul { ul {
padding-left: $spacer; padding-left: $spacer;
} }
a {
text-decoration: underline;
}
} }
.drop-hide-out-of-bounds { .drop-hide-out-of-bounds {
......
public/sass/pages/_dashboard.scss
...@@ -95,15 +95,19 @@ div.flot-text { ...@@ -95,15 +95,19 @@ div.flot-text {
position: absolute; position: absolute;
display: none; display: none;
left: 0; left: 0;
padding: 0px 17px 6px 5px; width: 27px;
height: 27px;
top: 0; top: 0;
z-index: 10; z-index: 10;
i {
.fa {
position: relative; position: relative;
top: -2px; top: -2px;
left: -5px;
font-size: 90%;
} }
&--has-desc { &--info {
display: block; display: block;
background: $blue-dark; background: $blue-dark;
.fa:before { .fa:before {
...@@ -111,7 +115,18 @@ div.flot-text { ...@@ -111,7 +115,18 @@ div.flot-text {
} }
} }
&--has-error { &--links {
display: block;
background: $blue-dark;
.fa {
left: -3px;
}
.fa:before {
content: "\f08e";
}
}
&--error {
display: block; display: block;
background: $errorBackground !important; background: $errorBackground !important;
.fa:before { .fa:before {
...@@ -124,9 +139,9 @@ div.flot-text { ...@@ -124,9 +139,9 @@ div.flot-text {
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
border-left: 31px solid transparent; border-left: 27px solid transparent;
border-right: 30px solid transparent; border-right: 0px solid transparent;
border-bottom: 31px solid $panel-bg; border-bottom: 26px solid $panel-bg;
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
......
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