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

* Show datalinks on Table panel JSON View and Gauge derivates

* Use DataLinksContextMenu on BarGaugeCell

* Change import path

* PR modifications

* Re-add cell container style

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 (
+  const getLinks = () => {
-    <div {...cellProps} className={tableStyles.cellContainer}>
+    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

@@ -3,9 +3,10 @@ import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
 import { TableCellProps, TableFieldOptions } from './types';
 import { CellActions } from './CellActions';
+import { getCellLinks } from '../../utils';
 
 export function JSONViewCell(props: TableCellProps): JSX.Element {
-  const { cell, tableStyles, cellProps, field } = props;
+  const { cell, tableStyles, cellProps, field, row } = props;
   const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
   const txt = css`
     cursor: pointer;
@@ -23,9 +24,24 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
     displayValue = JSON.stringify(value, null, ' ');
   }
 
+  const { link, onClick } = getCellLinks(field, row);
+
   return (
     <div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>
-      <div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
+      <div className={cx(tableStyles.cellText, txt)}>
+        {!link && <div className={tableStyles.cellText}>{value}</div>}
+        {link && (
+          <a
+            href={link.href}
+            onClick={onClick}
+            target={link.target}
+            title={link.title}
+            className={tableStyles.cellLink}
+          >
+            {displayValue}
+          </a>
+        )}
+      </div>
       {inspectEnabled && <CellActions {...props} previewMode="code" />}
     </div>
   );