Table panel: Show datalinks for cell display modes JSON View and Gauge derivates (#46020) (#47014)

Backport https://github.com/grafana/grafana/commit/5242d446936c5767312e3c5eafe11a8e2ab8075a from https://github.com/grafana/grafana/pull/46020

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

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
-import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
+import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax, LinkModel } from '@grafana/data';
 import { BarGauge, BarGaugeDisplayMode } from '../BarGauge/BarGauge';
 import { TableCellProps, TableCellDisplayMode } from './types';
+import { DataLinksContextMenu, DataLinksContextMenuApi } from '../DataLinks/DataLinksContextMenu';
+import { isFunction } from 'lodash';
 
 const defaultScale: ThresholdsConfig = {
   mode: ThresholdsMode.Absolute,
@@ -18,7 +20,7 @@ const defaultScale: ThresholdsConfig = {
 };
 
 export const BarGaugeCell: FC<TableCellProps> = (props) => {
-  const { field, innerWidth, tableStyles, cell, cellProps } = props;
+  const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
 
   let config = getFieldConfigWithMinMax(field, false);
   if (!config.thresholds) {
@@ -37,8 +39,20 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
     barGaugeMode = BarGaugeDisplayMode.Basic;
   }
 
-  return (
-    <div {...cellProps} className={tableStyles.cellContainer}>
+  const getLinks = () => {
+    if (!isFunction(field.getLinks)) {
+      return [] as LinkModel[];
+    }
+
+    return field.getLinks({ valueRowIndex: row.index });
+  };
+
+  const hasLinks = !!getLinks().length;
+
+  const renderComponent = (menuProps: DataLinksContextMenuApi) => {
+    const { openMenu, targetClassName } = menuProps;
+
+    return (
       <BarGauge
         width={innerWidth}
         height={tableStyles.cellHeightInner}
@@ -48,10 +62,37 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
         value={displayValue}
         orientation={VizOrientation.Horizontal}
         theme={tableStyles.theme}
+        onClick={openMenu}
+        className={targetClassName}
         itemSpacing={1}
         lcdCellWidth={8}
         displayMode={barGaugeMode}
       />
+    );
+  };
+
+  return (
+    <div {...cellProps} className={tableStyles.cellContainer}>
+      {hasLinks && (
+        <DataLinksContextMenu links={getLinks} config={config}>
+          {(api) => renderComponent(api)}
+        </DataLinksContextMenu>
+      )}
+      {!hasLinks && (
+        <BarGauge
+          width={innerWidth}
+          height={tableStyles.cellHeightInner}
+          field={config}
+          display={field.display}
+          text={{ valueSize: 14 }}
+          value={displayValue}
+          orientation={VizOrientation.Horizontal}
+          theme={tableStyles.theme}
+          itemSpacing={1}
+          lcdCellWidth={8}
+          displayMode={barGaugeMode}
+        />
+      )}
     </div>
   );
 };

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

@@ -6,9 +6,10 @@ import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
 import { useStyles2 } from '../../themes';
 import { TableCellProps } from './types';
 import { GrafanaTheme2 } from '@grafana/data';
+import { getCellLinks } from '../../utils';
 
 export function JSONViewCell(props: TableCellProps): JSX.Element {
-  const { cell, tableStyles, cellProps } = props;
+  const { cell, tableStyles, cellProps, field, row } = props;
 
   const txt = css`
     cursor: pointer;
@@ -28,10 +29,23 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
 
   const content = <JSONTooltip value={value} />;
 
+  const { link, onClick } = getCellLinks(field, row);
+
   return (
     <Tooltip placement="auto-start" content={content} theme="info-alt">
       <div {...cellProps} className={tableStyles.cellContainer}>
-        <div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
+        {!link && <div className={cx(tableStyles.cellText, txt)}>{value}</div>}
+        {link && (
+          <a
+            href={link.href}
+            onClick={onClick}
+            target={link.target}
+            title={link.title}
+            className={tableStyles.cellLink}
+          >
+            {displayValue}
+          </a>
+        )}
       </div>
     </Tooltip>
   );