diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fb7ec258ea..69835953dc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,14 @@ # 1.8.0 (unreleased) +**Fixes** +- [Issue #802](https://github.com/grafana/grafana/issues/802). Annotations: Fix when using InfluxDB datasource +- [Issue #795](https://github.com/grafana/grafana/issues/795). Chrome: Fix for display issue in chrome beta & chrome canary when entering edit mode +- [Issue #818](https://github.com/grafana/grafana/issues/818). Graph: Added percent y-axis format +- [Issue #828](https://github.com/grafana/grafana/issues/828). Elasticsearch: saving new dashboard with title equal to slugified url would cause it to deleted. +- [Issue #830](https://github.com/grafana/grafana/issues/830). Annotations: Fix for elasticsearch annotations and mapping nested fields + +# 1.8.0-RC1 (2014-09-12) + **UI polish / changes** - [Issue #725](https://github.com/grafana/grafana/issues/725). UI: All modal editors are removed and replaced by an edit pane under menu. The look of editors is also updated and polished. Search dropdown is also shown as pane under menu and has seen some UI polish. @@ -13,6 +22,8 @@ - [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example - [Issue #312](https://github.com/grafana/grafana/issues/312). Templating: Can now use template variables in panel titles - [Issue #613](https://github.com/grafana/grafana/issues/613). Templating: Full support for InfluxDB, filter by part of series names, extract series substrings, nested queries, multipe where clauses! +- Template variables can be initialized from url, with var-my_varname=value, breaking change, before it was just my_varname. +- Templating and url state sync has some issues that are not solved for this release, see [Issue #772](https://github.com/grafana/grafana/issues/772) for more details. **InfluxDB Breaking changes** - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema @@ -41,6 +52,9 @@ - [Issue #425](https://github.com/grafana/grafana/issues/425). Graph: New section in 'Display Styles' tab to override any display setting on per series bases (mix and match lines, bars, points, fill, stack, line width etc) - [Issue #634](https://github.com/grafana/grafana/issues/634). Dashboard: Dashboard tags now in different colors (from fixed palette) determined by tag name. - [Issue #685](https://github.com/grafana/grafana/issues/685). Dashboard: New config.js option to change/remove window title prefix. +- [Issue #781](https://github.com/grafana/grafana/issues/781). Dashboard: Title URL is now slugified for greater URL readability, works with both ES & InfluxDB storage, is backward compatible +- [Issue #785](https://github.com/grafana/grafana/issues/785). Elasticsearch: Support for full elasticsearch lucene search grammar when searching for dashboards, better async search +- [Issue #787](https://github.com/grafana/grafana/issues/787). Dashboard: time range can now be read from URL parameters, will override dashboard saved time range **Fixes** - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13) @@ -234,7 +248,7 @@ Read this for more info: - More graphite function definitions - Make "ms" axis format include hour, day, weeks, month and year ([Issue #149](https://github.com/grafana/grafana/issues/149)) - Microsecond axis format ([Issue #146](https://github.com/grafana/grafana/issues/146)) -- Specify template paramaters in URL ([Issue #123](https://github.com/grafana/grafana/issues/123)) +- Specify template parameters in URL ([Issue #123](https://github.com/grafana/grafana/issues/123)) ### Fixes - Basic Auth fix ([Issue #152](https://github.com/grafana/grafana/issues/152)) diff --git a/latest.json b/latest.json index 38e862a643a..c66de1bc179 100644 --- a/latest.json +++ b/latest.json @@ -1,4 +1,4 @@ { - "version": "1.7.0", - "url": "http://grafanarel.s3.amazonaws.com/grafana-1.7.0" + "version": "1.8.0-rc1", + "url": "http://grafanarel.s3.amazonaws.com/grafana-1.8.0-rc1" } diff --git a/package.json b/package.json index 8de8f05cf8a..f84ca9cf8c6 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Coding Instinct AB" }, "name": "grafana", - "version": "1.8.0", + "version": "1.8.0-rc1", "repository": { "type": "git", "url": "http://github.com/torkelo/grafana.git" diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 35e5c2f67a7..7c61b22c83b 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -531,6 +531,10 @@ function($, _, moment) { 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); @@ -563,8 +567,8 @@ function($, _, moment) { kbn.msFormat = function(size, decimals) { // Less than 1 milli, downscale to micro - if (Math.abs(size) < 1) { - return kbn.microsFormat(size * 1000,decimals); + if (size !== 0 && Math.abs(size) < 1) { + return kbn.microsFormat(size * 1000, decimals); } else if (Math.abs(size) < 1000) { return size.toFixed(decimals) + " ms"; @@ -591,7 +595,7 @@ function($, _, moment) { kbn.sFormat = function(size, decimals) { // Less than 1 sec, downscale to milli - if (Math.abs(size) < 1) { + if (size !== 0 && Math.abs(size) < 1) { return kbn.msFormat(size * 1000, decimals); } // Less than 10 min, use seconds @@ -620,7 +624,7 @@ function($, _, moment) { kbn.microsFormat = function(size, decimals) { // Less than 1 micro, downscale to nano - if (Math.abs(size) < 1) { + if (size !== 0 && Math.abs(size) < 1) { return kbn.nanosFormat(size * 1000, decimals); } else if (Math.abs(size) < 1000) { @@ -655,6 +659,13 @@ function($, _, moment) { } }; + kbn.slugifyForUrl = function(str) { + return str + .toLowerCase() + .replace(/[^\w ]+/g,'') + .replace(/ +/g,'-'); + }; + kbn.stringToJsRegex = function(str) { if (str[0] !== '/') { return new RegExp(str); diff --git a/src/app/controllers/dashboardCtrl.js b/src/app/controllers/dashboardCtrl.js index 8ccbb170d8a..424f0e225e8 100644 --- a/src/app/controllers/dashboardCtrl.js +++ b/src/app/controllers/dashboardCtrl.js @@ -44,14 +44,14 @@ function (angular, $, config, _) { $scope.setupDashboard = function(event, dashboardData) { $rootScope.performance.dashboardLoadStart = new Date().getTime(); $rootScope.performance.panelsInitialized = 0; - $rootScope.performance.panelsRendered= 0; + $rootScope.performance.panelsRendered = 0; $scope.dashboard = dashboardSrv.create(dashboardData); $scope.dashboardViewState = dashboardViewStateSrv.create($scope); // init services timeSrv.init($scope.dashboard); - templateValuesSrv.init($scope.dashboard); + templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState); panelMoveSrv.init($scope.dashboard, $scope); $scope.checkFeatureToggles(); @@ -93,18 +93,18 @@ function (angular, $, config, _) { }; }; - $scope.panel_path =function(type) { - if(type) { - return 'app/panels/'+type.replace(".","/"); + $scope.edit_path = function(type) { + var p = $scope.panel_path(type); + if(p) { + return p+'/editor.html'; } else { return false; } }; - $scope.edit_path = function(type) { - var p = $scope.panel_path(type); - if(p) { - return p+'/editor.html'; + $scope.panel_path =function(type) { + if(type) { + return 'app/panels/'+type.replace(".","/"); } else { return false; } diff --git a/src/app/controllers/dashboardNavCtrl.js b/src/app/controllers/dashboardNavCtrl.js index b6813b7ce19..76ef34f8e92 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', 'Dashboard has been saved as "' + result.title + '"','success', 5000); + alertSrv.set('Dashboard Saved', 'Saved as "' + result.title + '"','success', 3000); 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); + alertSrv.set('Save failed', err, 'error', 5000); }); }; diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index cd13926cc80..27299474bc0 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -15,7 +15,7 @@ function (angular, _, config, gfunc, Parser) { $scope.init = function() { $scope.target.target = $scope.target.target || ''; - $scope.targetLetter = targetLetters[$scope.$index]; + $scope.targetLetters = targetLetters; parseTarget(); }; @@ -90,7 +90,7 @@ function (angular, _, config, gfunc, Parser) { break; case 'metric': if ($scope.segments.length > 0) { - if ($scope.segments[0].length !== 1) { + if (astNode.segments.length !== 1) { throw { message: 'Multiple metric params not supported, use text editor.' }; } addFunctionParameter(func, astNode.segments[0].value, index, true); diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index c294c9d86f6..18b860d0ab5 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -17,6 +17,7 @@ function (angular, _, config, $) { $scope.results = {dashboards: [], tags: [], metrics: []}; $scope.query = { query: 'title:' }; $scope.db = datasourceSrv.getGrafanaDB(); + $scope.currentSearchId = 0; $timeout(function() { $scope.giveSearchFocus = $scope.giveSearchFocus + 1; @@ -75,8 +76,18 @@ function (angular, _, config, $) { }; $scope.searchDashboards = function(queryString) { + // bookeeping for determining stale search requests + var searchId = $scope.currentSearchId + 1; + $scope.currentSearchId = searchId > $scope.currentSearchId ? searchId : $scope.currentSearchId; + return $scope.db.searchDashboards(queryString) .then(function(results) { + // since searches are async, it's possible that these results are not for the latest search. throw + // them away if so + if (searchId < $scope.currentSearchId) { + return; + } + $scope.tagsOnly = results.tagsOnly; $scope.results.dashboards = results.dashboards; $scope.results.tags = results.tags; @@ -108,9 +119,10 @@ function (angular, _, config, $) { $scope.searchDashboards($scope.query.query); }; - $scope.deleteDashboard = function(id, evt) { + $scope.deleteDashboard = function(dash, evt) { evt.stopPropagation(); - $scope.emitAppEvent('delete-dashboard', { id: id }); + $scope.emitAppEvent('delete-dashboard', { id: dash.id }); + $scope.results.dashboards = _.without($scope.results.dashboards, dash); }; $scope.addMetricToCurrentDashboard = function (metricId) { diff --git a/src/app/dashboards/default.json b/src/app/dashboards/default.json index 015ede1d7dc..70b907e13da 100644 --- a/src/app/dashboards/default.json +++ b/src/app/dashboards/default.json @@ -9,14 +9,15 @@ "title": "New row", "height": "150px", "collapse": false, + "editable": true, "panels": [ { - "error": false, + "id": 1, "span": 12, "editable": true, "type": "text", "mode": "html", - "content": "
\n \n
", + "content": "
\n \n
", "style": {}, "title": "Welcome to" } @@ -26,22 +27,20 @@ "title": "Welcome to Grafana", "height": "210px", "collapse": false, + "editable": true, "panels": [ { - "error": false, + "id": 2, "span": 6, - "editable": true, "type": "text", - "loadingEditor": false, "mode": "html", "content": "
\n\n
\n
\n \n
\n
\n \n
\n
", "style": {}, "title": "Documentation Links" }, { - "error": false, + "id": 3, "span": 6, - "editable": true, "type": "text", "mode": "html", "content": "
\n\n
\n
\n \n
\n
\n", @@ -53,11 +52,12 @@ { "title": "test", "height": "250px", + "editable": true, "collapse": false, "panels": [ { + "id": 4, "span": 12, - "editable": true, "type": "graph", "x-axis": true, "y-axis": true, diff --git a/src/app/dashboards/scripted_async.js b/src/app/dashboards/scripted_async.js index 84e5d976f6b..31d23f2dde2 100644 --- a/src/app/dashboards/scripted_async.js +++ b/src/app/dashboards/scripted_async.js @@ -35,11 +35,9 @@ return function(callback) { // Set a title dashboard.title = 'Scripted dash'; - dashboard.services.filter = { - time: { - from: "now-" + (ARGS.from || timspan), - to: "now" - } + dashboard.time = { + from: "now-" + (ARGS.from || timspan), + to: "now" }; var rows = 1; @@ -78,4 +76,4 @@ return function(callback) { callback(dashboard); }); -} \ No newline at end of file +} diff --git a/src/app/dashboards/template_vars.json b/src/app/dashboards/template_vars.json new file mode 100644 index 00000000000..affe7727ce2 --- /dev/null +++ b/src/app/dashboards/template_vars.json @@ -0,0 +1,264 @@ +{ + "id": null, + "title": "Templated Graphs Nested", + "originalTitle": "Templated Graphs Nested", + "tags": [ + "showcase", + "templated" + ], + "style": "dark", + "timezone": "browser", + "editable": true, + "hideControls": false, + "rows": [ + { + "title": "Row1", + "height": "350px", + "editable": true, + "collapse": false, + "collapsable": true, + "panels": [ + { + "span": 12, + "editable": true, + "type": "graph", + "loadingEditor": false, + "datasource": null, + "renderer": "flot", + "x-axis": true, + "y-axis": true, + "scale": 1, + "y_formats": [ + "short", + "short" + ], + "grid": { + "max": null, + "min": 0, + "threshold1": null, + "threshold2": null, + "threshold1Color": "rgba(216, 200, 27, 0.27)", + "threshold2Color": "rgba(234, 112, 112, 0.22)", + "leftMax": null, + "rightMax": null, + "leftMin": null, + "rightMin": null + }, + "annotate": { + "enable": false + }, + "resolution": 100, + "lines": true, + "fill": 1, + "linewidth": 1, + "points": false, + "pointradius": 5, + "bars": false, + "stack": true, + "legend": { + "show": true, + "values": false, + "min": false, + "max": false, + "current": false, + "total": false, + "avg": false + }, + "percentage": false, + "zerofill": true, + "nullPointMode": "connected", + "steppedLine": false, + "tooltip": { + "value_type": "cumulative", + "query_as_alias": true + }, + "targets": [ + { + "target": "aliasByNode(apps.$app.$server.counters.requests.count, 2)", + "function": "mean", + "column": "value" + } + ], + "aliasColors": { + "highres.test": "#1F78C1", + "scale(highres.test,3)": "#6ED0E0", + "mobile": "#6ED0E0", + "tablet": "#EAB839" + }, + "title": "Traffic [[period]]", + "id": 1, + "seriesOverrides": [] + } + ], + "notice": false + }, + { + "title": "Row1", + "height": "350px", + "editable": true, + "collapse": false, + "collapsable": true, + "panels": [ + { + "span": 12, + "editable": true, + "type": "graph", + "loadingEditor": false, + "datasource": null, + "renderer": "flot", + "x-axis": true, + "y-axis": true, + "scale": 1, + "y_formats": [ + "short", + "short" + ], + "grid": { + "max": null, + "min": 0, + "threshold1": null, + "threshold2": null, + "threshold1Color": "rgba(216, 200, 27, 0.27)", + "threshold2Color": "rgba(234, 112, 112, 0.22)", + "leftMax": null, + "rightMax": null, + "leftMin": null, + "rightMin": null + }, + "annotate": { + "enable": false + }, + "resolution": 100, + "lines": true, + "fill": 1, + "linewidth": 1, + "points": false, + "pointradius": 5, + "bars": false, + "stack": true, + "legend": { + "show": true, + "values": false, + "min": false, + "max": false, + "current": false, + "total": false, + "avg": false + }, + "percentage": false, + "zerofill": true, + "nullPointMode": "connected", + "steppedLine": false, + "tooltip": { + "value_type": "cumulative", + "query_as_alias": true + }, + "targets": [ + { + "target": "aliasByNode(apps.$app.$server.counters.requests.count, 2)" + } + ], + "aliasColors": { + "highres.test": "#1F78C1", + "scale(highres.test,3)": "#6ED0E0", + "mobile": "#6ED0E0", + "tablet": "#EAB839" + }, + "title": "Second pannel", + "id": 2, + "seriesOverrides": [] + } + ], + "notice": false + } + ], + "nav": [ + { + "type": "timepicker", + "collapse": false, + "notice": false, + "enable": true, + "status": "Stable", + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ], + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "now": true + } + ], + "time": { + "from": "now-15m", + "to": "now" + }, + "templating": { + "list": [ + { + "type": "query", + "name": "app", + "query": "apps.*", + "includeAll": true, + "options": [], + "current": { + "text": "All", + "value": "*" + }, + "datasource": null, + "allFormat": "wildcard", + "refresh": true + }, + { + "type": "query", + "name": "server", + "query": "apps.$app.*", + "includeAll": true, + "options": [], + "current": { + "text": "All", + "value": "*" + }, + "datasource": null, + "allFormat": "Glob", + "refresh": false + }, + { + "type": "query", + "datasource": null, + "refresh_on_load": false, + "name": "metric", + "options": [], + "includeAll": true, + "allFormat": "glob", + "query": "apps.$app.$server.*", + "current": { + "text": "counters", + "value": "counters" + } + } + ], + "enable": true + }, + "annotations": { + "enable": false + }, + "refresh": false, + "version": 6 +} diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 9bb302bf671..15f1556aa62 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -15,7 +15,7 @@ function (angular, $, kbn, moment, _) { restrict: 'A', template: '
', link: function(scope, elem) { - var data, plot, annotations; + var data, annotations; var hiddenData = {}; var dashboard = scope.dashboard; var legendSideLastValue = null; @@ -82,6 +82,10 @@ function (angular, $, kbn, moment, _) { render_panel_as_graphite_png(data); return true; } + + if (elem.width() === 0) { + return; + } } // Function for rendering panel @@ -165,18 +169,22 @@ function (angular, $, kbn, moment, _) { var sortedSeries = _.sortBy(data, function(series) { return series.zindex; }); - // if legend is to the right delay plot draw a few milliseconds - // so the legend width calculation can be done + function callPlot() { + try { + $.plot(elem, sortedSeries, options); + } catch (e) { + console.log('flotcharts error', e); + } + + addAxisLabels(); + } + if (shouldDelayDraw(panel)) { + setTimeout(callPlot, 50); legendSideLastValue = panel.legend.rightSide; - setTimeout(function() { - plot = $.plot(elem, sortedSeries, options); - addAxisLabels(); - }, 50); } else { - plot = $.plot(elem, sortedSeries, options); - addAxisLabels(); + callPlot(); } } diff --git a/src/app/directives/graphiteSegment.js b/src/app/directives/graphiteSegment.js index 032ea99c39a..f0116bc8847 100644 --- a/src/app/directives/graphiteSegment.js +++ b/src/app/directives/graphiteSegment.js @@ -94,7 +94,7 @@ function (angular, app, _, $) { }; $input.attr('data-provide', 'typeahead'); - $input.typeahead({ source: $scope.source, minLength: 0, items: 100, updater: $scope.updater }); + $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater }); var typeahead = $input.data('typeahead'); typeahead.lookup = function () { diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js index 975a4c02228..974ed98a637 100644 --- a/src/app/directives/tip.js +++ b/src/app/directives/tip.js @@ -11,10 +11,10 @@ function (angular, kbn) { return { restrict: 'E', link: function(scope, elem, attrs) { - var _t = ''; elem.replaceWith($compile(angular.element(_t))(scope)); } }; }); -}); \ No newline at end of file +}); diff --git a/src/app/filters/all.js b/src/app/filters/all.js index b2729d120dd..eb9a736d0ce 100755 --- a/src/app/filters/all.js +++ b/src/app/filters/all.js @@ -57,7 +57,7 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen module.filter('interpolateTemplateVars', function(templateSrv) { return function(text) { - return templateSrv.replace(text); + return templateSrv.replaceWithText(text); }; }); diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html index 6800ee832b9..9380cb99327 100644 --- a/src/app/panels/graph/axisEditor.html +++ b/src/app/panels/graph/axisEditor.html @@ -4,7 +4,7 @@
Left Y Axis
- +
@@ -23,7 +23,7 @@
Right Y Axis
- +
diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index 4f54c6d0e6f..1b6b1dfc144 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -70,7 +70,7 @@ define([ $scope.addOverrideOption('Staircase line', 'steppedLine', [true, false]); $scope.addOverrideOption('Points', 'points', [true, false]); $scope.addOverrideOption('Points Radius', 'pointradius', [1,2,3,4,5]); - $scope.addOverrideOption('Stack', 'stack', [true, false]); + $scope.addOverrideOption('Stack', 'stack', [true, false, 2, 3, 4, 5]); $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]); $scope.addOverrideOption('Z-index', 'zindex', [-1,-2,-3,0,1,2,3]); $scope.updateCurrentOverrides(); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index b8c80473ebd..cd83f23f197 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -27,7 +27,7 @@
- +
diff --git a/src/app/panels/text/editor.html b/src/app/panels/text/editor.html index 6af4dc069c2..b3b8afbbec0 100644 --- a/src/app/panels/text/editor.html +++ b/src/app/panels/text/editor.html @@ -9,10 +9,9 @@
- -
\ No newline at end of file + diff --git a/src/app/partials/annotations_editor.html b/src/app/partials/annotations_editor.html index cb9db2244d6..c72194b6f6a 100644 --- a/src/app/partials/annotations_editor.html +++ b/src/app/partials/annotations_editor.html @@ -16,6 +16,9 @@
+
+ No annotations defined +
diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index 15ea694058c..b6db19d33aa 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -1,7 +1,10 @@
- {{dashboard.title}} + + + {{dashboard.title}} +
  • diff --git a/src/app/partials/edit_json.html b/src/app/partials/edit_json.html index c4fa5fd950f..a43e1d56bcd 100644 --- a/src/app/partials/edit_json.html +++ b/src/app/partials/edit_json.html @@ -8,7 +8,7 @@
