Commit ac9ae52c by Torkel Ödegaard

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
......@@ -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 linkSrv = this.$injector.get('linkSrv');
var templateSrv = this.$injector.get('templateSrv');
......@@ -276,7 +289,7 @@ export class PanelCtrl {
scope: modalScope
});
} else {
modalScope.html = this.getPanelInfoContent();
modalScope.html = this.getInfoContent();
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/panel_info.html',
scope: modalScope
......
......@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) {
scope: { ctrl: "=" },
link: function(scope, elem) {
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 infoDrop;
......@@ -142,26 +142,28 @@ module.directive('grafanaPanel', function($rootScope) {
}
}, scope);
// panel corner info
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], function() {
cornerInfoElem.toggleClass('panel-info-corner--has-desc', !!ctrl.panel.description);
cornerInfoElem.toggleClass('panel-info-corner--has-error', !!ctrl.error);
function updatePanelCornerInfo() {
var cornerMode = ctrl.getInfoMode();
cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
if (ctrl.error || ctrl.panel.description) {
if (cornerMode) {
if (infoDrop) {
infoDrop.destroy();
}
infoDrop = new Drop({
target: cornerInfoElem[0],
content: ctrl.getPanelInfoContent.bind(ctrl),
target: cornerInfoElem,
content: ctrl.getInfoContent.bind(ctrl),
position: 'right middle',
classes: ctrl.error ? 'drop-error' : 'drop-help',
openOn: 'hover',
hoverOpenDelay: 400,
});
}
});
}
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
elem.on('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave);
......
......@@ -9,28 +9,14 @@ function (angular, $, _, Tether) {
angular
.module('grafana.directives')
.directive('panelMenu', function($compile, linkSrv) {
.directive('panelMenu', function($compile) {
var linkTemplate =
'<span class="panel-title drag-handle pointer">' +
'<span class="icon-gf panel-alert-icon"></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>';
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) {
var template = '<div class="panel-menu small">';
......@@ -76,7 +62,6 @@ function (angular, $, _, Tether) {
restrict: 'A',
link: function($scope, elem) {
var $link = $(linkTemplate);
var $panelLinksBtn = $link.find(".panel-links-btn");
var $panelContainer = elem.parents(".panel-container");
var menuScope = null;
var ctrl = $scope.ctrl;
......@@ -86,12 +71,6 @@ function (angular, $, _, Tether) {
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) {
clearTimeout(timeout);
timeout = null;
......@@ -132,11 +111,7 @@ function (angular, $, _, Tether) {
}
var menuTemplate;
if ($(e.target).hasClass('fa-external-link')) {
menuTemplate = createExternalLinkMenu(ctrl);
} else {
menuTemplate = createMenuTemplate(ctrl);
}
$menu = $(menuTemplate);
$menu.mouseleave(function() {
......
......@@ -32,6 +32,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
ul {
padding-left: $spacer;
}
a {
text-decoration: underline;
}
}
.drop-hide-out-of-bounds {
......
......@@ -95,15 +95,19 @@ div.flot-text {
position: absolute;
display: none;
left: 0;
padding: 0px 17px 6px 5px;
width: 27px;
height: 27px;
top: 0;
z-index: 10;
i {
.fa {
position: relative;
top: -2px;
left: -5px;
font-size: 90%;
}
&--has-desc {
&--info {
display: block;
background: $blue-dark;
.fa:before {
......@@ -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;
background: $errorBackground !important;
.fa:before {
......@@ -124,9 +139,9 @@ div.flot-text {
width: 0;
height: 0;
position: absolute;
border-left: 31px solid transparent;
border-right: 30px solid transparent;
border-bottom: 31px solid $panel-bg;
border-left: 27px solid transparent;
border-right: 0px solid transparent;
border-bottom: 26px solid $panel-bg;
left: 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