From a6fa01f89b6b21dfedc73b84da2995b3e5da0067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Sep 2014 14:02:18 +0200 Subject: [PATCH 01/45] POC of panel edit menu --- src/app/directives/grafanaPanel.js | 81 +++++++++++++++++++----------- src/css/less/panel.less | 31 ++++++------ 2 files changed, 70 insertions(+), 42 deletions(-) diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index 5f56fd67b35..ec6048609ea 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -6,6 +6,49 @@ define([ function (angular, $) { 'use strict'; + angular + .module('grafana.directives') + .directive('panelTitle', function($compile) { + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var menuTemplate = '
' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '' + + ' ' + + '
'; + + return { + restrict: 'A', + link: function($scope, elem) { + var $link = $(linkTemplate); + elem.append($link); + + $link.click(function() { + var $menu = $(menuTemplate); + var menuScope = $scope.$new(); + + elem.append($menu); + $compile($menu.contents())(menuScope); + + setTimeout(function() { + $menu.remove(); + menuScope.$destroy(); + $link.show(); + }, 8000); + + $link.hide(); + }); + + $compile(elem.contents())($scope); + } + }; + + }); + angular .module('grafana.directives') .directive('grafanaPanel', function($compile, $parse) { @@ -15,37 +58,19 @@ function (angular, $) { var panelHeader = '
'+ - '
' + - '
' + - '' + - '' + - '' + - '' + + '' + + '' + + '' + '' + + '' + - '' + - '' + - '' + + '' + + '' + + '' + - '' + - '' + - '{{panel.title | interpolateTemplateVars}}' + - '' + - ''+ - - '
'+ - '
\n'+ + '
' + + '
'+ ''; return { diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 19e5a077872..85f65cd5f16 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -28,23 +28,10 @@ z-index: 800; } -.panel div.panel-extra div.panel-extra-container { - margin-right: -10px; - margin-top: 3px; +.panel-header { text-align: center; - ul { - text-align: left; - } } -.panel div.panel-extra { - font-size: 0.9em; - margin-bottom: 0px; -} - -.panel div.panel-extra .extra { - float:right !important; -} .panel-error { color: @white; @@ -69,3 +56,19 @@ bottom: 0; } +.panel-menu { + display: inline-block; + vertical-align: top; + a { + font-size: 1.2em; + float: left; + padding: 2px 10px; + border-top: 1px solid black; + border-right: 1px solid black; + border-bottom: 1px solid black; + background: @grayDark; + } + a:first-child { + border-left: 1px solid black; + } +} From e78c48620fc4a9e0f6d63fae05205afd1fc50a96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Sep 2014 13:24:15 +0200 Subject: [PATCH 02/45] Trying to improve yaxis precision --- src/app/components/kbn.js | 76 ++++-------------------------- src/app/components/timeSeries.js | 16 +++---- src/app/directives/grafanaGraph.js | 22 ++++++--- 3 files changed, 33 insertions(+), 81 deletions(-) diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 7c61b22c83b..e41722747fb 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -7,6 +7,7 @@ function($, _, moment) { 'use strict'; var kbn = {}; + kbn.formatFunctions = {}; kbn.round_interval = function(interval) { switch (true) { @@ -497,52 +498,7 @@ function($, _, moment) { return (size.toFixed(decimals) + ext); }; - kbn.getFormatFunction = function(formatName, decimals) { - switch(formatName) { - case 'short': - return function(val) { - return kbn.shortFormat(val, decimals); - }; - case 'bytes': - return function(val) { - return kbn.byteFormat(val, decimals); - }; - case 'bits': - return function(val) { - return kbn.bitFormat(val, decimals); - }; - case 'bps': - return function(val) { - return kbn.bpsFormat(val, decimals); - }; - case 's': - return function(val) { - return kbn.sFormat(val, decimals); - }; - case 'ms': - return function(val) { - return kbn.msFormat(val, decimals); - }; - case 'µs': - return function(val) { - return kbn.microsFormat(val, decimals); - }; - case 'ns': - return function(val) { - return kbn.nanosFormat(val, decimals); - }; - case 'percent': - return function(val, axis) { - return kbn.noneFormat(val, axis ? axis.tickDecimals : null) + ' %'; - }; - default: - return function(val, axis) { - return kbn.noneFormat(val, axis ? axis.tickDecimals : null); - }; - } - }; - - kbn.noneFormat = function(value, decimals) { + kbn.toFixed = function(value, decimals) { var factor = decimals ? Math.pow(10, decimals) : 1; var formatted = String(Math.round(value * factor) / factor); @@ -553,7 +509,6 @@ function($, _, moment) { // If tickDecimals was specified, ensure that we have exactly that // much precision; otherwise default to the value's own precision. - if (decimals != null) { var decimalPos = formatted.indexOf("."); var precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1; @@ -565,17 +520,13 @@ function($, _, moment) { return formatted; }; - kbn.msFormat = function(size, decimals) { - // Less than 1 milli, downscale to micro - if (size !== 0 && Math.abs(size) < 1) { - return kbn.microsFormat(size * 1000, decimals); - } - else if (Math.abs(size) < 1000) { - return size.toFixed(decimals) + " ms"; + kbn.formatFunctions.ms = function(size, decimals) { + if (Math.abs(size) < 1000) { + return kbn.toFixed(size, decimals) + " ms"; } // Less than 1 min else if (Math.abs(size) < 60000) { - return (size / 1000).toFixed(decimals) + " s"; + return kbn.toFixed(size / 1000, decimals) + " s"; } // Less than 1 hour, devide in minutes else if (Math.abs(size) < 3600000) { @@ -594,12 +545,7 @@ function($, _, moment) { }; kbn.sFormat = function(size, decimals) { - // Less than 1 sec, downscale to milli - if (size !== 0 && Math.abs(size) < 1) { - return kbn.msFormat(size * 1000, decimals); - } - // Less than 10 min, use seconds - else if (Math.abs(size) < 600) { + if (Math.abs(size) < 600) { return size.toFixed(decimals) + " s"; } // Less than 1 hour, devide in minutes @@ -623,12 +569,8 @@ function($, _, moment) { }; kbn.microsFormat = function(size, decimals) { - // Less than 1 micro, downscale to nano - if (size !== 0 && Math.abs(size) < 1) { - return kbn.nanosFormat(size * 1000, decimals); - } - else if (Math.abs(size) < 1000) { - return size.toFixed(decimals) + " µs"; + if (Math.abs(size) < 1000) { + return kbn.toFixed(size, decimals) + " µs"; } else if (Math.abs(size) < 1000000) { return (size / 1000).toFixed(decimals) + " ms"; diff --git a/src/app/components/timeSeries.js b/src/app/components/timeSeries.js index 4c58c211cc3..576e8be8e8a 100644 --- a/src/app/components/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -100,21 +100,21 @@ function (_, kbn) { } if (result.length) { - this.info.avg = (this.info.total / result.length); this.info.current = result[result.length-1][1]; - - var formater = kbn.getFormatFunction(yFormats[this.yaxis - 1], 2); - this.info.avg = this.info.avg != null ? formater(this.info.avg) : null; - this.info.current = this.info.current != null ? formater(this.info.current) : null; - this.info.min = this.info.min != null ? formater(this.info.min) : null; - this.info.max = this.info.max != null ? formater(this.info.max) : null; - this.info.total = this.info.total != null ? formater(this.info.total) : null; } return result; }; + TimeSeries.prototype.updateLegendValues = function(formater, decimals) { + this.info.avg = this.info.avg != null ? formater(this.info.avg, decimals) : null; + this.info.current = this.info.current != null ? formater(this.info.current, decimals) : null; + this.info.min = this.info.min != null ? formater(this.info.min, decimals) : null; + this.info.max = this.info.max != null ? formater(this.info.max, decimals) : null; + this.info.total = this.info.total != null ? formater(this.info.total, decimals) : null; + }; + return TimeSeries; }); diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index ee6b0fb7dd7..53edcf1bc13 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -88,6 +88,18 @@ function (angular, $, kbn, moment, _) { } } + function updateLegendValues(plot) { + var yaxis = plot.getYAxes(); + console.log('drawSeries', yaxis); + + for (var i = 0; i < data.length; i++) { + var series = data[i]; + var formater = kbn.formatFunctions[scope.panel.y_formats[series.yaxis - 1]]; + series.updateLegendValues(formater, yaxis[series.yaxis - 1].tickDecimals); + } + + } + // Function for rendering panel function render_panel() { if (shouldAbortRender()) { @@ -110,11 +122,7 @@ function (angular, $, kbn, moment, _) { // Populate element var options = { - hooks: { - drawSeries: [function() { - console.log('drawSeries', arguments); - }] - }, + hooks: { draw: [updateLegendValues] }, legend: { show: false }, series: { stackpercent: panel.stack ? panel.percentage : false, @@ -318,7 +326,9 @@ function (angular, $, kbn, moment, _) { } function configureAxisMode(axis, format) { - axis.tickFormatter = kbn.getFormatFunction(format, 1); + axis.tickFormatter = function(val, axis) { + return kbn.formatFunctions[format](val, axis.tickDecimals); + }; } function time_format(interval, ticks, min, max) { From 010baad5327afb67909be3aee81400ac12416fc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Sep 2014 12:54:02 +0200 Subject: [PATCH 03/45] Dashboard: fixed init of editable setting, #837 --- src/app/services/dashboard/dashboardSrv.js | 2 +- src/test/specs/dashboardSrv-specs.js | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index c6b386917ba..17313a207d5 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -25,7 +25,7 @@ function (angular, $, kbn, _, moment) { this.tags = data.tags || []; this.style = data.style || "dark"; this.timezone = data.timezone || 'browser'; - this.editable = data.editable || true; + this.editable = data.editable === false ? false : true; this.hideControls = data.hideControls || false; this.rows = data.rows || []; this.nav = data.nav || []; diff --git a/src/test/specs/dashboardSrv-specs.js b/src/test/specs/dashboardSrv-specs.js index f916279db98..862c2a6fc41 100644 --- a/src/test/specs/dashboardSrv-specs.js +++ b/src/test/specs/dashboardSrv-specs.js @@ -82,6 +82,22 @@ define([ }); + describe('when creating dashboard with editable false', function() { + var model; + + beforeEach(module('grafana.services')); + beforeEach(inject(function(dashboardSrv) { + model = dashboardSrv.create({ + editable: false + }); + })); + + it('should set editable false', function() { + expect(model.editable).to.be(false); + }); + + }); + describe('when creating dashboard with old schema', function() { var model; var graph; From 352ad3385a2f9686df8bba674cf2595a00181b31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Sep 2014 12:59:21 +0200 Subject: [PATCH 04/45] Updated changelog and package.json to new version 1.8.0 --- CHANGELOG.md | 4 +++- package.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69835953dc1..8d28e9223f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ -# 1.8.0 (unreleased) +# 1.8.0 (2014-09-22) + +Read this [blog post](http://grafana.org/blog/2014/09/11/grafana-1-8-0-rc1-released.html) for an overview of all improvements. **Fixes** - [Issue #802](https://github.com/grafana/grafana/issues/802). Annotations: Fix when using InfluxDB datasource diff --git a/package.json b/package.json index f84ca9cf8c6..8de8f05cf8a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Coding Instinct AB" }, "name": "grafana", - "version": "1.8.0-rc1", + "version": "1.8.0", "repository": { "type": "git", "url": "http://github.com/torkelo/grafana.git" From 7fe76d32d075a62189e3b4c3529699f1003e341a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Sep 2014 13:05:44 +0200 Subject: [PATCH 05/45] updated latest.json --- latest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/latest.json b/latest.json index c66de1bc179..6e7dc07bae2 100644 --- a/latest.json +++ b/latest.json @@ -1,4 +1,4 @@ { - "version": "1.8.0-rc1", - "url": "http://grafanarel.s3.amazonaws.com/grafana-1.8.0-rc1" + "version": "1.8.0", + "url": "http://grafanarel.s3.amazonaws.com/grafana-1.8.0.tar.gz" } From af8fec941c372f637ed2a5ed435698b95566254d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2014 08:18:59 +0200 Subject: [PATCH 06/45] Graph: Fix for series draw order not being the same after hiding/unhiding series, Fixes #847 --- CHANGELOG.md | 5 +++++ src/app/directives/grafanaGraph.js | 26 ++++++-------------------- src/test/specs/grafanaGraph-specs.js | 13 +++++++++++++ 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d28e9223f0..79bc9c23752 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 1.9.0 (unreleased) + +**Fixes** +- [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series + # 1.8.0 (2014-09-22) Read this [blog post](http://grafana.org/blog/2014/09/11/grafana-1-8-0-rc1-released.html) for an overview of all improvements. diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 15f1556aa62..a2987213cb4 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -16,7 +16,6 @@ function (angular, $, kbn, moment, _) { template: '
', link: function(scope, elem) { var data, annotations; - var hiddenData = {}; var dashboard = scope.dashboard; var legendSideLastValue = null; @@ -24,14 +23,7 @@ function (angular, $, kbn, moment, _) { scope.get_data(); }); - scope.$on('toggleLegend', function(e, series) { - _.each(series, function(serie) { - if (hiddenData[serie.alias]) { - data.push(hiddenData[serie.alias]); - delete hiddenData[serie.alias]; - } - }); - + scope.$on('toggleLegend', function() { render_panel(); }); @@ -95,17 +87,6 @@ function (angular, $, kbn, moment, _) { } var panel = scope.panel; - - _.each(_.keys(scope.hiddenSeries), function(seriesAlias) { - var dataSeries = _.find(data, function(series) { - return series.info.alias === seriesAlias; - }); - if (dataSeries) { - hiddenData[dataSeries.info.alias] = dataSeries; - data = _.without(data, dataSeries); - } - }); - var stack = panel.stack ? true : null; // Populate element @@ -156,6 +137,11 @@ function (angular, $, kbn, moment, _) { var series = data[i]; series.applySeriesOverrides(panel.seriesOverrides); series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats); + // if hidden remove points and disable stack + if (scope.hiddenSeries[series.info.alias]) { + series.data = []; + series.stack = false; + } } if (data.length && data[0].info.timeStep) { diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index 1b86ee9073d..faf19119d27 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -29,6 +29,7 @@ define([ y_formats: [], seriesOverrides: [] }; + scope.hiddenSeries = {}; scope.dashboard = { timezone: 'browser' }; scope.range = { from: new Date('2014-08-09 10:00:00'), @@ -145,6 +146,18 @@ define([ }); }); + graphScenario('when series is hidden', function(ctx) { + ctx.setup(function(scope) { + scope.hiddenSeries = {'series2': true}; + }); + + it('should remove datapoints and disable stack', function() { + expect(ctx.plotData[0].info.alias).to.be('series1'); + expect(ctx.plotData[1].data.length).to.be(0); + expect(ctx.plotData[1].stack).to.be(false); + }); + }); + }); }); From 0fbace72856e5854ce7483c945a007e5f3591e03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2014 08:32:04 +0200 Subject: [PATCH 07/45] Row: fix for row editor and scroll pos, Fixes #846 --- src/app/directives/dashEditLink.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index 599cf341fe5..d0babd967e4 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -34,6 +34,7 @@ function (angular, $) { function hideScrollbars(value) { if (value) { + window.scrollTo(0,0); document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only } else { From bd3bae3af0ef5e40b997e004cfdc1f1791fa982f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2014 10:52:31 +0200 Subject: [PATCH 08/45] another attempt at improving panel edit menu --- ' | 79 ++++++++++++++++++++++++++++++ src/app/controllers/row.js | 5 ++ src/app/directives/grafanaPanel.js | 33 ++++++++----- src/app/partials/dashboard.html | 9 ++++ src/css/less/panel.less | 6 ++- 5 files changed, 120 insertions(+), 12 deletions(-) create mode 100644 ' diff --git a/' b/' new file mode 100644 index 00000000000..b22d59592f8 --- /dev/null +++ b/' @@ -0,0 +1,79 @@ +.panel { + display: inline-block; + float: left; + vertical-align: top; +} + +.panel-container { + padding: 0px 0px 0px 0px; + background: @grafanaPanelBackground; + margin: 5px; + position: relative; +} + +.panel-content { + padding: 0px 10px 5px 10px; +} + +.panel-title { + border: 0px; + font-weight: bold; + position: relative; +} + +.panel-loading { + position:absolute; + top: 0px; + right: 4px; + z-index: 800; +} + +.panel-header { + text-align: center; +} + + +.panel-error { + color: @white; + position: absolute; + left: 0; + padding: 0px 17px 6px 5px; + top: 0; + i { + position: relative; + top: -2px; + } +} + +.panel-error-arrow { + width: 0; + height: 0; + position: absolute; + border-left: 31px solid transparent; + border-right: 30px solid transparent; + border-bottom: 27px solid @grafanaPanelBackground; + left: 0; + bottom: 0; +} + +.panel-menu { + display: inline-block; + vertical-align: top; + a { + font-size: 1.2em; + float: left; + padding: 7px 10px; + border-top: 1px solid black; + border-right: 1px solid black; + border-bottom: 1px solid black; + background: @grayDark; + } + a:first-child { + border-left: 1px solid black; + } +} + +.panel-highlight { + border: 1px solid @blue; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); +} diff --git a/src/app/controllers/row.js b/src/app/controllers/row.js index 621c3eddda5..45287d85e48 100644 --- a/src/app/controllers/row.js +++ b/src/app/controllers/row.js @@ -22,6 +22,11 @@ function (angular, app, _) { $scope.reset_panel(); }; + $scope.togglePanelMenu = function(posX) { + $scope.showPanelMenu = !$scope.showPanelMenu; + $scope.panelMenuPos = posX; + }; + $scope.toggle_row = function(row) { row.collapse = row.collapse ? false : true; if (!row.collapse) { diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index ec6048609ea..22c5f539664 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -27,20 +27,31 @@ function (angular, $) { var $link = $(linkTemplate); elem.append($link); - $link.click(function() { - var $menu = $(menuTemplate); - var menuScope = $scope.$new(); + $link.click(function(e) { + var menuWidth = 452; + var windowWidth = $(window).width(); + var maxPos = windowWidth - menuWidth - 20; + var leftPos = e.screenX - (menuWidth / 2); + leftPos = Math.min(leftPos, maxPos); - elem.append($menu); - $compile($menu.contents())(menuScope); + $scope.$apply(function() { + $scope.togglePanelMenu(leftPos); + }); + elem.parents(".panel-container").toggleClass('panel-highlight'); + console.log(e); +// var $menu = $(menuTemplate); +// var menuScope = $scope.$new(); +// +// elem.append($menu); +// $compile($menu.contents())(menuScope); - setTimeout(function() { - $menu.remove(); - menuScope.$destroy(); - $link.show(); - }, 8000); + // setTimeout(function() { + // $menu.remove(); + // menuScope.$destroy(); + // $link.show(); + // }, 8000); - $link.hide(); + //$link.hide(); }); $compile(elem.contents())($scope); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 8afe5d40824..2c2ed566c66 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -74,6 +74,15 @@ +
+ view + edit + span + duplicate + share + remove +
+
diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 85f65cd5f16..4dbfb321224 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -62,7 +62,7 @@ a { font-size: 1.2em; float: left; - padding: 2px 10px; + padding: 7px 10px; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; @@ -72,3 +72,7 @@ border-left: 1px solid black; } } + +.panel-highlight { + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236, 0.9)"); +} From f59bb6461aad6afe757d0400f264ba8e685fc928 Mon Sep 17 00:00:00 2001 From: toni-moreno Date: Tue, 23 Sep 2014 13:51:59 +0200 Subject: [PATCH 09/45] added shared tooltips to graphs --- src/app/components/require.config.js | 2 + src/app/directives/grafanaGraph.js | 73 ++++++++- src/app/panels/graph/module.js | 3 +- src/app/panels/graph/styleEditor.html | 8 + src/test/specs/grafanaGraph-specs.js | 5 +- src/test/test-main.js | 2 + src/vendor/jquery/jquery.flot.crosshair.js | 176 +++++++++++++++++++++ 7 files changed, 264 insertions(+), 5 deletions(-) create mode 100644 src/vendor/jquery/jquery.flot.crosshair.js diff --git a/src/app/components/require.config.js b/src/app/components/require.config.js index 6a17f9635a2..61689fedc3c 100644 --- a/src/app/components/require.config.js +++ b/src/app/components/require.config.js @@ -40,6 +40,7 @@ require.config({ 'jquery.flot.stack': '../vendor/jquery/jquery.flot.stack', 'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent', 'jquery.flot.time': '../vendor/jquery/jquery.flot.time', + 'jquery.flot.crosshair': '../vendor/jquery/jquery.flot.crosshair', modernizr: '../vendor/modernizr-2.6.1', @@ -83,6 +84,7 @@ require.config({ 'jquery.flot.stack': ['jquery', 'jquery.flot'], 'jquery.flot.stackpercent':['jquery', 'jquery.flot'], 'jquery.flot.time': ['jquery', 'jquery.flot'], + 'jquery.flot.crosshair':['jquery', 'jquery.flot'], 'angular-cookies': ['angular'], 'angular-dragdrop': ['jquery','jquery-ui','angular'], 'angular-loader': ['angular'], diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index a2987213cb4..0942f4c80ef 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -130,6 +130,9 @@ function (angular, $, kbn, moment, _) { selection: { mode: "x", color: '#666' + }, + crosshair: { + mode: panel.tooltip.shared ? "x" : null } }; @@ -157,7 +160,7 @@ function (angular, $, kbn, moment, _) { function callPlot() { try { - $.plot(elem, sortedSeries, options); + elem.flot=$.plot(elem, sortedSeries, options); } catch (e) { console.log('flotcharts error', e); } @@ -326,9 +329,73 @@ function (angular, $, kbn, moment, _) { var $tooltip = $('
'); - elem.bind("plothover", function (event, pos, item) { - var group, value, timestamp, seriesInfo, format; + //this event will erase tooltip and crosshair once leaved the graph + elem.mouseleave(function () { + console.log('onmouse out:'); + if(scope.panel.tooltip.shared) { + $tooltip.detach(); + elem.flot.clearCrosshair(); + } + }); + elem.bind("plothover", function (event, pos, item) { + var group, value, timestamp, seriesInfo, format, i, j, s, s_final; + + //if tooltip shared we'll show a crosshair and will look for X and all Y series values + //else we will take from item. + if(scope.panel.tooltip.shared){ + //check if all series has same length if so, only one x index will + //be checked and only for exact timestamp values + var l = []; + var series; + for (i = 0; i < data.length; ++i) { + series = data[i]; + l.push(series.data.length); + } + //if all series has the same length it is because of they share time axis + if(_.uniq(l).length === 1) { + s=''; + series = data[0]; + j=0; + do { + ++j; + } while (series.data[j][0] < pos.x); + j--; //we take previous value in time. + //now we know the current X (j) position for X and Y values + timestamp = dashboard.formatDate(series.data[j][0]); + var last_value=0; //needed for stacked values + for (i = data.length-1; i >= 0; --i) { + //stacked values should be added in reverse order + series = data[i]; + seriesInfo = series.info; + format = scope.panel.y_formats[seriesInfo.yaxis - 1]; + if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + value = series.data[j][1]; + } else { + last_value+=series.data[j][1]; + value = last_value; + } + value = kbn.getFormatFunction(format, 2)(value,series.yaxis); + if (seriesInfo.alias) { + group = '' + + ' ' + seriesInfo.alias; + } else { + group = kbn.query_color_dot(series.color, 15) + ' '; + } + //pre-pending new values + s_final= group+ ": "+value +'
'+ s; + s=s_final; + } + + $tooltip.html('Time@ '+ + timestamp + '
' + s + '').place_tt(pos.pageX, pos.pageY); + return; + }else { + console.log('WARNING: tootltip shared can not be shown becouse of from ' + +data.length+' series has different length '+_.uniq(l)); + $tooltip.detach(); + } + } if (item) { seriesInfo = item.series.info; format = scope.panel.y_formats[seriesInfo.yaxis - 1]; diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index aa6667ee154..bbe64d10c37 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -15,7 +15,8 @@ define([ 'jquery.flot.selection', 'jquery.flot.time', 'jquery.flot.stack', - 'jquery.flot.stackpercent' + 'jquery.flot.stackpercent', + 'jquery.flot.crosshair' ], function (angular, app, $, _, kbn, moment, TimeSeries) { 'use strict'; diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index cd83f23f197..d2ff50f77ea 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -61,8 +61,16 @@
+ +
+
Tooltip
+
+ +
+
+
Series specific overrides Regex match example: /server[0-3]/i
diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js index faf19119d27..159a923cc7c 100644 --- a/src/test/specs/grafanaGraph-specs.js +++ b/src/test/specs/grafanaGraph-specs.js @@ -27,7 +27,10 @@ define([ legend: {}, grid: {}, y_formats: [], - seriesOverrides: [] + seriesOverrides: [], + tooltip: { + shared: true + } }; scope.hiddenSeries = {}; scope.dashboard = { timezone: 'browser' }; diff --git a/src/test/test-main.js b/src/test/test-main.js index 342f3143a9e..f60cdb87da4 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -43,6 +43,7 @@ require.config({ 'jquery.flot.stack': '../vendor/jquery/jquery.flot.stack', 'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent', 'jquery.flot.time': '../vendor/jquery/jquery.flot.time', + 'jquery.flot.crosshair': '../vendor/jquery/jquery.flot.crosshair', modernizr: '../vendor/modernizr-2.6.1', }, @@ -77,6 +78,7 @@ require.config({ 'jquery.flot.stack': ['jquery', 'jquery.flot'], 'jquery.flot.stackpercent':['jquery', 'jquery.flot'], 'jquery.flot.time': ['jquery', 'jquery.flot'], + 'jquery.flot.crosshair':['jquery', 'jquery.flot'], 'angular-route': ['angular'], 'angular-cookies': ['angular'], diff --git a/src/vendor/jquery/jquery.flot.crosshair.js b/src/vendor/jquery/jquery.flot.crosshair.js new file mode 100644 index 00000000000..5111695e3d1 --- /dev/null +++ b/src/vendor/jquery/jquery.flot.crosshair.js @@ -0,0 +1,176 @@ +/* Flot plugin for showing crosshairs when the mouse hovers over the plot. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + + crosshair: { + mode: null or "x" or "y" or "xy" + color: color + lineWidth: number + } + +Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical +crosshair that lets you trace the values on the x axis, "y" enables a +horizontal crosshair and "xy" enables them both. "color" is the color of the +crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of +the drawn lines (default is 1). + +The plugin also adds four public methods: + + - setCrosshair( pos ) + + Set the position of the crosshair. Note that this is cleared if the user + moves the mouse. "pos" is in coordinates of the plot and should be on the + form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple + axes), which is coincidentally the same format as what you get from a + "plothover" event. If "pos" is null, the crosshair is cleared. + + - clearCrosshair() + + Clear the crosshair. + + - lockCrosshair(pos) + + Cause the crosshair to lock to the current location, no longer updating if + the user moves the mouse. Optionally supply a position (passed on to + setCrosshair()) to move it to. + + Example usage: + + var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; + $("#graph").bind( "plothover", function ( evt, position, item ) { + if ( item ) { + // Lock the crosshair to the data point being hovered + myFlot.lockCrosshair({ + x: item.datapoint[ 0 ], + y: item.datapoint[ 1 ] + }); + } else { + // Return normal crosshair operation + myFlot.unlockCrosshair(); + } + }); + + - unlockCrosshair() + + Free the crosshair to move again after locking it. +*/ + +(function ($) { + var options = { + crosshair: { + mode: null, // one of null, "x", "y" or "xy", + color: "rgba(170, 0, 0, 0.80)", + lineWidth: 1 + } + }; + + function init(plot) { + // position of crosshair in pixels + var crosshair = { x: -1, y: -1, locked: false }; + + plot.setCrosshair = function setCrosshair(pos) { + if (!pos) + crosshair.x = -1; + else { + var o = plot.p2c(pos); + crosshair.x = Math.max(0, Math.min(o.left, plot.width())); + crosshair.y = Math.max(0, Math.min(o.top, plot.height())); + } + + plot.triggerRedrawOverlay(); + }; + + plot.clearCrosshair = plot.setCrosshair; // passes null for pos + + plot.lockCrosshair = function lockCrosshair(pos) { + if (pos) + plot.setCrosshair(pos); + crosshair.locked = true; + }; + + plot.unlockCrosshair = function unlockCrosshair() { + crosshair.locked = false; + }; + + function onMouseOut(e) { + if (crosshair.locked) + return; + + if (crosshair.x != -1) { + crosshair.x = -1; + plot.triggerRedrawOverlay(); + } + } + + function onMouseMove(e) { + if (crosshair.locked) + return; + + if (plot.getSelection && plot.getSelection()) { + crosshair.x = -1; // hide the crosshair while selecting + return; + } + + var offset = plot.offset(); + crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); + crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); + plot.triggerRedrawOverlay(); + } + + plot.hooks.bindEvents.push(function (plot, eventHolder) { + if (!plot.getOptions().crosshair.mode) + return; + + eventHolder.mouseout(onMouseOut); + eventHolder.mousemove(onMouseMove); + }); + + plot.hooks.drawOverlay.push(function (plot, ctx) { + var c = plot.getOptions().crosshair; + if (!c.mode) + return; + + var plotOffset = plot.getPlotOffset(); + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + if (crosshair.x != -1) { + var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; + + ctx.strokeStyle = c.color; + ctx.lineWidth = c.lineWidth; + ctx.lineJoin = "round"; + + ctx.beginPath(); + if (c.mode.indexOf("x") != -1) { + var drawX = Math.floor(crosshair.x) + adj; + ctx.moveTo(drawX, 0); + ctx.lineTo(drawX, plot.height()); + } + if (c.mode.indexOf("y") != -1) { + var drawY = Math.floor(crosshair.y) + adj; + ctx.moveTo(0, drawY); + ctx.lineTo(plot.width(), drawY); + } + ctx.stroke(); + } + ctx.restore(); + }); + + plot.hooks.shutdown.push(function (plot, eventHolder) { + eventHolder.unbind("mouseout", onMouseOut); + eventHolder.unbind("mousemove", onMouseMove); + }); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'crosshair', + version: '1.0' + }); +})(jQuery); From 1be840f19ddb98a0312f465600b2e9c850ffffd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2014 16:11:31 +0200 Subject: [PATCH 10/45] More wort on panel edit menu --- src/app/directives/grafanaPanel.js | 122 +++++++++++++++++++++-------- src/app/partials/dashboard.html | 19 +++-- src/app/services/panelSrv.js | 74 ++++++++--------- src/css/less/panel.less | 35 ++++++--- 4 files changed, 159 insertions(+), 91 deletions(-) diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index 22c5f539664..b4365bf4174 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -3,55 +3,113 @@ define([ 'jquery', 'lodash', ], -function (angular, $) { +function (angular, $, _) { 'use strict'; angular .module('grafana.directives') .directive('panelTitle', function($compile) { - var linkTemplate = '{{panel.title || interpolateTemplateVars}}
'; - var menuTemplate = '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - '' + - ' ' + - '
'; + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ + ' jqyoui-draggable="'+ + '{'+ + 'animate:false,'+ + 'mutate:false,'+ + 'index:{{$index}},'+ + 'onStart:\'panelMoveStart\','+ + 'onStop:\'panelMoveStop\''+ + '}" ng-model="panel" '; + + function createMenuTemplate($scope) { + var template = '
'; + template += '
'; + template += '
'; + template += ''; + template += ''; + template += ''; + template += ''; + template += '
'; + template += '
'; + + template += '
'; + + _.each($scope.panelMeta.menu, function(item) { + template += ''; + }); + + template += 'share'; + + template += '
'; + template += '
'; + template += '
'; + return template; + } return { restrict: 'A', link: function($scope, elem) { var $link = $(linkTemplate); + var $panelContainer = elem.parents(".panel-container"); + var menuTemplate = createMenuTemplate($scope); + var menuWidth = 277; + var menuScope = null; + var timeout = null; + elem.append($link); - $link.click(function(e) { - var menuWidth = 452; + var dismiss = function() { + $('.panel-menu').remove(); + + if (menuScope) { + menuScope.$destroy(); + menuScope = null; + $panelContainer.removeClass('panel-highlight'); + } + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + return; + }; + + $link.click(function() { + if (menuScope) { + dismiss(); + return; + } + + dismiss(); + var windowWidth = $(window).width(); - var maxPos = windowWidth - menuWidth - 20; - var leftPos = e.screenX - (menuWidth / 2); - leftPos = Math.min(leftPos, maxPos); + var panelLeftPos = $(elem).offset().left; + var panelWidth = $(elem).width(); + var menuLeftPos = (panelWidth / 2) - (menuWidth/2); + var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth; + if (stickingOut > 0) { + menuLeftPos -= stickingOut + 10; + } + if (panelLeftPos + menuLeftPos < 0) { + menuLeftPos = 0; + } + var $menu = $(menuTemplate); + $menu.css('left', menuLeftPos); + + menuScope = $scope.$new(); + + elem.append($menu); $scope.$apply(function() { - $scope.togglePanelMenu(leftPos); + $compile($menu.contents())(menuScope); }); - elem.parents(".panel-container").toggleClass('panel-highlight'); - console.log(e); -// var $menu = $(menuTemplate); -// var menuScope = $scope.$new(); -// -// elem.append($menu); -// $compile($menu.contents())(menuScope); - // setTimeout(function() { - // $menu.remove(); - // menuScope.$destroy(); - // $link.show(); - // }, 8000); - //$link.hide(); + $(".panel-container").removeClass('panel-highlight'); + $panelContainer.toggleClass('panel-highlight'); + + //timeout = setTimeout(dismiss, 8000); }); $compile(elem.contents())($scope); @@ -80,7 +138,7 @@ function (angular, $) { '' + '' + - '
' + + '
' + '
'+ ''; diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 2c2ed566c66..e05fd2ae8e9 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -74,18 +74,17 @@ -
- view - edit - span - duplicate - share - remove -
- -
+
+
+ + + + + + +
Date: Tue, 23 Sep 2014 22:10:10 +0200 Subject: [PATCH 11/45] Lots of progress on new panel edit menu, very tricky to get this right but think I am getting close to something that is good and will work long term --- ' | 79 ----------------- src/app/directives/grafanaPanel.js | 118 +------------------------ src/app/directives/panelMenu.js | 134 +++++++++++++++++++++++++++++ src/app/services/panelSrv.js | 6 +- src/css/less/panel.less | 3 +- 5 files changed, 141 insertions(+), 199 deletions(-) delete mode 100644 ' create mode 100644 src/app/directives/panelMenu.js diff --git a/' b/' deleted file mode 100644 index b22d59592f8..00000000000 --- a/' +++ /dev/null @@ -1,79 +0,0 @@ -.panel { - display: inline-block; - float: left; - vertical-align: top; -} - -.panel-container { - padding: 0px 0px 0px 0px; - background: @grafanaPanelBackground; - margin: 5px; - position: relative; -} - -.panel-content { - padding: 0px 10px 5px 10px; -} - -.panel-title { - border: 0px; - font-weight: bold; - position: relative; -} - -.panel-loading { - position:absolute; - top: 0px; - right: 4px; - z-index: 800; -} - -.panel-header { - text-align: center; -} - - -.panel-error { - color: @white; - position: absolute; - left: 0; - padding: 0px 17px 6px 5px; - top: 0; - i { - position: relative; - top: -2px; - } -} - -.panel-error-arrow { - width: 0; - height: 0; - position: absolute; - border-left: 31px solid transparent; - border-right: 30px solid transparent; - border-bottom: 27px solid @grafanaPanelBackground; - left: 0; - bottom: 0; -} - -.panel-menu { - display: inline-block; - vertical-align: top; - a { - font-size: 1.2em; - float: left; - padding: 7px 10px; - border-top: 1px solid black; - border-right: 1px solid black; - border-bottom: 1px solid black; - background: @grayDark; - } - a:first-child { - border-left: 1px solid black; - } -} - -.panel-highlight { - border: 1px solid @blue; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); -} diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index b4365bf4174..d0ec252559a 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -1,123 +1,11 @@ define([ 'angular', 'jquery', - 'lodash', + './panelMenu', ], -function (angular, $, _) { +function (angular, $) { 'use strict'; - angular - .module('grafana.directives') - .directive('panelTitle', function($compile) { - var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; - var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ - ' jqyoui-draggable="'+ - '{'+ - 'animate:false,'+ - 'mutate:false,'+ - 'index:{{$index}},'+ - 'onStart:\'panelMoveStart\','+ - 'onStop:\'panelMoveStop\''+ - '}" ng-model="panel" '; - - function createMenuTemplate($scope) { - var template = '
'; - template += '
'; - template += '
'; - template += ''; - template += ''; - template += ''; - template += ''; - template += '
'; - template += '
'; - - template += '
'; - - _.each($scope.panelMeta.menu, function(item) { - template += ''; - }); - - template += 'share'; - - template += '
'; - template += '
'; - template += '
'; - return template; - } - - return { - restrict: 'A', - link: function($scope, elem) { - var $link = $(linkTemplate); - var $panelContainer = elem.parents(".panel-container"); - var menuTemplate = createMenuTemplate($scope); - var menuWidth = 277; - var menuScope = null; - var timeout = null; - - elem.append($link); - - var dismiss = function() { - $('.panel-menu').remove(); - - if (menuScope) { - menuScope.$destroy(); - menuScope = null; - $panelContainer.removeClass('panel-highlight'); - } - if (timeout) { - clearTimeout(timeout); - timeout = null; - } - return; - }; - - $link.click(function() { - if (menuScope) { - dismiss(); - return; - } - - dismiss(); - - var windowWidth = $(window).width(); - var panelLeftPos = $(elem).offset().left; - var panelWidth = $(elem).width(); - var menuLeftPos = (panelWidth / 2) - (menuWidth/2); - var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth; - if (stickingOut > 0) { - menuLeftPos -= stickingOut + 10; - } - if (panelLeftPos + menuLeftPos < 0) { - menuLeftPos = 0; - } - - var $menu = $(menuTemplate); - $menu.css('left', menuLeftPos); - - menuScope = $scope.$new(); - - elem.append($menu); - $scope.$apply(function() { - $compile($menu.contents())(menuScope); - }); - - - $(".panel-container").removeClass('panel-highlight'); - $panelContainer.toggleClass('panel-highlight'); - - //timeout = setTimeout(dismiss, 8000); - }); - - $compile(elem.contents())($scope); - } - }; - - }); - angular .module('grafana.directives') .directive('grafanaPanel', function($compile, $parse) { @@ -138,7 +26,7 @@ function (angular, $, _) { '' + '' + - '
' + + '
' + '
'+ '
'; diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js new file mode 100644 index 00000000000..6f8411c7965 --- /dev/null +++ b/src/app/directives/panelMenu.js @@ -0,0 +1,134 @@ +define([ + 'angular', + 'jquery', + 'lodash', +], +function (angular, $, _) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('panelMenu', function($compile) { + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ + ' jqyoui-draggable="{'+ + 'animate:false,'+ + 'mutate:false,'+ + 'index:{{$index}},'+ + 'onStart:\'panelMoveStart\','+ + 'onStop:\'panelMoveStop\''+ + '}" ng-model="panel" '; + + function createMenuTemplate($scope) { + var template = '
'; + template += '
'; + template += '
'; + template += ''; + template += ''; + template += ''; + template += ''; + template += '
'; + template += '
'; + + template += '
'; + + _.each($scope.panelMeta.menu, function(item) { + template += ''; + }); + + template += 'share'; + + template += '
'; + template += '
'; + template += '
'; + return template; + } + + return { + restrict: 'A', + link: function($scope, elem) { + var $link = $(linkTemplate); + var $panelContainer = elem.parents(".panel-container"); + var menuTemplate = createMenuTemplate($scope); + var menuWidth = 246; + var menuScope = null; + var timeout = null; + var $menu = null; + + elem.append($link); + + function dismiss(time) { + clearTimeout(timeout); + timeout = null; + + console.log('dismiss', time); + + if (time) { + timeout = setTimeout(dismiss, time); + return; + } + + // if hovering or draging pospone close + if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) { + dismiss(2500); + return; + } + + if (menuScope) { + $menu.unbind(); + $menu.remove(); + menuScope.$destroy(); + menuScope = null; + $menu = null; + $panelContainer.removeClass('panel-highlight'); + } + } + + var showMenu = function() { + if ($menu) { + dismiss(); + return; + } + + var windowWidth = $(window).width(); + var panelLeftPos = $(elem).offset().left; + var panelWidth = $(elem).width(); + var menuLeftPos = (panelWidth / 2) - (menuWidth/2); + var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth; + if (stickingOut > 0) { + menuLeftPos -= stickingOut + 10; + } + if (panelLeftPos + menuLeftPos < 0) { + menuLeftPos = 0; + } + + $menu = $(menuTemplate); + $menu.css('left', menuLeftPos); + $menu.mouseleave(function() { + dismiss(1000); + }); + + menuScope = $scope.$new(); + + $('.panel-menu').remove(); + elem.append($menu); + $scope.$apply(function() { + $compile($menu.contents())(menuScope); + }); + + $(".panel-container").removeClass('panel-highlight'); + $panelContainer.toggleClass('panel-highlight'); + + dismiss(2000); + }; + + $link.click(showMenu); + $compile(elem.contents())($scope); + } + }; + }); +}); diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index e71e56c8a53..fed5073e38f 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -52,10 +52,8 @@ function (angular, _) { // condition: true // }, { - text: 'advanced', - submenu: [ - { text: 'Panel JSON', click: 'editPanelJson()' }, - ], + text: 'json', + click: 'editPanelJson()', condition: true }, // { diff --git a/src/css/less/panel.less b/src/css/less/panel.less index fa48d361616..902d245298e 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -59,13 +59,13 @@ .panel-menu { z-index: 10000; - width: 277px; position: absolute; background: @grafanaTargetFuncBackground; border: 1px solid black; top: -62px; .panel-menu-row { + white-space: nowrap; border-bottom: 1px solid black; &:last-child { border-bottom: none; @@ -77,6 +77,7 @@ } .panel-menu-link { + display: inline-block; border-right: 1px solid black; &:last-child { border: none; From d6f1c379c0a2ccfd9032041b01a73b13911dbd14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Sep 2014 22:30:01 +0200 Subject: [PATCH 12/45] fixed text editor & scope issue --- src/app/directives/panelMenu.js | 2 +- src/app/services/panelSrv.js | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index 6f8411c7965..d0ee044c571 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -53,7 +53,6 @@ function (angular, $, _) { link: function($scope, elem) { var $link = $(linkTemplate); var $panelContainer = elem.parents(".panel-container"); - var menuTemplate = createMenuTemplate($scope); var menuWidth = 246; var menuScope = null; var timeout = null; @@ -106,6 +105,7 @@ function (angular, $, _) { menuLeftPos = 0; } + var menuTemplate = createMenuTemplate($scope); $menu = $(menuTemplate); $menu.css('left', menuLeftPos); $menu.mouseleave(function() { diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index fed5073e38f..e526b937336 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -20,13 +20,8 @@ function (angular, _) { }, { text: 'edit', - editorLink: "app/partials/paneleditor.html", - condition: !$scope.panelMeta.fullscreenEdit - }, - { - text: 'edit', - click: "toggleFullscreen(true)", - condition: $scope.panelMeta.fullscreenEdit + click: 'editPanel()', + condition: true, }, { text: 'duplicate', @@ -66,6 +61,15 @@ function (angular, _) { $scope.inspector = {}; $scope.panelMeta.menu = _.where(menu, { condition: true }); + $scope.editPanel = function() { + if ($scope.panelMeta.fullscreenEdit) { + $scope.toggleFullscreen(true); + } + else { + $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/paneleditor.html', scope: $scope }); + } + }; + $scope.editPanelJson = function() { $scope.emitAppEvent('show-json-editor', { object: $scope.panel, updateHandler: $scope.replacePanel }); }; From 81747e162326d3381a7f0b0a88e372e76f11ed07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 09:03:04 +0200 Subject: [PATCH 13/45] Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations, Fixes #851 --- CHANGELOG.md | 3 +++ src/app/services/annotationsSrv.js | 3 ++- src/app/services/elasticsearch/es-datasource.js | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79bc9c23752..c70461859dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,10 @@ # 1.9.0 (unreleased) +# 1.8.1 (unreleased) + **Fixes** - [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series +- [Issue #851](https://github.com/grafana/grafana/issues/851). Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations # 1.8.0 (2014-09-22) diff --git a/src/app/services/annotationsSrv.js b/src/app/services/annotationsSrv.js index 04fb4224cc6..25c76caeb77 100644 --- a/src/app/services/annotationsSrv.js +++ b/src/app/services/annotationsSrv.js @@ -13,7 +13,8 @@ define([ var timezone; this.init = function() { - $rootScope.$on('refresh', this.clearCache); + $rootScope.onAppEvent('refresh', this.clearCache); + $rootScope.onAppEvent('setup-dashboard', this.clearCache); }; this.clearCache = function() { diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 04d1e62ce04..f9ec01dbd4c 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -94,6 +94,10 @@ function (angular, _, config, kbn, moment) { for (var i = 0; i < fieldNames.length; i++) { fieldValue = fieldValue[fieldNames[i]]; + if (!fieldValue) { + console.log('could not find field in annotatation: ', fieldName); + return ''; + } } if (_.isArray(fieldValue)) { From f4e24038feebf6c52d144c1634fa6c4c0a354210 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 10:51:20 +0200 Subject: [PATCH 14/45] Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard. Closes #840, Closes #853 --- CHANGELOG.md | 2 ++ src/app/controllers/dashboardCtrl.js | 10 ++++----- src/app/controllers/grafanaCtrl.js | 6 ++++- src/app/controllers/graphiteImport.js | 13 ++++++----- src/app/controllers/row.js | 1 + src/app/directives/dashUpload.js | 12 +++++----- src/app/partials/dashboard.html | 2 +- src/app/partials/import.html | 12 ++++++---- src/app/routes/dashboard-from-db.js | 29 ++++++++++++++++++++----- src/app/routes/dashboard-from-file.js | 2 +- src/app/routes/dashboard-from-script.js | 2 +- 11 files changed, 61 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c70461859dd..dce1108a1c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ **Fixes** - [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series - [Issue #851](https://github.com/grafana/grafana/issues/851). Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations +- [Issue #846](https://github.com/grafana/grafana/issues/846). Edit panes: Issue when open row or json editor when scrolled down the page, unable to scroll and you did not see editor +- [Issue #840](https://github.com/grafana/grafana/issues/840). Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard. # 1.8.0 (2014-09-22) diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 424f0e225e8..709e33ae7d3 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -19,19 +19,18 @@ function (angular, $, config, _) { dashboardSrv, dashboardViewStateSrv, panelMoveSrv, - timer, $timeout) { $scope.editor = { index: 0 }; $scope.panelNames = config.panels; var resizeEventTimeout; - $scope.init = function() { + this.init = function(dashboardData) { $scope.availablePanels = config.panels; - $scope.onAppEvent('setup-dashboard', $scope.setupDashboard); - $scope.onAppEvent('show-json-editor', $scope.showJsonEditor); $scope.reset_row(); $scope.registerWindowResizeEvent(); + $scope.onAppEvent('show-json-editor', $scope.showJsonEditor); + $scope.setupDashboard(dashboardData); }; $scope.registerWindowResizeEvent = function() { @@ -41,7 +40,7 @@ function (angular, $, config, _) { }); }; - $scope.setupDashboard = function(event, dashboardData) { + $scope.setupDashboard = function(dashboardData) { $rootScope.performance.dashboardLoadStart = new Date().getTime(); $rootScope.performance.panelsInitialized = 0; $rootScope.performance.panelsRendered = 0; @@ -129,6 +128,5 @@ function (angular, $, config, _) { return $scope.editorTabs; }; - $scope.init(); }); }); diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 060c0bc0803..5d406dee1b6 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -10,7 +10,7 @@ function (angular, config, _, $, store) { var module = angular.module('grafana.controllers'); - module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope) { + module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope, $controller) { $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion; $scope.consoleEnabled = store.getBool('grafanaConsole'); @@ -32,6 +32,10 @@ function (angular, config, _, $, store) { store.set('grafanaConsole', $scope.consoleEnabled); }; + $scope.initDashboard = function(dashboardData, viewScope) { + $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData); + }; + $rootScope.onAppEvent = function(name, callback) { var unbind = $rootScope.$on(name, callback); this.$on('$destroy', unbind); diff --git a/src/app/controllers/graphiteImport.js b/src/app/controllers/graphiteImport.js index d60c8ada3be..a552cd73560 100644 --- a/src/app/controllers/graphiteImport.js +++ b/src/app/controllers/graphiteImport.js @@ -1,14 +1,15 @@ define([ 'angular', 'app', - 'lodash' + 'lodash', + 'kbn' ], -function (angular, app, _) { +function (angular, app, _, kbn) { 'use strict'; var module = angular.module('grafana.controllers'); - module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv) { + module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv, $location) { $scope.init = function() { $scope.datasources = datasourceSrv.getMetricSources(); @@ -79,7 +80,7 @@ function (angular, app, _) { } panel = { - type: 'graphite', + type: 'graph', span: 12 / graphsPerRow, title: graph[1].title, targets: [], @@ -95,7 +96,9 @@ function (angular, app, _) { currentRow.panels.push(panel); }); - $scope.emitAppEvent('setup-dashboard', newDashboard); + window.grafanaImportDashboard = newDashboard; + $location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title)); + $scope.dismiss(); } diff --git a/src/app/controllers/row.js b/src/app/controllers/row.js index 621c3eddda5..b877f7d10fb 100644 --- a/src/app/controllers/row.js +++ b/src/app/controllers/row.js @@ -13,6 +13,7 @@ function (angular, app, _) { title: "Row", height: "150px", collapse: false, + editable: true, panels: [], }; diff --git a/src/app/directives/dashUpload.js b/src/app/directives/dashUpload.js index 1d7c4ec405e..ba214cf19a4 100644 --- a/src/app/directives/dashUpload.js +++ b/src/app/directives/dashUpload.js @@ -1,12 +1,13 @@ define([ - 'angular' + 'angular', + 'kbn' ], -function (angular) { +function (angular, kbn) { 'use strict'; var module = angular.module('grafana.directives'); - module.directive('dashUpload', function(timer, alertSrv) { + module.directive('dashUpload', function(timer, alertSrv, $location) { return { restrict: 'A', link: function(scope) { @@ -14,9 +15,10 @@ function (angular) { var files = evt.target.files; // FileList object var readerOnload = function() { return function(e) { - var dashboard = JSON.parse(e.target.result); scope.$apply(function() { - scope.emitAppEvent('setup-dashboard', dashboard); + window.grafanaImportDashboard = JSON.parse(e.target.result); + var title = kbn.slugifyForUrl(window.grafanaImportDashboard.title); + $location.path('/dashboard/import/' + title); }); }; }; diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 8afe5d40824..2fa9bbcf2eb 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/partials/import.html b/src/app/partials/import.html index f81468465d4..e89aff41342 100644 --- a/src/app/partials/import.html +++ b/src/app/partials/import.html @@ -16,11 +16,15 @@
-
- +
+
- + +
- {{dash.name}}{{dash.name}} + + import + +
diff --git a/src/app/routes/dashboard-from-db.js b/src/app/routes/dashboard-from-db.js index a5a37ece12d..67c25ab4946 100644 --- a/src/app/routes/dashboard-from-db.js +++ b/src/app/routes/dashboard-from-db.js @@ -22,7 +22,13 @@ function (angular) { templateUrl: 'app/partials/dashboard.html', controller : 'DashFromDBProvider', reloadOnSearch: false, + }) + .when('/dashboard/import/:id', { + templateUrl: 'app/partials/dashboard.html', + controller : 'DashFromImportCtrl', + reloadOnSearch: false, }); + }); module.controller('DashFromDBProvider', function($scope, $rootScope, datasourceSrv, $routeParams, alertSrv) { @@ -31,12 +37,23 @@ function (angular) { var isTemp = window.location.href.indexOf('dashboard/temp') !== -1; db.getDashboard($routeParams.id, isTemp) - .then(function(dashboard) { - $scope.emitAppEvent('setup-dashboard', dashboard); - }).then(null, function(error) { - $scope.emitAppEvent('setup-dashboard', { title: 'Grafana'}); - alertSrv.set('Error', error, 'error'); - }); + .then(function(dashboard) { + $scope.initDashboard(dashboard, $scope); + }).then(null, function(error) { + $scope.initDashboard({ title: 'Grafana'}, $scope); + alertSrv.set('Error', error, 'error'); + }); + }); + + module.controller('DashFromImportCtrl', function($scope, $location, alertSrv) { + + if (!window.grafanaImportDashboard) { + alertSrv.set('Not found', 'Cannot reload page with unsaved imported dashboard', 'warning', 7000); + $location.path(''); + return; + } + + $scope.initDashboard(window.grafanaImportDashboard, $scope); }); }); diff --git a/src/app/routes/dashboard-from-file.js b/src/app/routes/dashboard-from-file.js index dc54eaddaf6..82db05480b4 100644 --- a/src/app/routes/dashboard-from-file.js +++ b/src/app/routes/dashboard-from-file.js @@ -52,7 +52,7 @@ function (angular, $, config, _) { }; file_load($routeParams.jsonFile).then(function(result) { - $scope.emitAppEvent('setup-dashboard', result); + $scope.initDashboard(result, $scope); }); }); diff --git a/src/app/routes/dashboard-from-script.js b/src/app/routes/dashboard-from-script.js index cacdf9939b6..fa3abd36e81 100644 --- a/src/app/routes/dashboard-from-script.js +++ b/src/app/routes/dashboard-from-script.js @@ -53,7 +53,7 @@ function (angular, $, config, _, kbn, moment) { }; script_load($routeParams.jsFile).then(function(result) { - $scope.emitAppEvent('setup-dashboard', result.data); + $scope.initDashboard(result.data, $scope); }); }); From 34f36fff5c296e9f22a697f213bf7ca926288f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 11:17:34 +0200 Subject: [PATCH 15/45] small fix for graphite-web import --- src/app/controllers/graphiteImport.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/controllers/graphiteImport.js b/src/app/controllers/graphiteImport.js index a552cd73560..091f4b8fe5f 100644 --- a/src/app/controllers/graphiteImport.js +++ b/src/app/controllers/graphiteImport.js @@ -73,7 +73,7 @@ function (angular, app, _, kbn) { newDashboard.title = state.name; newDashboard.rows.push(currentRow); - _.each(state.graphs, function(graph) { + _.each(state.graphs, function(graph, index) { if (currentRow.panels.length === graphsPerRow) { currentRow = angular.copy(rowTemplate); newDashboard.rows.push(currentRow); @@ -84,7 +84,8 @@ function (angular, app, _, kbn) { span: 12 / graphsPerRow, title: graph[1].title, targets: [], - datasource: datasource + datasource: datasource, + id: index + 1 }; _.each(graph[1].target, function(target) { From bce6e75cfaf336767b778a3d7a46912c5f35734b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 11:35:08 +0200 Subject: [PATCH 16/45] InfluxDB: Fix for bug when saving dashboard where title is the same as slugified url id, Fixes #859 --- CHANGELOG.md | 1 + src/app/services/influxdb/influxdbDatasource.js | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dce1108a1c7..92bdd66eca0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - [Issue #851](https://github.com/grafana/grafana/issues/851). Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations - [Issue #846](https://github.com/grafana/grafana/issues/846). Edit panes: Issue when open row or json editor when scrolled down the page, unable to scroll and you did not see editor - [Issue #840](https://github.com/grafana/grafana/issues/840). Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard. +- [Issue #859](https://github.com/grafana/grafana/issues/859). InfluxDB: Fix for bug when saving dashboard where title is the same as slugified url id # 1.8.0 (2014-09-22) diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index c076fb2c5e1..8ad003cc632 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -203,7 +203,7 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { else { var self = this; return this._influxRequest('POST', '/series', data).then(function() { - self._removeUnslugifiedDashboard(title, false); + self._removeUnslugifiedDashboard(id, title, false); return { title: title, url: '/dashboard/db/' + id }; }, function(err) { throw 'Failed to save dashboard to InfluxDB: ' + err.data; @@ -211,7 +211,9 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { } }; - InfluxDatasource.prototype._removeUnslugifiedDashboard = function(id, isTemp) { + InfluxDatasource.prototype._removeUnslugifiedDashboard = function(id, title, isTemp) { + if (id === title) { return; } + var self = this; self._getDashboardInternal(id, isTemp).then(function(dashboard) { if (dashboard !== null) { From 622c1a1dada5d6e931962ca191b2d7dfd5149704 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 11:58:02 +0200 Subject: [PATCH 17/45] small tweak to new panel edit menu --- src/app/directives/panelMenu.js | 4 +--- src/app/services/panelSrv.js | 33 ++++++++++----------------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index d0ee044c571..4ffb5c5cb81 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -40,8 +40,6 @@ function (angular, $, _) { template += item.text + ''; }); - template += 'share'; - template += '
'; template += ''; template += ''; @@ -123,7 +121,7 @@ function (angular, $, _) { $(".panel-container").removeClass('panel-highlight'); $panelContainer.toggleClass('panel-highlight'); - dismiss(2000); + dismiss(2500); }; $link.click(showMenu); diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index e526b937336..7ee45027b2b 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -15,47 +15,34 @@ function (angular, _) { var menu = [ { text: "view", + icon: "icon-eye-open", click: 'toggleFullscreen(false)', condition: $scope.panelMeta.fullscreenView }, { text: 'edit', + icon: 'icon-cogs', click: 'editPanel()', condition: true, }, { text: 'duplicate', + icon: 'icon-copy', click: 'duplicatePanel(panel)', condition: true }, - // { - // text: 'span', - // submenu: [ - // { text: '1', click: 'updateColumnSpan(1)' }, - // { text: '2', click: 'updateColumnSpan(2)' }, - // { text: '3', click: 'updateColumnSpan(3)' }, - // { text: '4', click: 'updateColumnSpan(4)' }, - // { text: '5', click: 'updateColumnSpan(5)' }, - // { text: '6', click: 'updateColumnSpan(6)' }, - // { text: '7', click: 'updateColumnSpan(7)' }, - // { text: '8', click: 'updateColumnSpan(8)' }, - // { text: '9', click: 'updateColumnSpan(9)' }, - // { text: '10', click: 'updateColumnSpan(10)' }, - // { text: '11', click: 'updateColumnSpan(11)' }, - // { text: '12', click: 'updateColumnSpan(12)' }, - // ], - // condition: true - // }, { text: 'json', + icon: 'icon-code', click: 'editPanelJson()', condition: true }, - // { - // text: 'remove', - // click: 'remove_panel_from_row(row, panel)', - // condition: true - // } + { + text: 'share', + icon: 'icon-share', + click: 'sharePanel()', + condition: true + }, ]; $scope.inspector = {}; From d5ffe6acef74b2c9bb34e5ff7b9eef2c830668ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 12:14:20 +0200 Subject: [PATCH 18/45] White theme: Fixes for hidden series legend text and disabled annotations color, Closes #852 --- CHANGELOG.md | 1 + src/app/partials/graphite/editor.html | 2 ++ src/app/partials/submenu.html | 7 ------- src/css/less/graph.less | 2 +- src/css/less/submenu.less | 2 +- src/css/less/variables.dark.less | 1 + src/css/less/variables.light.less | 3 ++- 7 files changed, 8 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92bdd66eca0..82390a8e88c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - [Issue #846](https://github.com/grafana/grafana/issues/846). Edit panes: Issue when open row or json editor when scrolled down the page, unable to scroll and you did not see editor - [Issue #840](https://github.com/grafana/grafana/issues/840). Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard. - [Issue #859](https://github.com/grafana/grafana/issues/859). InfluxDB: Fix for bug when saving dashboard where title is the same as slugified url id +- [Issue #852](https://github.com/grafana/grafana/issues/852). White theme: Fixes for hidden series legend text and disabled annotations color # 1.8.0 (2014-09-22) diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index dcbc4306e0f..f54c830d46b 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -76,6 +76,7 @@
+
  • @@ -125,6 +126,7 @@
+
diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 42884a84058..e82e2505afb 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -17,9 +17,6 @@
    -
  • - VARIABLES -
  • ${{variable.name}}: @@ -31,10 +28,6 @@
'+ ''; diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index 4ffb5c5cb81..c3ed0cea458 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -9,7 +9,7 @@ function (angular, $, _) { angular .module('grafana.directives') .directive('panelMenu', function($compile) { - var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ ' jqyoui-draggable="{'+ 'animate:false,'+ @@ -62,8 +62,6 @@ function (angular, $, _) { clearTimeout(timeout); timeout = null; - console.log('dismiss', time); - if (time) { timeout = setTimeout(dismiss, time); return; @@ -124,7 +122,7 @@ function (angular, $, _) { dismiss(2500); }; - $link.click(showMenu); + elem.click(showMenu); $compile(elem.contents())($scope); } }; diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 7ee45027b2b..8840a78695f 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -10,7 +10,6 @@ function (angular, _) { this.init = function($scope) { if (!$scope.panel.span) { $scope.panel.span = 12; } - if (!$scope.panel.title) { $scope.panel.title = 'No title'; } var menu = [ { diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 902d245298e..7e103fc463a 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -15,6 +15,11 @@ padding: 0px 10px 5px 10px; } +.panel-title-container { + min-height: 5px; + cursor: pointer; +} + .panel-title { border: 0px; font-weight: bold; From 743c95d0f939455516f196ec8e8a8d4ed5b9fccc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 12:45:03 +0200 Subject: [PATCH 21/45] small fix to panel menu positioning --- src/app/directives/panelMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index c3ed0cea458..d9932cd7bb2 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -51,7 +51,7 @@ function (angular, $, _) { link: function($scope, elem) { var $link = $(linkTemplate); var $panelContainer = elem.parents(".panel-container"); - var menuWidth = 246; + var menuWidth = $scope.panelMeta.menu.length === 5 ? 246 : 201; var menuScope = null; var timeout = null; var $menu = null; From eaa899e9cf00582ca2a6c25328e327567d82b67e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 14:00:44 +0200 Subject: [PATCH 22/45] Small fix to fullscreen mode where scrolling would scroll the background dashboard & page header --- src/css/less/grafana.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index b291b548219..9f55faf3ba7 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -117,8 +117,9 @@ } .dashboard-fullscreen { - .row-control-inner { - display: none; + .main-view-container { + height: 0; + overflow: hidden; } } From 69e80fd11c7aa2de128f7b2f8612ec8936c04416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 16:20:55 +0200 Subject: [PATCH 23/45] working on share feature, and refactorings --- src/app/controllers/dashboardNavCtrl.js | 4 ++-- src/app/controllers/grafanaCtrl.js | 10 ++++---- src/app/partials/share-panel.html | 26 +++++++++++++++++++++ src/app/partials/unsaved-changes.html | 7 +++--- src/app/services/alertSrv.js | 14 ++++++++++- src/app/services/all.js | 1 + src/app/services/panelSrv.js | 7 ++++++ src/app/services/utilSrv.js | 31 +++++++++++++++++++++++++ src/css/less/bootswatch.dark.less | 2 +- src/css/less/grafana.less | 8 +++++-- src/css/less/overrides.less | 5 ---- src/css/less/panel.less | 2 +- src/css/less/variables.dark.less | 2 +- src/vendor/angular/angular-strap.js | 3 ++- src/vendor/bootstrap/less/modals.less | 2 +- 15 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 src/app/partials/share-panel.html create mode 100644 src/app/services/utilSrv.js diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index d16139e2e09..71a9f756a9c 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -78,7 +78,7 @@ function (angular, _, moment, config, store) { var clone = angular.copy($scope.dashboard); $scope.db.saveDashboard(clone) .then(function(result) { - alertSrv.set('Dashboard Saved', 'Saved as "' + result.title + '"','success', 3000); + $scope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + result.title]); if (result.url !== $location.path()) { $location.search({}); @@ -88,7 +88,7 @@ function (angular, _, moment, config, store) { $rootScope.$emit('dashboard-saved', $scope.dashboard); }, function(err) { - alertSrv.set('Save failed', err, 'error', 5000); + $scope.emitAppEvent('alert-error', ['Save failed', err]); }); }; diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 5d406dee1b6..98f2115680f 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -10,19 +10,19 @@ function (angular, config, _, $, store) { var module = angular.module('grafana.controllers'); - module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope, $controller) { + module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller) { $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion; - $scope.consoleEnabled = store.getBool('grafanaConsole'); - + $scope._ = _; $rootScope.profilingEnabled = store.getBool('profilingEnabled'); $rootScope.performance = { loadStart: new Date().getTime() }; $scope.init = function() { - $scope._ = _; - if ($rootScope.profilingEnabled) { $scope.initProfiling(); } + alertSrv.init(); + utilSrv.init(); + $scope.dashAlerts = alertSrv; $scope.grafana = { style: 'dark' }; }; diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html new file mode 100644 index 00000000000..34b8b424683 --- /dev/null +++ b/src/app/partials/share-panel.html @@ -0,0 +1,26 @@ +
+
+
+
+ + Share +
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
diff --git a/src/app/partials/unsaved-changes.html b/src/app/partials/unsaved-changes.html index b025575e7e7..846a30bbc3b 100644 --- a/src/app/partials/unsaved-changes.html +++ b/src/app/partials/unsaved-changes.html @@ -1,19 +1,18 @@
-
-

Unsaved changes

+
+

Unsaved changes

{{changes}} -
-
+
diff --git a/src/app/services/alertSrv.js b/src/app/services/alertSrv.js index 781539bf1cc..2a752569be2 100644 --- a/src/app/services/alertSrv.js +++ b/src/app/services/alertSrv.js @@ -7,9 +7,21 @@ function (angular, _) { var module = angular.module('grafana.services'); - module.service('alertSrv', function($timeout, $sce) { + module.service('alertSrv', function($timeout, $sce, $rootScope) { var self = this; + this.init = function() { + $rootScope.onAppEvent('alert-error', function(e, alert) { + self.set(alert[0], alert[1], 'error'); + }); + $rootScope.onAppEvent('alert-warning', function(e, alert) { + self.set(alert[0], alert[1], 'warning', 5000); + }); + $rootScope.onAppEvent('alert-success', function(e, alert) { + self.set(alert[0], alert[0], 'success', 3000); + }); + }; + // List of all alert objects this.list = []; diff --git a/src/app/services/all.js b/src/app/services/all.js index 81fe4603277..f715361b4cd 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -1,5 +1,6 @@ define([ './alertSrv', + './utilSrv', './datasourceSrv', './timeSrv', './templateSrv', diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 8840a78695f..5bc877415f3 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -56,6 +56,13 @@ function (angular, _) { } }; + $scope.sharePanel = function() { + $scope.emitAppEvent('show-modal', { + src: './app/partials/share-panel.html', + scope: $scope.$new() + }); + }; + $scope.editPanelJson = function() { $scope.emitAppEvent('show-json-editor', { object: $scope.panel, updateHandler: $scope.replacePanel }); }; diff --git a/src/app/services/utilSrv.js b/src/app/services/utilSrv.js new file mode 100644 index 00000000000..7fca0c0334e --- /dev/null +++ b/src/app/services/utilSrv.js @@ -0,0 +1,31 @@ +define([ + 'angular', +], +function (angular) { + 'use strict'; + + var module = angular.module('grafana.services'); + + module.service('utilSrv', function($rootScope, $modal, $q) { + + this.init = function() { + $rootScope.onAppEvent('show-modal', this.showModal); + }; + + this.showModal = function(e, options) { + var modal = $modal({ + template: options.src, + persist: false, + show: false, + scope: options.scope, + keyboard: false + }); + + $q.when(modal).then(function(modalEl) { + modalEl.modal('show'); + }); + }; + + }); + +}); diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index ad9fe11e73d..7de0ab97437 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -57,7 +57,7 @@ hr { .brand { padding: 0px 15px; - color: @grayLighter; + color: @navbarBrandColor; font-weight: normal; text-shadow: none; } diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 9f55faf3ba7..0bc2d6058c4 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -53,8 +53,12 @@ } .modal { - margin: 5%; - width: 90%; + max-width: 1024px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 200px; } .grafana-search-metric-actions { diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 957a56147dd..b8fc8e640c1 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -252,11 +252,6 @@ form input.ng-invalid { max-width: 480px; } -.modal { - width: 100%; - top: 0px !important; -} - .tiny { font-size: 50%; } diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 7e103fc463a..b77ea323bc2 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -63,7 +63,7 @@ } .panel-menu { - z-index: 10000; + z-index: 1000; position: absolute; background: @grafanaTargetFuncBackground; border: 1px solid black; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index d0f268a5981..287694b1d0a 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -219,7 +219,7 @@ @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; -@navbarBrandColor: @navbarLinkColor; +@navbarBrandColor: @linkColor; // Inverted navbar @navbarInverseBackground: #252A30; diff --git a/src/vendor/angular/angular-strap.js b/src/vendor/angular/angular-strap.js index 2da858ded51..22d89a6a3e0 100644 --- a/src/vendor/angular/angular-strap.js +++ b/src/vendor/angular/angular-strap.js @@ -435,7 +435,8 @@ angular.module('$strap.directives').factory('$modal', [ return res.data; })).then(function onSuccess(template) { var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id; - var $modal = $('
').attr('id', id).addClass('fade').html(template); + // grafana change, removed fade + var $modal = $('
').attr('id', id).html(template); if (options.modalClass) $modal.addClass(options.modalClass); $('body').append($modal); diff --git a/src/vendor/bootstrap/less/modals.less b/src/vendor/bootstrap/less/modals.less index b8b0914a400..f5f5ca5eb3d 100644 --- a/src/vendor/bootstrap/less/modals.less +++ b/src/vendor/bootstrap/less/modals.less @@ -17,7 +17,7 @@ .modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); + .opacity(70); } // Base modal From 6f1a6d5a567bc818cfec3b9b24a246afc3bd2d15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 16:26:39 +0200 Subject: [PATCH 24/45] Changed name of emitAppEvent to just appEvent --- src/app/controllers/dashboardCtrl.js | 4 ++-- src/app/controllers/dashboardNavCtrl.js | 12 ++++++------ src/app/controllers/grafanaCtrl.js | 2 +- src/app/controllers/search.js | 4 ++-- src/app/directives/dashEditLink.js | 2 +- src/app/panels/timepicker/module.js | 2 +- src/app/services/alertSrv.js | 2 +- src/app/services/dashboard/dashboardKeyBindings.js | 8 ++++---- src/app/services/panelSrv.js | 6 +++--- src/app/services/timeSrv.js | 2 +- src/test/specs/helpers.js | 2 +- 11 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 709e33ae7d3..dfe97682aa0 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -58,7 +58,7 @@ function (angular, $, config, _) { $scope.setWindowTitleAndTheme(); - $scope.emitAppEvent("dashboard-loaded", $scope.dashboard); + $scope.appEvent("dashboard-loaded", $scope.dashboard); }; $scope.setWindowTitleAndTheme = function() { @@ -113,7 +113,7 @@ function (angular, $, config, _) { var editScope = $rootScope.$new(); editScope.object = options.object; editScope.updateHandler = options.updateHandler; - $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope }); + $scope.appEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope }); }; $scope.checkFeatureToggles = function() { diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index 71a9f756a9c..084d1e215a6 100644 --- a/src/app/controllers/dashboardNavCtrl.js +++ b/src/app/controllers/dashboardNavCtrl.js @@ -69,7 +69,7 @@ function (angular, _, moment, config, store) { }; $scope.openSearch = function() { - $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); + $scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' }); }; $scope.saveDashboard = function() { @@ -88,7 +88,7 @@ function (angular, _, moment, config, store) { $rootScope.$emit('dashboard-saved', $scope.dashboard); }, function(err) { - $scope.emitAppEvent('alert-error', ['Save failed', err]); + $scope.appEvent('alert-error', ['Save failed', err]); }); }; @@ -101,9 +101,9 @@ function (angular, _, moment, config, store) { var id = options.id; $scope.db.deleteDashboard(id).then(function(id) { - alertSrv.set('Dashboard Deleted', id + ' has been deleted', 'success', 5000); - }, function() { - alertSrv.set('Dashboard Not Deleted', 'An error occurred deleting the dashboard', 'error', 5000); + $scope.appEvent('alert-success', ['Dashboard Deleted', id + ' has been deleted']); + }, function(err) { + $scope.appEvent('alert-error', ['Deleted failed', err]); }); }; @@ -138,7 +138,7 @@ function (angular, _, moment, config, store) { }; $scope.editJson = function() { - $scope.emitAppEvent('show-json-editor', { object: $scope.dashboard }); + $scope.appEvent('show-json-editor', { object: $scope.dashboard }); }; $scope.openSaveDropdown = function() { diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 98f2115680f..3a420c37d3f 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -41,7 +41,7 @@ function (angular, config, _, $, store) { this.$on('$destroy', unbind); }; - $rootScope.emitAppEvent = function(name, payload) { + $rootScope.appEvent = function(name, payload) { $rootScope.$emit(name, payload); }; diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 676e39aceb5..5946cf15ee7 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -29,7 +29,7 @@ function (angular, _, config, $) { $scope.keyDown = function (evt) { if (evt.keyCode === 27) { - $scope.emitAppEvent('hide-dash-editor'); + $scope.appEvent('hide-dash-editor'); } if (evt.keyCode === 40) { $scope.moveSelection(1); @@ -121,7 +121,7 @@ function (angular, _, config, $) { $scope.deleteDashboard = function(dash, evt) { evt.stopPropagation(); - $scope.emitAppEvent('delete-dashboard', { id: dash.id, title: dash.title }); + $scope.appEvent('delete-dashboard', { id: dash.id, title: dash.title }); $scope.results.dashboards = _.without($scope.results.dashboards, dash); }; diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index d0babd967e4..b0ac97d3423 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -16,7 +16,7 @@ function (angular, $) { elem.bind('click',function() { $timeout(function() { var editorScope = attrs.editorScope === 'isolated' ? null : scope; - scope.emitAppEvent('show-dash-editor', { src: partial, scope: editorScope }); + scope.appEvent('show-dash-editor', { src: partial, scope: editorScope }); }); }); } diff --git a/src/app/panels/timepicker/module.js b/src/app/panels/timepicker/module.js index 656af0898a0..c04a1910bf4 100644 --- a/src/app/panels/timepicker/module.js +++ b/src/app/panels/timepicker/module.js @@ -79,7 +79,7 @@ function (angular, app, _, moment, kbn) { $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate(); } - $scope.emitAppEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope }); + $scope.appEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope }); }; // Constantly validate the input of the fields. This function does not change any date variables diff --git a/src/app/services/alertSrv.js b/src/app/services/alertSrv.js index 2a752569be2..f41e490f374 100644 --- a/src/app/services/alertSrv.js +++ b/src/app/services/alertSrv.js @@ -18,7 +18,7 @@ function (angular, _) { self.set(alert[0], alert[1], 'warning', 5000); }); $rootScope.onAppEvent('alert-success', function(e, alert) { - self.set(alert[0], alert[0], 'success', 3000); + self.set(alert[0], alert[1], 'success', 3000); }); }; diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index ba8dcaf0f23..11d5e2d4787 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/src/app/services/dashboard/dashboardKeyBindings.js @@ -22,7 +22,7 @@ function(angular, $) { }); keyboardManager.bind('ctrl+f', function() { - scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); + scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' }); }, { inputDisabled: true }); keyboardManager.bind('ctrl+h', function() { @@ -31,7 +31,7 @@ function(angular, $) { }, { inputDisabled: true }); keyboardManager.bind('ctrl+s', function(evt) { - scope.emitAppEvent('save-dashboard', evt); + scope.appEvent('save-dashboard', evt); }, { inputDisabled: true }); keyboardManager.bind('ctrl+r', function() { @@ -39,7 +39,7 @@ function(angular, $) { }, { inputDisabled: true }); keyboardManager.bind('ctrl+z', function(evt) { - scope.emitAppEvent('zoom-out', evt); + scope.appEvent('zoom-out', evt); }, { inputDisabled: true }); keyboardManager.bind('esc', function() { @@ -53,7 +53,7 @@ function(angular, $) { modalData.$scope.dismiss(); } - scope.emitAppEvent('hide-dash-editor'); + scope.appEvent('hide-dash-editor'); scope.exitFullscreen(); }, { inputDisabled: true }); diff --git a/src/app/services/panelSrv.js b/src/app/services/panelSrv.js index 5bc877415f3..4563f3ad6c8 100644 --- a/src/app/services/panelSrv.js +++ b/src/app/services/panelSrv.js @@ -52,19 +52,19 @@ function (angular, _) { $scope.toggleFullscreen(true); } else { - $scope.emitAppEvent('show-dash-editor', { src: 'app/partials/paneleditor.html', scope: $scope }); + $scope.appEvent('show-dash-editor', { src: 'app/partials/paneleditor.html', scope: $scope }); } }; $scope.sharePanel = function() { - $scope.emitAppEvent('show-modal', { + $scope.appEvent('show-modal', { src: './app/partials/share-panel.html', scope: $scope.$new() }); }; $scope.editPanelJson = function() { - $scope.emitAppEvent('show-json-editor', { object: $scope.panel, updateHandler: $scope.replacePanel }); + $scope.appEvent('show-json-editor', { object: $scope.panel, updateHandler: $scope.replacePanel }); }; $scope.updateColumnSpan = function(span) { diff --git a/src/app/services/timeSrv.js b/src/app/services/timeSrv.js index 1ee9ecdf925..5a28532eb5a 100644 --- a/src/app/services/timeSrv.js +++ b/src/app/services/timeSrv.js @@ -91,7 +91,7 @@ define([ this.old_refresh = null; } - $rootScope.emitAppEvent('time-range-changed', this.time); + $rootScope.appEvent('time-range-changed', this.time); $timeout(this.refreshDashboard, 0); }; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 81f0df7be7e..040905375b7 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -68,7 +68,7 @@ define([ self.$httpBackend = $httpBackend; self.$rootScope.onAppEvent = function() {}; - self.$rootScope.emitAppEvent = function() {}; + self.$rootScope.appEvent = function() {}; self.service = $injector.get(name); }); From 440ea666d9aeda90f02d8d4d108a9169e69a39a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 17:15:58 +0200 Subject: [PATCH 25/45] more work on share panel, #864 --- src/app/controllers/all.js | 1 + src/app/controllers/sharePanelCtrl.js | 42 +++++++++++++++++++++++++++ src/app/controllers/submenuCtrl.js | 3 +- src/app/partials/share-panel.html | 15 ++++++++-- src/css/less/grafana.less | 10 ++++++- src/css/less/overrides.less | 6 ---- 6 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 src/app/controllers/sharePanelCtrl.js diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index 4a4357ecee6..75b05efb3d1 100644 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -15,5 +15,6 @@ define([ './opentsdbTargetCtrl', './annotationsEditorCtrl', './templateEditorCtrl', + './sharePanelCtrl', './jsonEditorCtrl', ], function () {}); diff --git a/src/app/controllers/sharePanelCtrl.js b/src/app/controllers/sharePanelCtrl.js new file mode 100644 index 00000000000..891f2b73317 --- /dev/null +++ b/src/app/controllers/sharePanelCtrl.js @@ -0,0 +1,42 @@ +define([ + 'angular', + 'lodash' +], +function (angular, _) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + + module.controller('SharePanelCtrl', function($scope, $location, $timeout, timeSrv, $element) { + + $scope.init = function() { + $scope.editor = { index: 0 }; + + var currentUrl = $location.absUrl(); + var panelId = $scope.panel.id; + var range = timeSrv.timeRange(false); + var from = range.from; + var to = range.to; + if (_.isDate(from)) { + from = from.getTime(); + } + if (_.isDate(to)) { + to = to.getTime(); + } + + $scope.shareUrl = currentUrl + "?panelId=" + panelId + "&fullscreen"; + $scope.shareUrl += "&from=" + from; + $scope.shareUrl += "&to=" + to; + + $timeout(function() { + var input = $element.find('[data-share-panel-url]'); + input.focus(); + input.select(); + }); + }; + + $scope.init(); + + }); + +}); diff --git a/src/app/controllers/submenuCtrl.js b/src/app/controllers/submenuCtrl.js index a1067ee70ac..bf71377dd14 100644 --- a/src/app/controllers/submenuCtrl.js +++ b/src/app/controllers/submenuCtrl.js @@ -1,9 +1,8 @@ define([ 'angular', - 'app', 'lodash' ], -function (angular, app, _) { +function (angular, _) { 'use strict'; var module = angular.module('grafana.controllers'); diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index 34b8b424683..f6d2f598fdc 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -7,7 +7,7 @@
-
+
@@ -16,7 +16,18 @@
- +
+ + +
+
+ + +
+
+ +
+
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0bc2d6058c4..2e943f98e3e 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -53,8 +53,9 @@ } .modal { - max-width: 1024px; + max-width: 800px; left: 0; + right: 0; margin-left: auto; margin-right: auto; @@ -528,3 +529,10 @@ select.grafana-target-segment-input { .grafana-tip { padding-left: 5px; } + +input[type=text].input-fluid { + width: 100%; + box-sizing: border-box; + padding: 14px; +} + diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index b8fc8e640c1..6c8f6c0224f 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -562,12 +562,6 @@ div.flot-text { background-color: darken(@purple, 10%); } -.annotation-editor-table { - td { - white-space: nowrap; - } -} - // Top menu .save-dashboard-dropdown { padding: 10px; From 4c59ec815e443134b21e515193ed47692a1915a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 24 Sep 2014 18:55:55 +0200 Subject: [PATCH 26/45] work on share panel view, and better look for checkbox --- src/app/controllers/sharePanelCtrl.js | 3 +++ src/app/directives/tip.js | 14 +++++++++++++ src/app/panels/graph/styleEditor.html | 18 +++++++++++------ src/app/panels/timepicker/module.html | 5 +---- src/app/partials/dasheditor.html | 27 +++++++++++++++----------- src/app/partials/share-panel.html | 14 +++++++------ src/css/less/forms.less | 26 +++++++++++++++++++++++++ src/css/less/grafana.less | 9 +-------- src/img/check_radio_sheet.png | Bin 0 -> 4343 bytes src/img/checkbox.png | Bin 0 -> 870 bytes 10 files changed, 81 insertions(+), 35 deletions(-) create mode 100644 src/css/less/forms.less create mode 100644 src/img/check_radio_sheet.png create mode 100644 src/img/checkbox.png diff --git a/src/app/controllers/sharePanelCtrl.js b/src/app/controllers/sharePanelCtrl.js index 891f2b73317..87903378416 100644 --- a/src/app/controllers/sharePanelCtrl.js +++ b/src/app/controllers/sharePanelCtrl.js @@ -28,6 +28,9 @@ function (angular, _) { $scope.shareUrl += "&from=" + from; $scope.shareUrl += "&to=" + to; + $scope.forCurrent = true; + $scope.toPanel = true; + $timeout(function() { var input = $element.find('[data-share-panel-url]'); input.focus(); diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index 974ed98a637..ff364b35569 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -17,4 +17,18 @@ function (angular, kbn) { } }; }); + + angular + .module('grafana.directives') + .directive('tip', function($compile) { + return { + restrict: 'E', + link: function(scope, elem, attrs) { + var _t = ''; + elem.replaceWith($compile(angular.element(_t))(scope)); + } + }; + }); + }); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index cd83f23f197..24a05549268 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -1,14 +1,20 @@
Chart Options
-
- +
+ + +
-
- +
+ + +
-
- +
+ + +
diff --git a/src/app/panels/timepicker/module.html b/src/app/panels/timepicker/module.html index 8357f66a7a3..9371eb16f2e 100644 --- a/src/app/panels/timepicker/module.html +++ b/src/app/panels/timepicker/module.html @@ -9,9 +9,7 @@ border: 0px !important; } - -
+
  • @@ -47,6 +45,5 @@
-
diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 30c43704f8b..bcb8a9402de 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -28,9 +28,10 @@
-
- - +
+ + +
@@ -71,16 +72,20 @@
-
- - +
+ + +
-
- - +
+ + +
-
- +
+ + +
diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index f6d2f598fdc..3eb7c4daec8 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -16,13 +16,15 @@
-
- - +
+ + +
-
- - +
+ + +
diff --git a/src/css/less/forms.less b/src/css/less/forms.less new file mode 100644 index 00000000000..7be785f022a --- /dev/null +++ b/src/css/less/forms.less @@ -0,0 +1,26 @@ +input[type=text].input-fluid { + width: 100%; + box-sizing: border-box; + padding: 14px; +} + +input[type="checkbox"] { + display: none; +} + +input[type="checkbox"]+.cr1 { + display: inline-block; + height: 19px; + clear: none; + text-indent: 2px; + margin-top: 4px; + padding: 0 0 0 20px; + vertical-align:middle; + background:url(../img/checkbox.png) left top no-repeat; + cursor:pointer; +} + +input[type="checkbox"]:checked+label { + background:url(../img/checkbox.png) 0px -18px no-repeat; +} + diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 2e943f98e3e..f2999d1fc8e 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -5,6 +5,7 @@ @import "tables_lists.less"; @import "search.less"; @import "panel.less"; +@import "forms.less"; .hide-controls { padding: 0; @@ -55,7 +56,6 @@ .modal { max-width: 800px; left: 0; - right: 0; margin-left: auto; margin-right: auto; @@ -529,10 +529,3 @@ select.grafana-target-segment-input { .grafana-tip { padding-left: 5px; } - -input[type=text].input-fluid { - width: 100%; - box-sizing: border-box; - padding: 14px; -} - diff --git a/src/img/check_radio_sheet.png b/src/img/check_radio_sheet.png new file mode 100644 index 0000000000000000000000000000000000000000..de6549fa2ccd9f55d243e20f354177ae1b1dbd26 GIT binary patch literal 4343 zcmVKLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z000IeNklA6O6~}+~p9LFBHo>++*xk`&a2(myLA@Ggkl}|Hcz-Z=AkzaT0h8I0TGTFV6y(fWM86Ph8ll;oD{X z;Wxjo2sSh_`ctjcv)c2JQX!?-a3O0Q)*6yHCNbt`*Jj>%t~NLF*@Hh(QhsNB;Fn|L6PH_z8w9>3gm~K1I#5a@rK~b6#w5f^QgqI}47@ZpKC!TYP#=p` z7i@U+U?G+AL#;iOk_aK`WTpe0vlwGZl9+NiTAO|6YFBN3^x)?{^nE|G9af>R#@@${ zGWy&PS^E25c>71+KL?x`8=olG3{+abD1|uYdp=5Qq!1vgWaqHXVUmO>jzb`B zV=SepOcccc_`Zkd`FOt9k);8o6jkG7-96hTJOS2%5UyjmZIzYJud?S$lMJ3b#lo!u z0JpBru=M9YQO#*gU%5CbgghPw0ZJ<>;UfUi;1mLIbpd_rvsNq~pT2VOwZ=Tu%1V-i zU}%^JCcn&{hYkU7`yZG1&xOBIoV$kBx`_o`0H|9eprbdminiHpjVxo#y7^pgmF(do zO=3ki=UF^GMUu}wH8wu643G}Hp7gZxl-Bi}SlJ9wTczr4vg%<9r8S;bUOMb*@~}ph zF_vIxm;)!CK|Xwx8*2eK)&k_iM>%lf8G@lXt$UikV zJ9DOfC>V1{sY;&tzet_8NeF=y0;M$8m_tnmOam*9Bl;hiWTkhIrR6eFY>8sa(sG%V z-a+~wnIw**wyYf!ET7MlJ$!^mUpr6s@DXyk)y>4BQ7nKYjT~VH@=Sth zFT%&((AH;L|L2Mc_#Gmnm~>?Ah+v-fSp4VPxXb^>-+zFGTZOu4tzxB}LwX*iQfVD0 zl@6>mM&TUJIh+%loZzlf8dysz9oSAR-}fj?zeVuHue4q51P6-q%WmFmbzhh2-tB-pB8mFkU-m7S~AQ6?cBb}e>dd7e-4@*6}8*VjkK z!gY$5-@xQjg?BJ38icjtywHdDwW=l6^6SmCB|Zs1Zxe}I-Ii& z;?+FQ*1HCiBqYWXhPy6xVksqY@4d^)t7pi+d7k9XZIU~;$-jA?l~>Q;-g_6NWLuU7 zaP=1v)jDeDYDPM2+-tNo3Z+`1Fw`z#jh@Zxa8GpI_K6G zuFloOGDLAiU;m!CFFWwcMl7v0=H@(w`B^?X*Ic+Ntvj-`)*i+hgpt*7a$9PRj5TQO zHCNJYSf2Jsm&+`ko~nd~b9mav7_%X(Ixh6~^`A|W_=)`LGQRau+HKg*?AqN+Z(sk} zTA{fyOOsBeNvDG*Rvg70Svqr1|Jw4M#jw`yY^V9|?aQt;&UIo*B?+qWE~F$*;!Rog zQ0m(CLjSe}>Qs-~L}UUcZ~HhOrQYT~k5WHQ&9v=jq()a!|1OErh<^3-VEKldyCyY znU{f=fQ6l6X(`qB_TGD++I#PPUk3)Zco4o1{0?}&xsSYitX4yTZ+G`(E_C-~I)1}y l6NY!4B|iP)y1ntg0RWwUA#zn$F*}dDWyUwiBf6_CR$w&yce|-Dx9;)mE#&fN>PJIq?D}#EWkMs!Z!_vT=^10 zwDDqsmSK=zGc~@$z5wQHdGzU0TAJIeX#np$-aEV(wLDrcY28wHYmr)OgLM{RWi5|< zTjgY(MQhUt>+IfM{y3jYE|FfVp2+q8pe@9$hXe-d#1Z>@wBGub} zt?`t@Ql)x!{Aq%qLu-T93Z*nks-}H;vnZ<2cl-ngFa1X6?*5_I5AK_; z&dz(PtGoMR7$$0<+5)vC$<s>S^2Y&QErHe0k1 z1QZJSwm@;Ia5^(ReSM9Bip3(S;SrA9x=U(!ghC;|F36UOEQ9LS0H{D!}BG~;S*|}03xEhr39%&4Vi;FG3Iw9x~kee8z z@?y3QSq(}`K^TUgHf_2i Date: Wed, 24 Sep 2014 19:10:00 +0200 Subject: [PATCH 27/45] Added directive element for the new checkboxes --- src/app/directives/tip.js | 13 +++++++++---- src/app/partials/share-panel.html | 12 ++---------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index ff364b35569..d9dd5145a62 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -20,13 +20,18 @@ function (angular, kbn) { angular .module('grafana.directives') - .directive('tip', function($compile) { + .directive('editorOptBool', function($compile) { return { restrict: 'E', link: function(scope, elem, attrs) { - var _t = ''; - elem.replaceWith($compile(angular.element(_t))(scope)); + var template = '
' + + ' ' + + '' + + ' '; + elem.replaceWith($compile(angular.element(template))(scope)); } }; }); diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index 3eb7c4daec8..efbfcb42ab7 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -16,16 +16,8 @@
-
- - - -
-
- - - -
+ +
From 68adaea12846130bfd5855175733df0c4c1dca42 Mon Sep 17 00:00:00 2001 From: Toby Matejovsky Date: Wed, 24 Sep 2014 19:01:23 -0400 Subject: [PATCH 28/45] Fix typo --- src/config.sample.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config.sample.js b/src/config.sample.js index 740c0d4b8c9..ab60995d251 100644 --- a/src/config.sample.js +++ b/src/config.sample.js @@ -87,7 +87,7 @@ function (Settings) { // Example: "1m", "1h" playlist_timespan: "1m", - // If you want to specify password before saving, please specify it bellow + // If you want to specify password before saving, please specify it below // The purpose of this password is not security, but to stop some users from accidentally changing dashboards admin: { password: '' From 3ea94c34849fe351714a21dee97409b61a94883b Mon Sep 17 00:00:00 2001 From: toni-moreno Date: Thu, 25 Sep 2014 06:35:49 +0200 Subject: [PATCH 29/45] little fix when searching x index time --- src/app/directives/grafanaGraph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 0942f4c80ef..193d0101b76 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -359,7 +359,7 @@ function (angular, $, kbn, moment, _) { j=0; do { ++j; - } while (series.data[j][0] < pos.x); + } while (series.data[j][0] < pos.x && j Date: Thu, 25 Sep 2014 15:45:18 +0200 Subject: [PATCH 30/45] fixing the previous fix, now working fine --- src/app/directives/grafanaGraph.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 193d0101b76..1eaacb098a6 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -356,10 +356,11 @@ function (angular, $, kbn, moment, _) { if(_.uniq(l).length === 1) { s=''; series = data[0]; - j=0; - do { - ++j; - } while (series.data[j][0] < pos.x && j pos.x){ + break; + } + } j--; //we take previous value in time. //now we know the current X (j) position for X and Y values timestamp = dashboard.formatDate(series.data[j][0]); From bc9989f9befd989866f841a43dde81ec7cd48be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 26 Sep 2014 13:09:47 +0200 Subject: [PATCH 31/45] replaced checkbox options with the new editor-opt-bool directive --- src/app/directives/tip.js | 13 +++--- src/app/panels/graph/axisEditor.html | 53 ++++++------------------ src/app/panels/graph/styleEditor.html | 34 ++++----------- src/app/partials/annotations_editor.html | 5 +-- src/app/partials/dasheditor.html | 18 ++------ 5 files changed, 33 insertions(+), 90 deletions(-) diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index d9dd5145a62..57dbd44cb04 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -24,13 +24,16 @@ function (angular, kbn) { return { restrict: 'E', link: function(scope, elem, attrs) { + var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : ''; + var tip = attrs.tip ? (' ' + attrs.tip + '') : ''; + var template = '
' + - ' ' + - '' + + attrs.text + tip + '' + + '' + - ' '; + ' '; elem.replaceWith($compile(angular.element(template))(scope)); } }; diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html index 9380cb99327..3aec233f6be 100644 --- a/src/app/panels/graph/axisEditor.html +++ b/src/app/panels/graph/axisEditor.html @@ -40,42 +40,19 @@
Legend styles
-
- -
-
- -
-
- -
-
- -
+ + + +
Legend values
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- + + + + +
@@ -96,19 +73,13 @@
-
- -
+
Show Axes
-
- -
-
- -
+ +
diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index 24a05549268..9c4188eaa8a 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -1,21 +1,9 @@
Chart Options
-
- - - -
-
- - - -
-
- - - -
+ + +
@@ -36,19 +24,15 @@
-
- -
+ +
Multiple Series
-
- -
-
- - -
+ + + +
diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index c72194b6f6a..a470dcb082e 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -61,10 +61,7 @@
-
- - -
+
diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index bcb8a9402de..74e757b2554 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -28,11 +28,7 @@
-
- - - -
+
@@ -72,16 +68,8 @@
-
- - - -
-
- - - -
+ +
From cc31a12b8c08cf9b10dae1da49564db37189397f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 29 Sep 2014 11:37:56 +0200 Subject: [PATCH 32/45] Smart decimal precision when using scaled unit format, Closes #877 --- src/app/components/kbn.js | 253 +++++------------------------ src/app/components/timeSeries.js | 14 +- src/app/directives/grafanaGraph.js | 10 +- src/test/specs/kbn-format-specs.js | 83 +++------- src/vendor/jquery/jquery.flot.js | 2 + 5 files changed, 77 insertions(+), 285 deletions(-) diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index e41722747fb..cb084b1c166 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -7,7 +7,7 @@ function($, _, moment) { 'use strict'; var kbn = {}; - kbn.formatFunctions = {}; + kbn.valueFormats = {}; kbn.round_interval = function(interval) { switch (true) { @@ -310,192 +310,24 @@ function($, _, moment) { ].join(';') + '">
'; }; - kbn.byteFormat = function(size, decimals) { - var ext, steps = 0; - - if(_.isUndefined(decimals)) { - decimals = 2; - } else if (decimals === 0) { - decimals = undefined; - } - - while (Math.abs(size) >= 1024) { - steps++; - size /= 1024; - } - - switch (steps) { - case 0: - ext = " B"; - break; - case 1: - ext = " KiB"; - break; - case 2: - ext = " MiB"; - break; - case 3: - ext = " GiB"; - break; - case 4: - ext = " TiB"; - break; - case 5: - ext = " PiB"; - break; - case 6: - ext = " EiB"; - break; - case 7: - ext = " ZiB"; - break; - case 8: - ext = " YiB"; - break; - } - - return (size.toFixed(decimals) + ext); + kbn.valueFormats.percent = function(size, decimals) { + return kbn.toFixed(size, decimals) + '%'; }; - kbn.bitFormat = function(size, decimals) { - var ext, steps = 0; + kbn.formatFuncCreator = function(factor, extArray) { + return function(size, decimals, scaledDecimals) { + var steps = 0; - if(_.isUndefined(decimals)) { - decimals = 2; - } else if (decimals === 0) { - decimals = undefined; - } + while (Math.abs(size) >= factor) { + steps++; + size /= factor; + } + if (steps > 0) { + decimals = scaledDecimals + (3 * steps); + } - while (Math.abs(size) >= 1024) { - steps++; - size /= 1024; - } - - switch (steps) { - case 0: - ext = " b"; - break; - case 1: - ext = " Kib"; - break; - case 2: - ext = " Mib"; - break; - case 3: - ext = " Gib"; - break; - case 4: - ext = " Tib"; - break; - case 5: - ext = " Pib"; - break; - case 6: - ext = " Eib"; - break; - case 7: - ext = " Zib"; - break; - case 8: - ext = " Yib"; - break; - } - - return (size.toFixed(decimals) + ext); - }; - - kbn.bpsFormat = function(size, decimals) { - var ext, steps = 0; - - if(_.isUndefined(decimals)) { - decimals = 2; - } else if (decimals === 0) { - decimals = undefined; - } - - while (Math.abs(size) >= 1000) { - steps++; - size /= 1000; - } - - switch (steps) { - case 0: - ext = " bps"; - break; - case 1: - ext = " Kbps"; - break; - case 2: - ext = " Mbps"; - break; - case 3: - ext = " Gbps"; - break; - case 4: - ext = " Tbps"; - break; - case 5: - ext = " Pbps"; - break; - case 6: - ext = " Ebps"; - break; - case 7: - ext = " Zbps"; - break; - case 8: - ext = " Ybps"; - break; - } - - return (size.toFixed(decimals) + ext); - }; - - kbn.shortFormat = function(size, decimals) { - var ext, steps = 0; - - if(_.isUndefined(decimals)) { - decimals = 2; - } else if (decimals === 0) { - decimals = undefined; - } - - while (Math.abs(size) >= 1000) { - steps++; - size /= 1000; - } - - switch (steps) { - case 0: - ext = ""; - break; - case 1: - ext = " K"; - break; - case 2: - ext = " Mil"; - break; - case 3: - ext = " Bil"; - break; - case 4: - ext = " Tri"; - break; - case 5: - ext = " Quadr"; - break; - case 6: - ext = " Quint"; - break; - case 7: - ext = " Sext"; - break; - case 8: - ext = " Sept"; - break; - } - - return (size.toFixed(decimals) + ext); + return kbn.toFixed(size, decimals) + extArray[steps]; + }; }; kbn.toFixed = function(value, decimals) { @@ -520,84 +352,87 @@ function($, _, moment) { return formatted; }; - kbn.formatFunctions.ms = function(size, decimals) { + kbn.valueFormats.bits = kbn.formatFuncCreator(1024, [' b', ' Kib', ' Mib', ' Gib', ' Tib', ' Pib', ' Eib', ' Zib', ' Yib']); + kbn.valueFormats.bytes = kbn.formatFuncCreator(1024, [' B', ' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']); + kbn.valueFormats.bps = kbn.formatFuncCreator(1000, [' bps', ' Kbps', ' Mbps', ' Gbps', ' Tbps', ' Pbps', ' Ebps', ' Zbps', ' Ybps']); + kbn.valueFormats.short = kbn.formatFuncCreator(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Qaudr', ' Quint', ' Sext', ' Sept']); + kbn.valueFormats.none = kbn.toFixed; + + kbn.valueFormats.ms = function(size, decimals, scaledDecimals) { if (Math.abs(size) < 1000) { return kbn.toFixed(size, decimals) + " ms"; } // Less than 1 min else if (Math.abs(size) < 60000) { - return kbn.toFixed(size / 1000, decimals) + " s"; + return kbn.toFixed(size / 1000, scaledDecimals + 3) + " s"; } // Less than 1 hour, devide in minutes else if (Math.abs(size) < 3600000) { - return (size / 60000).toFixed(decimals) + " min"; + return kbn.toFixed(size / 60000, scaledDecimals + 5) + " min"; } // Less than one day, devide in hours else if (Math.abs(size) < 86400000) { - return (size / 3600000).toFixed(decimals) + " hour"; + return kbn.toFixed(size / 3600000, scaledDecimals + 7) + " hour"; } // Less than one year, devide in days else if (Math.abs(size) < 31536000000) { - return (size / 86400000).toFixed(decimals) + " day"; + return kbn.toFixed(size / 86400000, scaledDecimals + 8) + " day"; } - return (size / 31536000000).toFixed(decimals) + " year"; + return kbn.toFixed(size / 31536000000, scaledDecimals + 10) + " year"; }; - kbn.sFormat = function(size, decimals) { + kbn.valueFormats.s = function(size, decimals, scaledDecimals) { if (Math.abs(size) < 600) { - return size.toFixed(decimals) + " s"; + return kbn.toFixed(size, decimals) + " s"; } // Less than 1 hour, devide in minutes else if (Math.abs(size) < 3600) { - return (size / 60).toFixed(decimals) + " min"; + return kbn.toFixed(size / 60, scaledDecimals + 1) + " min"; } // Less than one day, devide in hours else if (Math.abs(size) < 86400) { - return (size / 3600).toFixed(decimals) + " hour"; + return kbn.toFixed(size / 3600, scaledDecimals + 4) + " hour"; } // Less than one week, devide in days else if (Math.abs(size) < 604800) { - return (size / 86400).toFixed(decimals) + " day"; + return kbn.toFixed(size / 86400, scaledDecimals + 5) + " day"; } // Less than one year, devide in week else if (Math.abs(size) < 31536000) { - return (size / 604800).toFixed(decimals) + " week"; + return kbn.toFixed(size / 604800, scaledDecimals + 6) + " week"; } - return (size / 3.15569e7).toFixed(decimals) + " year"; + return kbn.toFixed(size / 3.15569e7, scaledDecimals + 7) + " year"; }; - kbn.microsFormat = function(size, decimals) { + kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) { if (Math.abs(size) < 1000) { return kbn.toFixed(size, decimals) + " µs"; } else if (Math.abs(size) < 1000000) { - return (size / 1000).toFixed(decimals) + " ms"; + return kbn.toFixed(size / 1000, scaledDecimals + 3) + " ms"; } else { - return (size / 1000000).toFixed(decimals) + " s"; + return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " s"; } }; - kbn.nanosFormat = function(size, decimals) { - if (Math.abs(size) < 1) { - return size.toFixed(decimals) + " ns"; - } - else if (Math.abs(size) < 1000) { - return size.toFixed(0) + " ns"; + kbn.valueFormats.ns = function(size, decimals, scaledDecimals) { + if (Math.abs(size) < 1000) { + return kbn.toFixed(size, decimals) + " ns"; } else if (Math.abs(size) < 1000000) { - return (size / 1000).toFixed(decimals) + " µs"; + return kbn.toFixed(size / 1000, scaledDecimals + 3) + " µs"; } else if (Math.abs(size) < 1000000000) { - return (size / 1000000).toFixed(decimals) + " ms"; + return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " ms"; } else if (Math.abs(size) < 60000000000){ - return (size / 1000000000).toFixed(decimals) + " s"; + return kbn.toFixed(size / 1000000000, scaledDecimals + 9) + " s"; } else { - return (size / 60000000000).toFixed(decimals) + " m"; + return kbn.toFixed(size / 60000000000, scaledDecimals + 12) + " m"; } }; diff --git a/src/app/components/timeSeries.js b/src/app/components/timeSeries.js index 576e8be8e8a..a448a93649c 100644 --- a/src/app/components/timeSeries.js +++ b/src/app/components/timeSeries.js @@ -54,7 +54,7 @@ function (_, kbn) { } }; - TimeSeries.prototype.getFlotPairs = function (fillStyle, yFormats) { + TimeSeries.prototype.getFlotPairs = function (fillStyle) { var result = []; this.color = this.info.color; @@ -107,12 +107,12 @@ function (_, kbn) { return result; }; - TimeSeries.prototype.updateLegendValues = function(formater, decimals) { - this.info.avg = this.info.avg != null ? formater(this.info.avg, decimals) : null; - this.info.current = this.info.current != null ? formater(this.info.current, decimals) : null; - this.info.min = this.info.min != null ? formater(this.info.min, decimals) : null; - this.info.max = this.info.max != null ? formater(this.info.max, decimals) : null; - this.info.total = this.info.total != null ? formater(this.info.total, decimals) : null; + TimeSeries.prototype.updateLegendValues = function(formater, decimals, scaledDecimals) { + this.info.avg = this.info.avg != null ? formater(this.info.avg, decimals, scaledDecimals) : null; + this.info.current = this.info.current != null ? formater(this.info.current, decimals, scaledDecimals) : null; + this.info.min = this.info.min != null ? formater(this.info.min, decimals, scaledDecimals) : null; + this.info.max = this.info.max != null ? formater(this.info.max, decimals, scaledDecimals) : null; + this.info.total = this.info.total != null ? formater(this.info.total, decimals, scaledDecimals) : null; }; return TimeSeries; diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 53edcf1bc13..df48de89c6f 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -90,12 +90,12 @@ function (angular, $, kbn, moment, _) { function updateLegendValues(plot) { var yaxis = plot.getYAxes(); - console.log('drawSeries', yaxis); for (var i = 0; i < data.length; i++) { var series = data[i]; - var formater = kbn.formatFunctions[scope.panel.y_formats[series.yaxis - 1]]; - series.updateLegendValues(formater, yaxis[series.yaxis - 1].tickDecimals); + var axis = yaxis[series.yaxis - 1]; + var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]]; + series.updateLegendValues(formater, axis.tickDecimals, axis.scaledDecimals); } } @@ -327,7 +327,7 @@ function (angular, $, kbn, moment, _) { function configureAxisMode(axis, format) { axis.tickFormatter = function(val, axis) { - return kbn.formatFunctions[format](val, axis.tickDecimals); + return kbn.valueFormats[format](val, axis.tickDecimals, axis.scaledDecimals); }; } @@ -378,7 +378,7 @@ function (angular, $, kbn, moment, _) { value = item.datapoint[1]; } - value = kbn.getFormatFunction(format, 2)(value, item.series.yaxis); + value = kbn.valueFormats[format](value, item.series.yaxis.tickDecimals); timestamp = dashboard.formatDate(item.datapoint[0]); $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); diff --git a/src/test/specs/kbn-format-specs.js b/src/test/specs/kbn-format-specs.js index 85807c277ec..e92e6d0ceec 100644 --- a/src/test/specs/kbn-format-specs.js +++ b/src/test/specs/kbn-format-specs.js @@ -3,76 +3,31 @@ define([ ], function(kbn) { 'use strict'; - describe('millisecond formating', function() { + function describeValueFormat(desc, value, tickSize, tickDecimals, result) { - it('should translate 4378634603 as 1.67 years', function() { - var str = kbn.msFormat(4378634603, 2); - expect(str).to.be('50.68 day'); + describe('value format: ' + desc, function() { + it('should translate ' + value + ' as ' + result, function() { + var scaledDecimals = tickDecimals - Math.floor(Math.log(tickSize) / Math.LN10); + var str = kbn.valueFormats[desc](value, tickDecimals, scaledDecimals); + expect(str).to.be(result); + }); }); - it('should translate 3654454 as 1.02 hour', function() { - var str = kbn.msFormat(3654454, 2); - expect(str).to.be('1.02 hour'); - }); + } - it('should not downscale when value is zero', function() { - var str = kbn.msFormat(0, 2); - expect(str).to.be('0.00 ms'); - }); + describeValueFormat('ms', 0.0024, 0.0005, 4, '0.0024 ms'); + describeValueFormat('ms', 100, 1, 0, '100 ms'); + describeValueFormat('ms', 1250, 10, 0, '1.25 s'); + describeValueFormat('ms', 1250, 300, 0, '1.3 s'); + describeValueFormat('ms', 65150, 10000, 0, '1.1 min'); + describeValueFormat('ms', 6515000, 1500000, 0, '1.8 hour'); + describeValueFormat('ms', 651500000, 150000000, 0, '8 day'); + describeValueFormat('none', 2.75e-10, 0, 10, '3e-10'); + describeValueFormat('none', 0, 0, 2, '0'); - it('should translate 365445 as 6.09 min', function() { - var str = kbn.msFormat(365445, 2); - expect(str).to.be('6.09 min'); - }); - - }); - - describe('high negative exponent, issue #696', function() { - it('should ignore decimal correction if exponent', function() { - var str = kbn.getFormatFunction('')(2.75e-10, { tickDecimals: 12 }); - expect(str).to.be('2.75e-10'); - }); - it('should format 0 correctly', function() { - var str = kbn.getFormatFunction('')(0.0, { tickDecimals: 12 }); - expect(str).to.be('0'); - }); - }); - - describe('none format tests', function() { - it('should translate 2 as 2.0000 if axis decimals is 4', function() { - var str = kbn.getFormatFunction('')(2, { tickDecimals: 4 }); - expect(str).to.be('2.0000'); - }); - }); - - describe('nanosecond formatting', function () { - it('should translate 25 to 25 ns', function () { - var str = kbn.nanosFormat(25, 2); - expect(str).to.be("25 ns"); - }); - - it('should translate 2558 to 2.56 µs', function () { - var str = kbn.nanosFormat(2558, 2); - expect(str).to.be("2.56 µs"); - }); - - it('should translate 2558000 to 2.56 ms', function () { - var str = kbn.nanosFormat(2558000, 2); - expect(str).to.be("2.56 ms"); - }); - - it('should translate 2019962000 to 2.02 s', function () { - var str = kbn.nanosFormat(2049962000, 2); - expect(str).to.be("2.05 s"); - }); - - it('should translate 95199620000 to 1.59 m', function () { - var str = kbn.nanosFormat(95199620000, 2); - expect(str).to.be("1.59 m"); - }); - - }); + describeValueFormat('ns', 25, 1, 0, '25 ns'); + describeValueFormat('ns', 2558, 50, 0, '2.56 µs'); describe('calculateInterval', function() { it('1h 100 resultion', function() { diff --git a/src/vendor/jquery/jquery.flot.js b/src/vendor/jquery/jquery.flot.js index c97ceb1bf44..87a1b17c742 100644 --- a/src/vendor/jquery/jquery.flot.js +++ b/src/vendor/jquery/jquery.flot.js @@ -1728,6 +1728,8 @@ Licensed under the MIT license. axis.delta = delta; axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); axis.tickSize = opts.tickSize || size; + // grafana addition + axis.scaledDecimals = axis.tickDecimals - Math.floor(Math.log(axis.tickSize) / Math.LN10); // Time mode was moved to a plug-in in 0.8, and since so many people use it // we'll add an especially friendly reminder to make sure they included it. From 51333c9eda6bbd7222e9192f588e9a01c9619e05 Mon Sep 17 00:00:00 2001 From: toni-moreno Date: Mon, 29 Sep 2014 12:48:08 +0200 Subject: [PATCH 33/45] improved tooltip styles, add multiple highlight points, and changed highligth size when graph plotted without points. --- src/app/directives/grafanaGraph.js | 16 ++++++++++++---- src/css/less/grafana.less | 12 ++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 1eaacb098a6..32454a1f4d7 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -113,7 +113,8 @@ function (angular, $, kbn, moment, _) { show: panel.points, fill: 1, fillColor: false, - radius: panel.pointradius + radius: panel.points ? panel.pointradius : 2 + // little points when highlight points }, shadowSize: 1 }, @@ -335,6 +336,7 @@ function (angular, $, kbn, moment, _) { if(scope.panel.tooltip.shared) { $tooltip.detach(); elem.flot.clearCrosshair(); + elem.flot.unhighlight(); } }); @@ -344,6 +346,8 @@ function (angular, $, kbn, moment, _) { //if tooltip shared we'll show a crosshair and will look for X and all Y series values //else we will take from item. if(scope.panel.tooltip.shared){ + //unhighligh previous points. + elem.flot.unhighlight(); //check if all series has same length if so, only one x index will //be checked and only for exact timestamp values var l = []; @@ -361,7 +365,9 @@ function (angular, $, kbn, moment, _) { break; } } - j--; //we take previous value in time. + if(j>0) { + j--; //we take previous value in time. + } //now we know the current X (j) position for X and Y values timestamp = dashboard.formatDate(series.data[j][0]); var last_value=0; //needed for stacked values @@ -384,12 +390,14 @@ function (angular, $, kbn, moment, _) { group = kbn.query_color_dot(series.color, 15) + ' '; } //pre-pending new values - s_final= group+ ": "+value +'
'+ s; + s_final= group+ ": "+value +'
'+ s; s=s_final; + //higligth point + elem.flot.highlight(i,j); } $tooltip.html('Time@ '+ - timestamp + '
' + s + '').place_tt(pos.pageX, pos.pageY); + timestamp + '
' + s + '').place_tt(pos.pageX, pos.pageY); return; }else { console.log('WARNING: tootltip shared can not be shown becouse of from ' diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index b291b548219..d009f1eff89 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -438,6 +438,18 @@ select.grafana-target-segment-input { max-width: 800px; max-height: 600px; overflow: hidden; + line-height: 14px; +} + + + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom:0px solid #c8c8c8; + /*height:0px; + background-color: rgb(58, 57, 57);*/ } .tooltip.in { From 2473ae3b47d637f534b04465244c3273dd0d45cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 29 Sep 2014 16:57:05 +0200 Subject: [PATCH 34/45] Graph: shared multi series tooltip, refactoring PR #850 --- src/app/directives/grafanaGraph.js | 117 ++------------------ src/app/directives/grafanaGraph.tooltip.js | 122 +++++++++++++++++++++ src/app/panels/graph/module.js | 2 +- src/css/less/graph.less | 16 +++ src/test/specs/graph-tooltip-specs.js | 56 ++++++++++ src/test/test-main.js | 1 + 6 files changed, 203 insertions(+), 111 deletions(-) create mode 100644 src/app/directives/grafanaGraph.tooltip.js create mode 100644 src/test/specs/graph-tooltip-specs.js diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index c7c937d8bd6..42ef1b91cb5 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -3,9 +3,10 @@ define([ 'jquery', 'kbn', 'moment', - 'lodash' + 'lodash', + './grafanaGraph.tooltip' ], -function (angular, $, kbn, moment, _) { +function (angular, $, kbn, moment, _, graphTooltip) { 'use strict'; var module = angular.module('grafana.directives'); @@ -15,8 +16,8 @@ function (angular, $, kbn, moment, _) { restrict: 'A', template: '
', link: function(scope, elem) { - var data, annotations; var dashboard = scope.dashboard; + var data, annotations; var legendSideLastValue = null; scope.$on('refresh',function() { @@ -174,7 +175,7 @@ function (angular, $, kbn, moment, _) { function callPlot() { try { - elem.flot=$.plot(elem, sortedSeries, options); + $.plot(elem, sortedSeries, options); } catch (e) { console.log('flotcharts error', e); } @@ -343,112 +344,6 @@ function (angular, $, kbn, moment, _) { return "%H:%M"; } - var $tooltip = $('
'); - - //this event will erase tooltip and crosshair once leaved the graph - elem.mouseleave(function () { - console.log('onmouse out:'); - if(scope.panel.tooltip.shared) { - $tooltip.detach(); - elem.flot.clearCrosshair(); - elem.flot.unhighlight(); - } - }); - - elem.bind("plothover", function (event, pos, item) { - var group, value, timestamp, seriesInfo, format, i, j, s, s_final; - - //if tooltip shared we'll show a crosshair and will look for X and all Y series values - //else we will take from item. - if(scope.panel.tooltip.shared){ - //unhighligh previous points. - elem.flot.unhighlight(); - //check if all series has same length if so, only one x index will - //be checked and only for exact timestamp values - var l = []; - var series; - for (i = 0; i < data.length; ++i) { - series = data[i]; - l.push(series.data.length); - } - //if all series has the same length it is because of they share time axis - if(_.uniq(l).length === 1) { - s=''; - series = data[0]; - for(j=0;j pos.x){ - break; - } - } - if(j>0) { - j--; //we take previous value in time. - } - //now we know the current X (j) position for X and Y values - timestamp = dashboard.formatDate(series.data[j][0]); - var last_value=0; //needed for stacked values - for (i = data.length-1; i >= 0; --i) { - //stacked values should be added in reverse order - series = data[i]; - seriesInfo = series.info; - format = scope.panel.y_formats[seriesInfo.yaxis - 1]; - if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { - value = series.data[j][1]; - } else { - last_value+=series.data[j][1]; - value = last_value; - } - value = kbn.getFormatFunction(format, 2)(value,series.yaxis); - if (seriesInfo.alias) { - group = '' + - ' ' + seriesInfo.alias; - } else { - group = kbn.query_color_dot(series.color, 15) + ' '; - } - //pre-pending new values - s_final= group+ ": "+value +'
'+ s; - s=s_final; - //higligth point - elem.flot.highlight(i,j); - } - - $tooltip.html('Time@ '+ - timestamp + '
' + s + '').place_tt(pos.pageX, pos.pageY); - return; - }else { - console.log('WARNING: tootltip shared can not be shown becouse of from ' - +data.length+' series has different length '+_.uniq(l)); - $tooltip.detach(); - } - } - if (item) { - seriesInfo = item.series.info; - format = scope.panel.y_formats[seriesInfo.yaxis - 1]; - - if (seriesInfo.alias) { - group = '' + - '' + ' ' + - seriesInfo.alias + - '
'; - } else { - group = kbn.query_color_dot(item.series.color, 15) + ' '; - } - - if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { - value = item.datapoint[1] - item.datapoint[2]; - } - else { - value = item.datapoint[1]; - } - - value = kbn.valueFormats[format](value, item.series.yaxis.tickDecimals); - timestamp = dashboard.formatDate(item.datapoint[0]); - - $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); - } else { - $tooltip.detach(); - } - }); - function render_panel_as_graphite_png(url) { url += '&width=' + elem.width(); url += '&height=' + elem.css('height').replace('px', ''); @@ -499,6 +394,8 @@ function (angular, $, kbn, moment, _) { elem.html(''); } + graphTooltip.register(elem, dashboard, scope); + elem.bind("plotselected", function (event, ranges) { scope.$apply(function() { timeSrv.setTime({ diff --git a/src/app/directives/grafanaGraph.tooltip.js b/src/app/directives/grafanaGraph.tooltip.js new file mode 100644 index 00000000000..513d7126985 --- /dev/null +++ b/src/app/directives/grafanaGraph.tooltip.js @@ -0,0 +1,122 @@ +define([ + 'jquery', + 'kbn', +], +function ($, kbn) { + 'use strict'; + + function registerTooltipFeatures(elem, dashboard, scope) { + + var $tooltip = $('
'); + + elem.mouseleave(function () { + if(scope.panel.tooltip.shared) { + var plot = elem.data().plot; + $tooltip.detach(); + plot.clearCrosshair(); + plot.unhighlight(); + } + }); + + function findHoverIndex(posX, series) { + for (var j = 0; j < series.data.length; j++) { + if (series.data[j][0] > posX) { + return Math.max(j - 1, 0); + } + } + return j - 1; + } + + elem.bind("plothover", function (event, pos, item) { + var plot = elem.data().plot; + var data = plot.getData(); + var group, value, timestamp, seriesInfo, format, i, series, hoverIndex, seriesHtml; + + if (scope.panel.tooltip.shared) { + plot.unhighlight(); + + //check if all series has same length if so, only one x index will + //be checked and only for exact timestamp values + var pointCount = data[0].data.length; + for (i = 1; i < data.length; i++) { + if (data[i].data.length !== pointCount) { + console.log('WARNING: tootltip shared can not be shown becouse of series points do not align, different point counts'); + $tooltip.detach(); + return; + } + } + + seriesHtml = ''; + series = data[0]; + hoverIndex = findHoverIndex(pos.x, series); + + //now we know the current X (j) position for X and Y values + timestamp = dashboard.formatDate(series.data[hoverIndex][0]); + var last_value = 0; //needed for stacked values + + for (i = data.length-1; i >= 0; --i) { + //stacked values should be added in reverse order + series = data[i]; + seriesInfo = series.info; + format = scope.panel.y_formats[seriesInfo.yaxis - 1]; + + if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + value = series.data[hoverIndex][1]; + } else { + last_value += series.data[hoverIndex][1]; + value = last_value; + } + + value = kbn.valueFormats[format](value, series.yaxis.tickDecimals); + + if (seriesInfo.alias) { + group = ' ' + seriesInfo.alias; + } else { + group = kbn.query_color_dot(series.color, 15) + ' '; + } + + //pre-pending new values + seriesHtml = group + ': ' + value + '
' + seriesHtml; + + plot.highlight(i, hoverIndex); + } + + $tooltip.html('
'+ timestamp + '
' + seriesHtml + '
') + .place_tt(pos.pageX + 20, pos.pageY); + return; + } + if (item) { + seriesInfo = item.series.info; + format = scope.panel.y_formats[seriesInfo.yaxis - 1]; + + if (seriesInfo.alias) { + group = '' + + '' + ' ' + + seriesInfo.alias + + '
'; + } else { + group = kbn.query_color_dot(item.series.color, 15) + ' '; + } + + if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + value = item.datapoint[1] - item.datapoint[2]; + } + else { + value = item.datapoint[1]; + } + + value = kbn.valueFormats[format](value, item.series.yaxis.tickDecimals); + timestamp = dashboard.formatDate(item.datapoint[0]); + + $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); + } else { + $tooltip.detach(); + } + }); + + } + + return { + register: registerTooltipFeatures + }; +}); diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index bbe64d10c37..bc15b851f9d 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -161,7 +161,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { tooltip : { value_type: 'cumulative', - query_as_alias: true + shared: false, }, targets: [{}], diff --git a/src/css/less/graph.less b/src/css/less/graph.less index d53c55345c7..92f57dbfc71 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -166,3 +166,19 @@ float: left; } } + +.graph-tooltip { + .graph-tooltip-time { + text-align: center; + font-weight: bold; + position: relative; + top: -3px; + } + + .graph-tooltip-value { + font-weight: bold; + float: right; + padding-left: 10px; + } + +} diff --git a/src/test/specs/graph-tooltip-specs.js b/src/test/specs/graph-tooltip-specs.js new file mode 100644 index 00000000000..2ca3ec85cac --- /dev/null +++ b/src/test/specs/graph-tooltip-specs.js @@ -0,0 +1,56 @@ +define([ + 'jquery', + 'directives/grafanaGraph.tooltip' +], function($, tooltip) { + 'use strict'; + + describe('graph tooltip', function() { + var elem = $('
'); + var dashboard = { + formatDate: sinon.stub().returns('date'), + }; + var scope = { + panel: { + tooltip: { + shared: true + }, + y_formats: ['ms', 'none'], + } + }; + + var data = [ + { + data: [[10,10], [12,20]], + info: { yaxis: 1 }, + yaxis: { tickDecimals: 2 }, + }, + { + data: [[10,10], [12,20]], + info: { yaxis: 1 }, + yaxis: { tickDecimals: 2 }, + } + ]; + + var plot = { + getData: sinon.stub().returns(data), + highlight: sinon.stub(), + unhighlight: sinon.stub() + }; + + elem.data('plot', plot); + + beforeEach(function() { + tooltip.register(elem, dashboard, scope); + elem.trigger('plothover', [{}, {x: 13}, {}]); + }); + + it('should add tooltip', function() { + var tooltipHtml = $(".graph-tooltip").text(); + expect(tooltipHtml).to.be('date : 40.00 ms : 20.00 ms'); + }); + + }); + +}); + + diff --git a/src/test/test-main.js b/src/test/test-main.js index f60cdb87da4..6862c9fa8ae 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -129,6 +129,7 @@ require([ 'specs/influxdb-datasource-specs', 'specs/graph-ctrl-specs', 'specs/grafanaGraph-specs', + 'specs/graph-tooltip-specs', 'specs/seriesOverridesCtrl-specs', 'specs/timeSrv-specs', 'specs/templateSrv-specs', From 5f164d99ace9fd48c026259817f50d60952910e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 29 Sep 2014 16:59:17 +0200 Subject: [PATCH 35/45] Updated changelog with merged PR #850, shared multi series graph tooltip & crosshair --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95cf8a52a5b..ad6ab03e0c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # 1.9.0 (unreleased) - [Issue #877](https://github.com/grafana/grafana/issues/877). Graph: Smart auto decimal precision when using scaled unit formats +- [Issue #850](https://github.com/grafana/grafana/issues/850). Graph: Shared tooltip that shows multiple series & crosshair line, thx @toni-moreno # 1.8.1 (unreleased) From 64f3303711758b47f0ef6915d5a03d2e51660206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 09:02:25 +0200 Subject: [PATCH 36/45] InfluxDB: save dashboard issue, another fix for #859 --- src/app/services/influxdb/influxdbDatasource.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index 8ad003cc632..757c2ef0d32 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -215,9 +215,9 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { if (id === title) { return; } var self = this; - self._getDashboardInternal(id, isTemp).then(function(dashboard) { + self._getDashboardInternal(title, isTemp).then(function(dashboard) { if (dashboard !== null) { - self.deleteDashboard(id); + self.deleteDashboard(title); } }); }; From bf361d2b02a350b7439a04cf12e2e9f94ac33d62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 09:03:14 +0200 Subject: [PATCH 37/45] Updated package.json version and latest.json, preparation for 1.8.1 release --- latest.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/latest.json b/latest.json index 6e7dc07bae2..30dd2d3127b 100644 --- a/latest.json +++ b/latest.json @@ -1,4 +1,4 @@ { - "version": "1.8.0", - "url": "http://grafanarel.s3.amazonaws.com/grafana-1.8.0.tar.gz" + "version": "1.8.1", + "url": "http://grafanarel.s3.amazonaws.com/grafana-1.8.1.tar.gz" } diff --git a/package.json b/package.json index 8de8f05cf8a..8369d640c62 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Coding Instinct AB" }, "name": "grafana", - "version": "1.8.0", + "version": "1.8.1", "repository": { "type": "git", "url": "http://github.com/torkelo/grafana.git" From f908ae8c4008fe4f7ed63273c3aab3c8fa4a5e9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 09:50:01 +0200 Subject: [PATCH 38/45] added checkbox image for white theme --- src/css/less/forms.less | 4 ++-- src/css/less/variables.dark.less | 3 ++- src/css/less/variables.light.less | 4 ++-- src/img/checkbox_white.png | Bin 0 -> 960 bytes 4 files changed, 6 insertions(+), 5 deletions(-) create mode 100644 src/img/checkbox_white.png diff --git a/src/css/less/forms.less b/src/css/less/forms.less index 7be785f022a..e70efb362c8 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -16,11 +16,11 @@ input[type="checkbox"]+.cr1 { margin-top: 4px; padding: 0 0 0 20px; vertical-align:middle; - background:url(../img/checkbox.png) left top no-repeat; + background: url(@checkboxImageUrl) left top no-repeat; cursor:pointer; } input[type="checkbox"]:checked+label { - background:url(../img/checkbox.png) 0px -18px no-repeat; + background: url(@checkboxImageUrl) 0px -18px no-repeat; } diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 287694b1d0a..42ab0bba861 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -290,7 +290,8 @@ @popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterColor: rgba(0,0,0,.25); - +// images +@checkboxImageUrl: '../img/checkbox.png'; // GRID // -------------------------------------------------- diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 5f843fa4d7a..063d0148c37 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -299,12 +299,12 @@ @popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterColor: rgba(0,0,0,.25); - +// images +@checkboxImageUrl: '../img/checkbox_white.png'; // GRID // -------------------------------------------------- - // Default 940px grid // ------------------------- @gridColumns: 12; diff --git a/src/img/checkbox_white.png b/src/img/checkbox_white.png new file mode 100644 index 0000000000000000000000000000000000000000..dbff6d5ab64c0583e46c7f27b3259d48358cbf7e GIT binary patch literal 960 zcmV;x13&zUP)e zSad^gZEa<4bO1wgWnpw>WFU8GbZ8()Nlj2!fese{00SsVL_t(Y$L*FuY!p=(fWP;@ zX&ZJ4i3huFOxWEv*jijQ#*0TiiN<3+il?R zw(d!ISNKpY8bw6oXpLw=H)*0J$PrB}8YR3de5m?C&f0n@geXKSloC+E*qeq`h&C7$ zYwM*@4GefRw16TlPzo^02EYc>;Z!H8HY?UFhV zwEVW}6!fWsMYb@9rOCze80AF5T`3CjZE9@sJLa0&0ZijmLXTz1fVc~lMi2e74PrO z^U}z)#_p`P>$;?8=W0OZDB7*C>?SYo_qp8D(&+brA*)5Zv zo#Wf*_mZBS!*$)3pyJ93TcDZ^#q&Lm%$#N4$urC^mWYjINPjsA&=52bi&9)!X}mjW ztr>my05eyv)48{wTw#;gSO#DRXfPf}lr)#4LNOGNlXUJ=US8aW)Psil`sr|-$D3An zXomXwYk>72-JzSBK>jhU1-lbi4|-zLYAp=L<0O}s02qwN(OR&^wluA}acg1o=i3XR zMhkuG>8k2l^)J=F7Y82fe`z3GZQ6GxPo22*FHHM;W@75CdeaJBd-_mxgX(NggSL$2 iF7C#!*=%-u@*V=F(XfI?3zg6S0000 Date: Tue, 30 Sep 2014 10:27:56 +0200 Subject: [PATCH 39/45] New checkbox change is complete --- src/app/controllers/templateEditorCtrl.js | 3 +++ src/app/directives/tip.js | 5 +++-- src/app/partials/dasheditor.html | 2 +- src/app/partials/playlist.html | 3 ++- src/app/partials/roweditor.html | 8 ++------ src/app/partials/templating_editor.html | 18 ++++++------------ src/css/less/forms.less | 2 +- 7 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 058a190658b..394946447a7 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -72,6 +72,9 @@ function (angular, _) { if ($scope.current.type === 'interval') { $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; } + if ($scope.current.type === 'query') { + $scope.current.query = ''; + } }; $scope.removeVariable = function(variable) { diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index 57dbd44cb04..ba1d373efb7 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -26,11 +26,12 @@ function (angular, kbn) { link: function(scope, elem, attrs) { var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : ''; var tip = attrs.tip ? (' ' + attrs.tip + '') : ''; + var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : ''; - var template = '
' + + var template = '
' + ' ' + - '' + ' '; diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 74e757b2554..5cfad2d8d79 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -72,7 +72,7 @@
- +
diff --git a/src/app/partials/playlist.html b/src/app/partials/playlist.html index 1517678e730..b3be57e8fda 100644 --- a/src/app/partials/playlist.html +++ b/src/app/partials/playlist.html @@ -22,7 +22,8 @@ {{dashboard.title}} - + + diff --git a/src/app/partials/roweditor.html b/src/app/partials/roweditor.html index 032163ea64b..57060ebf93c 100644 --- a/src/app/partials/roweditor.html +++ b/src/app/partials/roweditor.html @@ -20,12 +20,8 @@
-
- -
-
- -
+ +
diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 90d1fb50d26..1ac2c879d1c 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -66,10 +66,10 @@
-
- - -
+ +
@@ -80,10 +80,7 @@
-
- - -
+
@@ -118,10 +115,7 @@
-
- - -
+
diff --git a/src/css/less/forms.less b/src/css/less/forms.less index e70efb362c8..ab17dc81c94 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -4,7 +4,7 @@ input[type=text].input-fluid { padding: 14px; } -input[type="checkbox"] { +input[type="checkbox"].cr1 { display: none; } From 7a7629acf75b40e08b1b2216e94deba206fcab80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 10:43:13 +0200 Subject: [PATCH 40/45] Panel-menu: small tweeks to css for cursor types --- src/app/panels/graph/module.html | 2 +- src/app/panels/text/module.js | 1 + src/css/less/graph.less | 2 +- src/css/less/panel.less | 7 ++++++- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index b4302bbd0f2..3a6e0c8a0d1 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -8,7 +8,7 @@ Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server
-
+
diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index e652b40a56b..d778e877031 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -20,6 +20,7 @@ function (angular, app, _, require) { // Set and populate defaults var _d = { + title: 'default title', mode : "markdown", // 'html', 'markdown', 'text' content : "", style: {}, diff --git a/src/css/less/graph.less b/src/css/less/graph.less index 92f57dbfc71..01a697ddb2e 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -1,5 +1,6 @@ .graph-canvas-wrapper { position: relative; + cursor: crosshair; } .graph-legend { @@ -180,5 +181,4 @@ float: right; padding-left: 10px; } - } diff --git a/src/css/less/panel.less b/src/css/less/panel.less index b77ea323bc2..7d24d1752c4 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -17,7 +17,7 @@ .panel-title-container { min-height: 5px; - cursor: pointer; + cursor: context-menu; } .panel-title { @@ -25,6 +25,7 @@ font-weight: bold; position: relative; font-size: 0.9em; + cursor: context-menu; } .panel-loading { @@ -77,6 +78,10 @@ } } + .icon-move { + cursor: move; + } + .panel-menu-link, .panel-menu-icon { padding: 5px 10px; } From 2d866b9298a53c77735e9752e219ba4164b6eca3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 10:49:59 +0200 Subject: [PATCH 41/45] Updated changelog with the new panel menu, Closes #770 --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ad6ab03e0c9..c0f1625ac12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,8 @@ # 1.9.0 (unreleased) + +**UI Improvements* +- [Issue #770](https://github.com/grafana/grafana/issues/770). UI: Panel dropdown menu replaced with a new panel menu + - [Issue #877](https://github.com/grafana/grafana/issues/877). Graph: Smart auto decimal precision when using scaled unit formats - [Issue #850](https://github.com/grafana/grafana/issues/850). Graph: Shared tooltip that shows multiple series & crosshair line, thx @toni-moreno From 2c85205259b0a2672235598f042004672644f50f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 14:42:59 +0200 Subject: [PATCH 42/45] SharePanelModal: working on share feature, #864 --- .jsfmtrc | 21 +++ src/app/controllers/sharePanelCtrl.js | 69 ++++++--- src/app/partials/dasheditor.html | 1 - src/app/partials/share-panel.html | 7 +- src/config.sample.js | 190 +++++++++++++------------ src/css/less/forms.less | 2 + src/test/specs/helpers.js | 10 +- src/test/specs/sharePanelCtrl-specs.js | 59 ++++++++ src/test/test-main.js | 1 + 9 files changed, 242 insertions(+), 118 deletions(-) create mode 100644 .jsfmtrc create mode 100644 src/test/specs/sharePanelCtrl-specs.js diff --git a/.jsfmtrc b/.jsfmtrc new file mode 100644 index 00000000000..3ca3b4a3b50 --- /dev/null +++ b/.jsfmtrc @@ -0,0 +1,21 @@ +{ + "preset" : "default", + + "lineBreak" : { + "before" : { + "VariableDeclarationWithoutInit" : 0, + }, + + "after": { + "AssignmentOperator": -1, + "ArgumentListArrayExpression": ">=1" + } + }, + + "whiteSpace" : { + "before" : { + }, + "after" : { + } + } +} diff --git a/src/app/controllers/sharePanelCtrl.js b/src/app/controllers/sharePanelCtrl.js index 87903378416..b55da84263a 100644 --- a/src/app/controllers/sharePanelCtrl.js +++ b/src/app/controllers/sharePanelCtrl.js @@ -11,31 +11,64 @@ function (angular, _) { $scope.init = function() { $scope.editor = { index: 0 }; - - var currentUrl = $location.absUrl(); - var panelId = $scope.panel.id; - var range = timeSrv.timeRange(false); - var from = range.from; - var to = range.to; - if (_.isDate(from)) { - from = from.getTime(); - } - if (_.isDate(to)) { - to = to.getTime(); - } - - $scope.shareUrl = currentUrl + "?panelId=" + panelId + "&fullscreen"; - $scope.shareUrl += "&from=" + from; - $scope.shareUrl += "&to=" + to; - $scope.forCurrent = true; $scope.toPanel = true; + $scope.buildUrl(); + }; + + $scope.buildUrl = function() { + var baseUrl = $location.absUrl(); + var queryStart = baseUrl.indexOf('?'); + + if (queryStart !== -1) { + baseUrl = baseUrl.substring(0, queryStart); + } + + var panelId = $scope.panel.id; + var range = timeSrv.timeRange(false); + var params = $location.search(); + + if (_.isString(range.to) && range.to.indexOf('now')) { + range = timeSrv.timeRange(); + } + + params.from = range.from; + params.to = range.to; + + if (_.isDate(params.from)) { params.from = params.from.getTime(); } + if (_.isDate(params.to)) { params.to = params.to.getTime(); } + + if (!$scope.forCurrent) { + delete params.from; + delete params.to; + } + + if ($scope.toPanel) { + params.panelId = panelId; + params.fullscreen = true; + } else { + delete params.panelId; + delete params.fullscreen; + } + + var paramsArray = []; + _.each(params, function(value, key) { + var str = key; + if (value !== true) { + str += '=' + encodeURIComponent(value); + } + paramsArray.push(str); + }); + + $scope.shareUrl = baseUrl + "?" + paramsArray.join('&') ; + $timeout(function() { var input = $element.find('[data-share-panel-url]'); input.focus(); input.select(); - }); + }, 10); + }; $scope.init(); diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index 5cfad2d8d79..ae8608b97d1 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -39,7 +39,6 @@ Press enter to a add tag
-
diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index efbfcb42ab7..49c13315e69 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -15,13 +15,14 @@
+
- - + +
- +
diff --git a/src/config.sample.js b/src/config.sample.js index ab60995d251..07f29d7be28 100644 --- a/src/config.sample.js +++ b/src/config.sample.js @@ -2,108 +2,110 @@ // config.js is where you will find the core Grafana configuration. This file contains parameter that // must be set before Grafana is run for the first time. -define(['settings'], -function (Settings) { +define(['settings'], function(Settings) { "use strict"; return new Settings({ - /* Data sources - * ======================================================== - * Datasources are used to fetch metrics, annotations, and serve as dashboard storage - * - You can have multiple of the same type. - * - grafanaDB: true marks it for use for dashboard storage - * - default: true marks the datasource as the default metric source (if you have multiple) - * - basic authentication: use url syntax http://username:password@domain:port - */ + /* Data sources + * ======================================================== + * Datasources are used to fetch metrics, annotations, and serve as dashboard storage + * - You can have multiple of the same type. + * - grafanaDB: true marks it for use for dashboard storage + * - default: true marks the datasource as the default metric source (if you have multiple) + * - basic authentication: use url syntax http://username:password@domain:port + */ - // InfluxDB example setup (the InfluxDB databases specified need to exist) - /* - datasources: { - influxdb: { - type: 'influxdb', - url: "http://my_influxdb_server:8086/db/database_name", - username: 'admin', - password: 'admin', + // InfluxDB example setup (the InfluxDB databases specified need to exist) + /* + datasources: { + influxdb: { + type: 'influxdb', + url: "http://my_influxdb_server:8086/db/database_name", + username: 'admin', + password: 'admin', + }, + grafana: { + type: 'influxdb', + url: "http://my_influxdb_server:8086/db/grafana", + username: 'admin', + password: 'admin', + grafanaDB: true + }, }, - grafana: { - type: 'influxdb', - url: "http://my_influxdb_server:8086/db/grafana", - username: 'admin', - password: 'admin', - grafanaDB: true - }, - }, - */ + */ - // Graphite & Elasticsearch example setup - /* - datasources: { - graphite: { - type: 'graphite', - url: "http://my.graphite.server.com:8080", + // Graphite & Elasticsearch example setup + /* + datasources: { + graphite: { + type: 'graphite', + url: "http://my.graphite.server.com:8080", + }, + elasticsearch: { + type: 'elasticsearch', + url: "http://my.elastic.server.com:9200", + index: 'grafana-dash', + grafanaDB: true, + } }, - elasticsearch: { - type: 'elasticsearch', - url: "http://my.elastic.server.com:9200", - index: 'grafana-dash', - grafanaDB: true, + */ + + // OpenTSDB & Elasticsearch example setup + /* + datasources: { + opentsdb: { + type: 'opentsdb', + url: "http://opentsdb.server:4242", + }, + elasticsearch: { + type: 'elasticsearch', + url: "http://my.elastic.server.com:9200", + index: 'grafana-dash', + grafanaDB: true, + } + }, + */ + + /* Global configuration options + * ======================================================== + */ + + // specify the limit for dashboard search results + search: { + max_results: 20 + }, + + // default home dashboard + default_route: '/dashboard/file/default.json', + + // set to false to disable unsaved changes warning + unsaved_changes_warning: true, + + // set the default timespan for the playlist feature + // Example: "1m", "1h" + playlist_timespan: "1m", + + // If you want to specify password before saving, please specify it below + // The purpose of this password is not security, but to stop some users from accidentally changing dashboards + admin: { + password: '' + }, + + // Change window title prefix from 'Grafana - ' + window_title_prefix: 'Grafana - ', + + // Add your own custom panels + plugins: { + // list of plugin panels + panels: [], + // requirejs modules in plugins folder that should be loaded + // for example custom datasources + dependencies: [], } - }, - */ - // OpenTSDB & Elasticsearch example setup - /* - datasources: { - opentsdb: { - type: 'opentsdb', - url: "http://opentsdb.server:4242", - }, - elasticsearch: { - type: 'elasticsearch', - url: "http://my.elastic.server.com:9200", - index: 'grafana-dash', - grafanaDB: true, - } - }, - */ - - /* Global configuration options - * ======================================================== - */ - - // specify the limit for dashboard search results - search: { - max_results: 20 - }, - - // default home dashboard - default_route: '/dashboard/file/default.json', - - // set to false to disable unsaved changes warning - unsaved_changes_warning: true, - - // set the default timespan for the playlist feature - // Example: "1m", "1h" - playlist_timespan: "1m", - - // If you want to specify password before saving, please specify it below - // The purpose of this password is not security, but to stop some users from accidentally changing dashboards - admin: { - password: '' - }, - - // Change window title prefix from 'Grafana - ' - window_title_prefix: 'Grafana - ', - - // Add your own custom panels - plugins: { - // list of plugin panels - panels: [], - // requirejs modules in plugins folder that should be loaded - // for example custom datasources - dependencies: [], - } - - }); + }); }); + + + diff --git a/src/css/less/forms.less b/src/css/less/forms.less index ab17dc81c94..e1affd09ae9 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -2,6 +2,8 @@ input[type=text].input-fluid { width: 100%; box-sizing: border-box; padding: 14px; + -moz-box-sizing: border-box; + height: 100%; } input[type="checkbox"].cr1 { diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 040905375b7..1859bfc10a1 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -8,6 +8,7 @@ define([ var self = this; this.datasource = {}; + this.$element = {}; this.annotationsSrv = {}; this.timeSrv = new TimeSrvStub(); this.templateSrv = new TemplateSrvStub(); @@ -16,18 +17,23 @@ define([ get: function() { return self.datasource; } }; - this.providePhase = function() { + this.providePhase = function(mocks) { return module(function($provide) { $provide.value('datasourceSrv', self.datasourceSrv); $provide.value('annotationsSrv', self.annotationsSrv); $provide.value('timeSrv', self.timeSrv); $provide.value('templateSrv', self.templateSrv); + $provide.value('$element', self.$element); + _.each(mocks, function(key, value) { + $provide.value(key, value); + }); }); }; this.createControllerPhase = function(controllerName) { - return inject(function($controller, $rootScope, $q) { + return inject(function($controller, $rootScope, $q, $location) { self.scope = $rootScope.$new(); + self.$location = $location; self.scope.panel = {}; self.scope.row = { panels:[] }; self.scope.dashboard = {}; diff --git a/src/test/specs/sharePanelCtrl-specs.js b/src/test/specs/sharePanelCtrl-specs.js new file mode 100644 index 00000000000..7a7f741ea52 --- /dev/null +++ b/src/test/specs/sharePanelCtrl-specs.js @@ -0,0 +1,59 @@ +define([ + './helpers', + 'controllers/sharePanelCtrl' +], function(helpers) { + 'use strict'; + + describe('SharePanelCtrl', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(module('grafana.controllers')); + + beforeEach(ctx.providePhase()); + beforeEach(ctx.createControllerPhase('SharePanelCtrl')); + + describe('shareUrl with current time range and panel', function() { + + it('should generate share url relative time', function() { + ctx.$location.path('/test'); + ctx.scope.panel = { id: 22 }; + ctx.timeSrv.time = { from: 'now-1h', to: 'now' }; + + ctx.scope.buildUrl(); + expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now&panelId=22&fullscreen'); + }); + + it('should generate share url absolute time', function() { + ctx.$location.path('/test'); + ctx.scope.panel = { id: 22 }; + ctx.timeSrv.time = { from: new Date(2012,1,1), to: new Date(2014,3,5) }; + + ctx.scope.buildUrl(); + expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen'); + }); + + it('should generate share url with time as JSON strings', function() { + ctx.$location.path('/test'); + ctx.scope.panel = { id: 22 }; + ctx.timeSrv.time = { from: new Date(2012,1,1).toJSON(), to: new Date(2014,3,5).toJSON() }; + + ctx.scope.buildUrl(); + expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen'); + }); + + it('should remove panel id when toPanel is false', function() { + ctx.$location.path('/test'); + ctx.scope.panel = { id: 22 }; + ctx.scope.toPanel = false; + ctx.timeSrv.time = { from: 'now-1h', to: 'now' }; + + ctx.scope.buildUrl(); + expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now'); + }); + + }); + + }); + +}); + diff --git a/src/test/test-main.js b/src/test/test-main.js index 6862c9fa8ae..468c4fc8603 100644 --- a/src/test/test-main.js +++ b/src/test/test-main.js @@ -131,6 +131,7 @@ require([ 'specs/grafanaGraph-specs', 'specs/graph-tooltip-specs', 'specs/seriesOverridesCtrl-specs', + 'specs/sharePanelCtrl-specs', 'specs/timeSrv-specs', 'specs/templateSrv-specs', 'specs/templateValuesSrv-specs', From 285d246c65528149f614fe7bd1c6ee194978eaa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 14:48:36 +0200 Subject: [PATCH 43/45] PanelMenu: fixed interpolate template vars for new panel title/menu --- src/app/directives/panelMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index d9932cd7bb2..aac7e04f989 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -9,7 +9,7 @@ function (angular, $, _) { angular .module('grafana.directives') .directive('panelMenu', function($compile) { - var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var linkTemplate = '{{panel.title | interpolateTemplateVars}}'; var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ ' jqyoui-draggable="{'+ 'animate:false,'+ From c41aa64719b4a10664d4cfc6bc37cdd9c229da9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 15:19:48 +0200 Subject: [PATCH 44/45] ShareModal: Added template variables to share url, and an option for it, #864 --- src/app/controllers/search.js | 1 + src/app/controllers/sharePanelCtrl.js | 16 ++++++++++++++-- src/app/partials/share-panel.html | 5 +++-- src/test/specs/sharePanelCtrl-specs.js | 12 ++++++++++++ 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index 5946cf15ee7..4977ced75af 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -62,6 +62,7 @@ function (angular, _, config, $) { }; $scope.goToDashboard = function(id) { + $location.search({}); $location.path("/dashboard/db/" + id); }; diff --git a/src/app/controllers/sharePanelCtrl.js b/src/app/controllers/sharePanelCtrl.js index b55da84263a..e52dc297152 100644 --- a/src/app/controllers/sharePanelCtrl.js +++ b/src/app/controllers/sharePanelCtrl.js @@ -7,12 +7,13 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('SharePanelCtrl', function($scope, $location, $timeout, timeSrv, $element) { + module.controller('SharePanelCtrl', function($scope, $location, $timeout, timeSrv, $element, templateSrv) { $scope.init = function() { $scope.editor = { index: 0 }; $scope.forCurrent = true; $scope.toPanel = true; + $scope.includeTemplateVars = true; $scope.buildUrl(); }; @@ -27,7 +28,7 @@ function (angular, _) { var panelId = $scope.panel.id; var range = timeSrv.timeRange(false); - var params = $location.search(); + var params = angular.copy($location.search()); if (_.isString(range.to) && range.to.indexOf('now')) { range = timeSrv.timeRange(); @@ -39,6 +40,17 @@ function (angular, _) { if (_.isDate(params.from)) { params.from = params.from.getTime(); } if (_.isDate(params.to)) { params.to = params.to.getTime(); } + if ($scope.includeTemplateVars) { + _.each(templateSrv.variables, function(variable) { + params['var-' + variable.name] = variable.current.text; + }); + } + else { + _.each(templateSrv.variables, function(variable) { + delete params['var-' + variable.name]; + }); + } + if (!$scope.forCurrent) { delete params.from; delete params.to; diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index 49c13315e69..7d1d57415d5 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -17,8 +17,9 @@
- - + + +
diff --git a/src/test/specs/sharePanelCtrl-specs.js b/src/test/specs/sharePanelCtrl-specs.js index 7a7f741ea52..4c36e8fe156 100644 --- a/src/test/specs/sharePanelCtrl-specs.js +++ b/src/test/specs/sharePanelCtrl-specs.js @@ -51,6 +51,18 @@ define([ expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now'); }); + it('should include template variables in url', function() { + ctx.$location.path('/test'); + ctx.scope.panel = { id: 22 }; + ctx.scope.includeTemplateVars = true; + ctx.scope.toPanel = false; + ctx.templateSrv.variables = [{ name: 'app', current: {text: 'mupp' }}, {name: 'server', current: {text: 'srv-01'}}]; + ctx.timeSrv.time = { from: 'now-1h', to: 'now' }; + + ctx.scope.buildUrl(); + expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=now-1h&to=now&var-app=mupp&var-server=srv-01'); + }); + }); }); From f63706d1180fe6a6e76d8d21cb5e697578162275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 30 Sep 2014 15:31:18 +0200 Subject: [PATCH 45/45] Small update to share panel --- src/app/partials/share-panel.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/partials/share-panel.html b/src/app/partials/share-panel.html index 7d1d57415d5..d2c85e423ce 100644 --- a/src/app/partials/share-panel.html +++ b/src/app/partials/share-panel.html @@ -7,7 +7,7 @@
-
+