Fix rebase, fix empty field still issuing query problem

public/app/features/explore/Explore.tsx

@@ -456,7 +456,11 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     this.saveState();
     this.saveState();
   };
   };
 
 
-  buildQueryOptions(query: string, rowIndex: number, targetOptions: { format: string; hinting?: boolean; instant?: boolean }) {
+  buildQueryOptions(
+    query: string,
+    rowIndex: number,
+    targetOptions: { format: string; hinting?: boolean; instant?: boolean }
+  ) {
     const { datasource, range } = this.state;
     const { datasource, range } = this.state;
     const resolution = this.el.offsetWidth;
     const resolution = this.el.offsetWidth;
     const absoluteRange = {
     const absoluteRange = {
@@ -483,7 +487,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     };
     };
   }
   }
 
 
-  startQueryTransaction(query: string, rowIndex: number, resultType: string, options: any): QueryTransaction {
+  startQueryTransaction(query: string, rowIndex: number, resultType: ResultType, options: any): QueryTransaction {
     const queryOptions = this.buildQueryOptions(query, rowIndex, options);
     const queryOptions = this.buildQueryOptions(query, rowIndex, options);
     const transaction: QueryTransaction = {
     const transaction: QueryTransaction = {
       query,
       query,
@@ -565,6 +569,13 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     });
     });
   }
   }
 
 
+  discardTransactions(rowIndex: number) {
+    this.setState(state => {
+      const remainingTransactions = state.queryTransactions.filter(qt => qt.rowIndex !== rowIndex);
+      return { queryTransactions: remainingTransactions };
+    });
+  }
+
   failQueryTransaction(transactionId: string, error: string, datasourceId: string) {
   failQueryTransaction(transactionId: string, error: string, datasourceId: string) {
     const { datasource } = this.state;
     const { datasource } = this.state;
     if (datasource.meta.id !== datasourceId) {
     if (datasource.meta.id !== datasourceId) {
@@ -609,7 +620,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         const transaction = this.startQueryTransaction(query, rowIndex, 'Graph', {
         const transaction = this.startQueryTransaction(query, rowIndex, 'Graph', {
           format: 'time_series',
           format: 'time_series',
           instant: false,
           instant: false,
-          hinting: true,
         });
         });
         try {
         try {
           const now = Date.now();
           const now = Date.now();
@@ -623,6 +633,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           const queryError = response.data ? response.data.error : response;
           const queryError = response.data ? response.data.error : response;
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
         }
         }
+      } else {
+        this.discardTransactions(rowIndex);
       }
       }
     });
     });
   }
   }
@@ -637,18 +649,24 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     // Run all queries concurrently
     // Run all queries concurrently
     queries.forEach(async (query, rowIndex) => {
     queries.forEach(async (query, rowIndex) => {
       if (query) {
       if (query) {
-        const transaction = this.startQueryTransaction(query, rowIndex, 'Table', { format: 'table', instant: true });
+        const transaction = this.startQueryTransaction(query, rowIndex, 'Table', {
+          format: 'table',
+          instant: true,
+          valueWithRefId: true,
+        });
         try {
         try {
           const now = Date.now();
           const now = Date.now();
           const res = await datasource.query(transaction.options);
           const res = await datasource.query(transaction.options);
           const latency = Date.now() - now;
           const latency = Date.now() - now;
-          const results = mergeTablesIntoModel(new TableModel(), ...res.data);
+          const results = res.data[0];
           this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
           this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
         } catch (response) {
         } catch (response) {
           console.error(response);
           console.error(response);
           const queryError = response.data ? response.data.error : response;
           const queryError = response.data ? response.data.error : response;
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
         }
         }
+      } else {
+        this.discardTransactions(rowIndex);
       }
       }
     });
     });
   }
   }
@@ -675,6 +693,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           const queryError = response.data ? response.data.error : response;
           const queryError = response.data ? response.data.error : response;
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
           this.failQueryTransaction(transaction.id, queryError, datasourceId);
         }
         }
