Use links suppliers attached via field overrides

packages/grafana-ui/src/components/OptionsUI/links.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { FieldConfigEditorProps, DataLink, DataLinksFieldConfigSettings } from '@grafana/data';
+import {
+  DataLink,
+  DataLinksFieldConfigSettings,
+  FieldConfigEditorProps,
+  VariableSuggestionsScope,
+} from '@grafana/data';
 import { DataLinksInlineEditor } from '../DataLinks/DataLinksInlineEditor/DataLinksInlineEditor';
 
 export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>> = ({
@@ -12,7 +17,7 @@ export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], D
       links={value}
       onChange={onChange}
       data={context.data}
-      suggestions={context.getSuggestions ? context.getSuggestions() : []}
+      suggestions={context.getSuggestions ? context.getSuggestions(VariableSuggestionsScope.Values) : []}
     />
   );
 };

packages/grafana-ui/src/components/Table/DefaultCell.tsx

@@ -1,14 +1,35 @@
 import React, { FC } from 'react';
 import { TableCellProps } from './types';
-import { formattedValueToString } from '@grafana/data';
+import { formattedValueToString, LinkModel } from '@grafana/data';
 
 export const DefaultCell: FC<TableCellProps> = props => {
-  const { field, cell, tableStyles } = props;
+  const { field, cell, tableStyles, row } = props;
+  let link: LinkModel<any> | undefined;
 
   if (!field.display) {
     return null;
   }
 
   const displayValue = field.display(cell.value);
-  return <div className={tableStyles.tableCell}>{formattedValueToString(displayValue)}</div>;
+
+  if (field.getDataLinksSupplier) {
+    link = field
+      .getDataLinksSupplier({
+        valueRowIndex: row.index,
+      })
+      .getLinks()[0];
+  }
+  const value = formattedValueToString(displayValue);
+
+  return (
+    <div className={tableStyles.tableCell}>
+      {link ? (
+        <a href={link.href} target={link.target} title={link.title}>
+          {value}
+        </a>
+      ) : (
+        value
+      )}
+    </div>
+  );
 };

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -13,7 +13,6 @@ import {
   getDisplayValueAlignmentFactors,
   DisplayValueAlignmentFactors,
 } from '@grafana/data';
-import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
 
 export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
@@ -21,8 +20,19 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     const { value, alignmentFactors, orientation, width, height } = valueProps;
     const { field, display, view, colIndex } = value;
 
+    const linksSupplier = value.view.dataFrame.fields[value.colIndex].getDataLinksSupplier;
+
     return (
-      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
+      <DataLinksContextMenu
+        links={
+          linksSupplier
+            ? linksSupplier({
+                calculatedValue: value,
+                valueRowIndex: value.rowIndex,
+              })
+            : null
+        }
+      >
         {({ openMenu, targetClassName }) => {
           return (
             <BarGauge

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -10,7 +10,6 @@ import { Gauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps }
 // Types
 import { GaugeOptions } from './types';
 import { FieldDisplay, getFieldDisplayValues, VizOrientation, PanelProps } from '@grafana/data';
-import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
 
 export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay>): JSX.Element => {
@@ -18,8 +17,18 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
     const { value, width, height } = valueProps;
     const { field, display } = value;
 
+    const linksSupplier = value.view.dataFrame.fields[value.colIndex].getDataLinksSupplier;
     return (
-      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
+      <DataLinksContextMenu
+        links={
+          linksSupplier
+            ? linksSupplier({
+                calculatedValue: value,
+                valueRowIndex: value.rowIndex,
+              })
+            : null
+        }
+      >
         {({ openMenu, targetClassName }) => {
           return (
             <Gauge

public/app/plugins/panel/stat/StatPanel.tsx

@@ -24,8 +24,6 @@ import {
   DisplayValueAlignmentFactors,
 } from '@grafana/data';
 
-import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
-
 export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
     const { timeRange, options } = this.props;
@@ -46,9 +44,19 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         sparkline.highlightIndex = sparkline.data.length - 1;
       }
     }
+    const linksSupplier = value.view.dataFrame.fields[value.colIndex].getDataLinksSupplier;
 
     return (
-      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
+      <DataLinksContextMenu
+        links={
+          linksSupplier
+            ? linksSupplier({
+                calculatedValue: value,
+                valueRowIndex: value.rowIndex,
+              })
+            : null
+        }
+      >
         {({ openMenu, targetClassName }) => {
           return (
             <BigValue