From 7588ee974d8113b5229a881a7518533deab84b8e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Sun, 14 Aug 2016 17:33:18 +0300 Subject: [PATCH 01/10] Working on non time series X-axis feature. --- public/app/plugins/panel/graph/graph.js | 69 ++++++++++++++++---- public/app/plugins/panel/graph/module.ts | 9 ++- public/app/plugins/panel/graph/tab_axes.html | 11 ++++ 3 files changed, 77 insertions(+), 12 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 0a6a2bc0e45..66d201588df 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -28,7 +28,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { var ctrl = scope.ctrl; var dashboard = ctrl.dashboard; var panel = ctrl.panel; - var data, annotations; + var data, annotations, histogramData; var sortedSeries; var legendSideLastValue = null; var rootScope = scope.$root; @@ -226,22 +226,37 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } }; - for (var i = 0; i < data.length; i++) { - var series = data[i]; - series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); + if (panel.xaxis.mode === 'histogram') { + histogramData = formatToHistogram(data, _.last); - // if hidden remove points and disable stack - if (ctrl.hiddenSeries[series.alias]) { - series.data = []; - series.stack = false; + if (histogramData.length && histogramData[0].ticks.length) { + // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5; + options.series.bars.barWidth = 0.7; + // options.series.bars.align = 'center'; + } + } else { + for (var i = 0; i < data.length; i++) { + var series = data[i]; + series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); + + // if hidden remove points and disable stack + if (ctrl.hiddenSeries[series.alias]) { + series.data = []; + series.stack = false; + } + } + + if (data.length && data[0].stats.timeStep) { + options.series.bars.barWidth = data[0].stats.timeStep / 1.5; } } - if (data.length && data[0].stats.timeStep) { - options.series.bars.barWidth = data[0].stats.timeStep / 1.5; + if (panel.xaxis.mode === 'histogram') { + addXAxis(options); + } else { + addTimeAxis(options); } - addTimeAxis(options); addGridThresholds(options, panel); addAnnotations(options); configureAxisOptions(data, options); @@ -275,6 +290,24 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } } + function formatToHistogram(data, getValueCallback) { + var histogram = [data[0]]; + + histogram[0].data = _.map(data, function(series, index) { + var values = _.remove(_.map(series.datapoints, function(point) { + return point[0]; + }), null); + var calculatedPoint = getValueCallback(values); + return [index, calculatedPoint]; + }); + + histogram[0].ticks = _.map(data, function(series, index) { + return [index, series.alias]; + }); + + return histogram; + } + function translateFillOption(fill) { return fill === 0 ? 0.001 : fill/10; } @@ -305,6 +338,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }; } + function addXAxis(options) { + var ticks = histogramData[0].ticks; + + options.xaxis = { + timezone: dashboard.getTimezone(), + show: panel.xaxis.show, + mode: null, + min: 0, + max: ticks.length, + label: "Datetime", + ticks: ticks + }; + } + function addGridThresholds(options, panel) { if (_.isNumber(panel.grid.threshold1)) { var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null); diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 8fbde9e84a1..1f71ad63829 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -20,6 +20,7 @@ class GraphCtrl extends MetricsPanelCtrl { seriesList: any = []; logScales: any; unitFormats: any; + xAxisModes: any; annotationsPromise: any; datapointsCount: number; datapointsOutside: boolean; @@ -50,7 +51,8 @@ class GraphCtrl extends MetricsPanelCtrl { } ], xaxis: { - show: true + show: true, + mode: 'timeseries' }, grid : { threshold1: null, @@ -138,6 +140,11 @@ class GraphCtrl extends MetricsPanelCtrl { 'log (base 1024)': 1024 }; this.unitFormats = kbn.getUnitFormats(); + + this.xAxisModes = { + 'Time Series': 'timeseries', + 'Histogram': 'histogram' + }; } onInitPanelActions(actions) { diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index eeaf27aff78..0469aff547f 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -40,6 +40,17 @@
X-Axis
+ +
+ +
+ +
+
From e39e5f9a9be1f645ecba79957ee5de7b111c5c46 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 16 Aug 2016 18:45:57 +0300 Subject: [PATCH 02/10] Graph-panel: Add initial histogram option, issue #5812. --- public/app/plugins/panel/graph/graph.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 66d201588df..eae8c774a67 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -232,8 +232,10 @@ function (angular, $, moment, _, kbn, GraphTooltip) { if (histogramData.length && histogramData[0].ticks.length) { // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5; options.series.bars.barWidth = 0.7; - // options.series.bars.align = 'center'; + options.series.bars.align = 'center'; } + + addXAxis(options); } else { for (var i = 0; i < data.length; i++) { var series = data[i]; @@ -249,11 +251,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { if (data.length && data[0].stats.timeStep) { options.series.bars.barWidth = data[0].stats.timeStep / 1.5; } - } - if (panel.xaxis.mode === 'histogram') { - addXAxis(options); - } else { addTimeAxis(options); } @@ -298,11 +296,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return point[0]; }), null); var calculatedPoint = getValueCallback(values); - return [index, calculatedPoint]; + return [index + 1, calculatedPoint]; }); histogram[0].ticks = _.map(data, function(series, index) { - return [index, series.alias]; + return [index + 1, series.alias]; }); return histogram; @@ -346,7 +344,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { show: panel.xaxis.show, mode: null, min: 0, - max: ticks.length, + max: ticks.length + 1, label: "Datetime", ticks: ticks }; From 63886598e9be33687e9b5f35ed7ea281583785a8 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 16 Aug 2016 19:41:18 +0300 Subject: [PATCH 03/10] Graph panel: add value option (min, max, avg, etc), issue #5812. --- public/app/plugins/panel/graph/graph.js | 26 +++++++++++++++++++- public/app/plugins/panel/graph/module.ts | 7 +++++- public/app/plugins/panel/graph/tab_axes.html | 10 ++++++++ 3 files changed, 41 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index eae8c774a67..e5b2218d86a 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -227,7 +227,17 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }; if (panel.xaxis.mode === 'histogram') { - histogramData = formatToHistogram(data, _.last); + // Format to histogram + + var getValueFuncs = { + 'min': _.min, + 'max': _.max, + 'avg': seriesAvg, + 'current': _.last, + 'total': seriesSum + }; + + histogramData = formatToHistogram(data, getValueFuncs[panel.xaxis.histogramValue]); if (histogramData.length && histogramData[0].ticks.length) { // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5; @@ -306,6 +316,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return histogram; } + function seriesSum(values) { + return _.reduce(values, function(sum, num) { + return sum + num; + }); + } + + function seriesAvg(values) { + if (values.length) { + return seriesSum(values) / values.length; + } else { + return null; + } + } + function translateFillOption(fill) { return fill === 0 ? 0.001 : fill/10; } diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 1f71ad63829..9a10c45a9f8 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -21,6 +21,7 @@ class GraphCtrl extends MetricsPanelCtrl { logScales: any; unitFormats: any; xAxisModes: any; + xAxisHistogramValues: any; annotationsPromise: any; datapointsCount: number; datapointsOutside: boolean; @@ -52,7 +53,8 @@ class GraphCtrl extends MetricsPanelCtrl { ], xaxis: { show: true, - mode: 'timeseries' + mode: 'timeseries', + histogramValue: 'avg' }, grid : { threshold1: null, @@ -116,6 +118,7 @@ class GraphCtrl extends MetricsPanelCtrl { _.defaults(this.panel.tooltip, this.panelDefaults.tooltip); _.defaults(this.panel.grid, this.panelDefaults.grid); _.defaults(this.panel.legend, this.panelDefaults.legend); + _.defaults(this.panel.xaxis, this.panelDefaults.xaxis); this.colors = $scope.$root.colors; @@ -145,6 +148,8 @@ class GraphCtrl extends MetricsPanelCtrl { 'Time Series': 'timeseries', 'Histogram': 'histogram' }; + + this.xAxisHistogramValues = ['min', 'max', 'avg', 'current', 'total']; } onInitPanelActions(actions) { diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index 0469aff547f..b4d7aedf0a7 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -51,6 +51,16 @@
+
+ +
+ +
+
From 113173be3d59a6e79806d2806b907d7d2b3fca5c Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 16 Aug 2016 21:08:15 +0300 Subject: [PATCH 04/10] Graph panel: preserve series options (colors and other), issue #5812. --- public/app/plugins/panel/graph/graph.js | 82 +++++++------------------ 1 file changed, 23 insertions(+), 59 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index e5b2218d86a..2ba0d101af8 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -28,7 +28,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { var ctrl = scope.ctrl; var dashboard = ctrl.dashboard; var panel = ctrl.panel; - var data, annotations, histogramData; + var data, annotations; var sortedSeries; var legendSideLastValue = null; var rootScope = scope.$root; @@ -226,38 +226,32 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } }; + for (var i = 0; i < data.length; i++) { + var series = data[i]; + series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); + + if (panel.xaxis.mode === 'histogram') { + series.data = [ + [i + 1, series.stats[panel.xaxis.histogramValue]] + ]; + } + + // if hidden remove points and disable stack + if (ctrl.hiddenSeries[series.alias]) { + series.data = []; + series.stack = false; + } + } + if (panel.xaxis.mode === 'histogram') { - // Format to histogram - - var getValueFuncs = { - 'min': _.min, - 'max': _.max, - 'avg': seriesAvg, - 'current': _.last, - 'total': seriesSum - }; - - histogramData = formatToHistogram(data, getValueFuncs[panel.xaxis.histogramValue]); - - if (histogramData.length && histogramData[0].ticks.length) { - // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5; + if (data.length) { options.series.bars.barWidth = 0.7; options.series.bars.align = 'center'; } addXAxis(options); + } else { - for (var i = 0; i < data.length; i++) { - var series = data[i]; - series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); - - // if hidden remove points and disable stack - if (ctrl.hiddenSeries[series.alias]) { - series.data = []; - series.stack = false; - } - } - if (data.length && data[0].stats.timeStep) { options.series.bars.barWidth = data[0].stats.timeStep / 1.5; } @@ -298,38 +292,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } } - function formatToHistogram(data, getValueCallback) { - var histogram = [data[0]]; - - histogram[0].data = _.map(data, function(series, index) { - var values = _.remove(_.map(series.datapoints, function(point) { - return point[0]; - }), null); - var calculatedPoint = getValueCallback(values); - return [index + 1, calculatedPoint]; - }); - - histogram[0].ticks = _.map(data, function(series, index) { - return [index + 1, series.alias]; - }); - - return histogram; - } - - function seriesSum(values) { - return _.reduce(values, function(sum, num) { - return sum + num; - }); - } - - function seriesAvg(values) { - if (values.length) { - return seriesSum(values) / values.length; - } else { - return null; - } - } - function translateFillOption(fill) { return fill === 0 ? 0.001 : fill/10; } @@ -361,7 +323,9 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } function addXAxis(options) { - var ticks = histogramData[0].ticks; + var ticks = _.map(data, function(series, index) { + return [index + 1, series.alias]; + }); options.xaxis = { timezone: dashboard.getTimezone(), From 93515d0ffc6e3bbbbdbc43fb332389e855ce1896 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 16 Aug 2016 21:53:53 +0300 Subject: [PATCH 05/10] Graph panel: display only bars in histogram mode, issue #5812. --- public/app/plugins/panel/graph/graph.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 2ba0d101af8..75b3bc2b5e1 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -247,6 +247,9 @@ function (angular, $, moment, _, kbn, GraphTooltip) { if (data.length) { options.series.bars.barWidth = 0.7; options.series.bars.align = 'center'; + options.series.bars.show = true; + options.series.points.show = false; + options.series.lines.show = false; } addXAxis(options); From 284a6ee62965711fc5c00fdd3ce5ef4c233c79e2 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 18 Aug 2016 15:34:32 +0300 Subject: [PATCH 06/10] Graph panel: rename X axis modes, issue #5812. --- public/app/plugins/panel/graph/graph.js | 6 +++--- public/app/plugins/panel/graph/module.ts | 12 ++++++------ public/app/plugins/panel/graph/tab_axes.html | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 75b3bc2b5e1..25774f799f2 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -230,9 +230,9 @@ function (angular, $, moment, _, kbn, GraphTooltip) { var series = data[i]; series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode); - if (panel.xaxis.mode === 'histogram') { + if (panel.xaxis.mode === 'series') { series.data = [ - [i + 1, series.stats[panel.xaxis.histogramValue]] + [i + 1, series.stats[panel.xaxis.seriesValue]] ]; } @@ -243,7 +243,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } } - if (panel.xaxis.mode === 'histogram') { + if (panel.xaxis.mode === 'series') { if (data.length) { options.series.bars.barWidth = 0.7; options.series.bars.align = 'center'; diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 9a10c45a9f8..22ec7235cde 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -21,7 +21,7 @@ class GraphCtrl extends MetricsPanelCtrl { logScales: any; unitFormats: any; xAxisModes: any; - xAxisHistogramValues: any; + xAxisSeriesValues: any; annotationsPromise: any; datapointsCount: number; datapointsOutside: boolean; @@ -53,8 +53,8 @@ class GraphCtrl extends MetricsPanelCtrl { ], xaxis: { show: true, - mode: 'timeseries', - histogramValue: 'avg' + mode: 'time', + seriesValue: 'avg' }, grid : { threshold1: null, @@ -145,11 +145,11 @@ class GraphCtrl extends MetricsPanelCtrl { this.unitFormats = kbn.getUnitFormats(); this.xAxisModes = { - 'Time Series': 'timeseries', - 'Histogram': 'histogram' + 'Time': 'time', + 'Series': 'series' }; - this.xAxisHistogramValues = ['min', 'max', 'avg', 'current', 'total']; + this.xAxisSeriesValues = ['min', 'max', 'avg', 'current', 'total']; } onInitPanelActions(actions) { diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index b4d7aedf0a7..5c868115596 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -51,12 +51,12 @@
-
+
From c683c7a4487353ff307a4b05b8d821117acbd7c4 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 18 Aug 2016 20:12:08 +0300 Subject: [PATCH 07/10] Graph panel: initial support for table format, issue #5812. --- public/app/plugins/panel/graph/graph.js | 37 +++++++++++- public/app/plugins/panel/graph/module.ts | 61 +++++++++++++++++++- public/app/plugins/panel/graph/tab_axes.html | 16 ++++- 3 files changed, 108 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 25774f799f2..bde6339cb24 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -234,6 +234,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.data = [ [i + 1, series.stats[panel.xaxis.seriesValue]] ]; + } else if (panel.xaxis.mode === 'table') { + series.data = []; + for (var j = 0; j < series.datapoints.length; j++) { + var dataIndex = i * series.datapoints.length + j; + series.datapoints[j]; + series.data.push([ + dataIndex + 1, + series.datapoints[j][0] + ]); + } } // if hidden remove points and disable stack @@ -252,7 +262,10 @@ function (angular, $, moment, _, kbn, GraphTooltip) { options.series.lines.show = false; } - addXAxis(options); + addXSeriesAxis(options); + + } else if (panel.xaxis.mode === 'table') { + addXTableAxis(options); } else { if (data.length && data[0].stats.timeStep) { @@ -325,7 +338,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }; } - function addXAxis(options) { + function addXSeriesAxis(options) { var ticks = _.map(data, function(series, index) { return [index + 1, series.alias]; }); @@ -341,6 +354,26 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }; } + function addXTableAxis(options) { + var ticks = _.map(data, function(series, seriesIndex) { + return _.map(series.datapoints, function(point, pointIndex) { + var tickIndex = seriesIndex * series.datapoints.length + pointIndex; + return [tickIndex + 1, point[1]]; + }); + }); + ticks = _.flatten(ticks, true); + + options.xaxis = { + timezone: dashboard.getTimezone(), + show: panel.xaxis.show, + mode: null, + min: 0, + max: ticks.length + 1, + label: "Datetime", + ticks: ticks + }; + } + function addGridThresholds(options, panel) { if (_.isNumber(panel.grid.threshold1)) { var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null); diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 22ec7235cde..b098ca4b11d 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -22,6 +22,7 @@ class GraphCtrl extends MetricsPanelCtrl { unitFormats: any; xAxisModes: any; xAxisSeriesValues: any; + xAxisColumns: any = []; annotationsPromise: any; datapointsCount: number; datapointsOutside: boolean; @@ -146,7 +147,8 @@ class GraphCtrl extends MetricsPanelCtrl { this.xAxisModes = { 'Time': 'time', - 'Series': 'series' + 'Series': 'series', + 'Table': 'table' }; this.xAxisSeriesValues = ['min', 'max', 'avg', 'current', 'total']; @@ -186,7 +188,26 @@ class GraphCtrl extends MetricsPanelCtrl { this.datapointsWarning = false; this.datapointsCount = 0; this.datapointsOutside = false; - this.seriesList = dataList.map(this.seriesHandler.bind(this)); + + let dataHandler: (seriesData, index)=>any; + if (this.panel.xaxis.mode === 'table') { + if (dataList.length) { + // Table panel uses only first enabled tagret, so we can use dataList[0] + // for table data representation + this.xAxisColumns = _.map(dataList[0].columns, function(column, index) { + return { + text: column.text, + index: index + }; + }); + } + + dataHandler = this.tableHandler; + } else { + dataHandler = this.seriesHandler; + } + + this.seriesList = dataList.map(dataHandler.bind(this)); this.datapointsWarning = this.datapointsCount === 0 || this.datapointsOutside; this.annotationsPromise.then(annotations => { @@ -227,6 +248,42 @@ class GraphCtrl extends MetricsPanelCtrl { return series; } + tableHandler(seriesData, index) { + var xColumnIndex = Number(this.panel.xaxis.columnIndex); + var datapoints = _.map(seriesData.rows, (row) => { + return [ + _.last(row), // Y value (always last column) + row[xColumnIndex] // X value + ]; + }); + + var alias = seriesData.columns[xColumnIndex].text; + + var colorIndex = index % this.colors.length; + var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; + + var series = new TimeSeries({ + datapoints: datapoints, + alias: alias, + color: color, + unit: seriesData.unit, + }); + + if (datapoints && datapoints.length > 0) { + var last = moment.utc(datapoints[datapoints.length - 1][1]); + var from = moment.utc(this.range.from); + if (last - from < -10000) { + this.datapointsOutside = true; + } + + this.datapointsCount += datapoints.length; + this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); + } + + + return series; + } + onRender() { if (!this.seriesList) { return; } diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index 5c868115596..233d22013a5 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -47,11 +47,12 @@
-
+ +
+ +
+
From d23e9fa3c35cfb3e00d03266dd8124c4b0029777 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 23 Aug 2016 20:44:58 +0300 Subject: [PATCH 08/10] Graph panel: table format support improvements, issue #5812. --- public/app/plugins/panel/graph/graph.js | 5 +++++ public/app/plugins/panel/graph/module.ts | 12 ++++++++++-- public/app/plugins/panel/graph/tab_axes.html | 11 +++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index bde6339cb24..c5b21beab2f 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -265,6 +265,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { addXSeriesAxis(options); } else if (panel.xaxis.mode === 'table') { + if (data.length) { + options.series.bars.barWidth = 0.7; + options.series.bars.align = 'center'; + } + addXTableAxis(options); } else { diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index b098ca4b11d..52e70ce4c1f 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -194,12 +194,18 @@ class GraphCtrl extends MetricsPanelCtrl { if (dataList.length) { // Table panel uses only first enabled tagret, so we can use dataList[0] // for table data representation + dataList.splice(1, dataList.length - 1); this.xAxisColumns = _.map(dataList[0].columns, function(column, index) { return { text: column.text, index: index }; }); + + // Set last column as default value + if (!this.panel.xaxis.valueColumnIndex) { + this.panel.xaxis.valueColumnIndex = this.xAxisColumns.length - 1; + } } dataHandler = this.tableHandler; @@ -250,14 +256,16 @@ class GraphCtrl extends MetricsPanelCtrl { tableHandler(seriesData, index) { var xColumnIndex = Number(this.panel.xaxis.columnIndex); + var valueColumnIndex = this.panel.xaxis.valueColumnIndex; var datapoints = _.map(seriesData.rows, (row) => { + var value = valueColumnIndex ? row[valueColumnIndex] : _.last(row); return [ - _.last(row), // Y value (always last column) + value, // Y value row[xColumnIndex] // X value ]; }); - var alias = seriesData.columns[xColumnIndex].text; + var alias = seriesData.columns[valueColumnIndex].text; var colorIndex = index % this.colors.length; var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index 233d22013a5..86faa57e467 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -73,6 +73,17 @@
+ +
+ +
+ +
+
From 06af566f3face5db21374b08ed9c958414c83896 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Thu, 25 Aug 2016 21:53:49 +0300 Subject: [PATCH 09/10] Graph panel: initial elastic raw document format support, issue #5812. --- public/app/plugins/panel/graph/graph.js | 6 +- public/app/plugins/panel/graph/module.ts | 90 +++++++++++++++++++- public/app/plugins/panel/graph/tab_axes.html | 25 ++++++ 3 files changed, 115 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index c5b21beab2f..70efb24678f 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -234,7 +234,8 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.data = [ [i + 1, series.stats[panel.xaxis.seriesValue]] ]; - } else if (panel.xaxis.mode === 'table') { + } else if (panel.xaxis.mode === 'table' || + panel.xaxis.mode === 'elastic') { series.data = []; for (var j = 0; j < series.datapoints.length; j++) { var dataIndex = i * series.datapoints.length + j; @@ -264,7 +265,8 @@ function (angular, $, moment, _, kbn, GraphTooltip) { addXSeriesAxis(options); - } else if (panel.xaxis.mode === 'table') { + } else if (panel.xaxis.mode === 'table' || + panel.xaxis.mode === 'elastic') { if (data.length) { options.series.bars.barWidth = 0.7; options.series.bars.align = 'center'; diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 52e70ce4c1f..5f1bab37127 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -148,7 +148,8 @@ class GraphCtrl extends MetricsPanelCtrl { this.xAxisModes = { 'Time': 'time', 'Series': 'series', - 'Table': 'table' + 'Table': 'table', + 'Elastic Raw Doc': 'elastic' }; this.xAxisSeriesValues = ['min', 'max', 'avg', 'current', 'total']; @@ -195,7 +196,7 @@ class GraphCtrl extends MetricsPanelCtrl { // Table panel uses only first enabled tagret, so we can use dataList[0] // for table data representation dataList.splice(1, dataList.length - 1); - this.xAxisColumns = _.map(dataList[0].columns, function(column, index) { + this.xAxisColumns = _.map(dataList[0].columns, (column, index) => { return { text: column.text, index: index @@ -209,6 +210,14 @@ class GraphCtrl extends MetricsPanelCtrl { } dataHandler = this.tableHandler; + } else if (this.panel.xaxis.mode === 'elastic') { + if (dataList.length) { + dataList.splice(1, dataList.length - 1); + var point = _.first(dataList[0].datapoints); + this.xAxisColumns = getFieldsFromESDoc(point); + } + + dataHandler = this.esRawDocHandler; } else { dataHandler = this.seriesHandler; } @@ -250,13 +259,12 @@ class GraphCtrl extends MetricsPanelCtrl { this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); } - return series; } tableHandler(seriesData, index) { var xColumnIndex = Number(this.panel.xaxis.columnIndex); - var valueColumnIndex = this.panel.xaxis.valueColumnIndex; + var valueColumnIndex = Number(this.panel.xaxis.valueColumnIndex); var datapoints = _.map(seriesData.rows, (row) => { var value = valueColumnIndex ? row[valueColumnIndex] : _.last(row); return [ @@ -288,6 +296,46 @@ class GraphCtrl extends MetricsPanelCtrl { this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); } + return series; + } + + esRawDocHandler(seriesData, index) { + let xField = this.panel.xaxis.esField; + let valueField = this.panel.xaxis.esValueField; + let datapoints = _.map(seriesData.datapoints, (doc) => { + return [ + pluckDeep(doc, valueField), // Y value + pluckDeep(doc, xField) // X value + ]; + }); + + // Remove empty points + datapoints = _.filter(datapoints, (point) => { + return point[0] !== undefined; + }); + + var alias = valueField; + + var colorIndex = index % this.colors.length; + var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; + + var series = new TimeSeries({ + datapoints: datapoints, + alias: alias, + color: color, + unit: seriesData.unit, + }); + + if (datapoints && datapoints.length > 0) { + var last = moment.utc(datapoints[datapoints.length - 1][1]); + var from = moment.utc(this.range.from); + if (last - from < -10000) { + this.datapointsOutside = true; + } + + this.datapointsCount += datapoints.length; + this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); + } return series; } @@ -396,4 +444,38 @@ class GraphCtrl extends MetricsPanelCtrl { } } +function getFieldsFromESDoc(doc) { + let fields = []; + let fieldNameParts = []; + + function getFieldsRecursive(obj) { + _.forEach(obj, (value, key) => { + if (_.isObject(value)) { + fieldNameParts.push(key); + getFieldsRecursive(value); + } else { + let field = fieldNameParts.concat(key).join('.'); + fields.push(field); + } + }); + fieldNameParts.pop(); + } + + getFieldsRecursive(doc); + return fields; +} + +function pluckDeep(obj: any, property: string) { + let propertyParts = property.split('.'); + let value = obj; + for (let i = 0; i < propertyParts.length; ++i) { + if (value[propertyParts[i]]) { + value = value[propertyParts[i]]; + } else { + return undefined; + } + } + return value; +} + export {GraphCtrl, GraphCtrl as PanelCtrl} diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html index 86faa57e467..1f0c434c113 100644 --- a/public/app/plugins/panel/graph/tab_axes.html +++ b/public/app/plugins/panel/graph/tab_axes.html @@ -52,6 +52,7 @@
+
@@ -63,6 +64,7 @@
+
@@ -84,6 +86,29 @@
+ + +
+ +
+ +
+
+ +
+ +
+ +
+
From 7a6d32138b8aa9f662f468c76c10aacd74f61e83 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 26 Aug 2016 20:47:12 +0300 Subject: [PATCH 10/10] Graph panel: refactor, issue #5812. --- public/app/plugins/panel/graph/module.ts | 59 +++++------------------- 1 file changed, 11 insertions(+), 48 deletions(-) diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 5f1bab37127..550f8acd23b 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -219,7 +219,7 @@ class GraphCtrl extends MetricsPanelCtrl { dataHandler = this.esRawDocHandler; } else { - dataHandler = this.seriesHandler; + dataHandler = this.timeSeriesHandler; } this.seriesList = dataList.map(dataHandler.bind(this)); @@ -235,9 +235,7 @@ class GraphCtrl extends MetricsPanelCtrl { }); } - seriesHandler(seriesData, index) { - var datapoints = seriesData.datapoints; - var alias = seriesData.target; + seriesHandler(seriesData, index, datapoints, alias) { var colorIndex = index % this.colors.length; var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; @@ -262,6 +260,13 @@ class GraphCtrl extends MetricsPanelCtrl { return series; } + timeSeriesHandler(seriesData, index) { + var datapoints = seriesData.datapoints; + var alias = seriesData.target; + + return this.seriesHandler(seriesData, index, datapoints, alias); + } + tableHandler(seriesData, index) { var xColumnIndex = Number(this.panel.xaxis.columnIndex); var valueColumnIndex = Number(this.panel.xaxis.valueColumnIndex); @@ -275,28 +280,7 @@ class GraphCtrl extends MetricsPanelCtrl { var alias = seriesData.columns[valueColumnIndex].text; - var colorIndex = index % this.colors.length; - var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; - - var series = new TimeSeries({ - datapoints: datapoints, - alias: alias, - color: color, - unit: seriesData.unit, - }); - - if (datapoints && datapoints.length > 0) { - var last = moment.utc(datapoints[datapoints.length - 1][1]); - var from = moment.utc(this.range.from); - if (last - from < -10000) { - this.datapointsOutside = true; - } - - this.datapointsCount += datapoints.length; - this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); - } - - return series; + return this.seriesHandler(seriesData, index, datapoints, alias); } esRawDocHandler(seriesData, index) { @@ -316,28 +300,7 @@ class GraphCtrl extends MetricsPanelCtrl { var alias = valueField; - var colorIndex = index % this.colors.length; - var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; - - var series = new TimeSeries({ - datapoints: datapoints, - alias: alias, - color: color, - unit: seriesData.unit, - }); - - if (datapoints && datapoints.length > 0) { - var last = moment.utc(datapoints[datapoints.length - 1][1]); - var from = moment.utc(this.range.from); - if (last - from < -10000) { - this.datapointsOutside = true; - } - - this.datapointsCount += datapoints.length; - this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded(); - } - - return series; + return this.seriesHandler(seriesData, index, datapoints, alias); } onRender() {