- +
diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index 82241ec1923..dcbc4306e0f 100755 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -1,4 +1,4 @@ -
+
Duplicate - -
  • - - Toggle request options - -
  • @@ -48,7 +41,7 @@
    • - {{targetLetter}} + {{targetLetters[$index]}}
    • -
    +
    + +
      +
    • + +
    • - cacheTimeout Graphite parameter to overwride memcache default timeout (unit is seconds) + cacheTimeout
    • + class="input-mini grafana-target-segment-input" + ng-model="panel.cacheTimeout" + bs-tooltip="'Graphite parameter to overwride memcache default timeout (unit is seconds)'" + data-placement="right" + spellcheck='false' + placeholder="60">
    -
    +
    +
    +
    + +
    + +
    +
    + +
    +
    Shorter legend names
    +
      +
    • alias() function to specify a custom series name
      • +
    • aliasByNode(2) to alias by a specific part of your metric path
      • +
    • aliasByNode(2, -1) you can add multiple segment paths, and use negative index
      • +
    • groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
      • +
    +
    + +
    +
    Series as parameter
    +
      +
    • Some graphite functions allow you to have many series arguments
      • +
    • Use #[A-Z] to use a graphite query as parameter to a function
      • +
    • + Examples: +
        +
      • asPercent(#A, #B)
        • +
      • prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
        • +
      • prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
        • +
      • divideSeries(#A, #B)
        • +
      +
      • +
    • If a query is added only to be used as a parameter, hide it from the graph with the eye icon
      • +
    +
    + +
    +
    Stacking
    +
      +
    • You find the stacking option under Display Styles tab
      • +
    • When stacking is enabled make sure null point mode is set to 'null as zero'
      • +
    +
    + +
    +
    Templating
    +
      +
    • You can use a template variable in place of metric names
      • +
    • You can use a template variable in place of function parameters
      • +
    • You enable the templating feature in Dashboard settings / Feature toggles
      • +
    +
    + +
    diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html index 70da2fbf282..4fd13645d3d 100644 --- a/src/app/partials/influxdb/editor.html +++ b/src/app/partials/influxdb/editor.html @@ -181,8 +181,8 @@
      -
    • - +
    • +
    • group by time @@ -227,8 +227,8 @@
      -
      - Alias patterns: +
      +
      Alias patterns
      • $s = series name
      • $g = group by
        • @@ -236,8 +236,8 @@
      -
      - Stacking and fill: +
      +
      Stacking and fill
      • When stacking is enabled it important that points align
      • If there are missing points for one series it can cause gaps or missing bars
        • @@ -247,8 +247,8 @@
      -
      - Group by time: +
      +
      Group by time
      • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
      • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
        • diff --git a/src/app/partials/opentsdb/editor.html b/src/app/partials/opentsdb/editor.html index efc54af8e05..b74b1d7a269 100644 --- a/src/app/partials/opentsdb/editor.html +++ b/src/app/partials/opentsdb/editor.html @@ -30,7 +30,7 @@
      -
        +
      -
      -
      -
      {{tab.title}}
      -
      -
      \ No newline at end of file diff --git a/src/app/partials/playlist.html b/src/app/partials/playlist.html index 3b3ba7600c4..1517678e730 100644 --- a/src/app/partials/playlist.html +++ b/src/app/partials/playlist.html @@ -38,7 +38,7 @@
      - dashboards available in the playlist are only the once marked as favorites (stored in local browser storage). + dashboards available in the playlist are only the ones marked as favorites (stored in local browser storage). to mark a dashboard as favorite, use save icon in the menu and in the dropdown select mark as favorite

      diff --git a/src/app/partials/search.html b/src/app/partials/search.html index e5241e9b11e..ccddfb14474 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -54,7 +54,7 @@       share     - + delete
      diff --git a/src/app/services/annotationsSrv.js b/src/app/services/annotationsSrv.js index c1733189462..04fb4224cc6 100644 --- a/src/app/services/annotationsSrv.js +++ b/src/app/services/annotationsSrv.js @@ -57,7 +57,8 @@ define([ function errorHandler(err) { console.log('Annotation error: ', err); - alertSrv.set('Annotations','Could not fetch annotations','error'); + var message = err.message || "Aannotation query failed"; + alertSrv.set('Annotations error', message,'error'); } function addAnnotation(options) { diff --git a/src/app/services/dashboard/dashboardKeyBindings.js b/src/app/services/dashboard/dashboardKeyBindings.js index 27bbe8ee027..ba8dcaf0f23 100644 --- a/src/app/services/dashboard/dashboardKeyBindings.js +++ b/src/app/services/dashboard/dashboardKeyBindings.js @@ -18,8 +18,8 @@ function(angular, $) { keyboardManager.unbind('ctrl+s'); keyboardManager.unbind('ctrl+r'); keyboardManager.unbind('ctrl+z'); + keyboardManager.unbind('esc'); }); - keyboardManager.unbind('esc'); keyboardManager.bind('ctrl+f', function() { scope.emitAppEvent('show-dash-editor', { src: 'app/partials/search.html' }); diff --git a/src/app/services/dashboard/dashboardSrv.js b/src/app/services/dashboard/dashboardSrv.js index 91587feda38..c6b386917ba 100644 --- a/src/app/services/dashboard/dashboardSrv.js +++ b/src/app/services/dashboard/dashboardSrv.js @@ -131,7 +131,7 @@ function (angular, $, kbn, _, moment) { if (old.services) { if (old.services.filter) { this.time = old.services.filter.time; - this.templating.list = old.services.filter.list; + this.templating.list = old.services.filter.list || []; } delete this.services; } diff --git a/src/app/services/dashboard/dashboardViewStateSrv.js b/src/app/services/dashboard/dashboardViewStateSrv.js index 64d217f3dec..2f85da5d27a 100644 --- a/src/app/services/dashboard/dashboardViewStateSrv.js +++ b/src/app/services/dashboard/dashboardViewStateSrv.js @@ -14,9 +14,12 @@ function (angular, _, $) { // like fullscreen panel & edit function DashboardViewState($scope) { var self = this; + self.state = {}; + self.panelScopes = []; + self.$scope = $scope; $scope.exitFullscreen = function() { - if (self.fullscreen) { + if (self.state.fullscreen) { self.update({ fullscreen: false }); } }; @@ -28,42 +31,48 @@ function (angular, _, $) { } }); - this.panelScopes = []; - this.$scope = $scope; - this.update(this.getQueryStringState(), true); } DashboardViewState.prototype.needsSync = function(urlState) { - if (urlState.fullscreen !== this.fullscreen) { return true; } - if (urlState.edit !== this.edit) { return true; } - if (urlState.panelId !== this.panelId) { return true; } - return false; + return _.isEqual(this.state, urlState) === false; }; DashboardViewState.prototype.getQueryStringState = function() { var queryParams = $location.search(); - return { + var urlState = { panelId: parseInt(queryParams.panelId) || null, fullscreen: queryParams.fullscreen ? true : false, - edit: queryParams.edit ? true : false + edit: queryParams.edit ? true : false, }; + + _.each(queryParams, function(value, key) { + if (key.indexOf('var-') !== 0) { return; } + urlState[key] = value; + }); + + return urlState; + }; + + DashboardViewState.prototype.serializeToUrl = function() { + var urlState = _.clone(this.state); + urlState.fullscreen = this.state.fullscreen ? true : null, + urlState.edit = this.state.edit ? true : null; + + return urlState; }; DashboardViewState.prototype.update = function(state, skipUrlSync) { - _.extend(this, state); + _.extend(this.state, state); + this.fullscreen = this.state.fullscreen; - if (!this.fullscreen) { - this.panelId = null; - this.edit = false; + if (!this.state.fullscreen) { + this.state.panelId = null; + this.state.edit = false; } if (!skipUrlSync) { - $location.search({ - fullscreen: this.fullscreen ? true : null, - panelId: this.panelId, - edit: this.edit ? true : null - }); + $location.search(this.serializeToUrl()); } this.syncState(); @@ -76,7 +85,7 @@ function (angular, _, $) { if (this.fullscreenPanel) { this.leaveFullscreen(false); } - var panelScope = this.getPanelScope(this.panelId); + var panelScope = this.getPanelScope(this.state.panelId); this.enterFullscreen(panelScope); return; } @@ -118,8 +127,8 @@ function (angular, _, $) { var fullscreenHeight = Math.floor(docHeight * 0.7); this.oldTimeRange = panelScope.range; - panelScope.height = this.edit ? editHeight : fullscreenHeight; - panelScope.editMode = this.edit; + panelScope.height = this.state.edit ? editHeight : fullscreenHeight; + panelScope.editMode = this.state.edit; this.fullscreenPanel = panelScope; $(window).scrollTop(0); @@ -135,7 +144,7 @@ function (angular, _, $) { var self = this; self.panelScopes.push(panelScope); - if (self.panelId === panelScope.panel.id) { + if (self.state.panelId === panelScope.panel.id) { self.enterFullscreen(panelScope); } diff --git a/src/app/services/datasourceSrv.js b/src/app/services/datasourceSrv.js index 5d26ebdc28c..effb3d1a7dc 100644 --- a/src/app/services/datasourceSrv.js +++ b/src/app/services/datasourceSrv.js @@ -80,7 +80,7 @@ function (angular, _, config) { if (!name) { return this.default; } if (datasources[name]) { return datasources[name]; } - throw "Unable to find datasource: " + name; + return this.default; }; this.getAnnotationSources = function() { diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 34db3b50d8a..04d1e62ce04 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -1,12 +1,11 @@ define([ 'angular', 'lodash', - 'jquery', 'config', 'kbn', 'moment' ], -function (angular, _, $, config, kbn, moment) { +function (angular, _, config, kbn, moment) { 'use strict'; var module = angular.module('grafana.services'); @@ -38,6 +37,7 @@ function (angular, _, $, config, kbn, moment) { }; if (this.basicAuth) { + options.withCredentials = true; options.headers = { "Authorization": "Basic " + this.basicAuth }; @@ -76,57 +76,78 @@ function (angular, _, $, config, kbn, moment) { var queryInterpolated = templateSrv.replace(queryString); var filter = { "bool": { "must": [{ "range": range }] } }; var query = { "bool": { "should": [{ "query_string": { "query": queryInterpolated } }] } }; - var data = { "query" : { "filtered": { "query" : query, "filter": filter } }, "size": 100 }; + var data = { + "fields": [timeField, "_source"], + "query" : { "filtered": { "query" : query, "filter": filter } }, + "size": 100 + }; return this._request('POST', '/_search', annotation.index, data).then(function(results) { var list = []; var hits = results.data.hits.hits; + var getFieldFromSource = function(source, fieldName) { + if (!fieldName) { return; } + + var fieldNames = fieldName.split('.'); + var fieldValue = source; + + for (var i = 0; i < fieldNames.length; i++) { + fieldValue = fieldValue[fieldNames[i]]; + } + + if (_.isArray(fieldValue)) { + fieldValue = fieldValue.join(', '); + } + return fieldValue; + }; + for (var i = 0; i < hits.length; i++) { var source = hits[i]._source; + var fields = hits[i].fields; + var time = source[timeField]; + + if (_.isString(fields[timeField]) || _.isNumber(fields[timeField])) { + time = fields[timeField]; + } + var event = { annotation: annotation, - time: moment.utc(source[timeField]).valueOf(), - title: source[titleField], + time: moment.utc(time).valueOf(), + title: getFieldFromSource(source, titleField), + tags: getFieldFromSource(source, tagsField), + text: getFieldFromSource(source, textField) }; - if (source[tagsField]) { - if (_.isArray(source[tagsField])) { - event.tags = source[tagsField].join(', '); - } - else { - event.tags = source[tagsField]; - } - } - if (textField && source[textField]) { - event.text = source[textField]; - } - list.push(event); } return list; }); }; + ElasticDatasource.prototype._getDashboardWithSlug = function(id) { + return this._get('/dashboard/' + kbn.slugifyForUrl(id)) + .then(function(result) { + return angular.fromJson(result._source.dashboard); + }, function() { + throw "Dashboard not found"; + }); + }; + ElasticDatasource.prototype.getDashboard = function(id, isTemp) { var url = '/dashboard/' + id; + if (isTemp) { url = '/temp/' + id; } - if (isTemp) { - url = '/temp/' + id; - } - + var self = this; return this._get(url) .then(function(result) { - if (result._source && result._source.dashboard) { - return angular.fromJson(result._source.dashboard); - } else { - return false; - } + return angular.fromJson(result._source.dashboard); }, function(data) { if(data.status === 0) { throw "Could not contact Elasticsearch. Please ensure that Elasticsearch is reachable from your browser."; } else { - throw "Could not find dashboard " + id; + // backward compatible fallback + return self._getDashboardWithSlug(id); } }); }; @@ -148,15 +169,30 @@ function (angular, _, $, config, kbn, moment) { return this._saveTempDashboard(data); } else { - return this._request('PUT', '/dashboard/' + encodeURIComponent(title), this.index, data) - .then(function() { - return { title: title, url: '/dashboard/db/' + title }; - }, function(err) { - throw 'Failed to save to elasticsearch ' + err.data; + + var id = encodeURIComponent(kbn.slugifyForUrl(title)); + var self = this; + + return this._request('PUT', '/dashboard/' + id, this.index, data) + .then(function(results) { + self._removeUnslugifiedDashboard(results, title, id); + return { title: title, url: '/dashboard/db/' + id }; + }, function() { + throw 'Failed to save to elasticsearch'; }); } }; + ElasticDatasource.prototype._removeUnslugifiedDashboard = function(saveResult, title, id) { + if (saveResult.statusText !== 'Created') { return; } + if (title === id) { return; } + + var self = this; + this._get('/dashboard/' + title).then(function() { + self.deleteDashboard(title); + }); + }; + ElasticDatasource.prototype._saveTempDashboard = function(data) { return this._request('POST', '/temp/?ttl=' + this.saveTempTTL, this.index, data) .then(function(result) { @@ -181,7 +217,21 @@ function (angular, _, $, config, kbn, moment) { }; ElasticDatasource.prototype.searchDashboards = function(queryString) { - queryString = queryString.toLowerCase().replace(' and ', ' AND '); + var endsInOpen = function(string, opener, closer) { + var character; + var count = 0; + for (var i=0; i 0; + }; var tagsOnly = queryString.indexOf('tags!:') === 0; if (tagsOnly) { @@ -193,7 +243,21 @@ function (angular, _, $, config, kbn, moment) { queryString = 'title:'; } - if (queryString[queryString.length - 1] !== '*') { + // make this a partial search if we're not in some reserved portion of the language, comments on conditionals, in order: + // 1. ends in reserved character, boosting, boolean operator ( -foo) + // 2. typing a reserved word like AND, OR, NOT + // 3. open parens (groupiing) + // 4. open " (term phrase) + // 5. open [ (range) + // 6. open { (range) + // see http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax + if (!queryString.match(/(\*|\]|}|~|\)|"|^\d+|\s[\-+]\w+)$/) && + !queryString.match(/[A-Z]$/) && + !endsInOpen(queryString, '(', ')') && + !endsInOpen(queryString, '"', '"') && + !endsInOpen(queryString, '[', ']') && !endsInOpen(queryString, '[', '}') && + !endsInOpen(queryString, '{', ']') && !endsInOpen(queryString, '{', '}') + ){ queryString += '*'; } } @@ -216,7 +280,7 @@ function (angular, _, $, config, kbn, moment) { for (var i = 0; i < results.hits.hits.length; i++) { hits.dashboards.push({ id: results.hits.hits[i]._id, - title: results.hits.hits[i]._id, + title: results.hits.hits[i]._source.title, tags: results.hits.hits[i]._source.tags }); } diff --git a/src/app/services/graphite/gfunc.js b/src/app/services/graphite/gfunc.js index 4968384a24f..1acfad8739b 100644 --- a/src/app/services/graphite/gfunc.js +++ b/src/app/services/graphite/gfunc.js @@ -68,7 +68,14 @@ function (_) { addFuncDef({ name: 'diffSeries', params: optionalSeriesRefArgs, - defaultParams: ['#B'], + defaultParams: ['#A'], + category: categories.Calculate, + }); + + addFuncDef({ + name: 'divideSeries', + params: optionalSeriesRefArgs, + defaultParams: ['#A'], category: categories.Calculate, }); @@ -79,6 +86,13 @@ function (_) { category: categories.Calculate, }); + addFuncDef({ + name: 'group', + params: optionalSeriesRefArgs, + defaultParams: ['#A', '#B'], + category: categories.Combine, + }); + addFuncDef({ name: 'sumSeries', shortName: 'sum', diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js index f316340fd91..c076fb2c5e1 100644 --- a/src/app/services/influxdb/influxdbDatasource.js +++ b/src/app/services/influxdb/influxdbDatasource.js @@ -19,6 +19,7 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { this.username = datasource.username; this.password = datasource.password; this.name = datasource.name; + this.basicAuth = datasource.basicAuth; this.saveTemp = _.isUndefined(datasource.save_temp) ? true : datasource.save_temp; this.saveTempTTL = _.isUndefined(datasource.save_temp_ttl) ? '30d' : datasource.save_temp_ttl; @@ -63,7 +64,7 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var timeFilter = getTimeFilter({ range: rangeUnparsed }); var query = annotation.query.replace('$timeFilter', timeFilter); - query = templateSrv.replace(annotation.query); + query = templateSrv.replace(query); return this._seriesQuery(query).then(function(results) { return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations(); @@ -170,6 +171,11 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { inspect: { type: 'influxdb' }, }; + options.headers = options.headers || {}; + if (_this.basicAuth) { + options.headers.Authorization = 'Basic ' + _this.basicAuth; + } + return $http(options).success(function (data) { deferred.resolve(data); }); @@ -182,34 +188,46 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { var tags = dashboard.tags.join(','); var title = dashboard.title; var temp = dashboard.temp; + var id = kbn.slugifyForUrl(title); if (temp) { delete dashboard.temp; } var data = [{ - name: 'grafana.dashboard_' + btoa(title), - columns: ['time', 'sequence_number', 'title', 'tags', 'dashboard'], - points: [[1000000000000, 1, title, tags, angular.toJson(dashboard)]] + name: 'grafana.dashboard_' + btoa(id), + columns: ['time', 'sequence_number', 'title', 'tags', 'dashboard', 'id'], + points: [[1000000000000, 1, title, tags, angular.toJson(dashboard), id]] }]; if (temp) { - return this._saveDashboardTemp(data, title); + return this._saveDashboardTemp(data, title, id); } else { + var self = this; return this._influxRequest('POST', '/series', data).then(function() { - return { title: title, url: '/dashboard/db/' + title }; + self._removeUnslugifiedDashboard(title, false); + return { title: title, url: '/dashboard/db/' + id }; }, function(err) { throw 'Failed to save dashboard to InfluxDB: ' + err.data; }); } }; - InfluxDatasource.prototype._saveDashboardTemp = function(data, title) { - data[0].name = 'grafana.temp_dashboard_' + btoa(title); + InfluxDatasource.prototype._removeUnslugifiedDashboard = function(id, isTemp) { + var self = this; + self._getDashboardInternal(id, isTemp).then(function(dashboard) { + if (dashboard !== null) { + self.deleteDashboard(id); + } + }); + }; + + InfluxDatasource.prototype._saveDashboardTemp = function(data, title, id) { + data[0].name = 'grafana.temp_dashboard_' + btoa(id); data[0].columns.push('expires'); data[0].points[0].push(this._getTempDashboardExpiresDate()); return this._influxRequest('POST', '/series', data).then(function() { var baseUrl = window.location.href.replace(window.location.hash,''); - var url = baseUrl + "#dashboard/temp/" + title; + var url = baseUrl + "#dashboard/temp/" + id; return { title: title, url: url }; }, function(err) { throw 'Failed to save shared dashboard to InfluxDB: ' + err.data; @@ -236,7 +254,7 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { return expires; }; - InfluxDatasource.prototype.getDashboard = function(id, isTemp) { + InfluxDatasource.prototype._getDashboardInternal = function(id, isTemp) { var queryString = 'select dashboard from "grafana.dashboard_' + btoa(id) + '"'; if (isTemp) { @@ -245,15 +263,34 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { return this._seriesQuery(queryString).then(function(results) { if (!results || !results.length) { - throw "Dashboard not found"; + return null; } var dashCol = _.indexOf(results[0].columns, 'dashboard'); var dashJson = results[0].points[0][dashCol]; return angular.fromJson(dashJson); + }, function() { + return null; + }); + }; + + InfluxDatasource.prototype.getDashboard = function(id, isTemp) { + var self = this; + return this._getDashboardInternal(id, isTemp).then(function(dashboard) { + if (dashboard !== null) { + return dashboard; + } + + // backward compatible load for unslugified ids + var slug = kbn.slugifyForUrl(id); + if (slug !== id) { + return self.getDashboard(slug, isTemp); + } + + throw "Dashboard not found"; }, function(err) { - return "Could not load dashboard, " + err.data; + throw "Could not load dashboard, " + err.data; }); }; @@ -264,12 +301,12 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { } return id; }, function(err) { - return "Could not delete dashboard, " + err.data; + throw "Could not delete dashboard, " + err.data; }); }; InfluxDatasource.prototype.searchDashboards = function(queryString) { - var influxQuery = 'select title, tags from /grafana.dashboard_.*/ where '; + var influxQuery = 'select * from /grafana.dashboard_.*/ where '; var tagsOnly = queryString.indexOf('tags!:') === 0; if (tagsOnly) { @@ -294,15 +331,21 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) { return hits; } - var dashCol = _.indexOf(results[0].columns, 'title'); - var tagsCol = _.indexOf(results[0].columns, 'tags'); - for (var i = 0; i < results.length; i++) { + var dashCol = _.indexOf(results[i].columns, 'title'); + var tagsCol = _.indexOf(results[i].columns, 'tags'); + var idCol = _.indexOf(results[i].columns, 'id'); + var hit = { id: results[i].points[0][dashCol], title: results[i].points[0][dashCol], tags: results[i].points[0][tagsCol].split(",") }; + + if (idCol !== -1) { + hit.id = results[i].points[0][idCol]; + } + hit.tags = hit.tags[0] ? hit.tags : []; hits.dashboards.push(hit); } diff --git a/src/app/services/opentsdb/opentsdbDatasource.js b/src/app/services/opentsdb/opentsdbDatasource.js index 68eb55acc7f..f6a36c6f035 100644 --- a/src/app/services/opentsdb/opentsdbDatasource.js +++ b/src/app/services/opentsdb/opentsdbDatasource.js @@ -19,7 +19,7 @@ function (angular, _, kbn) { } // Called once per panel (graph) - OpenTSDBDatasource.prototype.query = function(filterSrv, options) { + OpenTSDBDatasource.prototype.query = function(options) { var start = convertToTSDBTime(options.range.from); var end = convertToTSDBTime(options.range.to); var queries = _.compact(_.map(options.targets, convertTargetToQuery)); diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index f8247d1c5cb..c201147becf 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -7,37 +7,29 @@ function (angular, _) { var module = angular.module('grafana.services'); - module.service('templateSrv', function($q, $routeParams) { + module.service('templateSrv', function() { var self = this; this._regex = /\$(\w+)|\[\[([\s\S]+?)\]\]/g; - this._templateData = {}; + this._values = {}; + this._texts = {}; this._grafanaVariables = {}; this.init = function(variables) { this.variables = variables; - this.updateTemplateData(true); + this.updateTemplateData(); }; - this.updateTemplateData = function(initial) { - var data = {}; + this.updateTemplateData = function() { + this._values = {}; + this._texts = {}; _.each(this.variables, function(variable) { - if (initial) { - var urlValue = $routeParams[ variable.name ]; - if (urlValue) { - variable.current = { text: urlValue, value: urlValue }; - } - } + if (!variable.current || !variable.current.value) { return; } - if (!variable.current || !variable.current.value) { - return; - } - - data[variable.name] = variable.current.value; - }); - - this._templateData = data; + this._values[variable.name] = variable.current.value; + this._texts[variable.name] = variable.current.text; + }, this); }; this.setGrafanaVariable = function (name, value) { @@ -47,7 +39,11 @@ function (angular, _) { this.variableExists = function(expression) { this._regex.lastIndex = 0; var match = this._regex.exec(expression); - return match && (self._templateData[match[1] || match[2]] !== void 0); + return match && (self._values[match[1] || match[2]] !== void 0); + }; + + this.containsVariable = function(str, variableName) { + return str.indexOf('$' + variableName) !== -1 || str.indexOf('[[' + variableName + ']]') !== -1; }; this.highlightVariablesAsHtml = function(str) { @@ -55,7 +51,7 @@ function (angular, _) { this._regex.lastIndex = 0; return str.replace(this._regex, function(match, g1, g2) { - if (self._templateData[g1 || g2]) { + if (self._values[g1 || g2]) { return '' + match + ''; } return match; @@ -69,13 +65,29 @@ function (angular, _) { this._regex.lastIndex = 0; return target.replace(this._regex, function(match, g1, g2) { - value = self._templateData[g1 || g2]; + value = self._values[g1 || g2]; if (!value) { return match; } return self._grafanaVariables[value] || value; }); }; + this.replaceWithText = function(target) { + if (!target) { return; } + + var value; + var text; + this._regex.lastIndex = 0; + + return target.replace(this._regex, function(match, g1, g2) { + value = self._values[g1 || g2]; + text = self._texts[g1 || g2]; + if (!value) { return match; } + + return self._grafanaVariables[value] || text; + }); + }; + }); }); diff --git a/src/app/services/templateValuesSrv.js b/src/app/services/templateValuesSrv.js index 511d5bfb495..9b80c336f4b 100644 --- a/src/app/services/templateValuesSrv.js +++ b/src/app/services/templateValuesSrv.js @@ -18,17 +18,24 @@ function (angular, _, kbn) { } }); - this.init = function(dashboard) { + this.init = function(dashboard, viewstate) { this.variables = dashboard.templating.list; + this.viewstate = viewstate; templateSrv.init(this.variables); for (var i = 0; i < this.variables.length; i++) { - var param = this.variables[i]; - if (param.refresh) { - this.updateOptions(param); + var variable = this.variables[i]; + var urlValue = viewstate.state['var-' + variable.name]; + if (urlValue !== void 0) { + var option = _.findWhere(variable.options, { text: urlValue }); + option = option || { text: urlValue, value: urlValue }; + this.setVariableValue(variable, option, true); } - else if (param.type === 'interval') { - this.updateAutoInterval(param); + else if (variable.refresh) { + this.updateOptions(variable); + } + else if (variable.type === 'interval') { + this.updateAutoInterval(variable); } } }; @@ -63,7 +70,7 @@ function (angular, _, kbn) { if (otherVariable === updatedVariable) { return; } - if (otherVariable.query.indexOf('[[' + updatedVariable.name + ']]') !== -1) { + if (templateSrv.containsVariable(otherVariable.query, updatedVariable.name)) { return self.updateOptions(otherVariable); } }); @@ -92,7 +99,6 @@ function (angular, _, kbn) { var datasource = datasourceSrv.get(variable.datasource); return datasource.metricFindQuery(variable.query) .then(function (results) { - variable.options = self.metricNamesToVariableValues(variable, results); if (variable.includeAll) { @@ -102,9 +108,9 @@ function (angular, _, kbn) { // if parameter has current value // if it exists in options array keep value if (variable.current) { - var currentExists = _.findWhere(variable.options, { value: variable.current.value }); - if (currentExists) { - return self.setVariableValue(variable, variable.current, true); + var currentOption = _.findWhere(variable.options, { text: variable.current.text }); + if (currentOption) { + return self.setVariableValue(variable, currentOption, true); } } diff --git a/src/app/services/timeSrv.js b/src/app/services/timeSrv.js index 7d81d8fe375..1ee9ecdf925 100644 --- a/src/app/services/timeSrv.js +++ b/src/app/services/timeSrv.js @@ -2,13 +2,14 @@ define([ 'angular', 'lodash', 'config', - 'kbn' -], function (angular, _, config, kbn) { + 'kbn', + 'moment' +], function (angular, _, config, kbn, moment) { 'use strict'; var module = angular.module('grafana.services'); - module.service('timeSrv', function($rootScope, $timeout, timer) { + module.service('timeSrv', function($rootScope, $timeout, $routeParams, timer) { var self = this; this.init = function(dashboard) { @@ -17,11 +18,40 @@ define([ this.dashboard = dashboard; this.time = dashboard.time; + this._initTimeFromUrl(); + if(this.dashboard.refresh) { this.set_interval(this.dashboard.refresh); } }; + this._parseUrlParam = function(value) { + if (value.indexOf('now') !== -1) { + return value; + } + if (value.length === 8) { + return moment.utc(value, 'YYYYMMDD').toDate(); + } + if (value.length === 15) { + return moment.utc(value, 'YYYYMMDDTHHmmss').toDate(); + } + var epoch = parseInt(value); + if (!_.isNaN(epoch)) { + return new Date(epoch); + } + + return null; + }; + + this._initTimeFromUrl = function() { + if ($routeParams.from) { + this.time.from = this._parseUrlParam($routeParams.from) || this.time.from; + } + if ($routeParams.to) { + this.time.to = this._parseUrlParam($routeParams.to) || this.time.to; + } + }; + this.set_interval = function (interval) { this.dashboard.refresh = interval; if (interval) { diff --git a/src/app/services/unsavedChangesSrv.js b/src/app/services/unsavedChangesSrv.js index d1a83a59da2..9b8d2eea198 100644 --- a/src/app/services/unsavedChangesSrv.js +++ b/src/app/services/unsavedChangesSrv.js @@ -83,6 +83,14 @@ function(angular, _, config) { current.time = original.time = {}; current.refresh = original.refresh; + // ignore template variable values + _.each(current.templating.list, function(value, index) { + value.current = null; + value.options = null; + original.templating.list[index].current = null; + original.templating.list[index].options = null; + }); + var currentTimepicker = _.findWhere(current.nav, { type: 'timepicker' }); var originalTimepicker = _.findWhere(original.nav, { type: 'timepicker' }); diff --git a/src/config.sample.js b/src/config.sample.js index 6046a753d5a..740c0d4b8c9 100644 --- a/src/config.sample.js +++ b/src/config.sample.js @@ -1,8 +1,7 @@ -///// @scratch /configuration/config.js/1 - // == Configuration - // 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. - /// +// == Configuration +// 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) { "use strict"; @@ -97,7 +96,7 @@ function (Settings) { // Change window title prefix from 'Grafana - ' window_title_prefix: 'Grafana - ', - // Add your own custom pannels + // Add your own custom panels plugins: { // list of plugin panels panels: [], diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index d1bfbcf1154..ad9fe11e73d 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -56,7 +56,7 @@ hr { } .brand { - padding: 15px 20px 15px; + padding: 0px 15px; color: @grayLighter; font-weight: normal; text-shadow: none; diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less index 5675d605cbd..f4f573c58b0 100644 --- a/src/css/less/bootswatch.light.less +++ b/src/css/less/bootswatch.light.less @@ -59,6 +59,7 @@ a.text-success:hover { color: darken(@green, 10%); } } .brand { + padding: 0px 15px; &:hover { color: @navbarLinkColorHover; @@ -461,7 +462,6 @@ legend { // ----------------------------------------------------- .alert { - .border-radius(0); text-shadow: none; &-heading, h1, h2, h3, h4, h5, h6 { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 022319a1042..b291b548219 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -35,6 +35,19 @@ } } +.logo-icon { + width: 24px; + padding: 13px 11px 0 0; + display: block; + float: left; +} + +.page-title { + padding: 15px 0; + display: block; + float: left; +} + .row-button { width: 24px; } @@ -87,7 +100,7 @@ .panel-fullscreen { z-index: 100; - display: block !important; + display: block; position: fixed; left: 0px; right: 0px; @@ -103,11 +116,10 @@ } } -.dashboard-fullscreen .main-view-container { - height: 0px; - width: 0px; - position: fixed; - right: -10000px; +.dashboard-fullscreen { + .row-control-inner { + display: none; + } } .histogram-chart { @@ -423,6 +435,9 @@ select.grafana-target-segment-input { background-color: rgb(58, 57, 57); border-radius: 5px; z-index: 9999; + max-width: 800px; + max-height: 600px; + overflow: hidden; } .tooltip.in { @@ -485,3 +500,26 @@ select.grafana-target-segment-input { color: @variable; } +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: @blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} + +.grafana-tip { + padding-left: 5px; +} diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 4415c85d3c0..957a56147dd 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -317,13 +317,38 @@ div.flot-text { color: @textColor !important; } -.dashboard-notice { +.page-alert-list { z-index:8000; - margin-left:0px; - padding:3px 0px 3px 0px; - width:100%; - padding-left:20px; - color: @white; + min-width: 300px; + max-width: 300px; + position: fixed; + right: 20px; + top: 56px; + + .alert { + color: @white; + padding-bottom: 13px; + position: relative; + } + + .alert-close { + position: absolute; + top: -4px; + right: -2px; + width: 19px; + height: 19px; + padding: 0; + background: @grayLighter; + border-radius: 50%; + border: none; + font-size: 1.1rem; + color: @grayDarker; + } + + .alert-title { + font-weight: bold; + padding-bottom: 2px; + } } @@ -516,6 +541,11 @@ div.flot-text { } } +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} // Labels & Badges .label-tag { diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 608dfb609b0..c65a6f99179 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -257,7 +257,7 @@ // Form states and alerts // ------------------------- @warningText: darken(#c09853, 10%); -@warningBackground: @grayLighter; +@warningBackground: @orange; @warningBorder: transparent; @errorText: #b94a48; diff --git a/src/img/fav16.png b/src/img/fav16.png new file mode 100644 index 00000000000..827cd972e4b Binary files /dev/null and b/src/img/fav16.png differ diff --git a/src/img/fav32.png b/src/img/fav32.png new file mode 100644 index 00000000000..827cd972e4b Binary files /dev/null and b/src/img/fav32.png differ diff --git a/src/img/fav_dark_16.png b/src/img/fav_dark_16.png new file mode 100644 index 00000000000..2f66c42db40 Binary files /dev/null and b/src/img/fav_dark_16.png differ diff --git a/src/img/fav_dark_32.png b/src/img/fav_dark_32.png new file mode 100644 index 00000000000..9248832f671 Binary files /dev/null and b/src/img/fav_dark_32.png differ diff --git a/src/index.html b/src/index.html index 63e837abfcd..84e7787b83d 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,11 @@ + Grafana + @@ -22,12 +24,17 @@ -
      - - {{alert.title}}
      {{$index + 1}} alert(s)
      -
      +
      +
      + +
      {{alert.title}}
      +
      +
      +
      -
      +
      - + diff --git a/src/test/specs/dashboardViewStateSrv-specs.js b/src/test/specs/dashboardViewStateSrv-specs.js index 92e444d55d0..82ccfe51363 100644 --- a/src/test/specs/dashboardViewStateSrv-specs.js +++ b/src/test/specs/dashboardViewStateSrv-specs.js @@ -20,6 +20,7 @@ define([ viewState.update(updateState); expect(location.search()).to.eql(updateState); expect(viewState.fullscreen).to.be(true); + expect(viewState.state.fullscreen).to.be(true); }); }); @@ -29,6 +30,7 @@ define([ viewState.update({fullscreen: false}); expect(location.search()).to.eql({}); expect(viewState.fullscreen).to.be(false); + expect(viewState.state.fullscreen).to.be(false); }); }); diff --git a/src/test/specs/graphiteTargetCtrl-specs.js b/src/test/specs/graphiteTargetCtrl-specs.js index 57f3870cb5d..27be0d92b26 100644 --- a/src/test/specs/graphiteTargetCtrl-specs.js +++ b/src/test/specs/graphiteTargetCtrl-specs.js @@ -99,6 +99,25 @@ define([ }); + describe('when initializing a target with single param func using variable', function() { + beforeEach(function() { + ctx.scope.target.target = 'movingAverage(prod.count, $var)'; + ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); + ctx.scope.init(); + ctx.scope.$digest(); + ctx.scope.$parent = { get_data: sinon.spy() }; + }); + + it('should add 2 segments', function() { + expect(ctx.scope.segments.length).to.be(2); + }); + + it('should add function param', function() { + expect(ctx.scope.functions[0].params.length).to.be(1); + }); + + }); + describe('when initalizing target without metric expression and function with series-ref', function() { beforeEach(function() { ctx.scope.target.target = 'asPercent(metric.node.count, #A)'; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index 35cde542de6..81f0df7be7e 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -51,6 +51,7 @@ define([ self.templateSrv = new TemplateSrvStub(); self.timeSrv = new TimeSrvStub(); self.datasourceSrv = {}; + self.$routeParams = {}; this.providePhase = function(mocks) { return module(function($provide) { @@ -103,6 +104,7 @@ define([ this.replace = function(text) { return _.template(text, this.data, this.templateSettings); }; + this.init = function() {}; this.updateTemplateData = function() { }; this.variableExists = function() { return false; }; this.highlightVariablesAsHtml = function(str) { return str; }; diff --git a/src/test/specs/influxdb-datasource-specs.js b/src/test/specs/influxdb-datasource-specs.js index ddf7db48282..3851b0cd898 100644 --- a/src/test/specs/influxdb-datasource-specs.js +++ b/src/test/specs/influxdb-datasource-specs.js @@ -8,7 +8,7 @@ define([ var ctx = new helpers.ServiceTestContext(); beforeEach(module('grafana.services')); - beforeEach(ctx.providePhase()); + beforeEach(ctx.providePhase(['templateSrv'])); beforeEach(ctx.createService('InfluxDatasource')); beforeEach(function() { ctx.ds = new ctx.service({ urls: [''], user: 'test', password: 'mupp' }); @@ -70,6 +70,30 @@ define([ }); + describe('When issuing annotation query', function() { + var results; + var urlExpected = "/series?p=mupp&q=select+title+from+events.backend_01"+ + "+where+time+%3E+now()+-+1h&time_precision=s"; + + var range = { from: 'now-1h', to: 'now' }; + var annotation = { query: 'select title from events.$server where $timeFilter' }; + var response = []; + + beforeEach(function() { + ctx.templateSrv.replace = function(str) { + return str.replace('$server', 'backend_01'); + }; + ctx.$httpBackend.expect('GET', urlExpected).respond(response); + ctx.ds.annotationQuery(annotation, range).then(function(data) { results = data; }); + ctx.$httpBackend.flush(); + }); + + it('should generate the correct query', function() { + ctx.$httpBackend.verifyNoOutstandingExpectation(); + }); + + }); + }); }); diff --git a/src/test/specs/kbn-format-specs.js b/src/test/specs/kbn-format-specs.js index a44475556b0..85807c277ec 100644 --- a/src/test/specs/kbn-format-specs.js +++ b/src/test/specs/kbn-format-specs.js @@ -15,6 +15,12 @@ define([ 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'); + }); + + it('should translate 365445 as 6.09 min', function() { var str = kbn.msFormat(365445, 2); expect(str).to.be('6.09 min'); diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index ac711dce66a..f740ef6d544 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -62,6 +62,24 @@ define([ }); + describe('when checking if a string contains a variable', function() { + beforeEach(function() { + _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); + _templateSrv.updateTemplateData(); + }); + + it('should find it with $var syntax', function() { + var contains = _templateSrv.containsVariable('this.$test.filters', 'test'); + expect(contains).to.be(true); + }); + + it('should find it with [[var]] syntax', function() { + var contains = _templateSrv.containsVariable('this.[[test]].filters', 'test'); + expect(contains).to.be(true); + }); + + }); + describe('updateTemplateData with simple value', function() { beforeEach(function() { _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); @@ -74,6 +92,23 @@ define([ }); }); + describe('replaceWithText', function() { + beforeEach(function() { + _templateSrv.init([ + { name: 'server', current: { value: '{asd,asd2}', text: 'All' } }, + { name: 'period', current: { value: '$__auto_interval', text: 'auto' } } + ]); + _templateSrv.setGrafanaVariable('$__auto_interval', '13m'); + _templateSrv.updateTemplateData(); + }); + + it('should replace with text except for grafanaVariables', function() { + var target = _templateSrv.replaceWithText('Server: $server, period: $period'); + expect(target).to.be('Server: All, period: 13m'); + }); + }); + + }); }); diff --git a/src/test/specs/templateValuesSrv-specs.js b/src/test/specs/templateValuesSrv-specs.js index eb1b0225618..bc0de36e959 100644 --- a/src/test/specs/templateValuesSrv-specs.js +++ b/src/test/specs/templateValuesSrv-specs.js @@ -10,7 +10,7 @@ define([ var ctx = new helpers.ServiceTestContext(); beforeEach(module('grafana.services')); - beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv'])); + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', "$routeParams"])); beforeEach(ctx.createService('templateValuesSrv')); describe('update interval variable options', function() { @@ -125,12 +125,12 @@ define([ describeUpdateVariable('and existing value still exists in options', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.current = { value: 'backend2'}; + scenario.variable.current = { text: 'backend2'}; scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; }); it('should keep variable value', function() { - expect(scenario.variable.current.value).to.be('backend2'); + expect(scenario.variable.current.text).to.be('backend2'); }); }); @@ -182,18 +182,6 @@ define([ }); }); - describeUpdateVariable('and existing value still exists in options', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.current = { value: 'backend2'}; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; - }); - - it('should keep variable value', function() { - expect(scenario.variable.current.value).to.be('backend2'); - }); - }); - describeUpdateVariable('with include All glob syntax', function(scenario) { scenario.setup(function() { scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' }; diff --git a/src/test/specs/timeSrv-specs.js b/src/test/specs/timeSrv-specs.js index a0bc053b1e1..1d8a158e27e 100644 --- a/src/test/specs/timeSrv-specs.js +++ b/src/test/specs/timeSrv-specs.js @@ -11,7 +11,7 @@ define([ var _dashboard; beforeEach(module('grafana.services')); - beforeEach(ctx.providePhase()); + beforeEach(ctx.providePhase(['$routeParams'])); beforeEach(ctx.createService('timeSrv')); beforeEach(function() { @@ -35,6 +35,45 @@ define([ }); }); + describe('init time from url', function() { + it('should handle relative times', function() { + ctx.$routeParams.from = 'now-2d'; + ctx.$routeParams.to = 'now'; + ctx.service.init(_dashboard); + var time = ctx.service.timeRange(false); + expect(time.from).to.be('now-2d'); + expect(time.to).to.be('now'); + }); + + it('should handle formated dates', function() { + ctx.$routeParams.from = '20140410T052010'; + ctx.$routeParams.to = '20140520T031022'; + ctx.service.init(_dashboard); + var time = ctx.service.timeRange(true); + expect(time.from.getTime()).to.equal(new Date("2014-04-10T05:20:10Z").getTime()); + expect(time.to.getTime()).to.equal(new Date("2014-05-20T03:10:22Z").getTime()); + }); + + it('should handle formated dates without time', function() { + ctx.$routeParams.from = '20140410'; + ctx.$routeParams.to = '20140520'; + ctx.service.init(_dashboard); + var time = ctx.service.timeRange(true); + expect(time.from.getTime()).to.equal(new Date("2014-04-10T00:00:00Z").getTime()); + expect(time.to.getTime()).to.equal(new Date("2014-05-20T00:00:00Z").getTime()); + }); + + it('should handle epochs', function() { + ctx.$routeParams.from = '1410337646373'; + ctx.$routeParams.to = '1410337665699'; + ctx.service.init(_dashboard); + var time = ctx.service.timeRange(true); + expect(time.from.getTime()).to.equal(1410337646373); + expect(time.to.getTime()).to.equal(1410337665699); + }); + + }); + describe('setTime', function() { it('should return disable refresh for absolute times', function() { _dashboard.refresh = false; diff --git a/tasks/options/requirejs.js b/tasks/options/requirejs.js index b3bc4f97909..c1a718c3397 100644 --- a/tasks/options/requirejs.js +++ b/tasks/options/requirejs.js @@ -1,4 +1,6 @@ module.exports = function(config,grunt) { + 'use strict'; + var _c = { build: { options: { @@ -59,12 +61,15 @@ module.exports = function(config,grunt) { 'directives/all', 'jquery.flot.pie', 'angular-dragdrop', + 'controllers/all', + 'routes/all', + 'components/partials', ] } ]; var fs = require('fs'); - var panelPath = config.srcDir+'/app/panels' + var panelPath = config.srcDir+'/app/panels'; // create a module for each directory in src/app/panels/ fs.readdirSync(panelPath).forEach(function (panelName) {