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

@@ -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 '&'.                                                           |
 | `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

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}

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,
     });

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