From 91fb3f2224cd9e228ad516ec4b232bd89cfa1839 Mon Sep 17 00:00:00 2001 From: Jesse White Date: Fri, 1 Sep 2017 01:19:51 -0400 Subject: [PATCH 01/35] fix: cancel the initial timer when changing the auto-refresh interval, fixes #9139 (#9140) --- public/app/features/dashboard/time_srv.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/public/app/features/dashboard/time_srv.ts b/public/app/features/dashboard/time_srv.ts index abde4152b63..2c16915b5aa 100644 --- a/public/app/features/dashboard/time_srv.ts +++ b/public/app/features/dashboard/time_srv.ts @@ -116,16 +116,14 @@ class TimeSrv { setAutoRefresh(interval) { this.dashboard.refresh = interval; + this.cancelNextRefresh(); if (interval) { var intervalMs = kbn.interval_to_ms(interval); - this.$timeout(() => { + this.refreshTimer = this.timer.register(this.$timeout(() => { this.startNextRefreshTimer(intervalMs); this.refreshDashboard(); - }, intervalMs); - - } else { - this.cancelNextRefresh(); + }, intervalMs)); } // update url From ce0de35a6c00942ba0ab23489f674d136270d54b Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 8 Sep 2017 01:04:32 +0900 Subject: [PATCH 02/35] set give focus in code editor --- public/app/core/components/code_editor/code_editor.ts | 3 +++ .../plugins/datasource/prometheus/partials/query.editor.html | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index 151ebffab5d..826d62eaade 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -110,6 +110,9 @@ function link(scope, elem, attrs) { elem.addClass("gf-code-editor"); let textarea = elem.find("textarea"); textarea.addClass('gf-form-input'); + if (attrs.giveFocus) { + textarea.attr('give-focus', attrs.giveFocus); + } // Event handlers editorSession.on('change', (e) => { diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index 5140c9e7bbd..9b2aa533743 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -2,7 +2,7 @@
+ get-completer="ctrl.getCompleter()" data-mode="prometheus" give-focus="ctrl.target.refId == 'A'">
From d971eddc7a316fb109705bd9bdf0ad869f9498b9 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 8 Sep 2017 11:49:10 +0900 Subject: [PATCH 03/35] copy from give-focus --- public/app/core/components/code_editor/code_editor.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index 826d62eaade..ec10b7a477b 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -111,7 +111,14 @@ function link(scope, elem, attrs) { let textarea = elem.find("textarea"); textarea.addClass('gf-form-input'); if (attrs.giveFocus) { - textarea.attr('give-focus', attrs.giveFocus); + setTimeout(function () { + textarea.focus(); + var domEl = textarea[0]; + if (domEl.setSelectionRange) { + var pos = textarea.val().length * 2; + domEl.setSelectionRange(pos, pos); + } + }, 200); } // Event handlers From 7c566a6539720e46626bb61df57662b60cd433da Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 8 Sep 2017 12:33:36 +0900 Subject: [PATCH 04/35] fix to focus first query --- public/app/core/components/code_editor/code_editor.ts | 3 ++- .../plugins/datasource/prometheus/partials/query.editor.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index ec10b7a477b..0ceb21d0335 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -110,7 +110,7 @@ function link(scope, elem, attrs) { elem.addClass("gf-code-editor"); let textarea = elem.find("textarea"); textarea.addClass('gf-form-input'); - if (attrs.giveFocus) { + if (scope.focus) { setTimeout(function () { textarea.focus(); var domEl = textarea[0]; @@ -209,6 +209,7 @@ export function codeEditorDirective() { template: editorTemplate, scope: { content: "=", + focus: "=", onChange: "&", getCompleter: "&" }, diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index 9b2aa533743..d35f9f9c14c 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -2,7 +2,7 @@
+ get-completer="ctrl.getCompleter()" data-mode="prometheus" focus="ctrl.target.refId == 'A'">
From b1506a2b09caf27562cf1d49d40d3204263fba13 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Fri, 8 Sep 2017 10:19:04 +0200 Subject: [PATCH 05/35] securejson: decrypt should not modify src When decrypting a source securejson byte array, should not modify the source and now passes back a new dest byte array. --- pkg/util/encryption.go | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pkg/util/encryption.go b/pkg/util/encryption.go index 2f8b5d7af56..d41665bafd6 100644 --- a/pkg/util/encryption.go +++ b/pkg/util/encryption.go @@ -27,12 +27,13 @@ func Decrypt(payload []byte, secret string) ([]byte, error) { } iv := payload[saltLength : saltLength+aes.BlockSize] payload = payload[saltLength+aes.BlockSize:] + payloadDst := make([]byte, len(payload)) stream := cipher.NewCFBDecrypter(block, iv) // XORKeyStream can work in-place if the two arguments are the same. - stream.XORKeyStream(payload, payload) - return payload, nil + stream.XORKeyStream(payloadDst, payload) + return payloadDst, nil } func Encrypt(payload []byte, secret string) ([]byte, error) { From 1076b75a2137f678309c33ed800a6731395c145d Mon Sep 17 00:00:00 2001 From: Alin Sinpalean Date: Fri, 8 Sep 2017 10:37:57 +0200 Subject: [PATCH 06/35] Fix rounding of intervals (#9197) * Prometheus: Fix actual step computation logic when a min_step is specified and the range is longer than min_step * 11000. * Fix kbn.round_interval for exact intervals. * Remove redundant 1d return, fix a couple of comments. * Be more cautious with values close to 1d not rounding up to 1d. They may, because of the way the calculation uses 2 potentially different current time values. --- public/app/core/utils/kbn.js | 65 ++++++++++++++--------------- public/test/core/utils/kbn_specs.js | 14 +++++++ 2 files changed, 45 insertions(+), 34 deletions(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 37888fb10ac..97078071e45 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -17,90 +17,87 @@ function($, _) { kbn.round_interval = function(interval) { switch (true) { // 0.015s - case (interval <= 15): + case (interval < 15): return 10; // 0.01s // 0.035s - case (interval <= 35): + case (interval < 35): return 20; // 0.02s // 0.075s - case (interval <= 75): + case (interval < 75): return 50; // 0.05s // 0.15s - case (interval <= 150): + case (interval < 150): return 100; // 0.1s // 0.35s - case (interval <= 350): + case (interval < 350): return 200; // 0.2s // 0.75s - case (interval <= 750): + case (interval < 750): return 500; // 0.5s // 1.5s - case (interval <= 1500): + case (interval < 1500): return 1000; // 1s // 3.5s - case (interval <= 3500): + case (interval < 3500): return 2000; // 2s // 7.5s - case (interval <= 7500): + case (interval < 7500): return 5000; // 5s // 12.5s - case (interval <= 12500): + case (interval < 12500): return 10000; // 10s // 17.5s - case (interval <= 17500): + case (interval < 17500): return 15000; // 15s // 25s - case (interval <= 25000): + case (interval < 25000): return 20000; // 20s // 45s - case (interval <= 45000): + case (interval < 45000): return 30000; // 30s // 1.5m - case (interval <= 90000): + case (interval < 90000): return 60000; // 1m // 3.5m - case (interval <= 210000): + case (interval < 210000): return 120000; // 2m // 7.5m - case (interval <= 450000): + case (interval < 450000): return 300000; // 5m // 12.5m - case (interval <= 750000): + case (interval < 750000): return 600000; // 10m // 12.5m - case (interval <= 1050000): + case (interval < 1050000): return 900000; // 15m // 25m - case (interval <= 1500000): + case (interval < 1500000): return 1200000; // 20m // 45m - case (interval <= 2700000): + case (interval < 2700000): return 1800000; // 30m // 1.5h - case (interval <= 5400000): + case (interval < 5400000): return 3600000; // 1h // 2.5h - case (interval <= 9000000): + case (interval < 9000000): return 7200000; // 2h // 4.5h - case (interval <= 16200000): + case (interval < 16200000): return 10800000; // 3h // 9h - case (interval <= 32400000): + case (interval < 32400000): return 21600000; // 6h - // 24h - case (interval <= 86400000): + // 1d + case (interval < 86400000): return 43200000; // 12h - // 48h - case (interval <= 172800000): - return 86400000; // 24h // 1w - case (interval <= 604800000): - return 86400000; // 24h + case (interval < 604800000): + return 86400000; // 1d // 3w - case (interval <= 1814400000): + case (interval < 1814400000): return 604800000; // 1w - // 2y + // 6w case (interval < 3628800000): return 2592000000; // 30d default: @@ -134,7 +131,7 @@ function($, _) { return nummilliseconds + 'ms'; } - return 'less then a millisecond'; //'just now' //or other string you like; + return 'less than a millisecond'; //'just now' //or other string you like; }; kbn.to_percent = function(number,outof) { diff --git a/public/test/core/utils/kbn_specs.js b/public/test/core/utils/kbn_specs.js index 0b7f4b4f2bc..0e92255792b 100644 --- a/public/test/core/utils/kbn_specs.js +++ b/public/test/core/utils/kbn_specs.js @@ -167,6 +167,20 @@ define([ var res = kbn.calculateInterval(range, 900, '>15ms'); expect(res.interval).to.be('15ms'); }); + + it('1d 1 resolution', function() { + var range = { from: dateMath.parse('now-1d'), to: dateMath.parse('now') }; + var res = kbn.calculateInterval(range, 1, null); + expect(res.interval).to.be('1d'); + expect(res.intervalMs).to.be(86400000); + }); + + it('86399s 1 resolution', function() { + var range = { from: dateMath.parse('now-86390s'), to: dateMath.parse('now') }; + var res = kbn.calculateInterval(range, 1, null); + expect(res.interval).to.be('12h'); + expect(res.intervalMs).to.be(43200000); + }); }); describe('hex', function() { From 2953d64429fa20fa4dd36195543629ea85b3c78e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Sep 2017 11:43:29 +0200 Subject: [PATCH 07/35] prometheus: minor update to focus editor PR, #9201 --- public/app/core/components/code_editor/code_editor.ts | 7 ++++--- public/app/features/panel/query_ctrl.ts | 2 ++ .../datasource/prometheus/partials/query.editor.html | 2 +- public/sass/components/_code_editor.scss | 4 ++++ 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index 0ceb21d0335..7c41eb3b3a2 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -110,7 +110,8 @@ function link(scope, elem, attrs) { elem.addClass("gf-code-editor"); let textarea = elem.find("textarea"); textarea.addClass('gf-form-input'); - if (scope.focus) { + + if (scope.codeEditorFocus) { setTimeout(function () { textarea.focus(); var domEl = textarea[0]; @@ -118,7 +119,7 @@ function link(scope, elem, attrs) { var pos = textarea.val().length * 2; domEl.setSelectionRange(pos, pos); } - }, 200); + }, 100); } // Event handlers @@ -209,7 +210,7 @@ export function codeEditorDirective() { template: editorTemplate, scope: { content: "=", - focus: "=", + codeEditorFocus: "<", onChange: "&", getCompleter: "&" }, diff --git a/public/app/features/panel/query_ctrl.ts b/public/app/features/panel/query_ctrl.ts index 67f4f93d16c..148322360bc 100644 --- a/public/app/features/panel/query_ctrl.ts +++ b/public/app/features/panel/query_ctrl.ts @@ -10,9 +10,11 @@ export class QueryCtrl { panel: any; hasRawMode: boolean; error: string; + isLastQuery: boolean; constructor(public $scope, private $injector) { this.panel = this.panelCtrl.panel; + this.isLastQuery = _.indexOf(this.panel.targets, this.target) === (this.panel.targets.length - 1); } refresh() { diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index d35f9f9c14c..a34a752bd95 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -2,7 +2,7 @@
+ get-completer="ctrl.getCompleter()" data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss index 0f03e686546..4a13d4aa811 100644 --- a/public/sass/components/_code_editor.scss +++ b/public/sass/components/_code_editor.scss @@ -77,3 +77,7 @@ $doc-font-size: $font-size-sm; .ace_tooltip { border-radius: 3px; } + +.ace_hidden-cursors .ace_cursor { + opacity: 0 !important; +} From 75c4c4d8b503815de13eb6772e304d6e24bf6eb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Sep 2017 13:52:28 +0200 Subject: [PATCH 08/35] fix: query ctrl unit tests now pass as before --- .../plugins/datasource/graphite/specs/query_ctrl_specs.ts | 5 +++++ .../plugins/datasource/influxdb/specs/query_ctrl_specs.ts | 8 ++++++-- .../plugins/datasource/opentsdb/specs/query-ctrl-specs.ts | 6 +++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts index e88fbc044c1..ff1ea9449ee 100644 --- a/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/query_ctrl_specs.ts @@ -24,6 +24,11 @@ describe('GraphiteQueryCtrl', function() { ctx.target = {target: 'aliasByNode(scaleToSeconds(test.prod.*,1),2)'}; ctx.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); ctx.panelCtrl = {panel: {}}; + ctx.panelCtrl = { + panel: { + targets: [ctx.target] + } + }; ctx.panelCtrl.refresh = sinon.spy(); ctx.ctrl = $controller(GraphiteQueryCtrl, {$scope: ctx.scope}, { diff --git a/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts index 44b593edc0e..ec433249097 100644 --- a/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts @@ -19,9 +19,13 @@ describe('InfluxDBQueryCtrl', function() { ctx.$q = $q; ctx.scope = $rootScope.$new(); ctx.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); - ctx.panelCtrl = {panel: {}}; - ctx.panelCtrl.refresh = sinon.spy(); ctx.target = {target: {}}; + ctx.panelCtrl = { + panel: { + targets: [ctx.target] + } + }; + ctx.panelCtrl.refresh = sinon.spy(); ctx.ctrl = $controller(InfluxQueryCtrl, {$scope: ctx.scope}, { panelCtrl: ctx.panelCtrl, target: ctx.target, diff --git a/public/app/plugins/datasource/opentsdb/specs/query-ctrl-specs.ts b/public/app/plugins/datasource/opentsdb/specs/query-ctrl-specs.ts index 644af1e7bf7..0d3a44858f4 100644 --- a/public/app/plugins/datasource/opentsdb/specs/query-ctrl-specs.ts +++ b/public/app/plugins/datasource/opentsdb/specs/query-ctrl-specs.ts @@ -18,7 +18,11 @@ describe('OpenTsQueryCtrl', function() { ctx.$q = $q; ctx.scope = $rootScope.$new(); ctx.target = {target: ''}; - ctx.panelCtrl = {panel: {}}; + ctx.panelCtrl = { + panel: { + targets: [ctx.target] + } + }; ctx.panelCtrl.refresh = sinon.spy(); ctx.datasource.getAggregators = sinon.stub().returns(ctx.$q.when([])); ctx.datasource.getFilterTypes = sinon.stub().returns(ctx.$q.when([])); From 293daf2ca104904862ae1cdf7599ad2ea32b5bf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Sep 2017 10:45:00 +0200 Subject: [PATCH 09/35] fix: removed text option from text panel edit options, was by mistake not removed from settings dropdown, fixes #9204 --- public/app/plugins/panel/text/editor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/text/editor.html b/public/app/plugins/panel/text/editor.html index 21704949834..8e1283a39ba 100644 --- a/public/app/plugins/panel/text/editor.html +++ b/public/app/plugins/panel/text/editor.html @@ -3,7 +3,7 @@
Mode - +
From b1580bf3857ccbad09d83adb6b05c0e2f8d5d398 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 11 Sep 2017 16:49:15 +0300 Subject: [PATCH 10/35] ace: fix braces highlight in prometheus (#9212) --- public/app/core/components/code_editor/mode-prometheus.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/core/components/code_editor/mode-prometheus.js b/public/app/core/components/code_editor/mode-prometheus.js index 4843b952253..182b4d65ed9 100644 --- a/public/app/core/components/code_editor/mode-prometheus.js +++ b/public/app/core/components/code_editor/mode-prometheus.js @@ -68,17 +68,17 @@ var PrometheusHighlightRules = function() { token : "label.name", regex : '[a-zA-Z_][a-zA-Z0-9_]*' }, { - token : "label.matching_operator", + token : "keyword.operator", regex : '=|!=|=~|!~' }, { - token : "label.value", + token : "text", regex : '"[^"]*"|\'[^\']*\'' }, { - token : "label.matching_delimiter", + token : "punctuation.operator", regex : ",", push : 'start-label-matcher' }, { - token : "label.matching_end", + token : "paren.rparen", regex : "}", next : "start" } ] From e5f84484eb1210d835c06f4f60229abc3b05d9a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Sep 2017 16:36:53 +0200 Subject: [PATCH 11/35] prometheus: another prometheus syntax highlight fix, #9212, #9167 --- public/app/core/components/code_editor/mode-prometheus.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/code_editor/mode-prometheus.js b/public/app/core/components/code_editor/mode-prometheus.js index 182b4d65ed9..78edbbd30d1 100644 --- a/public/app/core/components/code_editor/mode-prometheus.js +++ b/public/app/core/components/code_editor/mode-prometheus.js @@ -65,13 +65,13 @@ var PrometheusHighlightRules = function() { regex : "\\s+" } ], "start-label-matcher" : [ { - token : "label.name", + token : "keyword", regex : '[a-zA-Z_][a-zA-Z0-9_]*' }, { token : "keyword.operator", - regex : '=|!=|=~|!~' + regex : '=~|=|!~|!=' }, { - token : "text", + token : "string", regex : '"[^"]*"|\'[^\']*\'' }, { token : "punctuation.operator", From 057b8a6b2de33a96c86366dfba642d94e8cdd2c9 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 11 Sep 2017 20:07:57 +0200 Subject: [PATCH 12/35] improve error message for timeouts closes #9220 --- pkg/services/alerting/conditions/query.go | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pkg/services/alerting/conditions/query.go b/pkg/services/alerting/conditions/query.go index ae8008deb75..433eb1b597f 100644 --- a/pkg/services/alerting/conditions/query.go +++ b/pkg/services/alerting/conditions/query.go @@ -5,6 +5,8 @@ import ( "strings" "time" + gocontext "context" + "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/null" "github.com/grafana/grafana/pkg/components/simplejson" @@ -112,6 +114,10 @@ func (c *QueryCondition) executeQuery(context *alerting.EvalContext, timeRange * resp, err := c.HandleRequest(context.Ctx, req) if err != nil { + if err == gocontext.DeadlineExceeded { + return nil, fmt.Errorf("Alert execution exceeded the timeout") + } + return nil, fmt.Errorf("tsdb.HandleRequest() error %v", err) } From 6e344f6eea51b6cbc53e5b38ae9dff55816642d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 08:00:45 +0200 Subject: [PATCH 13/35] api: tsdb api orgId fix --- pkg/api/metrics.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/api/metrics.go b/pkg/api/metrics.go index e35e35cdab6..48c8d884329 100644 --- a/pkg/api/metrics.go +++ b/pkg/api/metrics.go @@ -29,7 +29,7 @@ func QueryMetrics(c *middleware.Context, reqDto dtos.MetricRequest) Response { return ApiError(400, "Query missing datasourceId", nil) } - dsQuery := models.GetDataSourceByIdQuery{Id: dsId} + dsQuery := models.GetDataSourceByIdQuery{Id: dsId, OrgId: c.OrgId} if err := bus.Dispatch(&dsQuery); err != nil { return ApiError(500, "failed to fetch data source", err) } From 90602942f5cbe88e9be8728452f4d91a4b0fbed4 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Sep 2017 08:01:44 +0200 Subject: [PATCH 14/35] New alert design (#9214) * ux: updated alert design * fixed bg-color for alerts * more changes to alerts, index fixed --- public/app/core/services/alert_srv.ts | 9 ++++ public/app/features/plugins/ds_edit_ctrl.ts | 2 +- .../features/plugins/partials/ds_edit.html | 12 +++-- public/sass/_variables.dark.scss | 12 +++-- public/sass/_variables.light.scss | 19 +++---- public/sass/base/_type.scss | 8 +-- public/sass/components/_alerts.scss | 52 ++++++++++++------- public/sass/components/_drop.scss | 2 +- public/sass/pages/_dashboard.scss | 2 +- public/views/index.html | 9 ++-- 10 files changed, 77 insertions(+), 50 deletions(-) diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index ced6ffc6467..2412f32e29a 100644 --- a/public/app/core/services/alert_srv.ts +++ b/public/app/core/services/alert_srv.ts @@ -33,6 +33,14 @@ export class AlertSrv { appEvents.on('confirm-modal', this.showConfirmModal.bind(this)); } + getIconForSeverity(severity) { + switch (severity) { + case 'success': return 'fa fa-check'; + case 'error': return 'fa fa-exclamation-triangle'; + default: return 'fa fa-exclamation'; + } + } + set(title, text, severity, timeout) { if (_.isObject(text)) { console.log('alert error', text); @@ -45,6 +53,7 @@ export class AlertSrv { title: title || '', text: text || '', severity: severity || 'info', + icon: this.getIconForSeverity(severity) }; var newAlertJson = angular.toJson(newAlert); diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index b4a3c897e34..5fbb6f12477 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -126,7 +126,7 @@ export class DataSourceEditCtrl { return; } - this.testing = {done: false}; + this.testing = {done: false, status: 'error'}; // make test call in no backend cache context this.backendSrv.withNoBackendCache(() => { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 803198bcca1..9a74d3b85ea 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -59,9 +59,15 @@
Testing....
-
-
{{ctrl.testing.title}}
-
+
+
+ + +
+
+
{{ctrl.testing.title}}
+
+
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c3c673c517d..cea26ba73ed 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -240,12 +240,12 @@ $paginationActiveBackground: $blue; // ------------------------- $state-warning-text: $warn; $state-warning-bg: $brand-warning; +$error-text-color: #E84D4D; +$success-text-color: #12D95A; -$errorText: #E84D4D; -$errorBackground: $btn-danger-bg; - -$successText: #12D95A; -$successBackground: $btn-success-bg; +//$alert-error-bg: linear-gradient(90deg, #d94636, #e55f39); +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $infoText: $blue-dark; $infoBackground: $blue-dark; @@ -258,6 +258,8 @@ $popover-border-color: $gray-1; $popover-help-bg: $btn-secondary-bg; $popover-help-color: $text-color; +$popover-error-bg: $btn-danger-bg; + // Tooltips and popovers // ------------------------- $tooltipColor: $popover-help-color; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 19751887fa5..d90eadf500d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -259,29 +259,24 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: lighten($orange, 10%); -$state-warning-bg: $orange; -$warningBorder: transparent; +$state-warning-text: lighten($orange, 10%); +$state-warning-bg: $orange; +$error-text-color: lighten($red, 10%); +$success-text-color: lighten($green, 10%); -$errorText: lighten($red, 10%); -$errorBackground: $red; -$errorBorder: transparent; - -$successText: lighten($green, 10%); -$successBackground: $green; -$successBorder: transparent; +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $infoText: $blue; $infoBackground: $blue-dark; -$infoBorder: transparent; // popover $popover-bg: $gray-5; $popover-color: $text-color; $popover-border-color: $gray-3; - $popover-help-bg: $blue-dark; $popover-help-color: $gray-6; +$popover-error-bg: $btn-danger-bg; // Tooltips and popovers // ------------------------- diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 7dd6c2f94e7..62c8fc6b3b8 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -35,17 +35,17 @@ a.muted:focus { color: darken($text-muted, 10%); } a.text-warning:hover, a.text-warning:focus { color: darken($state-warning-text, 10%); } -.text-error { color: $errorText; } +.text-error { color: $error-text-color; } a.text-error:hover, -a.text-error:focus { color: darken($errorText, 10%); } +a.text-error:focus { color: darken($error-text-color, 10%); } .text-info { color: $infoText; } a.text-info:hover, a.text-info:focus { color: darken($infoText, 10%); } -.text-success { color: $successText; } +.text-success { color: $success-text-color; } a.text-success:hover, -a.text-success:focus { color: darken($successText, 10%); } +a.text-success:focus { color: darken($success-text-color, 10%); } a { cursor: pointer; } a[disabled] { diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 859e3b88f8c..79d9afef50d 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -7,30 +7,32 @@ // ------------------------- .alert { - padding: 0.5rem 2rem 0.5rem 1rem; + padding: 1.5rem 2rem 1.5rem 1.5rem; margin-bottom: $line-height-base; - text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-shadow: 0 2px 0 rgba(255,255,255,.5); background-color: $state-warning-bg; position: relative; color: $white; - text-shadow: 0 1px 0 rgba(0,0,0,.5); + text-shadow: 0 1px 0 rgba(0,0,0,.2); border-radius: 2px; + display: flex; + flex-direction: row; } // Alternate styles // ------------------------- .alert-success { - background-color: $successBackground; + background: $alert-success-bg; } .alert-danger, .alert-error { - background-color: $errorBackground; + background: $alert-error-bg; } .alert-info { - background-color: $infoBackground; + background: $infoBackground; } .alert-warning { @@ -39,28 +41,23 @@ .page-alert-list { z-index: 8000; - min-width: 300px; - max-width: 300px; + min-width: 400px; + max-width: 600px; position: fixed; right: 20px; top: 56px; } .alert-close { - position: absolute; - top: -4px; - right: -2px; - width: 16px; - height: 16px; - padding: 0; - background: $white; - border-radius: 50%; + padding: 0 0 0 1rem; border: none; - font-size: 1.1rem; - color: $dark-4; + background: none; + display: flex; + align-items: center; .fa { - position: relative; - top: -2px; + align-self: flex-end; + font-size: 1.5rem; + color: rgba(255,255,255,.75) } } @@ -68,3 +65,18 @@ font-weight: $font-weight-semi-bold; padding-bottom: 2px; } + +.alert-icon { + padding: 0 1rem 0 0; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + .fa { + font-size: 1.5rem; + } +} + +.alert-body { + flex-grow: 1; +} \ No newline at end of file diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index ae8ad806351..9e3c884bc68 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -5,7 +5,7 @@ $useDropShadow: false; $attachmentOffset: 0%; $easing: cubic-bezier(0, 0, 0.265, 1.00); -@include drop-theme("error", $errorBackground, $popover-color); +@include drop-theme("error", $popover-error-bg, $popover-color); @include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color); @include drop-theme("help", $popover-help-bg, $popover-help-color); diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 242f76b41bc..7aacbce4f6b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -138,7 +138,7 @@ div.flot-text { &--error { display: block; color: $text-color; - @include panel-corner-color($errorBackground); + @include panel-corner-color($popover-error-bg); .fa:before { content: "\f12a"; } diff --git a/public/views/index.html b/public/views/index.html index b3c504740da..f7ea0d59caf 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -31,11 +31,14 @@
+
+
+
{{alert.title}}
+
+
-
{{alert.title}}
-
From ee4bbf61a9c78f0fc96426e186dfea0a64f871f8 Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 12 Sep 2017 08:15:48 +0200 Subject: [PATCH 15/35] remove node restriction from package.json yarn requires correct node version in package.json and wont install with 4.x. removing since we dont care about it. --- package.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/package.json b/package.json index 5ac5c01d8d9..69877c3fa07 100644 --- a/package.json +++ b/package.json @@ -53,10 +53,6 @@ "systemjs": "0.19.41", "zone.js": "^0.7.2" }, - "engines": { - "node": "4.x", - "npm": "2.14.x" - }, "scripts": { "build": "./node_modules/grunt-cli/bin/grunt", "test": "./node_modules/grunt-cli/bin/grunt test", From f6100dd8eb601c4d40de4baf8567f8f74eaf685c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 09:05:32 +0200 Subject: [PATCH 16/35] ux: success/error alerts refactoring, #9214 --- public/app/core/services/alert_srv.ts | 2 +- public/app/core/services/backend_srv.ts | 10 ++++++++-- public/app/features/dashboard/dashboard_srv.ts | 2 +- public/app/features/plugins/ds_edit_ctrl.ts | 5 +---- .../app/features/plugins/partials/ds_edit.html | 3 +-- .../datasource/cloudwatch/datasource.js | 2 +- .../datasource/elasticsearch/datasource.js | 8 ++++---- .../plugins/datasource/graphite/datasource.ts | 2 +- .../plugins/datasource/influxdb/datasource.ts | 6 +++--- .../app/plugins/datasource/mysql/datasource.ts | 6 +++--- .../plugins/datasource/opentsdb/datasource.js | 2 +- .../datasource/prometheus/datasource.ts | 2 +- public/sass/_variables.dark.scss | 18 ++++++++---------- public/sass/_variables.light.scss | 9 ++++----- public/sass/base/_type.scss | 10 +++++----- public/sass/components/_alerts.scss | 10 +++++----- 16 files changed, 48 insertions(+), 49 deletions(-) diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index 2412f32e29a..1786e526285 100644 --- a/public/app/core/services/alert_srv.ts +++ b/public/app/core/services/alert_srv.ts @@ -16,7 +16,7 @@ export class AlertSrv { init() { this.$rootScope.onAppEvent('alert-error', (e, alert) => { - this.set(alert[0], alert[1], 'error', 7000); + this.set(alert[0], alert[1], 'error', 12000); }, this.$rootScope); this.$rootScope.onAppEvent('alert-warning', (e, alert) => { diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index b753ae98530..e712fe2790d 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -64,7 +64,13 @@ export class BackendSrv { } if (data.message) { - this.alertSrv.set("Problem!", data.message, data.severity, 10000); + let description = ""; + let message = data.message; + if (message.length > 80) { + description = message; + message = "Error"; + } + this.alertSrv.set(message, description, data.severity, 10000); } throw data; @@ -97,7 +103,7 @@ export class BackendSrv { return results.data; }, err => { // handle unauthorized - if (err.status === 401 && firstAttempt) { + if (err.status === 401 && this.contextSrv.user.isSignedIn && firstAttempt) { return this.loginPing().then(() => { options.retry = 1; return this.request(options); diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts index 9d622f4bbc7..f3350061caa 100644 --- a/public/app/features/dashboard/dashboard_srv.ts +++ b/public/app/features/dashboard/dashboard_srv.ts @@ -83,7 +83,7 @@ export class DashboardSrv { } this.$rootScope.appEvent('dashboard-saved', this.dash); - this.$rootScope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + clone.title]); + this.$rootScope.appEvent('alert-success', ['Dashboard saved']); } save(clone, options) { diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 5fbb6f12477..f8e53b8ec4e 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -133,14 +133,11 @@ export class DataSourceEditCtrl { return datasource.testDatasource().then(result => { this.testing.message = result.message; this.testing.status = result.status; - this.testing.title = result.title; }).catch(err => { if (err.statusText) { - this.testing.message = err.statusText; - this.testing.title = "HTTP Error"; + this.testing.message = 'HTTP Error ' + err.statusText; } else { this.testing.message = err.message; - this.testing.title = "Unknown error"; } }); }).finally(() => { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 9a74d3b85ea..f01ca47153b 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -65,8 +65,7 @@
-
{{ctrl.testing.title}}
-
+
{{ctrl.testing.message}}
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 51cac9aa96f..3807464e3d5 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -335,7 +335,7 @@ function (angular, _, moment, dateMath, kbn, templatingVariable, CloudWatchAnnot var dimensions = {}; return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(function () { - return { status: 'success', message: 'Data source is working', title: 'Success' }; + return { status: 'success', message: 'Data source is working' }; }); }; diff --git a/public/app/plugins/datasource/elasticsearch/datasource.js b/public/app/plugins/datasource/elasticsearch/datasource.js index 9ea679d5cc5..d6c2568ae47 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.js +++ b/public/app/plugins/datasource/elasticsearch/datasource.js @@ -175,9 +175,9 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes return this.getFields({type: 'date'}).then(function(dateFields) { var timeField = _.find(dateFields, {text: this.timeField}); if (!timeField) { - return { status: "error", message: "No date field named " + this.timeField + ' found', title: "Error" }; + return { status: "error", message: "No date field named " + this.timeField + ' found' }; } - return { status: "success", message: "Index OK. Time field name OK.", title: "Success" }; + return { status: "success", message: "Index OK. Time field name OK." }; }.bind(this), function(err) { console.log(err); if (err.data && err.data.error) { @@ -185,9 +185,9 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes if (err.data.error.reason) { message = err.data.error.reason; } - return { status: "error", message: message, title: "Error" }; + return { status: "error", message: message }; } else { - return { status: "error", message: err.status, title: "Error" }; + return { status: "error", message: err.status }; } }); }; diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts index 61d97b38650..fd13f66c7b5 100644 --- a/public/app/plugins/datasource/graphite/datasource.ts +++ b/public/app/plugins/datasource/graphite/datasource.ts @@ -205,7 +205,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv this.testDatasource = function() { return this.metricFindQuery('*').then(function () { - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working"}; }); }; diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 10f6d47f0b9..ddab664f570 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -196,11 +196,11 @@ export default class InfluxDatasource { return this.metricFindQuery('SHOW DATABASES').then(res => { let found = _.find(res, {text: this.database}); if (!found) { - return { status: "error", message: "Could not find the specified database name.", title: "DB Not found" }; + return { status: "error", message: "Could not find the specified database name." }; } - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working" }; }).catch(err => { - return { status: "error", message: err.message, title: "Test Failed" }; + return { status: "error", message: err.message }; }); } diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts index dfc990b52e4..652c21c1013 100644 --- a/public/app/plugins/datasource/mysql/datasource.ts +++ b/public/app/plugins/datasource/mysql/datasource.ts @@ -118,13 +118,13 @@ export class MysqlDatasource { }], } }).then(res => { - return { status: "success", message: "Database Connection OK", title: "Success" }; + return { status: "success", message: "Database Connection OK"}; }).catch(err => { console.log(err); if (err.data && err.data.message) { - return { status: "error", message: err.data.message, title: "Error" }; + return { status: "error", message: err.data.message }; } else { - return { status: "error", message: err.status, title: "Error" }; + return { status: "error", message: err.status }; } }); } diff --git a/public/app/plugins/datasource/opentsdb/datasource.js b/public/app/plugins/datasource/opentsdb/datasource.js index 3ef11ba75aa..921805a58ca 100644 --- a/public/app/plugins/datasource/opentsdb/datasource.js +++ b/public/app/plugins/datasource/opentsdb/datasource.js @@ -296,7 +296,7 @@ function (angular, _, dateMath) { this.testDatasource = function() { return this._performSuggestQuery('cpu', 'metrics').then(function () { - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working" }; }); }; diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 4b4bfb4cdde..dd071d09fe6 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -241,7 +241,7 @@ export class PrometheusDatasource { testDatasource() { return this.metricFindQuery('metrics(.*)').then(function() { - return { status: 'success', message: 'Data source is working', title: 'Success' }; + return { status: 'success', message: 'Data source is working'}; }); } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index cea26ba73ed..4de87a0aaf0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -103,7 +103,7 @@ $tight-form-func-bg: #333; $tight-form-func-highlight-bg: #444; $modal-background: $black; -$code-tag-bg: $dark-5; +$code-tag-bg: $gray-1; $code-tag-border: lighten($code-tag-bg, 2%); @@ -238,17 +238,15 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: $warn; -$state-warning-bg: $brand-warning; -$error-text-color: #E84D4D; -$success-text-color: #12D95A; +$warning-text-color: $warn; +$error-text-color: #E84D4D; +$success-text-color: #12D95A; +$info-text-color: $blue-dark; -//$alert-error-bg: linear-gradient(90deg, #d94636, #e55f39); $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - -$infoText: $blue-dark; -$infoBackground: $blue-dark; +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); // popover $popover-bg: $panel-bg; @@ -278,7 +276,7 @@ $card-background-hover: linear-gradient(135deg, #343434, #262626); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3); // info box -$info-box-background: linear-gradient(100deg, #1a4552, #0b2127); +$info-box-background: linear-gradient(100deg, #1a4552, #00374a); // footer $footer-link-color: $gray-1; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index d90eadf500d..533daec705b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -259,16 +259,15 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: lighten($orange, 10%); -$state-warning-bg: $orange; +$warning-text-color: lighten($orange, 10%); $error-text-color: lighten($red, 10%); $success-text-color: lighten($green, 10%); +$info-text-color: $blue; $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - -$infoText: $blue; -$infoBackground: $blue-dark; +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: $blue-dark; // popover $popover-bg: $gray-5; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 62c8fc6b3b8..4edddd7721f 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -31,17 +31,17 @@ cite { font-style: normal; } a.muted:hover, a.muted:focus { color: darken($text-muted, 10%); } -.text-warning { color: $state-warning-text; } +.text-warning { color: $warning-text-color; } a.text-warning:hover, -a.text-warning:focus { color: darken($state-warning-text, 10%); } +a.text-warning:focus { color: darken($warning-text-color, 10%); } .text-error { color: $error-text-color; } a.text-error:hover, a.text-error:focus { color: darken($error-text-color, 10%); } -.text-info { color: $infoText; } +.text-info { color: $info-text-color; } a.text-info:hover, -a.text-info:focus { color: darken($infoText, 10%); } +a.text-info:focus { color: darken($info-text-color, 10%); } .text-success { color: $success-text-color; } a.text-success:hover, @@ -130,7 +130,7 @@ small, mark, .mark { padding: .2em; - background-color: $state-warning-bg; + background: $alert-warning-bg; } diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 79d9afef50d..4ea30a45c53 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -7,10 +7,10 @@ // ------------------------- .alert { - padding: 1.5rem 2rem 1.5rem 1.5rem; + padding: 1.25rem 2rem 1.25rem 1.5rem; margin-bottom: $line-height-base; text-shadow: 0 2px 0 rgba(255,255,255,.5); - background-color: $state-warning-bg; + background: $alert-error-bg; position: relative; color: $white; text-shadow: 0 1px 0 rgba(0,0,0,.2); @@ -32,11 +32,11 @@ } .alert-info { - background: $infoBackground; + background: $alert-info-bg; } .alert-warning { - background-color: $state-warning-bg; + background: $alert-warning-bg; } .page-alert-list { @@ -79,4 +79,4 @@ .alert-body { flex-grow: 1; -} \ No newline at end of file +} From a7b0a01b132b1159691c87f5d1806ba8dcd44083 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 12 Sep 2017 09:07:36 +0200 Subject: [PATCH 17/35] replaced old images and gifs with new ones (#9217) --- docs/sources/features/datasources/graphite.md | 12 +++++++++--- docs/sources/features/datasources/influxdb.md | 4 +++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index a625b93e8d8..5943de2aead 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -41,7 +41,9 @@ Proxy access means that the Grafana backend will proxy all requests from the bro Click the ``Select metric`` link to start navigating the metric space. One you start you can continue using the mouse or keyboard arrow keys. You can select a wildcard and still continue. -![](/img/docs/animated_gifs/graphite_query1.gif) +{{< docs-imagebox img="/img/docs/v45/graphite_query1_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/graphite_query1.gif" >}} + ### Functions @@ -50,13 +52,17 @@ a function is selected it will be added and your focus will be in the text box o a parameter just click on it and it will turn into a text box. To delete a function click the function name followed by the x icon. -![](/img/docs/animated_gifs/graphite_query2.gif) +{{< docs-imagebox img="/img/docs/v45/graphite_query2_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/graphite_query2.gif" >}} + ### Optional parameters Some functions like aliasByNode support an optional second argument. To add this parameter specify for example 3,-2 as the first parameter and the function editor will adapt and move the -2 to a second parameter. To remove the second optional parameter just click on it and leave it blank and the editor will remove it. -![](/img/docs/animated_gifs/func_editor_optional_params.gif) +{{< docs-imagebox img="/img/docs/v45/graphite_query3_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/graphite_query3.gif" >}} + ### Nested Queries diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 8f4f5981124..904b732bb3a 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -41,7 +41,9 @@ mode is also more secure as the username & password will never reach the browser ## Query Editor -![](/assets/img/blog/v2.6/influxdb_editor_v3.gif) +{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/influxdb_query.gif" >}} + You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the panel title, then edit. The editor allows you to select metrics and tags. From 0e18c82d9558af4578895e3cf1bfda45c48a307f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 09:21:17 +0200 Subject: [PATCH 18/35] style: corrected indentation in sass file --- public/sass/components/_alerts.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 4ea30a45c53..1766e06e837 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -67,14 +67,14 @@ } .alert-icon { - padding: 0 1rem 0 0; - display: flex; - align-items: center; - justify-content: center; - width: 2.5rem; - .fa { - font-size: 1.5rem; - } + padding: 0 1rem 0 0; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + .fa { + font-size: 1.5rem; + } } .alert-body { From ff4cd1aef6f51022514415bde7b84491d283d8ee Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 12 Sep 2017 09:24:40 +0200 Subject: [PATCH 19/35] influxdb: small css fix for order by in query editor --- .../app/plugins/datasource/influxdb/partials/query.editor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index 70830d8c2a9..9454a6abde7 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -92,7 +92,7 @@
- +
From 665fef01145d12e1a5734828ff34534d2d8342bb Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 12 Sep 2017 10:31:13 +0200 Subject: [PATCH 20/35] docs: kiosk mode options add to playlist doc --- docs/sources/reference/playlist.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/sources/reference/playlist.md b/docs/sources/reference/playlist.md index e2d59bc322d..3ecad5be310 100644 --- a/docs/sources/reference/playlist.md +++ b/docs/sources/reference/playlist.md @@ -43,3 +43,25 @@ Playlists can also be manually controlled utilizing the Playlist controls at the Click the stop button to stop the Playlist, and exit to the current Dashboard. Click the next button to advance to the next Dashboard in the Playlist. Click the back button to rewind to the previous Dashboard in the Playlist. + +## TV or Kiosk Mode + +In TV mode the top navbar, row & panel controls will all fade to transparent. + +This happens automatically after one minute of user inactivity but can also be toggled manually +with the `d v` sequence shortcut. Any mouse movement or keyboard action will +restore navbar & controls. + +Another feature is the kiosk mode - in kiosk mode the navbar is completely hidden/removed from view. This can be enabled with the `d k` +shortcut. + +To put a playlist into kiosk mode, use the `d k` shortcut after the playlist has started. The same shortcut will toggle the playlist out of kiosk mode. + +### Linking to the Playlist in Kiosk Mode + +If you want to create a link to the playlist with kiosk mode enabled: + +1. Copy the Start Url (by right clicking on the Play button and choosing Copy link address). +2. Add the `?kiosk` parameter to the url. + +For example, to open the first playlist on the Grafana Play site in kiosk mode: [http://play.grafana.org/playlists/play/1?kiosk](http://play.grafana.org/playlists/play/1?kiosk) From e16cadaa276cb621ccbe6349e8ac93991e50864e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 10:31:53 +0200 Subject: [PATCH 21/35] docs: minor update --- docs/sources/features/panels/graph.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/sources/features/panels/graph.md b/docs/sources/features/panels/graph.md index 5dbf307b484..726a11bec3a 100644 --- a/docs/sources/features/panels/graph.md +++ b/docs/sources/features/panels/graph.md @@ -50,15 +50,11 @@ populate the template variable to a desired value from the link. The metrics tab defines what series data and sources to render. Each datasource provides different options. -## Axes & Grid +## Axes ![](/img/docs/v43/graph_axes_grid_options.png) -The Axes & Grid tab controls the display of axes, grids and legend. - -### Axes - -The ``Left Y`` and ``Right Y`` can be customized using: +The Axes tab controls the display of axes, grids and legend. The ``Left Y`` and ``Right Y`` can be customized using: - ``Unit`` - The display unit for the Y value - ``Grid Max`` - The maximum Y value. (default auto) From 3c162301580d60d18f902d9b60c8ce41927eb000 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 11:05:32 +0200 Subject: [PATCH 22/35] prometheus: added completer unit test, #9208 --- .../prometheus/specs/completer_specs.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 public/app/plugins/datasource/prometheus/specs/completer_specs.ts diff --git a/public/app/plugins/datasource/prometheus/specs/completer_specs.ts b/public/app/plugins/datasource/prometheus/specs/completer_specs.ts new file mode 100644 index 00000000000..903ce0b5d3b --- /dev/null +++ b/public/app/plugins/datasource/prometheus/specs/completer_specs.ts @@ -0,0 +1,27 @@ +import {describe, beforeEach, it, sinon, expect} from 'test/lib/common'; + +import {PromCompleter} from '../completer'; +import {PrometheusDatasource} from '../datasource'; + +describe('Prometheus editor completer', function() { + + let editor = {}; + let session = { + getTokenAt: sinon.stub().returns({}), + getLine: sinon.stub().returns(""), + }; + + let datasourceStub = {}; + let completer = new PromCompleter(datasourceStub); + + describe("When inside brackets", () => { + + it("Should return range vectors", () => { + completer.getCompletions(editor, session, 10, "[", (s, res) => { + expect(res[0]).to.eql({caption: '1s', value: '[1s', meta: 'range vector'}); + }); + }); + + }); + +}); From 379f984293b7aa9fae3985a54e98321b9fdf730e Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 12 Sep 2017 11:07:20 +0200 Subject: [PATCH 23/35] docs: windows - add note about ini comments --- docs/sources/installation/windows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/installation/windows.md b/docs/sources/installation/windows.md index 97d17a2ca8e..112838d530a 100644 --- a/docs/sources/installation/windows.md +++ b/docs/sources/installation/windows.md @@ -27,7 +27,7 @@ this folder to anywhere you want Grafana to run from. Go into the The default Grafana port is `3000`, this port requires extra permissions on windows. Edit `custom.ini` and uncomment the `http_port` -configuration option and change it to something like `8080` or similar. +configuration option (`;` is the comment character in ini files) and change it to something like `8080` or similar. That port should not require extra Windows privileges. Start Grafana by executing `grafana-server.exe`, preferably from the From 968ba30fa52c5a547cd9809fc201406638490b09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 11:36:30 +0200 Subject: [PATCH 24/35] ux: increased code editor auto complete width from 320px to 550px, fixes #9203 --- public/sass/components/_code_editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss index 4a13d4aa811..0ef7e7a11c2 100644 --- a/public/sass/components/_code_editor.scss +++ b/public/sass/components/_code_editor.scss @@ -28,7 +28,7 @@ background-color: $dropdownBackground !important; color: $dropdownLinkColor !important; border: 1px solid $dropdownBorder !important; - width: 320px !important; + width: 550px !important; .ace_scroller { .ace_selected, .ace_active-line, .ace_line-hover { From b349b3ef5574a797d69cb28d9023aa1e98ba0b8b Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Wed, 13 Sep 2017 16:29:53 +0900 Subject: [PATCH 25/35] provide ace editor for external datasource plugin (#9224) --- .../app/core/components/code_editor/code_editor.ts | 13 +++++++++---- .../datasource/prometheus}/mode-prometheus.js | 0 .../prometheus/partials/query.editor.html | 2 +- .../datasource/prometheus}/snippets/prometheus.js | 0 4 files changed, 10 insertions(+), 5 deletions(-) rename public/app/{core/components/code_editor => plugins/datasource/prometheus}/mode-prometheus.js (100%) rename public/app/{core/components/code_editor => plugins/datasource/prometheus}/snippets/prometheus.js (100%) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index 7c41eb3b3a2..61ebb17d9b3 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -40,11 +40,11 @@ const DEFAULT_MAX_LINES = 10; const DEFAULT_TAB_SIZE = 2; const DEFAULT_BEHAVIOURS = true; -const GRAFANA_MODULES = ['mode-prometheus', 'snippets-prometheus', 'theme-grafana-dark']; +const GRAFANA_MODULES = ['theme-grafana-dark']; const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/"; // Trick for loading additional modules -function setModuleUrl(moduleType, name) { +function setModuleUrl(moduleType, name, pluginBaseUrl = null) { let baseUrl = ACE_SRC_BASE; let aceModeName = `ace/${moduleType}/${name}`; let moduleName = `${moduleType}-${name}`; @@ -54,6 +54,10 @@ function setModuleUrl(moduleType, name) { baseUrl = GRAFANA_MODULE_BASE; } + if (pluginBaseUrl) { + baseUrl = pluginBaseUrl + '/'; + } + if (moduleType === 'snippets') { componentName = `${moduleType}/${name}.js`; } @@ -159,8 +163,8 @@ function link(scope, elem, attrs) { function setLangMode(lang) { let aceModeName = `ace/mode/${lang}`; - setModuleUrl("mode", lang); - setModuleUrl("snippets", lang); + setModuleUrl("mode", lang, scope.datasource.meta.baseUrl || null); + setModuleUrl("snippets", lang, scope.datasource.meta.baseUrl || null); editorSession.setMode(aceModeName); ace.config.loadModule("ace/ext/language_tools", (language_tools) => { @@ -210,6 +214,7 @@ export function codeEditorDirective() { template: editorTemplate, scope: { content: "=", + datasource: "=", codeEditorFocus: "<", onChange: "&", getCompleter: "&" diff --git a/public/app/core/components/code_editor/mode-prometheus.js b/public/app/plugins/datasource/prometheus/mode-prometheus.js similarity index 100% rename from public/app/core/components/code_editor/mode-prometheus.js rename to public/app/plugins/datasource/prometheus/mode-prometheus.js diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index a34a752bd95..9b06d4116f4 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -1,7 +1,7 @@
-
diff --git a/public/app/core/components/code_editor/snippets/prometheus.js b/public/app/plugins/datasource/prometheus/snippets/prometheus.js similarity index 100% rename from public/app/core/components/code_editor/snippets/prometheus.js rename to public/app/plugins/datasource/prometheus/snippets/prometheus.js From 73248d6687aad2533c1c155958c7080b8f46be2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Sep 2017 09:48:50 +0200 Subject: [PATCH 26/35] fixes for metrics tab when data source was not found --- public/app/features/panel/metrics_tab.ts | 17 ++++++++++------- .../features/panel/partials/metrics_tab.html | 6 +++--- public/sass/components/_alerts.scss | 4 ++-- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts index 4feaf516438..53d53cdbbff 100644 --- a/public/app/features/panel/metrics_tab.ts +++ b/public/app/features/panel/metrics_tab.ts @@ -9,7 +9,7 @@ export class MetricsTabCtrl { panel: any; panelCtrl: any; datasources: any[]; - current: any; + datasourceInstance: any; nextRefId: string; dashboard: DashboardModel; panelDsValue: any; @@ -29,23 +29,26 @@ export class MetricsTabCtrl { this.panel = this.panelCtrl.panel; this.dashboard = this.panelCtrl.dashboard; this.datasources = datasourceSrv.getMetricSources(); - this.panelDsValue = this.panelCtrl.panel.datasource || null; + this.panelDsValue = this.panelCtrl.panel.datasource; for (let ds of this.datasources) { if (ds.value === this.panelDsValue) { - this.current = ds; + this.datasourceInstance = ds; } } this.addQueryDropdown = {text: 'Add Query', value: null, fake: true}; + // update next ref id this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel); this.updateDatasourceOptions(); } updateDatasourceOptions() { - this.hasQueryHelp = this.current.meta.hasQueryHelp; - this.queryOptions = this.current.meta.queryOptions; + if (this.datasourceInstance) { + this.hasQueryHelp = this.datasourceInstance.meta.hasQueryHelp; + this.queryOptions = this.datasourceInstance.meta.queryOptions; + } } getOptions(includeBuiltin) { @@ -61,7 +64,7 @@ export class MetricsTabCtrl { return; } - this.current = option.datasource; + this.datasourceInstance = option.datasource; this.panelCtrl.setDatasource(option.datasource); this.updateDatasourceOptions(); } @@ -85,7 +88,7 @@ export class MetricsTabCtrl { this.queryTroubleshooterOpen = false; this.helpOpen = !this.helpOpen; - this.backendSrv.get(`/api/plugins/${this.current.meta.id}/markdown/query_help`).then(res => { + this.backendSrv.get(`/api/plugins/${this.datasourceInstance.meta.id}/markdown/query_help`).then(res => { var md = new Remarkable(); this.helpHtml = this.$sce.trustAsHtml(md.render(res)); }); diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index c3643152716..03a2c374a14 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -73,7 +73,7 @@
-
+
@@ -89,11 +89,11 @@ {{ctrl.panelCtrl.nextRefId}} - -
+
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 1766e06e837..afc83a1024d 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -44,8 +44,8 @@ min-width: 400px; max-width: 600px; position: fixed; - right: 20px; - top: 56px; + right: 10px; + top: 60px; } .alert-close { From 85bd1861d64d7fbf21e54845019ff614be0788f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Sep 2017 14:38:22 +0200 Subject: [PATCH 27/35] fix: improve behavior when switching back and forth between x-axis modes, fixes #9229 --- public/app/plugins/panel/graph/axes_editor.html | 16 ++-------------- public/app/plugins/panel/graph/axes_editor.ts | 10 ++++++---- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html index 704f3b550f9..1ce4c3174b4 100644 --- a/public/app/plugins/panel/graph/axes_editor.html +++ b/public/app/plugins/panel/graph/axes_editor.html @@ -48,26 +48,14 @@
- +
- -
- - -
- - -
- - -
-
- +
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts index adb3d1d6706..86789db9fce 100644 --- a/public/app/plugins/panel/graph/axes_editor.ts +++ b/public/app/plugins/panel/graph/axes_editor.ts @@ -59,10 +59,12 @@ export class AxesEditorCtrl { this.panelCtrl.render(); } - xAxisOptionChanged() { - if (!this.panel.xaxis.values || !this.panel.xaxis.values[0]){ - this.panelCtrl.processor.setPanelDefaultsForNewXAxisMode(); - } + xAxisModeChanged() { + this.panelCtrl.processor.setPanelDefaultsForNewXAxisMode(); + this.panelCtrl.onDataReceived(this.panelCtrl.dataList); + } + + xAxisValueChanged() { this.panelCtrl.onDataReceived(this.panelCtrl.dataList); } From d71456b96f6139c461607bf6896afb278740b193 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 13 Sep 2017 16:29:53 +0200 Subject: [PATCH 28/35] Docs image updates (#9225) * replaced old images and gifs with new ones * replaced images, changed some text especially for column styles * replaced and added images and gifs --- docs/sources/features/datasources/graphite.md | 4 ++ docs/sources/features/datasources/mysql.md | 2 +- .../features/datasources/prometheus.md | 3 +- docs/sources/features/panels/table_panel.md | 51 ++++++++++++------- 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index 5943de2aead..da2fd65452c 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -68,6 +68,10 @@ Some functions like aliasByNode support an optional second argument. To add this You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to a graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries. +{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/graphite_nested_queries.gif" >}} + + ## Point consolidation All Graphite metrics are consolidated so that Graphite doesn't return more data points than there are pixels in the graph. By default, diff --git a/docs/sources/features/datasources/mysql.md b/docs/sources/features/datasources/mysql.md index 02e821050fa..8ee02ee65a0 100644 --- a/docs/sources/features/datasources/mysql.md +++ b/docs/sources/features/datasources/mysql.md @@ -58,7 +58,7 @@ If the `Format as` query option is set to `Table` then you can basically do any Query editor with example query: -![](/img/docs/v43/mysql_table_query.png) +![](/img/docs/v45/mysql_table_query.png) The query: diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index a6f544914b8..3dc4b07be2a 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -39,7 +39,8 @@ Name | Description Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel). -![](/img/docs/v43/prometheus_query_editor.png) +{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--center" + animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}} Name | Description ------- | -------- diff --git a/docs/sources/features/panels/table_panel.md b/docs/sources/features/panels/table_panel.md index 69cd02fdbcc..25f94fd40df 100644 --- a/docs/sources/features/panels/table_panel.md +++ b/docs/sources/features/panels/table_panel.md @@ -23,15 +23,16 @@ To view table panels in action and test different configurations with sample dat The table panel has many ways to manipulate your data for optimal presentation. - +{{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--center docs-image--no-shadow" + max-width="600px">}} 1. `Data`: Control how your query is transformed into a table. -2. `Table Display`: Table display options. -3. `Column Styles`: Column value formatting and display options. +2. `Paging`: Table display options. ## Data to Table - +{{< docs-imagebox img="/img/docs/v45/table_data_options.png" class="docs-image--no-shadow" + max-width="400px">}} The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric query should be transformed into a table format. The **Columns (2)** option allows you to select what columns @@ -39,38 +40,53 @@ you want in the table. Only applicable for some transforms. ### Time series to rows - +{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--no-shadow docs-image--center" + >}} + In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series. ### Time series to columns -![](/img/docs/v2/table_ts_to_columns2.png) +{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--no-shadow docs-image--center" + >}} + This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series. ### Time series aggregations -![](/img/docs/v2/table_ts_to_aggregations2.png) +{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--no-shadow docs-image--center" + >}} + This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added. ### Annotations -![](/img/docs/v2/table_annotations.png) + +{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--no-shadow docs-image--center" + >}} + If you have annotations enabled in the dashboard you can have the table show them. If you configure this mode then any queries you have in the metrics tab will be ignored. ### JSON Data -![](/img/docs/v2/table_json_data.png) +{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--center docs-image--no-shadow" + max-width="500px">}} + If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this transform mode and pick the columns using the **Columns** section. -![](/img/docs/v2/elastic_raw_doc.png) + +{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--no-shadow docs-image--center" + >}} + ## Table Display - +{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" + max-width="250px">}} 1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages. 2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows. @@ -81,13 +97,12 @@ transform mode and pick the columns using the **Columns** section. The column styles allow you control how dates and numbers are formatted. - + 1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values. -2. `Type`: The three supported types of types are `Number`, `String` and `Date`. -3. `Title`: Title for the column, when using a Regex the title can include replacement strings like `$1`. -4. `Format`: Specify date format. Only available when `Type` is set to `Date`. -5. `Coloring` and `Thresholds`: Specify color mode and thresholds limits. -6. `Unit` and `Decimals`: Specify unit and decimal precision for numbers. -7. `Add column style rule`: Add new column rule. +2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`. +3. `Add column style rule`: Add new column rule. +4. `Thresholds` and `Coloring`: Specify color mode and thresholds limits. +5. `Type`: The three supported types of types are `Number`, `String` and `Date`. `Unit` and `Decimals`: Specify unit and decimal precision for numbers.`Format`: Specify date format for dates. + From a76f3fba2e9d0167d4d544ae85bc9a9f61256610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 Sep 2017 17:11:10 +0200 Subject: [PATCH 29/35] docs: minor fixes to images --- docs/sources/features/datasources/influxdb.md | 10 ++--- docs/sources/features/datasources/mysql.md | 6 +-- docs/sources/features/panels/table_panel.md | 37 +++++++------------ 3 files changed, 18 insertions(+), 35 deletions(-) diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 904b732bb3a..74a8cd4555a 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -41,9 +41,7 @@ mode is also more secure as the username & password will never reach the browser ## Query Editor -{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--center" - animated-gif="/img/docs/v45/influxdb_query.gif" >}} - +{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--block docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}} You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the panel title, then edit. The editor allows you to select metrics and tags. @@ -59,10 +57,8 @@ will automatically adjust the filter tag condition to use the InfluxDB regex mat ### Field & Aggregation functions In the `SELECT` row you can specify what fields and functions you want to use. If you have a -group by time you need an aggregation function. Some functions like derivative require an aggregation function. - -The editor tries simplify and unify this part of the query. For example: -![](/img/docs/influxdb/select_editor.png) +group by time you need an aggregation function. Some functions like derivative require an aggregation function. The editor tries simplify and unify this part of the query. For example:
+![](/img/docs/influxdb/select_editor.png)
The above will generate the following InfluxDB `SELECT` clause: diff --git a/docs/sources/features/datasources/mysql.md b/docs/sources/features/datasources/mysql.md index 8ee02ee65a0..c7e16c46467 100644 --- a/docs/sources/features/datasources/mysql.md +++ b/docs/sources/features/datasources/mysql.md @@ -11,8 +11,7 @@ weight = 7 # Using MySQL in Grafana -> Only available in Grafana v4.3+. This data source is not ready for -> production use, currently in development (alpha state). +> Only available in Grafana v4.3+. Grafana ships with a built-in MySQL data source plugin that allow you to query any visualize data from a MySQL compatible database. @@ -58,8 +57,7 @@ If the `Format as` query option is set to `Table` then you can basically do any Query editor with example query: -![](/img/docs/v45/mysql_table_query.png) - +{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" class="docs-image--block" >}} The query: diff --git a/docs/sources/features/panels/table_panel.md b/docs/sources/features/panels/table_panel.md index 25f94fd40df..33ad85859d2 100644 --- a/docs/sources/features/panels/table_panel.md +++ b/docs/sources/features/panels/table_panel.md @@ -12,7 +12,7 @@ weight = 2 # Table Panel - + The new table panel is very flexible, supporting both multiple modes for time series as well as for table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options. @@ -23,70 +23,60 @@ To view table panels in action and test different configurations with sample dat The table panel has many ways to manipulate your data for optimal presentation. -{{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--center docs-image--no-shadow" - max-width="600px">}} - 1. `Data`: Control how your query is transformed into a table. 2. `Paging`: Table display options. + ## Data to Table -{{< docs-imagebox img="/img/docs/v45/table_data_options.png" class="docs-image--no-shadow" - max-width="400px">}} +{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px">}} The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric query should be transformed into a table format. The **Columns (2)** option allows you to select what columns you want in the table. Only applicable for some transforms. +
+ ### Time series to rows -{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--no-shadow docs-image--center" - >}} - +{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--block" >}} In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series. ### Time series to columns -{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--no-shadow docs-image--center" - >}} +{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--block" >}} This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series. ### Time series aggregations -{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--no-shadow docs-image--center" - >}} +{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--block" >}} This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added. ### Annotations -{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--no-shadow docs-image--center" - >}} +{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--block" >}} If you have annotations enabled in the dashboard you can have the table show them. If you configure this mode then any queries you have in the metrics tab will be ignored. ### JSON Data -{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--center docs-image--no-shadow" - max-width="500px">}} +{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--block" max-width="500px">}} If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this transform mode and pick the columns using the **Columns** section. -{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--no-shadow docs-image--center" - >}} - +{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--block" >}} ## Table Display -{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" - max-width="250px">}} +{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" max-width="350px">}} 1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages. 2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows. @@ -97,7 +87,7 @@ transform mode and pick the columns using the **Columns** section. The column styles allow you control how dates and numbers are formatted. - +{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow docs-image--block" >}} 1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values. 2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`. @@ -105,4 +95,3 @@ The column styles allow you control how dates and numbers are formatted. 4. `Thresholds` and `Coloring`: Specify color mode and thresholds limits. 5. `Type`: The three supported types of types are `Number`, `String` and `Date`. `Unit` and `Decimals`: Specify unit and decimal precision for numbers.`Format`: Specify date format for dates. - From 29de6387cb749614965df97716368f87652a36a4 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Sep 2017 17:13:36 +0200 Subject: [PATCH 30/35] plugins: add styles for ol tags in markdown --- public/sass/base/_type.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 4edddd7721f..b2b43257654 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -296,7 +296,7 @@ a.external-link { max-width: 100%; } - ul { + ul, ol { padding-left: $spacer*1.5; margin-bottom: $spacer; } @@ -328,7 +328,7 @@ a.external-link { margin-bottom: 0; } - ul:last-child { + ul:last-child, ol:last-child { margin-bottom: 0; } } From 4e719aa0c18538ab6a5e9bd473d529707cc91fb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Sep 2017 10:50:34 +0200 Subject: [PATCH 31/35] docs: minor update --- docs/sources/guides/whats-new-in-v4-5.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/sources/guides/whats-new-in-v4-5.md b/docs/sources/guides/whats-new-in-v4-5.md index abce3fc4095..b2de451308a 100644 --- a/docs/sources/guides/whats-new-in-v4-5.md +++ b/docs/sources/guides/whats-new-in-v4-5.md @@ -16,16 +16,13 @@ weight = -4 ### New prometheus query editor -The new query editor has full syntax highlighting. As well as auto complete for metrics, functions, and range vectors. +The new query editor has full syntax highlighting. As well as auto complete for metrics, functions, and range vectors. There is also integrated function docs right from the query editor! -![](/img/docs/v45/new_prom_editor_1.png) - -There is also integrated function docs right from the query editor! - -![](/img/docs/v45/new_prom_editor_2.png) +{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--block" animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}} ### Elasticsearch: Add ad-hoc filters from the table panel -![](/img/docs/v45/elastic_ad_hoc_filters.png) + +{{< docs-imagebox img="/img/docs/v45/elastic_ad_hoc_filters.png" class="docs-image--block" >}} ### Table cell links! Create column styles that turn cells into links that use the value in the cell (or other other row values) to generate a url to another dashboard or system: From 512535e8ff6704693270b39aa4c89a89c896cdbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Sep 2017 10:51:21 +0200 Subject: [PATCH 32/35] release: bumped version to v4.5.0 stable --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 69877c3fa07..72983f8c480 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "company": "Grafana Labs" }, "name": "grafana", - "version": "4.5.0-beta1", + "version": "4.5.0", "repository": { "type": "git", "url": "http://github.com/grafana/grafana.git" From 337fb9bdfafa2923a3ced631458facad6c38355a Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 14 Sep 2017 11:04:01 +0200 Subject: [PATCH 33/35] fixed some images (#9237) --- docs/sources/features/datasources/graphite.md | 8 ++++---- docs/sources/features/datasources/influxdb.md | 2 +- docs/sources/features/datasources/mysql.md | 2 +- .../features/datasources/prometheus.md | 2 +- docs/sources/features/panels/table_panel.md | 20 ++++++++++--------- docs/sources/features/shortcuts.md | 2 +- docs/sources/reference/playlist.md | 2 +- docs/sources/tutorials/hubot_howto.md | 4 +++- 8 files changed, 23 insertions(+), 19 deletions(-) diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index da2fd65452c..05a7df7fea8 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -41,7 +41,7 @@ Proxy access means that the Grafana backend will proxy all requests from the bro Click the ``Select metric`` link to start navigating the metric space. One you start you can continue using the mouse or keyboard arrow keys. You can select a wildcard and still continue. -{{< docs-imagebox img="/img/docs/v45/graphite_query1_still.png" class="docs-image--center" +{{< docs-imagebox img="/img/docs/v45/graphite_query1_still.png" animated-gif="/img/docs/v45/graphite_query1.gif" >}} @@ -52,7 +52,7 @@ a function is selected it will be added and your focus will be in the text box o a parameter just click on it and it will turn into a text box. To delete a function click the function name followed by the x icon. -{{< docs-imagebox img="/img/docs/v45/graphite_query2_still.png" class="docs-image--center" +{{< docs-imagebox img="/img/docs/v45/graphite_query2_still.png" animated-gif="/img/docs/v45/graphite_query2.gif" >}} @@ -60,7 +60,7 @@ by the x icon. Some functions like aliasByNode support an optional second argument. To add this parameter specify for example 3,-2 as the first parameter and the function editor will adapt and move the -2 to a second parameter. To remove the second optional parameter just click on it and leave it blank and the editor will remove it. -{{< docs-imagebox img="/img/docs/v45/graphite_query3_still.png" class="docs-image--center" +{{< docs-imagebox img="/img/docs/v45/graphite_query3_still.png" animated-gif="/img/docs/v45/graphite_query3.gif" >}} @@ -68,7 +68,7 @@ Some functions like aliasByNode support an optional second argument. To add this You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to a graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries. -{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png" class="docs-image--center" +{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png" animated-gif="/img/docs/v45/graphite_nested_queries.gif" >}} diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 74a8cd4555a..97e523cd151 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -41,7 +41,7 @@ mode is also more secure as the username & password will never reach the browser ## Query Editor -{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--block docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}} +{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}} You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the panel title, then edit. The editor allows you to select metrics and tags. diff --git a/docs/sources/features/datasources/mysql.md b/docs/sources/features/datasources/mysql.md index c7e16c46467..f277f45f3c8 100644 --- a/docs/sources/features/datasources/mysql.md +++ b/docs/sources/features/datasources/mysql.md @@ -57,7 +57,7 @@ If the `Format as` query option is set to `Table` then you can basically do any Query editor with example query: -{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" >}} The query: diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index 3dc4b07be2a..dceb2254e41 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -39,7 +39,7 @@ Name | Description Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel). -{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--center" +{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}} Name | Description diff --git a/docs/sources/features/panels/table_panel.md b/docs/sources/features/panels/table_panel.md index 33ad85859d2..9c112c81265 100644 --- a/docs/sources/features/panels/table_panel.md +++ b/docs/sources/features/panels/table_panel.md @@ -22,6 +22,8 @@ To view table panels in action and test different configurations with sample dat ## Options overview The table panel has many ways to manipulate your data for optimal presentation. +{{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--no-shadow" max-width= "500px" >}} + 1. `Data`: Control how your query is transformed into a table. 2. `Paging`: Table display options. @@ -29,7 +31,7 @@ The table panel has many ways to manipulate your data for optimal presentation. ## Data to Table -{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px">}} +{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px" class="docs-image--right">}} The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric query should be transformed into a table format. The **Columns (2)** option allows you to select what columns @@ -39,26 +41,26 @@ you want in the table. Only applicable for some transforms. ### Time series to rows -{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" >}} In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series. ### Time series to columns -{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" >}} This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series. ### Time series aggregations -{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" >}} This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added. ### Annotations -{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/table_annotations.png" >}} If you have annotations enabled in the dashboard you can have the table show them. If you configure this @@ -66,17 +68,17 @@ mode then any queries you have in the metrics tab will be ignored. ### JSON Data -{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--block" max-width="500px">}} +{{< docs-imagebox img="/img/docs/v45/table_json_data.png" max-width="500px" >}} If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this transform mode and pick the columns using the **Columns** section. -{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" >}} ## Table Display -{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" max-width="350px">}} +{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow docs-image--right" max-width="350px" >}} 1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages. 2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows. @@ -87,7 +89,7 @@ transform mode and pick the columns using the **Columns** section. The column styles allow you control how dates and numbers are formatted. -{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow docs-image--block" >}} +{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow" >}} 1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values. 2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`. diff --git a/docs/sources/features/shortcuts.md b/docs/sources/features/shortcuts.md index ec7250b7a5a..caad521446e 100644 --- a/docs/sources/features/shortcuts.md +++ b/docs/sources/features/shortcuts.md @@ -8,7 +8,7 @@ weight = 7 # Keyboard shortcuts -{{< docs-imagebox img="/img/docs/v4/shortcuts.png" max-width="20rem" >}} +{{< docs-imagebox img="/img/docs/v4/shortcuts.png" max-width="20rem" class="docs-image--right" >}} Grafana v4 introduces a number of really powerful keyboard shortcuts. You can now focus a panel by hovering over it with your mouse. With a panel focused you can simple hit `e` to toggle panel diff --git a/docs/sources/reference/playlist.md b/docs/sources/reference/playlist.md index 3ecad5be310..f509ae4dc0d 100644 --- a/docs/sources/reference/playlist.md +++ b/docs/sources/reference/playlist.md @@ -16,7 +16,7 @@ Since Grafana automatically scales Dashboards to any resolution they're perfect ## Creating a Playlist -{{< docs-imagebox img="/img/docs/v3/playlist.png" max-width="25rem" >}} +{{< docs-imagebox img="/img/docs/v3/playlist.png" max-width="25rem" class="docs-image--right">}} The Playlist feature can be accessed from Grafana's sidemenu, in the Dashboard submenu. diff --git a/docs/sources/tutorials/hubot_howto.md b/docs/sources/tutorials/hubot_howto.md index 2c886b94f29..8a8b90529bb 100644 --- a/docs/sources/tutorials/hubot_howto.md +++ b/docs/sources/tutorials/hubot_howto.md @@ -74,7 +74,9 @@ If you do not get an image when opening this link verify that the required font ### Grafana API Key - + +{{< docs-imagebox img="/img/docs/v2/orgdropdown_api_keys.png" max-width="150px" class="docs-image--right">}} + You need to set the environment variable `HUBOT_GRAFANA_API_KEY` to a Grafana API Key. You can add these from the API Keys page which you find in the Organization dropdown. From aa24839ac96a1eceed3cffe9e6feb627669354a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Sep 2017 11:55:07 +0200 Subject: [PATCH 34/35] Update CHANGELOG.md --- CHANGELOG.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eae246c4a64..c09a9d5c911 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,11 +7,13 @@ - UX changes to nav & side menu - New dashboard grid layout system -# 4.5.0 (unreleased) - -## Enhancements +# 4.5.0 (2017-09-14) +## Fixes & Enhancements since beta1 +* **Security**: Security fix for api vulnerability (in multiple org setups). * **Shortcuts**: Adds shortcut for creating new dashboard [#8876](https://github.com/grafana/grafana/pull/8876) thx [@mtanda](https://github.com/mtanda) +* **Graph**: Right Y-Axis label position fixed [#9172](https://github.com/grafana/grafana/pull/9172) +* **General**: Improve rounding of time intervals [#9197](https://github.com/grafana/grafana/pull/9197), thx [@alin-amana](https://github.com/alin-amana) # 4.5.0-beta1 (2017-09-05) From c1ef89d3bf017cac5e9c32d8c9c33033826a0e40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Sep 2017 11:55:44 +0200 Subject: [PATCH 35/35] Update CHANGELOG.md