refactor(tooltip): separate NodeEndpointsTooltip

Author: artemmufazalov

src/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.scss

@@ -0,0 +1,5 @@
+.ydb-node-endpoints-tooltip {
+    .info-viewer__value {
+        min-width: 70px;
+    }
+}

src/components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.tsx

@@ -0,0 +1,31 @@
+import block from 'bem-cn-lite';
+
+import type {TSystemStateInfo} from '../../../types/api/nodes';
+
+import {InfoViewer, InfoViewerItem} from '../../InfoViewer';
+
+import './NodeEndpointsTooltip.scss';
+
+const b = block('ydb-node-endpoints-tooltip');
+
+interface NodeEdpointsTooltipProps {
+    data?: TSystemStateInfo;
+}
+
+export const NodeEndpointsTooltip = ({data}: NodeEdpointsTooltipProps) => {
+    const info: InfoViewerItem[] = [];
+
+    if (data?.Rack) {
+        info.push({label: 'Rack', value: data.Rack});
+    }
+
+    if (data?.Endpoints && data.Endpoints.length) {
+        data.Endpoints.forEach(({Name, Address}) => {
+            if (Name && Address) {
+                info.push({label: Name, value: Address});
+            }
+        });
+    }
+
+    return <InfoViewer className={b(null)} info={info} dots={false} size={'s'} />;
+};

src/components/Tooltips/NodeEndpointsTooltip/index.ts

@@ -0,0 +1 @@
+export * from './NodeEndpointsTooltip';

src/utils/tooltip.js

@@ -2,6 +2,8 @@ import cn from 'bem-cn-lite';
 import {calcUptime} from '.';
 import JSONTree from 'react-json-inspector';
 
+import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip';
+
 const poolB = cn('pool-tooltip');
 
 const PoolTooltip = (props) => {
@@ -109,34 +111,6 @@ const NodeTooltip = (props) => {
     );
 };
 
-const NodeEndpointsTooltip = (props) => {
-    const {data} = props;
-    return (
-        data && (
-            <div className={nodeB()}>
-                <table>
-                    <tbody>
-                        {data.Rack && (
-                            <tr>
-                                <td className={nodeB('label')}>Rack</td>
-                                <td className={nodeB('value')}>{data.Rack}</td>
-                            </tr>
-                        )}
-                        {data.Endpoints &&
-                            data.Endpoints.length &&
-                            data.Endpoints.map(({Name, Address}) => (
-                                <tr key={Name}>
-                                    <td className={nodeB('label')}>{Name}</td>
-                                    <td className={nodeB('value')}>{Address}</td>
-                                </tr>
-                            ))}
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
 const tabletsOverallB = cn('tabletsOverall-tooltip');
 
 const TabletsOverallTooltip = (props) => {