From 3239c62a24a08e1ecf848f5f61db37ff356dcf5e Mon Sep 17 00:00:00 2001
From: Joker <joker9764@126.com>
Date: Fri, 14 Jan 2022 22:52:00 +0800
Subject: [PATCH] Explore: Support custom display label for exemplar links for
 Prometheus datasource (#42732)

* Add custom URL label, docs for prometheus exemplar
---
 docs/sources/datasources/prometheus.md        |  1 +
 .../configuration/ExemplarSetting.tsx         | 22 +++++++++++++++++--
 .../prometheus/result_transformer.ts          |  4 ++--
 .../plugins/datasource/prometheus/types.ts    |  1 +
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/sources/datasources/prometheus.md b/docs/sources/datasources/prometheus.md
index ed3148eecfe..82f0dfd83c5 100644
--- a/docs/sources/datasources/prometheus.md
+++ b/docs/sources/datasources/prometheus.md
@@ -31,6 +31,7 @@ To access Prometheus settings, hover your mouse over the **Configuration** (gear
 | `Custom Query Parameters` | Add custom parameters to the Prometheus query URL. For example `timeout`, `partial_response`, `dedup`, or `max_source_resolution`. Multiple parameters should be concatenated together with an '&amp;'.                                                           |
 | `Label name`              | Add the name of the field in the label object.                                                                                                                                                                                                                    |
 | `URL`                     | If the link is external, then enter the full link URL. You can interpolate the value from the field with `${__value.raw }` macro.                                                                                                                                 |
+| `URL Label`               | (Optional) Set a custom display label for the link URL. The link label defaults to the full external URL or the name of datasource and is overridden by this setting.                                                                                             |
 | `Internal link`           | Select if the link is internal or external. In the case of an internal link, a data source selector allows you to select the target data source. Supports tracing data sources only.                                                                              |
 
 ## Prometheus query editor
diff --git a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
index fbcd625a8ea..34e258fa67c 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
@@ -51,8 +51,8 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
             width={40}
             onChange={(ds) =>
               onChange({
+                ...value,
                 datasourceUid: ds.uid,
-                name: value.name,
                 url: undefined,
               })
             }
@@ -71,8 +71,8 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
             value={value.url}
             onChange={(event) =>
               onChange({
+                ...value,
                 datasourceUid: undefined,
-                name: value.name,
                 url: event.currentTarget.value,
               })
             }
@@ -80,6 +80,24 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
         </InlineField>
       )}
 
+      <InlineField
+        label="URL Label"
+        labelWidth={24}
+        tooltip="Use to override the button label on the exemplar traceID field."
+      >
+        <Input
+          placeholder="Go to example.com"
+          spellCheck={false}
+          width={40}
+          value={value.urlDisplayLabel}
+          onChange={(event) =>
+            onChange({
+              ...value,
+              urlDisplayLabel: event.currentTarget.value,
+            })
+          }
+        />
+      </InlineField>
       <InlineField
         label="Label name"
         labelWidth={24}
diff --git a/public/app/plugins/datasource/prometheus/result_transformer.ts b/public/app/plugins/datasource/prometheus/result_transformer.ts
index 8042789dce3..f7c3ed4d9db 100644
--- a/public/app/plugins/datasource/prometheus/result_transformer.ts
+++ b/public/app/plugins/datasource/prometheus/result_transformer.ts
@@ -286,7 +286,7 @@ function getDataLinks(options: ExemplarTraceIdDestination): DataLink[] {
     const dsSettings = dataSourceSrv.getInstanceSettings(options.datasourceUid);
 
     dataLinks.push({
-      title: `Query with ${dsSettings?.name}`,
+      title: options.urlDisplayLabel || `Query with ${dsSettings?.name}`,
       url: '',
       internal: {
         query: { query: '${__value.raw}', queryType: 'traceId' },
@@ -298,7 +298,7 @@ function getDataLinks(options: ExemplarTraceIdDestination): DataLink[] {
 
   if (options.url) {
     dataLinks.push({
-      title: `Go to ${options.url}`,
+      title: options.urlDisplayLabel || `Go to ${options.url}`,
       url: options.url,
       targetBlank: true,
     });
diff --git a/public/app/plugins/datasource/prometheus/types.ts b/public/app/plugins/datasource/prometheus/types.ts
index b1fc43155ae..af0dc25581e 100644
--- a/public/app/plugins/datasource/prometheus/types.ts
+++ b/public/app/plugins/datasource/prometheus/types.ts
@@ -35,6 +35,7 @@ export enum PromQueryType {
 export type ExemplarTraceIdDestination = {
   name: string;
   url?: string;
+  urlDisplayLabel?: string;
   datasourceUid?: string;
 };