From e2436b29c0980d40e82d57aa7c13bfd54b41876a Mon Sep 17 00:00:00 2001 From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Date: Thu, 30 Apr 2020 12:41:03 +0200 Subject: [PATCH] Explore: Fix showing of results of queries in table (#24018) * Fix: Show results of instant queries in Explore tables * Add PreferredVisualisationType to meta * Implement visualisation exception for Prometheus * Implement visualisation exception for Elastic --- packages/grafana-data/src/types/data.ts | 5 +++++ .../explore/utils/ResultProcessor.test.ts | 3 +++ .../features/explore/utils/ResultProcessor.ts | 17 +++++++++++------ .../elasticsearch/elastic_response.ts | 17 ++++++++++++++++- .../plugins/datasource/prometheus/datasource.ts | 4 ++++ .../datasource/prometheus/result_transformer.ts | 3 ++- 6 files changed, 41 insertions(+), 8 deletions(-) diff --git a/packages/grafana-data/src/types/data.ts b/packages/grafana-data/src/types/data.ts index 7b13e502706..db16531cc03 100644 --- a/packages/grafana-data/src/types/data.ts +++ b/packages/grafana-data/src/types/data.ts @@ -15,6 +15,8 @@ export enum LoadingState { Error = 'Error', } +type PreferredVisualisationType = 'graph' | 'table'; + export interface QueryResultMeta { /** DatasSource Specific Values */ custom?: Record; @@ -28,6 +30,9 @@ export interface QueryResultMeta { /** Used to track transformation ids that where part of the processing */ transformations?: string[]; + /** Currently used to show results in Explore only in preferred visualisation option */ + preferredVisualisationType?: PreferredVisualisationType; + /** * Legacy data source specific, should be moved to custom * */ diff --git a/public/app/features/explore/utils/ResultProcessor.test.ts b/public/app/features/explore/utils/ResultProcessor.test.ts index ad2dd837e97..ac3ca5b0c7c 100644 --- a/public/app/features/explore/utils/ResultProcessor.test.ts +++ b/public/app/features/explore/utils/ResultProcessor.test.ts @@ -12,6 +12,9 @@ const testContext = (options: any = {}) => { const timeSeries = toDataFrame({ name: 'A-series', refId: 'A', + meta: { + preferredVisualisationType: 'graph', + }, fields: [ { name: 'time', type: FieldType.time, values: [100, 200, 300] }, { name: 'A-series', type: FieldType.number, values: [4, 5, 6] }, diff --git a/public/app/features/explore/utils/ResultProcessor.ts b/public/app/features/explore/utils/ResultProcessor.ts index c5541d7b442..cd6eb7454ba 100644 --- a/public/app/features/explore/utils/ResultProcessor.ts +++ b/public/app/features/explore/utils/ResultProcessor.ts @@ -48,10 +48,7 @@ export class ResultProcessor { return null; } - // For now ignore time series - // We can change this later, just need to figure out how to - // Ignore time series only for prometheus - const onlyTables = this.dataFrames.filter(frame => !isTimeSeries(frame)); + const onlyTables = this.dataFrames.filter(frame => shouldShowInTable(frame)); if (onlyTables.length === 0) { return null; @@ -113,7 +110,7 @@ export class ResultProcessor { } } -export function isTimeSeries(frame: DataFrame, datasource?: string): boolean { +function isTimeSeries(frame: DataFrame, datasource?: string): boolean { // TEMP: Temporary hack. Remove when logs/metrics unification is done if (datasource && datasource === 'cloudwatch') { return isTimeSeriesCloudWatch(frame); @@ -128,8 +125,16 @@ export function isTimeSeries(frame: DataFrame, datasource?: string): boolean { return false; } +function shouldShowInTable(frame: DataFrame) { + if (frame.meta?.preferredVisualisationType && frame.meta?.preferredVisualisationType !== 'table') { + return false; + } + + return true; +} + // TEMP: Temporary hack. Remove when logs/metrics unification is done -export function isTimeSeriesCloudWatch(frame: DataFrame): boolean { +function isTimeSeriesCloudWatch(frame: DataFrame): boolean { return ( frame.fields.some(field => field.type === FieldType.time) && frame.fields.some(field => field.type === FieldType.number) diff --git a/public/app/plugins/datasource/elasticsearch/elastic_response.ts b/public/app/plugins/datasource/elasticsearch/elastic_response.ts index 0d3fc40ad49..d4885dc66cb 100644 --- a/public/app/plugins/datasource/elasticsearch/elastic_response.ts +++ b/public/app/plugins/datasource/elasticsearch/elastic_response.ts @@ -452,7 +452,11 @@ export class ElasticResponse { this.nameSeries(tmpSeriesList, target); for (let y = 0; y < tmpSeriesList.length; y++) { - const series = toDataFrame(tmpSeriesList[y]); + let series = toDataFrame(tmpSeriesList[y]); + + // When log results, show aggregations only in graph. Log fields are then going to be shown in table. + series = addPreferredVisualisationType(series, 'graph'); + dataFrame.push(series); } } @@ -568,3 +572,14 @@ const createEmptyDataFrame = ( return series; }; + +const addPreferredVisualisationType = (series: any, type: string) => { + let s = series; + s.meta + ? (s.meta.preferredVisualisationType = type) + : (s.meta = { + preferredVisualisationType: type, + }); + + return s; +}; diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index d73e0679e18..c8539fe3370 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -189,6 +189,10 @@ export class PrometheusDatasource extends DataSourceApi responseListLength, refId: target.refId, valueWithRefId: target.valueWithRefId, + meta: { + /** Fix for showing of Prometheus results in Explore table. We want to show result of instant query in table and the rest of time series in graph */ + preferredVisualisationType: query.instant ? 'table' : 'graph', + }, }; const series = this.resultTransformer.transform(response, transformerOptions); diff --git a/public/app/plugins/datasource/prometheus/result_transformer.ts b/public/app/plugins/datasource/prometheus/result_transformer.ts index 9377f65fba4..eaeb49808e0 100644 --- a/public/app/plugins/datasource/prometheus/result_transformer.ts +++ b/public/app/plugins/datasource/prometheus/result_transformer.ts @@ -76,6 +76,7 @@ export class ResultTransformer { datapoints: dps, query: options.query, refId: options.refId, + meta: options.meta, target: metricLabel, tags: metricData.metric, }; @@ -144,7 +145,7 @@ export class ResultTransformer { let metricLabel = null; metricLabel = this.createMetricLabel(md.metric, options); dps.push([parseFloat(md.value[1]), md.value[0] * 1000]); - return { target: metricLabel, datapoints: dps, tags: md.metric, refId: options.refId }; + return { target: metricLabel, datapoints: dps, tags: md.metric, refId: options.refId, meta: options.meta }; } createMetricLabel(labelData: { [key: string]: string }, options: any) {