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

@@ -15,6 +15,8 @@ export enum LoadingState {
   Error = 'Error',
 }
 
+type PreferredVisualisationType = 'graph' | 'table';
+
 export interface QueryResultMeta {
   /** DatasSource Specific Values */
   custom?: Record<string, any>;
@@ -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
    * */

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] },

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)

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;
+};

public/app/plugins/datasource/prometheus/datasource.ts

@@ -189,6 +189,10 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
       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);
 

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) {