Loki: Add scopedVars support in legend formatting for repeated variables (#27046)

* Pass scoped vars to createMetricLabel

* Add tests

* Refacotr

* Update tests

* Update test

public/app/plugins/datasource/loki/datasource.ts

@@ -210,6 +210,7 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
           responseListLength,
           linesLimit,
           this.instanceSettings.jsonData,
+          (options as DataQueryRequest<LokiQuery>).scopedVars,
           (options as DataQueryRequest<LokiQuery>).reverse
         )
       )

public/app/plugins/datasource/loki/result_transformer.test.ts

@@ -1,5 +1,5 @@
 import { CircularDataFrame, FieldCache, FieldType, MutableDataFrame } from '@grafana/data';
-import { LokiStreamResult, LokiTailResponse, LokiStreamResponse, LokiResultType } from './types';
+import { LokiStreamResult, LokiTailResponse, LokiStreamResponse, LokiResultType, TransformerOptions } from './types';
 import * as ResultTransformer from './result_transformer';
 import { enhanceDataFrame } from './result_transformer';
 
@@ -114,6 +114,15 @@ describe('loki result transformer', () => {
       });
     });
   });
+  describe('createMetricLabel', () => {
+    it('should create correct label based on passed variables', () => {
+      const label = ResultTransformer.createMetricLabel({}, ({
+        scopedVars: { testLabel: { selected: true, text: 'label1', value: 'label1' } },
+        legendFormat: '{{$testLabel}}',
+      } as unknown) as TransformerOptions);
+      expect(label).toBe('label1');
+    });
+  });
 });
 
 describe('enhanceDataFrame', () => {

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

@@ -16,6 +16,7 @@ import {
   QueryResultMetaStat,
   QueryResultMeta,
   TimeSeriesValue,
+  ScopedVars,
 } from '@grafana/data';
 
 import templateSrv from 'app/features/templating/template_srv';
@@ -240,11 +241,11 @@ export function lokiResultsToTableModel(
   return table;
 }
 
-function createMetricLabel(labelData: { [key: string]: string }, options?: TransformerOptions) {
+export function createMetricLabel(labelData: { [key: string]: string }, options?: TransformerOptions) {
   let label =
     options === undefined || _.isEmpty(options.legendFormat)
       ? getOriginalMetricName(labelData)
-      : renderTemplate(templateSrv.replace(options.legendFormat ?? ''), labelData);
+      : renderTemplate(templateSrv.replace(options.legendFormat ?? '', options.scopedVars), labelData);
 
   if (!label && options) {
     label = options.query;
@@ -415,13 +416,13 @@ export function rangeQueryResponseToTimeSeries(
   response: LokiResponse,
   query: LokiRangeQueryRequest,
   target: LokiQuery,
-  responseListLength: number
+  responseListLength: number,
+  scopedVars: ScopedVars
 ): TimeSeries[] {
   /** Show results of Loki metric queries only in graph */
   const meta: QueryResultMeta = {
     preferredVisualisationType: 'graph',
   };
-
   const transformerOptions: TransformerOptions = {
     format: target.format,
     legendFormat: target.legendFormat ?? '',
@@ -433,6 +434,7 @@ export function rangeQueryResponseToTimeSeries(
     refId: target.refId,
     meta,
     valueWithRefId: target.valueWithRefId,
+    scopedVars,
   };
 
   switch (response.data.resultType) {
@@ -454,6 +456,7 @@ export function processRangeQueryResponse(
   responseListLength: number,
   limit: number,
   config: LokiOptions,
+  scopedVars: ScopedVars,
   reverse = false
 ) {
   switch (response.data.resultType) {
@@ -473,7 +476,8 @@ export function processRangeQueryResponse(
             ...target,
             format: 'time_series',
           },
-          responseListLength
+          responseListLength,
+          scopedVars
         ),
         key: target.refId,
       });

public/app/plugins/datasource/loki/types.ts

@@ -1,4 +1,4 @@
-import { DataQuery, DataSourceJsonData, QueryResultMeta } from '@grafana/data';
+import { DataQuery, DataSourceJsonData, QueryResultMeta, ScopedVars } from '@grafana/data';
 
 export interface LokiInstantQueryRequest {
   query: string;
@@ -122,6 +122,7 @@ export interface TransformerOptions {
   query: string;
   responseListLength: number;
   refId: string;
+  scopedVars: ScopedVars;
   meta?: QueryResultMeta;
   valueWithRefId?: boolean;
 }