Drilldown url

packages/grafana-data/src/types/dataFrame.ts

@@ -47,6 +47,11 @@ export interface FieldConfig<TOptions = any> {
    */
   displayNameFromDS?: string;
 
+  /**
+   * This is the URL that the field value links to.  This supports template variables.
+   */
+  urlFromDS?: string;
+
   /**
    * Human readable field metadata
    */

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -86,6 +86,7 @@ export const Components = {
         editorToggle: 'data-testid QueryEditorModeToggle', // wrapper for toggle
         options: 'data-testid prometheus options', // wrapper for options group
         legend: 'data-testid prometheus legend wrapper', // wrapper for multiple compomnents
+        legendUrl: 'data-testid prometheus legendUrl wrapper', // wrapper for multiple compomnents
         format: 'data-testid prometheus format',
         step: 'prometheus-step', // id for autosize component
         type: 'data-testid prometheus type', //wrapper for radio button group

packages/grafana-prometheus/src/dataquery.ts

@@ -38,6 +38,11 @@ export interface Prometheus extends common.DataQuery {
    * Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname
    */
   legendFormat?: string;
+  legendUrlFormat?: string;
+  /**
+   * Drilldown URL for LegendFormat with template support. Ex. https://example.com/{{instance}} will replace the variable with its value
+   */
+  legendUrl?: string;
   /**
    * Returns a Range vector, comprised of a set of time series containing a range of data points over time for each time series
    */

packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx

@@ -59,7 +59,9 @@ export const VizLegendListItem = <T = unknown,>({
   const onClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       if (onLabelClick) {
-        onLabelClick(item, event);
+        if( item.url != null) {
+          window.location.href = item.url;
+        } else { onLabelClick(item, event); }
       }
     },
     [item, onLabelClick]

packages/grafana-ui/src/components/VizLegend/types.ts

@@ -40,6 +40,7 @@ export interface LegendProps<T = any> extends VizLegendBaseProps<T>, VizLegendTa
 export interface VizLegendItem<T = any> {
   getItemKey?: () => string;
   label: string;
+  url?: string;
   color?: string;
   gradient?: string;
   yAxis: number;

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -71,6 +71,7 @@ export const PlotLegend = React.memo(
         }
 
         const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data);
+        const url = field.config?.urlFromDS;
         const scaleColor = getFieldSeriesColor(field, theme);
         const seriesColor = scaleColor.color;
 
@@ -79,6 +80,7 @@ export const PlotLegend = React.memo(
           fieldIndex,
           color: seriesColor,
           label,
+          url,
           yAxis: axisPlacement === AxisPlacement.Left || axisPlacement === AxisPlacement.Bottom ? 1 : 2,
           getDisplayValues: () => {
             if (!calcs?.length) {

pkg/promlib/models/query.go

@@ -63,6 +63,9 @@ type PrometheusQueryProperties struct {
 	// Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname
 	LegendFormat string `json:"legendFormat,omitempty"`
 
+	// Drilldown URL for LegendFormat with template support. Ex. https://example.com/{{instance}} will replace the variable with its value
+	LegendUrl string `json:"legendUrl,omitempty"`
+
 	// ???
 	Scope *ScopeSpec `json:"scope,omitempty"`
 }
@@ -152,6 +155,7 @@ type Query struct {
 	Expr          string
 	Step          time.Duration
 	LegendFormat  string
+	LegendUrl     string
 	Start         time.Time
 	End           time.Time
 	RefId         string
@@ -208,6 +212,7 @@ func Parse(query backend.DataQuery, dsScrapeInterval string, intervalCalculator
 		Expr:          expr,
 		Step:          calculatedStep,
 		LegendFormat:  model.LegendFormat,
+		LegendUrl:     model.LegendUrl,
 		Start:         query.TimeRange.From,
 		End:           query.TimeRange.To,
 		RefId:         query.RefID,

pkg/promlib/querydata/response.go

@@ -116,10 +116,11 @@ func addMetadataToMultiFrame(q *models.Query, frame *data.Frame, enableDataplane
 	frame.Fields[0].Config = &data.FieldConfig{Interval: float64(q.Step.Milliseconds())}
 
 	customName := getName(q, frame.Fields[1])
+	labelUrl := getUrl(q, frame.Fields[1])
+
 	if customName != "" {
-		frame.Fields[1].Config = &data.FieldConfig{DisplayNameFromDS: customName}
+		frame.Fields[1].Config = &data.FieldConfig{DisplayNameFromDS: customName, UrlFromDS: labelUrl}
 	}
-
 	if enableDataplane {
 		valueField := frame.Fields[1]
 		if n, ok := valueField.Labels["__name__"]; ok {
@@ -169,8 +170,27 @@ func getName(q *models.Query, field *data.Field) string {
 		if len(labels) > 0 {
 			legend = ""
 		}
-	} else if q.LegendFormat != "" {
-		result := legendFormatRegexp.ReplaceAllFunc([]byte(q.LegendFormat), func(in []byte) []byte {
+	} else {
+		legend = convertLabel(q.LegendFormat, field)
+	}
+
+	// If legend is empty brackets, use query expression
+	if legend == "{}" {
+		return q.Expr
+	}
+
+	return legend
+}
+
+func getUrl(q *models.Query, field *data.Field) string {
+	return convertLabel(q.LegendUrl, field)
+}
+
+func convertLabel(label string, field *data.Field) string {
+	var convertedLabel string
+	labels := field.Labels
+	if label != "" {
+		result := legendFormatRegexp.ReplaceAllFunc([]byte(label), func(in []byte) []byte {
 			labelName := strings.Replace(string(in), "{{", "", 1)
 			labelName = strings.Replace(labelName, "}}", "", 1)
 			labelName = strings.TrimSpace(labelName)
@@ -179,15 +199,9 @@ func getName(q *models.Query, field *data.Field) string {
 			}
 			return []byte{}
 		})
-		legend = string(result)
+		convertedLabel = string(result)
 	}
-
-	// If legend is empty brackets, use query expression
-	if legend == "{}" {
-		return q.Expr
-	}
-
-	return legend
+	return convertedLabel
 }
 
 func isExemplarFrame(frame *data.Frame) bool {

pkg/tsdb/loki/frame.go

@@ -50,6 +50,7 @@ func adjustMetricFrame(frame *data.Frame, query *lokiQuery, setFrameName bool) e
 	isMetricRange := query.QueryType == QueryTypeRange
 
 	name := formatName(labels, query)
+	url := formatUrl(labels, query)
 	if setFrameName {
 		frame.Name = name
 	}
@@ -78,6 +79,7 @@ func adjustMetricFrame(frame *data.Frame, query *lokiQuery, setFrameName bool) e
 		valueField.Config = &data.FieldConfig{}
 	}
 	valueField.Config.DisplayNameFromDS = name
+	valueField.Config.UrlFromDS = url
 
 	return nil
 }
@@ -283,17 +285,28 @@ func formatName(labels map[string]string, query *lokiQuery) string {
 		return formatNamePrometheusStyle(labels)
 	}
 
-	result := legendFormat.ReplaceAllFunc([]byte(query.LegendFormat), func(in []byte) []byte {
-		labelName := strings.Replace(string(in), "{{", "", 1)
-		labelName = strings.Replace(labelName, "}}", "", 1)
-		labelName = strings.TrimSpace(labelName)
-		if val, exists := labels[labelName]; exists {
-			return []byte(val)
-		}
-		return []byte{}
-	})
+	return convertLabel(query.LegendFormat, labels)
+}
+
+func formatUrl(labels map[string]string, query *lokiQuery) string {
+	return convertLabel(query.LegendUrl, labels)
+}
 
-	return string(result)
+func convertLabel(label string, labels map[string]string) string {
+	var convertedLabel string
+	if label != "" {
+		result := legendFormat.ReplaceAllFunc([]byte(label), func(in []byte) []byte {
+			labelName := strings.Replace(string(in), "{{", "", 1)
+			labelName = strings.Replace(labelName, "}}", "", 1)
+			labelName = strings.TrimSpace(labelName)
+			if val, exists := labels[labelName]; exists {
+				return []byte(val)
+			}
+			return []byte{}
+		})
+		convertedLabel = string(result)
+	}
+	return convertedLabel
 }
 
 func getFrameLabels(frame *data.Frame) map[string]string {

pkg/tsdb/loki/parse_query.go

@@ -168,6 +168,10 @@ func parseQuery(queryContext *backend.QueryDataRequest) ([]*lokiQuery, error) {
 		if model.LegendFormat != nil {
 			legendFormat = *model.LegendFormat
 		}
+		var legendUrl string
+		if model.LegendUrl != nil {
+			legendUrl = *model.LegendUrl
+		}
 
 		supportingQueryType := parseSupportingQueryType(model.SupportingQueryType)
 
@@ -178,6 +182,7 @@ func parseQuery(queryContext *backend.QueryDataRequest) ([]*lokiQuery, error) {
 			Step:                step,
 			MaxLines:            int(maxLines),
 			LegendFormat:        legendFormat,
+			LegendUrl:           legendUrl,
 			Start:               start,
 			End:                 end,
 			RefID:               query.RefID,

pkg/tsdb/loki/types.go

@@ -35,6 +35,7 @@ type lokiQuery struct {
 	Step                time.Duration
 	MaxLines            int
 	LegendFormat        string
+	LegendUrl           string
 	Start               time.Time
 	End                 time.Time
 	RefID               string

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

@@ -47,6 +47,10 @@ export interface LokiDataQuery extends common.DataQuery {
    * Used to override the name of the series.
    */
   legendFormat?: string;
+  /**
+   * Used for drilldown/clickable legend labels.
+   */
+  legendUrl?: string;
   /**
    * Used to limit the number of log rows returned.
    */

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx

@@ -42,7 +42,7 @@ describe('LokiQueryBuilderOptions', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /Options/ }));
     // Second autosize input is a Line limit
-    const element = screen.getAllByTestId('autosize-input')[1];
+    const element = screen.getAllByTestId('autosize-input')[2];
     await userEvent.type(element, '10');
     await userEvent.keyboard('{enter}');
 
@@ -59,7 +59,7 @@ describe('LokiQueryBuilderOptions', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /Options/ }));
     // Second autosize input is a Line limit
-    const element = screen.getAllByTestId('autosize-input')[1];
+    const element = screen.getAllByTestId('autosize-input')[2];
     await userEvent.type(element, '-10');
     await userEvent.keyboard('{enter}');
 
@@ -76,7 +76,7 @@ describe('LokiQueryBuilderOptions', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /Options/ }));
     // Second autosize input is a Line limit
-    const element = screen.getAllByTestId('autosize-input')[1];
+    const element = screen.getAllByTestId('autosize-input')[2];
     await userEvent.type(element, 'asd');
     await userEvent.keyboard('{enter}');
 
@@ -154,6 +154,32 @@ describe('LokiQueryBuilderOptions', () => {
   });
 });
 
+describe('getCollapsedInfo', () => {
+  it('displays a clipped legend URL for long URLs', () => {
+    const longUrl = 'extremelyLongUrlThatShouldBeCutOffElseItTakesUpTooMuchOnScreenRealestate';
+    setup({ legendUrl: longUrl });
+
+    const urlText = screen.getByText((content, node) => {
+      const hasText = (node: any) => node.textContent === `URL: extremelyL...`;
+      const nodeHasText = hasText(node);
+      const childrenDontHaveText = Array.from(node!.children).every(
+        (child) => !hasText(child)
+      );
+      return nodeHasText && childrenDontHaveText;
+    });
+    expect(urlText).toBeInTheDocument();
+  });
+
+  it('displays the full legend URL for short URLs', () => {
+    const shortUrl = 'shortUrl';
+    setup({ legendUrl: shortUrl });
+
+    const urlTextElement = screen.getByText(`URL: ${shortUrl}`);
+    expect(urlTextElement).toBeInTheDocument();
+  });
+});
+
+
 function setup(queryOverrides: Partial<LokiQuery> = {}) {
   const props = {
     query: {

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx

@@ -52,6 +52,10 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
       onChange({ ...query, legendFormat: evt.currentTarget.value });
       onRunQuery();
     };
+    const onLegendUrlChanged = (evt: React.FormEvent<HTMLInputElement>) => {
+      onChange({ ...query, legendUrl: evt.currentTarget.value });
+      onRunQuery();
+    };
 
     function onMaxLinesChange(e: React.SyntheticEvent<HTMLInputElement>) {
       const newMaxLines = preprocessMaxLines(e.currentTarget.value);
@@ -95,6 +99,18 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
               onCommitChange={onLegendFormatChanged}
             />
           </EditorField>
+          <EditorField
+            label="Legend URL"
+            tooltip="If the url is set, the label in the legend will become clickable, you can use variables similar to Legend Label."
+            >
+            <AutoSizeInput
+              placeholder="/your/{{example}}/url"
+              type="string"
+              minWidth={14}
+              defaultValue={query.legendUrl}
+              onCommitChange={onLegendUrlChanged}
+            />
+          </EditorField>
           <EditorField label="Type">
             <RadioButtonGroup options={queryTypeOptions} value={queryType} onChange={onQueryTypeChange} />
           </EditorField>
@@ -185,6 +201,16 @@ function getCollapsedInfo(
     items.push(`Legend: ${query.legendFormat}`);
   }
 
+  if (query.legendUrl) {
+    let legendUrl = query.legendUrl;
+
+    if (typeof legendUrl === 'string' && legendUrl.length > 10) {
+      legendUrl = legendUrl.slice(0, 10) + "...";
+    }
+
+    items.push(`URL: ${legendUrl?.length === 0 ? "None" : legendUrl}`);
+  }
+
   items.push(`Type: ${queryTypeLabel?.label}`);
 
   if (isLogQuery) {

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

@@ -38,6 +38,10 @@ export interface Prometheus extends common.DataQuery {
    * Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname
    */
   legendFormat?: string;
+  /**
+   * Drilldown URL for LegendFormat with template support. Ex. https://example.com/{{instance}} will replace the variable with its value
+   */
+  legendUrl?: string;
   /**
    * Returns a Range vector, comprised of a set of time series containing a range of data points over time for each time series
    */