From c9e7796b33a91267895c8e7b13e2090ea5270aca Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 23 Apr 2020 13:57:08 +0200
Subject: [PATCH] Table: Add default cell link style and tooltip to data links
 in table (#23818)

---
 packages/grafana-ui/src/components/Table/DefaultCell.tsx | 9 ++++++---
 packages/grafana-ui/src/components/Table/styles.ts       | 4 ++++
 packages/grafana-ui/src/components/index.ts              | 1 +
 public/app/plugins/panel/table/module.tsx                | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 35342cb653b..f0682ef04e7 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { TableCellProps } from './types';
 import { formattedValueToString, LinkModel } from '@grafana/data';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 export const DefaultCell: FC<TableCellProps> = props => {
   const { field, cell, tableStyles, row } = props;
@@ -22,9 +23,11 @@ export const DefaultCell: FC<TableCellProps> = props => {
   return (
     <div className={tableStyles.tableCell}>
       {link ? (
-        <a href={link.href} target={link.target} title={link.title}>
-          {value}
-        </a>
+        <Tooltip content={link.title}>
+          <a href={link.href} target={link.target} title={link.title} className={tableStyles.tableCellLink}>
+            {value}
+          </a>
+        </Tooltip>
       ) : (
         value
       )}
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index f4d0723ef2b..97b862e8be7 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -12,6 +12,7 @@ export interface TableStyles {
   headerCell: string;
   tableCell: string;
   tableCellWrapper: string;
+  tableCellLink: string;
   row: string;
   theme: GrafanaTheme;
   resizeHandle: string;
@@ -75,6 +76,9 @@ export const getTableStyles = stylesFactory(
           border-right: none;
         }
       `,
+      tableCellLink: css`
+        text-decoration: underline;
+      `,
       tableCell: css`
         padding: ${padding}px 10px;
         text-overflow: ellipsis;
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index b0f46255720..e256db09452 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -44,6 +44,7 @@ export { ModalsProvider, ModalRoot, ModalsController } from './Modal/ModalsConte
 export { SetInterval } from './SetInterval/SetInterval';
 
 export { Table } from './Table/Table';
+export { TableCellDisplayMode } from './Table/types';
 export { TableInputCSV } from './TableInputCSV/TableInputCSV';
 export { TabsBar } from './Tabs/TabsBar';
 export { Tab } from './Tabs/Tab';
diff --git a/public/app/plugins/panel/table/module.tsx b/public/app/plugins/panel/table/module.tsx
index 2e5a96043e9..a5fb9d86044 100644
--- a/public/app/plugins/panel/table/module.tsx
+++ b/public/app/plugins/panel/table/module.tsx
@@ -2,7 +2,7 @@ import { PanelPlugin } from '@grafana/data';
 import { TablePanel } from './TablePanel';
 import { CustomFieldConfig, Options } from './types';
 import { tablePanelChangedHandler, tableMigrationHandler } from './migrations';
-import { TableCellDisplayMode } from '@grafana/ui/src/components/Table/types';
+import { TableCellDisplayMode } from '@grafana/ui';
 
 export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)