DataLinks: support 'onClick' from table panels (#36682)

packages/grafana-data/src/field/fieldOverrides.ts

@@ -393,6 +393,22 @@ export const getLinksSupplier = (
       },
     };
 
+    if (link.onClick) {
+      return {
+        href: link.url,
+        title: replaceVariables(link.title || '', variables),
+        target: link.targetBlank ? '_blank' : undefined,
+        onClick: (evt, origin) => {
+          link.onClick!({
+            origin: origin ?? field,
+            e: evt,
+            replaceVariables: (v) => replaceVariables(v, variables),
+          });
+        },
+        origin: field,
+      };
+    }
+
     if (link.internal) {
       // For internal links at the moment only destination is Explore.
       return mapInternalLinkToExplore({
@@ -403,20 +419,19 @@ export const getLinksSupplier = (
         range: {} as any,
         replaceVariables,
       });
-    } else {
-      let href = locationUtil.assureBaseUrl(link.url.replace(/\n/g, ''));
-      href = replaceVariables(href, variables);
-      href = locationUtil.processUrl(href);
-
-      const info: LinkModel<Field> = {
-        href,
-        title: replaceVariables(link.title || '', variables),
-        target: link.targetBlank ? '_blank' : undefined,
-        origin: field,
-      };
-
-      return info;
     }
+
+    let href = locationUtil.assureBaseUrl(link.url.replace(/\n/g, ''));
+    href = replaceVariables(href, variables);
+    href = locationUtil.processUrl(href);
+
+    const info: LinkModel<Field> = {
+      href,
+      title: replaceVariables(link.title || '', variables),
+      target: link.targetBlank ? '_blank' : undefined,
+      origin: field,
+    };
+    return info;
   });
 };
 

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

@@ -58,7 +58,7 @@ export interface LinkModel<T = any> {
   origin: T;
 
   // When a click callback exists, this is passed the raw mouse|react event
-  onClick?: (e: any) => void;
+  onClick?: (e: any, origin?: any) => void;
 }
 
 /**

packages/grafana-ui/src/utils/table.ts

@@ -14,12 +14,16 @@ export const getCellLinks = (field: Field, row: Row<any>) => {
     })[0];
   }
 
-  if (link && link.onClick) {
+  //const fieldLink = link?.onClick;
+  if (link?.onClick) {
     onClick = (event) => {
       // Allow opening in new tab
-      if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link!.onClick) {
+      if (!(event.ctrlKey || event.metaKey || event.shiftKey)) {
         event.preventDefault();
-        link!.onClick(event);
+        link!.onClick!(event, {
+          field,
+          rowIndex: row.index,
+        });
       }
     };
   }

public/app/features/panel/panellinks/link_srv.ts

@@ -7,7 +7,6 @@ import {
   DataFrame,
   DataLink,
   DataLinkBuiltInVars,
-  DataLinkClickEvent,
   deprecationWarning,
   Field,
   FieldType,
@@ -313,30 +312,26 @@ export class LinkSrv implements LinkService {
       });
     }
 
-    let onClick: ((event: DataLinkClickEvent) => void) | undefined = undefined;
-
-    if (link.onClick) {
-      onClick = (e: DataLinkClickEvent) => {
-        if (link.onClick) {
-          link.onClick({
-            origin,
-            replaceVariables,
-            e,
-          });
-        }
-      };
-    }
-
     const info: LinkModel<T> = {
       href: locationUtil.assureBaseUrl(href.replace(/\n/g, '')),
-      title: replaceVariables ? replaceVariables(link.title || '') : link.title,
+      title: link.title ?? '',
       target: link.targetBlank ? '_blank' : undefined,
       origin,
-      onClick,
     };
 
     if (replaceVariables) {
       info.href = replaceVariables(info.href);
+      info.title = replaceVariables(link.title);
+    }
+
+    if (link.onClick) {
+      info.onClick = (e) => {
+        link.onClick!({
+          origin,
+          replaceVariables,
+          e,
+        });
+      };
     }
 
     info.href = getConfig().disableSanitizeHtml ? info.href : textUtil.sanitizeUrl(info.href);