';
-
- if (panel.stack && panel.tooltip.value_type === 'individual') {
- value = item.datapoint[1] - item.datapoint[2];
- }
- else {
- value = item.datapoint[1];
- }
-
- value = series.formatValue(value);
-
- absoluteTime = dashboard.formatDate(item.datapoint[0], tooltipFormat);
-
- group += '
';
-
- self.renderAndShow(absoluteTime, group, pos, xMode);
- }
- // no hit
- else {
- $tooltip.detach();
- }
- };
- }
-
- return GraphTooltip;
-});
diff --git a/public/app/plugins/panel/graph/graph_tooltip.ts b/public/app/plugins/panel/graph/graph_tooltip.ts
new file mode 100644
index 00000000000..509d15b8a25
--- /dev/null
+++ b/public/app/plugins/panel/graph/graph_tooltip.ts
@@ -0,0 +1,289 @@
+import $ from 'jquery';
+import { appEvents } from 'app/core/core';
+
+export default function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
+ let self = this;
+ let ctrl = scope.ctrl;
+ let panel = ctrl.panel;
+
+ let $tooltip = $('
');
+
+ this.destroy = function() {
+ $tooltip.remove();
+ };
+
+ this.findHoverIndexFromDataPoints = function(posX, series, last) {
+ let ps = series.datapoints.pointsize;
+ let initial = last * ps;
+ let len = series.datapoints.points.length;
+ let j;
+ for (j = initial; j < len; j += ps) {
+ // Special case of a non stepped line, highlight the very last point just before a null point
+ if (
+ (!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null) ||
+ //normal case
+ series.datapoints.points[j] > posX
+ ) {
+ return Math.max(j - ps, 0) / ps;
+ }
+ }
+ return j / ps - 1;
+ };
+
+ this.findHoverIndexFromData = function(posX, series) {
+ let lower = 0;
+ let upper = series.data.length - 1;
+ let middle;
+ while (true) {
+ if (lower > upper) {
+ return Math.max(upper, 0);
+ }
+ middle = Math.floor((lower + upper) / 2);
+ if (series.data[middle][0] === posX) {
+ return middle;
+ } else if (series.data[middle][0] < posX) {
+ lower = middle + 1;
+ } else {
+ upper = middle - 1;
+ }
+ }
+ };
+
+ this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) {
+ if (xMode === 'time') {
+ innerHtml = '
' + absoluteTime + '
' + innerHtml;
+ }
+ $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY);
+ };
+
+ this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
+ let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
+ // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
+ let results: any = [[], [], []];
+
+ //now we know the current X (j) position for X and Y values
+ let last_value = 0; //needed for stacked values
+
+ let minDistance, minTime;
+
+ for (i = 0; i < seriesList.length; i++) {
+ series = seriesList[i];
+
+ if (!series.data.length || (panel.legend.hideEmpty && series.allIsNull)) {
+ // Init value so that it does not brake series sorting
+ results[0].push({ hidden: true, value: 0 });
+ continue;
+ }
+
+ if (!series.data.length || (panel.legend.hideZero && series.allIsZero)) {
+ // Init value so that it does not brake series sorting
+ results[0].push({ hidden: true, value: 0 });
+ continue;
+ }
+
+ hoverIndex = this.findHoverIndexFromData(pos.x, series);
+ hoverDistance = pos.x - series.data[hoverIndex][0];
+ pointTime = series.data[hoverIndex][0];
+
+ // Take the closest point before the cursor, or if it does not exist, the closest after
+ if (
+ !minDistance ||
+ (hoverDistance >= 0 && (hoverDistance < minDistance || minDistance < 0)) ||
+ (hoverDistance < 0 && hoverDistance > minDistance)
+ ) {
+ minDistance = hoverDistance;
+ minTime = pointTime;
+ }
+
+ if (series.stack) {
+ if (panel.tooltip.value_type === 'individual') {
+ value = series.data[hoverIndex][1];
+ } else if (!series.stack) {
+ value = series.data[hoverIndex][1];
+ } else {
+ last_value += series.data[hoverIndex][1];
+ value = last_value;
+ }
+ } else {
+ value = series.data[hoverIndex][1];
+ }
+
+ // Highlighting multiple Points depending on the plot type
+ if (series.lines.steps || series.stack) {
+ // stacked and steppedLine plots can have series with different length.
+ // Stacked series can increase its length on each new stacked serie if null points found,
+ // to speed the index search we begin always on the last found hoverIndex.
+ hoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex);
+ }
+
+ // Be sure we have a yaxis so that it does not brake series sorting
+ yaxis = 0;
+ if (series.yaxis) {
+ yaxis = series.yaxis.n;
+ }
+
+ results[yaxis].push({
+ value: value,
+ hoverIndex: hoverIndex,
+ color: series.color,
+ label: series.aliasEscaped,
+ time: pointTime,
+ distance: hoverDistance,
+ index: i,
+ });
+ }
+
+ // Contat the 3 sub-arrays
+ results = results[0].concat(results[1], results[2]);
+
+ // Time of the point closer to pointer
+ results.time = minTime;
+
+ return results;
+ };
+
+ elem.mouseleave(function() {
+ if (panel.tooltip.shared) {
+ let plot = elem.data().plot;
+ if (plot) {
+ $tooltip.detach();
+ plot.unhighlight();
+ }
+ }
+ appEvents.emit('graph-hover-clear');
+ });
+
+ elem.bind('plothover', function(event, pos, item) {
+ self.show(pos, item);
+
+ // broadcast to other graph panels that we are hovering!
+ pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height();
+ appEvents.emit('graph-hover', { pos: pos, panel: panel });
+ });
+
+ elem.bind('plotclick', function(event, pos, item) {
+ appEvents.emit('graph-click', { pos: pos, panel: panel, item: item });
+ });
+
+ this.clear = function(plot) {
+ $tooltip.detach();
+ plot.clearCrosshair();
+ plot.unhighlight();
+ };
+
+ this.show = function(pos, item) {
+ let plot = elem.data().plot;
+ let plotData = plot.getData();
+ let xAxes = plot.getXAxes();
+ let xMode = xAxes[0].options.mode;
+ let seriesList = getSeriesFn();
+ let allSeriesMode = panel.tooltip.shared;
+ let group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
+
+ // if panelRelY is defined another panel wants us to show a tooltip
+ // get pageX from position on x axis and pageY from relative position in original panel
+ if (pos.panelRelY) {
+ let pointOffset = plot.pointOffset({ x: pos.x });
+ if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > elem.width()) {
+ self.clear(plot);
+ return;
+ }
+ pos.pageX = elem.offset().left + pointOffset.left;
+ pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
+ let isVisible =
+ pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop();
+ if (!isVisible) {
+ self.clear(plot);
+ return;
+ }
+ plot.setCrosshair(pos);
+ allSeriesMode = true;
+
+ if (dashboard.sharedCrosshairModeOnly()) {
+ // if only crosshair mode we are done
+ return;
+ }
+ }
+
+ if (seriesList.length === 0) {
+ return;
+ }
+
+ if (seriesList[0].hasMsResolution) {
+ tooltipFormat = 'YYYY-MM-DD HH:mm:ss.SSS';
+ } else {
+ tooltipFormat = 'YYYY-MM-DD HH:mm:ss';
+ }
+
+ if (allSeriesMode) {
+ plot.unhighlight();
+
+ let seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
+
+ seriesHtml = '';
+
+ absoluteTime = dashboard.formatDate(seriesHoverInfo.time, tooltipFormat);
+
+ // Dynamically reorder the hovercard for the current time point if the
+ // option is enabled.
+ if (panel.tooltip.sort === 2) {
+ seriesHoverInfo.sort(function(a, b) {
+ return b.value - a.value;
+ });
+ } else if (panel.tooltip.sort === 1) {
+ seriesHoverInfo.sort(function(a, b) {
+ return a.value - b.value;
+ });
+ }
+
+ for (i = 0; i < seriesHoverInfo.length; i++) {
+ hoverInfo = seriesHoverInfo[i];
+
+ if (hoverInfo.hidden) {
+ continue;
+ }
+
+ let highlightClass = '';
+ if (item && hoverInfo.index === item.seriesIndex) {
+ highlightClass = 'graph-tooltip-list-item--highlight';
+ }
+
+ series = seriesList[hoverInfo.index];
+
+ value = series.formatValue(hoverInfo.value);
+
+ seriesHtml +=
+ '
';
+ plot.highlight(hoverInfo.index, hoverInfo.hoverIndex);
+ }
+
+ self.renderAndShow(absoluteTime, seriesHtml, pos, xMode);
+ } else if (item) {
+ // single series tooltip
+ series = seriesList[item.seriesIndex];
+ group = '
';
+ group +=
+ ' ' + series.aliasEscaped + ':
';
+
+ if (panel.stack && panel.tooltip.value_type === 'individual') {
+ value = item.datapoint[1] - item.datapoint[2];
+ } else {
+ value = item.datapoint[1];
+ }
+
+ value = series.formatValue(value);
+
+ absoluteTime = dashboard.formatDate(item.datapoint[0], tooltipFormat);
+
+ group += '
' + value + '
';
+
+ self.renderAndShow(absoluteTime, group, pos, xMode);
+ } else {
+ // no hit
+ $tooltip.detach();
+ }
+ };
+}
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index d1186ae0b1e..4dfeb75ff55 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -131,8 +131,11 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
elem.empty();
// Set min-width if side style and there is a value, otherwise remove the CSS propery
- var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
+ // Set width so it works with IE11
+ var width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
+ var ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : '';
elem.css('min-width', width);
+ elem.css('width', ieWidth);
elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
diff --git a/public/app/plugins/panel/graph/specs/tooltip_specs.ts b/public/app/plugins/panel/graph/specs/tooltip_specs.ts
index c12697eadac..7dd5ed9b8a9 100644
--- a/public/app/plugins/panel/graph/specs/tooltip_specs.ts
+++ b/public/app/plugins/panel/graph/specs/tooltip_specs.ts
@@ -11,6 +11,7 @@ var scope = {
var elem = $('
');
var dashboard = {};
+var getSeriesFn;
function describeSharedTooltip(desc, fn) {
var ctx: any = {};
@@ -30,7 +31,7 @@ function describeSharedTooltip(desc, fn) {
describe(desc, function() {
beforeEach(function() {
ctx.setupFn();
- var tooltip = new GraphTooltip(elem, dashboard, scope);
+ var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
});
@@ -39,7 +40,7 @@ function describeSharedTooltip(desc, fn) {
}
describe('findHoverIndexFromData', function() {
- var tooltip = new GraphTooltip(elem, dashboard, scope);
+ var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
var series = {
data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]],
};
diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html
index 9e8e4b404ae..4a4a6d0db9c 100644
--- a/public/app/plugins/panel/table/column_options.html
+++ b/public/app/plugins/panel/table/column_options.html
@@ -163,10 +163,10 @@
Use special variables to specify cell values:
- $__cell refers to current cell value
+ ${__cell} refers to current cell value
- $__cell_n refers to Nth column value in current row. Column indexes are started from 0. For instance,
- $__cell_1 refers to second column's value.
+ ${__cell_n} refers to Nth column value in current row. Column indexes are started from 0. For instance,
+ ${__cell_1} refers to second column's value.
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index a59350d2195..bb8f93dbe69 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -59,9 +59,8 @@ $critical: #ec2128;
$body-bg: $gray-7;
$page-bg: $gray-7;
$body-color: $gray-1;
-//$text-color: $dark-4;
$text-color: $gray-1;
-$text-color-strong: $white;
+$text-color-strong: $dark-2;
$text-color-weak: $gray-2;
$text-color-faint: $gray-4;
$text-color-emphasis: $dark-5;
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index c701cc1249e..31e5ee62d6f 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -1,8 +1,10 @@
.gicon {
line-height: 1;
display: inline-block;
- width: 1.1057142857em;
- height: 1.1057142857em;
+ //width: 1.1057142857em;
+ //height: 1.1057142857em;
+ height: 22px;
+ width: 22px;
text-align: center;
background-repeat: no-repeat;
background-position: center;
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index 47d4a926968..99033b90ff1 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -31,7 +31,6 @@
//padding: 0.5rem 1.5rem 0.5rem 0;
padding: 1rem 1rem 0.75rem 1rem;
height: 51px;
- line-height: 51px;
box-sizing: border-box;
outline: none;
background: $side-menu-bg;
@@ -61,6 +60,10 @@
display: flex;
flex-direction: column;
flex-grow: 1;
+
+ .search-item--indent {
+ margin-left: 14px;
+ }
}
.search-dropdown__col_2 {
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 8a5c3779714..e48ab0597a2 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -178,6 +178,7 @@ li.sidemenu-org-switcher {
padding: 0.4rem 1rem 0.4rem 0.65rem;
min-height: $navbarHeight;
position: relative;
+ height: $navbarHeight - 1px;
&:hover {
background: $navbarButtonBackgroundHighlight;
diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss
index dfd760753fe..bf95d453504 100644
--- a/public/sass/components/_tabbed_view.scss
+++ b/public/sass/components/_tabbed_view.scss
@@ -43,7 +43,7 @@
font-size: 120%;
}
&:hover {
- color: $white;
+ color: $text-color-strong;
}
}
diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index f44e26d5c20..fb6b6e78d1b 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -108,7 +108,8 @@
justify-content: center;
align-items: center;
width: 40px;
- padding: 0 28px 0 16px;
+ //margin-right: 8px;
+ padding: 0 4px 0 2px;
.icon-gf,
.fa {
font-size: 200%;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 871db4dfc2d..c957b6af790 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -33,7 +33,7 @@ div.flot-text {
border: $panel-border;
position: relative;
border-radius: 3px;
- height: 100%;
+ //height: 100%;
&.panel-transparent {
background-color: transparent;
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 8622eec4e99..de10808f122 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -3,6 +3,7 @@ $login-border: #8daac5;
.login {
background-position: center;
min-height: 85vh;
+ height: 80vh;
background-repeat: no-repeat;
min-width: 100%;
margin-left: 0;
@@ -290,9 +291,14 @@ select:-webkit-autofill:focus {
}
@include media-breakpoint-up(md) {
+ .login-content {
+ flex: 1 0 100%;
+ }
+
.login-branding {
width: 45%;
padding: 2rem 4rem;
+ flex-grow: 1;
.logo-icon {
width: 130px;
@@ -371,7 +377,7 @@ select:-webkit-autofill:focus {
left: 0;
right: 0;
height: 100%;
- content: "";
+ content: '';
display: block;
}