+      } else {
+        this.discardTransactions(rowIndex);
       }
       }
     });
     });
   }
   }
@@ -730,7 +750,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     const graphResult = _.flatten(
     const graphResult = _.flatten(
       queryTransactions.filter(qt => qt.resultType === 'Graph' && qt.done && qt.result).map(qt => qt.result)
       queryTransactions.filter(qt => qt.resultType === 'Graph' && qt.done && qt.result).map(qt => qt.result)
     );
     );
-    const tableResult = queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done).map(qt => qt.result)[0];
+    const tableResult = mergeTablesIntoModel(
+      new TableModel(),
+      ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done).map(qt => qt.result)
+    );
     const logsResult = _.flatten(
     const logsResult = _.flatten(
       queryTransactions.filter(qt => qt.resultType === 'Logs' && qt.done).map(qt => qt.result)
       queryTransactions.filter(qt => qt.resultType === 'Logs' && qt.done).map(qt => qt.result)
     );
     );

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

@@ -196,6 +196,7 @@ export class PrometheusDatasource {
           query: queries[index].expr,
           query: queries[index].expr,
           responseListLength: responseList.length,
           responseListLength: responseList.length,
           refId: activeTargets[index].refId,
           refId: activeTargets[index].refId,
+          valueWithRefId: activeTargets[index].valueWithRefId,
         };
         };
         const series = this.resultTransformer.transform(response, transformerOptions);
         const series = this.resultTransformer.transform(response, transformerOptions);
         result = [...result, ...series];
         result = [...result, ...series];

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

@@ -8,7 +8,14 @@ export class ResultTransformer {
     const prometheusResult = response.data.data.result;
     const prometheusResult = response.data.data.result;
 
 
     if (options.format === 'table') {
     if (options.format === 'table') {
-      return [this.transformMetricDataToTable(prometheusResult, options.responseListLength, options.refId)];
+      return [
+        this.transformMetricDataToTable(
+          prometheusResult,
+          options.responseListLength,
+          options.refId,
+          options.valueWithRefId
+        ),
+      ];
     } else if (options.format === 'heatmap') {
     } else if (options.format === 'heatmap') {
       let seriesList = [];
       let seriesList = [];
       prometheusResult.sort(sortSeriesByLabel);
       prometheusResult.sort(sortSeriesByLabel);
@@ -70,7 +77,7 @@ export class ResultTransformer {
     };
     };
   }
   }
 
 
-  transformMetricDataToTable(md, resultCount: number, refId: string) {
+  transformMetricDataToTable(md, resultCount: number, refId: string, valueWithRefId?: boolean) {
     const table = new TableModel();
     const table = new TableModel();
     let i, j;
     let i, j;
     const metricLabels = {};
     const metricLabels = {};
@@ -95,7 +102,7 @@ export class ResultTransformer {
       metricLabels[label] = labelIndex + 1;
       metricLabels[label] = labelIndex + 1;
       table.columns.push({ text: label, filterable: !label.startsWith('__') });
       table.columns.push({ text: label, filterable: !label.startsWith('__') });
     });
     });
-    const valueText = resultCount > 1 ? `Value #${refId}` : 'Value';
+    const valueText = resultCount > 1 || valueWithRefId ? `Value #${refId}` : 'Value';
     table.columns.push({ text: valueText });
     table.columns.push({ text: valueText });
 
 
     // Populate rows, set value to empty string when label not present.
     // Populate rows, set value to empty string when label not present.

public/sass/pages/_explore.scss

@@ -91,7 +91,7 @@
     height: 2px;
     height: 2px;
     position: relative;
     position: relative;
     overflow: hidden;
     overflow: hidden;
-    background: $table-border;
+    background: $text-color-faint;
     margin: $panel-margin / 2;
     margin: $panel-margin / 2;
   }
   }