Explore: Support custom display label for exemplar links for Prometheus datasource (#42732)

* Add custom URL label, docs for prometheus exemplar

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