refactor(Nodes): use Popover with NodeEnpdointsTooltip

Author: artemmufazalov

src/containers/Nodes/getNodesColumns.tsx

@@ -1,12 +1,13 @@
 import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Button, Popover} from '@gravity-ui/uikit';
+import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {Icon} from '../../components/Icon';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
+import {NodeEndpointsTooltip} from '../../components/Tooltips/NodeEndpointsTooltip';
 
 import {formatBytesToGigabyte} from '../../utils/index';
 import {INodesPreparedEntity} from '../../types/store/nodes';
@@ -47,27 +48,29 @@ export function getNodesColumns({
                 }
                 return (
                     <div className={b('host-name-wrapper')}>
-                        <EntityStatus
-                            name={row.Host}
-                            onNameMouseEnter={(e: MouseEvent) =>
-                                showTooltip(e.target, row, 'nodeEndpoints')
-                            }
-                            onNameMouseLeave={hideTooltip}
-                            status={row.SystemState}
-                            path={getDefaultNodePath(row.NodeId)}
-                            hasClipboardButton
-                            className={b('host-name')}
-                        />
-                        {nodeRef && (
-                            <Button
-                                size="s"
-                                href={nodeRef}
-                                className={b('external-button')}
-                                target="_blank"
-                            >
-                                <Icon name="external" />
-                            </Button>
-                        )}
+                        <Popover
+                            content={<NodeEndpointsTooltip data={row} />}
+                            placement={['top', 'bottom']}
+                            behavior={PopoverBehavior.Immediate}
+                        >
+                            <EntityStatus
+                                name={row.Host}
+                                status={row.SystemState}
+                                path={getDefaultNodePath(row.NodeId)}
+                                hasClipboardButton
+                                className={b('host-name')}
+                            />
+                            {nodeRef && (
+                                <Button
+                                    size="s"
+                                    href={nodeRef}
+                                    className={b('external-button')}
+                                    target="_blank"
+                                >
+                                    <Icon name="external" />
+                                </Button>
+                            )}
+                        </Popover>
                     </div>
                 );
             },