fix: disable link and popover for unavailable nodes

Author: artemmufazalov

src/containers/Nodes/NodesTable.scss renamed to src/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,12 +1,10 @@
-.ydb-nodes-table {
-    &__host-field-wrapper {
-        display: flex;
-    }
+.ydb-node-host-wrapper {
+    display: flex;
 
     &__host-wrapper {
         display: flex;
 
-        max-width: 330px;
+        width: 330px;
     }
 
     &__host {
@@ -21,7 +19,7 @@
 }
 
 .data-table__row:hover {
-    .ydb-nodes-table__external-button {
+    .ydb-node-host-wrapper__external-button {
         display: inline-flex;
     }
 }

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -0,0 +1,60 @@
+import block from 'bem-cn-lite';
+
+import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import type {INodesPreparedEntity} from '../../types/store/nodes';
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
+
+import EntityStatus from '../EntityStatus/EntityStatus';
+import {NodeEndpointsTooltip} from '../Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import {IconWrapper} from '../Icon';
+
+import './NodeHostWrapper.scss';
+
+const b = block('ydb-node-host-wrapper');
+
+interface NodeHostWrapperProps {
+    node: INodesPreparedEntity;
+    getNodeRef?: (node?: NodeAddress) => string;
+}
+
+export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
+    if (!node.Host) {
+        return <span>—</span>;
+    }
+
+    const isNodeAvailable = !isUnavailableNode(node);
+    const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+
+    return (
+        <div className={b()}>
+            <Popover
+                disabled={!isNodeAvailable}
+                content={<NodeEndpointsTooltip data={node} />}
+                placement={['top', 'bottom']}
+                behavior={PopoverBehavior.Immediate}
+            >
+                <div className={b('host-wrapper')}>
+                    <EntityStatus
+                        name={node.Host}
+                        status={node.SystemState}
+                        path={isNodeAvailable ? getDefaultNodePath(node.NodeId) : undefined}
+                        hasClipboardButton
+                        className={b('host')}
+                    />
+                    {nodeRef && (
+                        <Button
+                            size="s"
+                            href={nodeRef}
+                            className={b('external-button')}
+                            target="_blank"
+                        >
+                            <IconWrapper name="external" />
+                        </Button>
+                    )}
+                </div>
+            </Popover>
+        </div>
+    );
+};

src/containers/Nodes/getNodesColumns.tsx

@@ -1,29 +1,22 @@
-import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
-import {IconWrapper} 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/NodeEndpointsTooltip';
+import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
+import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
-import {INodesPreparedEntity} from '../../types/store/nodes';
-import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
-
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './NodesTable.scss';
 
-const b = cn('ydb-nodes-table');
+import type {INodesPreparedEntity} from '../../types/store/nodes';
+import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
 interface GetNodesColumnsProps {
     showTooltip: (...args: Parameters<typeof externalShowTooltip>) => void;
     hideTooltip: VoidFunction;
     tabletsPath?: string;
-    getNodeRef?: Function;
+    getNodeRef?: (node?: NodeAddress) => string;
 }
 
 export function getNodesColumns({
@@ -42,39 +35,7 @@ export function getNodesColumns({
         {
             name: 'Host',
             render: ({row}) => {
-                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
-                if (typeof row.Host === 'undefined') {
-                    return <span>—</span>;
-                }
-                return (
-                    <div className={b('host-field-wrapper')}>
-                        <Popover
-                            content={<NodeEndpointsTooltip data={row} />}
-                            placement={['top', 'bottom']}
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <div className={b('host-wrapper')}>
-                                <EntityStatus
-                                    name={row.Host}
-                                    status={row.SystemState}
-                                    path={getDefaultNodePath(row.NodeId)}
-                                    hasClipboardButton
-                                    className={b('host')}
-                                />
-                                {nodeRef && (
-                                    <Button
-                                        size="s"
-                                        href={nodeRef}
-                                        className={b('external-button')}
-                                        target="_blank"
-                                    >
-                                        <IconWrapper name="external" />
-                                    </Button>
-                                )}
-                            </div>
-                        </Popover>
-                    </div>
-                );
+                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
             width: '350px',
             align: DataTable.LEFT,

src/containers/Storage/StorageNodes/StorageNodes.scss

@@ -20,18 +20,6 @@
             margin-right: 0px;
         }
     }
-    &__fqdn-field-wrapper {
-        width: 330px;
-    }
-    &__fqdn-wrapper {
-        display: flex;
-        align-items: center;
-
-        max-width: 330px;
-    }
-    &__fqdn {
-        overflow: hidden;
-    }
 
     &__group-id {
         font-weight: 500;
@@ -40,16 +28,4 @@
     &__node_unavailable {
         opacity: 0.6;
     }
-
-    &__external-button {
-        display: none;
-
-        margin-left: 4px;
-    }
-}
-
-.data-table__row:hover {
-    .global-storage-nodes__external-button {
-        display: inline-flex;
-    }
 }

src/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -2,11 +2,6 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
-
-import {NodeEndpointsTooltip} from '../../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {IconWrapper} from '../../../components/Icon';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
 import {
@@ -15,7 +10,7 @@ import {
     NodesUptimeFilterValues,
 } from '../../../utils/nodes';
 
-import {getDefaultNodePath} from '../../Node/NodePages';
+import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -100,39 +95,7 @@ function StorageNodes({
             header: tableColumnsNames[TableColumnsIds.FQDN],
             width: 350,
             render: ({row}) => {
-                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
-                if (!row.Host) {
-                    return <span>—</span>;
-                }
-                return (
-                    <div className={b('fqdn-field-wrapper')}>
-                        <Popover
-                            content={<NodeEndpointsTooltip data={row} />}
-                            placement={['top', 'bottom']}
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <div className={b('fqdn-wrapper')}>
-                                <EntityStatus
-                                    name={row.Host}
-                                    showStatus={false}
-                                    path={getDefaultNodePath(row.NodeId)}
-                                    hasClipboardButton
-                                    className={b('fqdn')}
-                                />
-                                {nodeRef && (
-                                    <Button
-                                        size="s"
-                                        href={nodeRef}
-                                        className={b('external-button')}
-                                        target="_blank"
-                                    >
-                                        <IconWrapper name="external" />
-                                    </Button>
-                                )}
-                            </div>
-                        </Popover>
-                    </div>
-                );
+                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
             align: DataTable.LEFT,
         },

src/utils/nodes.ts

@@ -15,6 +15,8 @@ export const NodesUptimeFilterTitles = {
 export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
     !node.SystemState || node.SystemState === EFlag.Grey;
 
+export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;
+
 export interface AdditionalNodesInfo extends Record<string, unknown> {
-    getNodeRef?: Function;
+    getNodeRef?: (node?: NodeAddress) => string;
 }