From db7b6878c17d21924ebbae8cc4391c5071f4f45f Mon Sep 17 00:00:00 2001
From: Kerry Gallagher <k.gallagher.05@gmail.com>
Date: Fri, 14 Jun 2019 13:52:30 +0100
Subject: [PATCH] Add a tooltip for name (#38904)

---
 .../components/nodes_overview/table.tsx       | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/nodes_overview/table.tsx b/x-pack/plugins/infra/public/components/nodes_overview/table.tsx
index 09e660115b84..e33cef176c7e 100644
--- a/x-pack/plugins/infra/public/components/nodes_overview/table.tsx
+++ b/x-pack/plugins/infra/public/components/nodes_overview/table.tsx
@@ -61,21 +61,26 @@ export const TableView = injectI18n(
           sortable: true,
           truncateText: true,
           textOnly: true,
-          render: (value: string, item: { node: InfraWaffleMapNode }) => (
-            <NodeContextMenu
-              node={item.node}
-              nodeType={nodeType}
-              closePopover={this.closePopoverFor(item.node.pathId)}
-              timeRange={timeRange}
-              isPopoverOpen={this.state.isPopoverOpen.includes(item.node.pathId)}
-              options={options}
-              popoverPosition="rightCenter"
-            >
-              <EuiButtonEmpty onClick={this.openPopoverFor(item.node.pathId)}>
-                {value}
-              </EuiButtonEmpty>
-            </NodeContextMenu>
-          ),
+          render: (value: string, item: { node: InfraWaffleMapNode }) => {
+            const tooltipText = item.node.id === value ? `${value}` : `${value} (${item.node.id})`;
+            return (
+              <NodeContextMenu
+                node={item.node}
+                nodeType={nodeType}
+                closePopover={this.closePopoverFor(item.node.pathId)}
+                timeRange={timeRange}
+                isPopoverOpen={this.state.isPopoverOpen.includes(item.node.pathId)}
+                options={options}
+                popoverPosition="rightCenter"
+              >
+                <EuiToolTip content={tooltipText}>
+                  <EuiButtonEmpty onClick={this.openPopoverFor(item.node.pathId)}>
+                    {value}
+                  </EuiButtonEmpty>
+                </EuiToolTip>
+              </NodeContextMenu>
+            );
+          },
         },
         ...options.groupBy.map((grouping, index) => ({
           field: `group_${index}`,