fix(StorageNodes): make fqdn similar to nodes page

Author: artemmufazalov

src/components/Icon/Icon.tsx

@@ -31,3 +31,9 @@ export const Icon = ({
         />
     );
 };
+
+// When used with uikit components Icon is considered as text element and corresponding styles are applied
+// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles
+export const IconWrapper = (props: IconProps) => <Icon {...props} />;
+
+IconWrapper.displayName = 'Icon';

src/components/Tooltips/NodeEndpointsTooltip/index.ts

@@ -1,22 +1,23 @@
 .ydb-nodes-table {
-    &__host-name-wrapper {
+    &__host-field-wrapper {
         display: flex;
     }
 
-    &__external-button {
-        display: none;
-        align-items: center;
-
-        margin-left: 4px;
+    &__host-wrapper {
+        display: flex;
 
-        .yc-button__text {
-            margin: 0 4px;
-        }
+        max-width: 330px;
     }
 
-    &__host-name {
+    &__host {
         overflow: hidden;
     }
+
+    &__external-button {
+        display: none;
+
+        margin-left: 4px;
+    }
 }
 
 .data-table__row:hover {

src/containers/Nodes/NodesTable.scss

@@ -2,12 +2,12 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import {Icon} from '../../components/Icon';
+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';
+import {NodeEndpointsTooltip} from '../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
 
 import {formatBytesToGigabyte} from '../../utils/index';
 import {INodesPreparedEntity} from '../../types/store/nodes';
@@ -47,29 +47,31 @@ export function getNodesColumns({
                     return <span>—</span>;
                 }
                 return (
-                    <div className={b('host-name-wrapper')}>
+                    <div className={b('host-field-wrapper')}>
                         <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>
-                            )}
+                            <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>
                 );

src/containers/Nodes/getNodesColumns.tsx

@@ -73,6 +73,7 @@ class Storage extends React.Component {
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
         setDataWasNotLoaded: PropTypes.func,
+        additionalNodesInfo: PropTypes.object,
     };
 
     componentDidMount() {
@@ -180,8 +181,14 @@ class Storage extends React.Component {
     }
 
     renderDataTable() {
-        const {flatListStorageEntities, visibleEntities, nodesUptimeFilter, nodes, storageType} =
-            this.props;
+        const {
+            flatListStorageEntities,
+            visibleEntities,
+            nodesUptimeFilter,
+            nodes,
+            storageType,
+            additionalNodesInfo,
+        } = this.props;
 
         return (
             <div className={b('table-wrapper')}>
@@ -201,6 +208,7 @@ class Storage extends React.Component {
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         onShowAll={this.onShowAllNodes}
+                        additionalNodesInfo={additionalNodesInfo}
                     />
                 )}
             </div>

src/containers/Storage/Storage.js

@@ -20,23 +20,36 @@
             margin-right: 0px;
         }
     }
-    &__fqdn-wrapper {
+    &__fqdn-field-wrapper {
         width: 330px;
     }
-    &__fqdn {
-        display: inline-block;
-        overflow: hidden;
+    &__fqdn-wrapper {
+        display: flex;
+        align-items: center;
 
         max-width: 330px;
-
-        vertical-align: top;
-        text-overflow: ellipsis;
     }
+    &__fqdn {
+        overflow: hidden;
+    }
+
     &__group-id {
         font-weight: 500;
     }
 
     &__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.scss

@@ -2,10 +2,20 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
+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 {isUnavailableNode, NodesUptimeFilterValues} from '../../../utils/nodes';
+import {
+    AdditionalNodesInfo,
+    isUnavailableNode,
+    NodesUptimeFilterValues,
+} from '../../../utils/nodes';
+
+import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -33,6 +43,7 @@ interface StorageNodesProps {
     visibleEntities: keyof typeof VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
+    additionalNodesInfo?: AdditionalNodesInfo;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -73,7 +84,10 @@ function StorageNodes({
     visibleEntities,
     onShowAll,
     nodesUptimeFilter,
+    additionalNodesInfo,
 }: StorageNodesProps) {
+    const getNodeRef = additionalNodesInfo?.getNodeRef;
+
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.NodeId,
@@ -85,15 +99,37 @@ function StorageNodes({
             name: TableColumnsIds.FQDN,
             header: tableColumnsNames[TableColumnsIds.FQDN],
             width: 350,
-            render: ({value}) => {
+            render: ({row}) => {
+                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
+                if (!row.Host) {
+                    return <span>—</span>;
+                }
                 return (
-                    <div className={b('fqdn-wrapper')}>
+                    <div className={b('fqdn-field-wrapper')}>
                         <Popover
-                            content={value as string}
-                            placement={['right']}
+                            content={<NodeEndpointsTooltip data={row} />}
+                            placement={['top', 'bottom']}
                             behavior={PopoverBehavior.Immediate}
                         >
-                            <span className={b('fqdn')}>{value as string}</span>
+                            <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>
                 );

src/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -305,9 +305,10 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         return {
             NodeId: node.NodeId,
             SystemState: systemState.SystemState,
-            FQDN: systemState.Host,
             DataCenter: systemState.DataCenter,
             Rack: systemState.Rack,
+            Host: systemState.Host,
+            Endpoints: systemState.Endpoints,
             uptime: calcUptime(systemState.StartTime),
             StartTime: systemState.StartTime,
             PDisks: node.PDisks,
@@ -369,7 +370,7 @@ const filterByText = (entities, type, text) => {
 
         return (
             entity.NodeId.toString().includes(cleanedFilter) ||
-            entity.FQDN.toLowerCase().includes(cleanedFilter)
+            entity.Host.toLowerCase().includes(cleanedFilter)
         );
     });
 };

src/store/reducers/storage.js

@@ -2,7 +2,7 @@ import cn from 'bem-cn-lite';
 import {calcUptime} from '.';
 import JSONTree from 'react-json-inspector';
 
-import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip';
+import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
 
 const poolB = cn('pool-tooltip');