ydb-embedded-ui 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [4.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.1.0...v4.2.0) (2023-05-16)
+
+
+### Features
+
+* **Tablet:** display node fqdn in table ([4d8099a](https://github.com/ydb-platform/ydb-embedded-ui/commit/4d8099a454f34fc76886b26ca948895171c57ab8))
+
+
+### Bug Fixes
+
+* **api:** change nulls to empty objects ([0ab14e8](https://github.com/ydb-platform/ydb-embedded-ui/commit/0ab14e883a47aeac2f2bab437f2214a32ccb1c9b))
+* display storage pool in VDisks popups ([5b5dd8a](https://github.com/ydb-platform/ydb-embedded-ui/commit/5b5dd8a4e6cb4bcc1ead78a7c06d2e80a81424cc))
+* fix Select label and values align ([f796730](https://github.com/ydb-platform/ydb-embedded-ui/commit/f7967309fe4a042e7637de212f33b1ebfc6877fc))
+* **Overview:** partitioning by size disabled for 0 SizeToSpit ([1028e7d](https://github.com/ydb-platform/ydb-embedded-ui/commit/1028e7d8d3566f5f5e6b2ebe04112ef135d7b55e))
+* **Schema:** display NotNull columns ([d61eaa4](https://github.com/ydb-platform/ydb-embedded-ui/commit/d61eaa4ccff357c1e9ca6efde855ec46be24a314))
+
+## [4.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.0.0...v4.1.0) (2023-05-10)
+
+
+### Features
+
+* **Navigation:** remove legacy navigation setting support ([8544f11](https://github.com/ydb-platform/ydb-embedded-ui/commit/8544f114255ba44834d38cd9e709450c49e4a96a))
+
+
+### Bug Fixes
+
+* disable link and popover for unavailable nodes ([990a9fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/990a9fa42a7133a6c40d07e11c3518240e18b4a9))
+
 ## [4.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.5.0...v4.0.0) (2023-04-28)
 
 

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -15,7 +15,7 @@ import {Tablet} from '../Tablet';
 //@ts-ignore
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 //@ts-ignore
-import {getClusterInfo} from '../../store/reducers/cluster';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 //@ts-ignore
 import {clusterName, backend, customBackend} from '../../store';
 
@@ -68,6 +68,8 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
         return 0;
     }
 
+    private autofetcher: any;
+
     componentDidMount() {
         const {setHeader} = this.props;
         setHeader([
@@ -107,8 +109,6 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
         return <div className={b(null, className)}>{helper || this.renderContent()}</div>;
     }
 
-    private autofetcher: any;
-
     private getInfo() {
         const {cluster = {}, additionalClusterInfo = [], singleClusterMode} = this.props;
         const {StorageTotal, StorageUsed} = cluster;

package/dist/components/LabelWithPopover/LabelWithPopover.tsx

@@ -3,14 +3,20 @@ import type {ReactNode} from 'react';
 import {HelpPopover} from '@gravity-ui/uikit';
 
 interface LabelWithPopoverProps {
-    text: string;
+    text: ReactNode;
     popoverContent: ReactNode;
     className?: string;
+    contentClassName?: string;
 }
 
-export const LabelWithPopover = ({text, popoverContent, className}: LabelWithPopoverProps) => (
+export const LabelWithPopover = ({
+    text,
+    popoverContent,
+    className,
+    contentClassName,
+}: LabelWithPopoverProps) => (
     <div className={className}>
-        {text}
-        <HelpPopover content={popoverContent} />
+        {text + '\u00a0'}
+        <HelpPopover content={popoverContent} contentClassName={contentClassName} />
     </div>
 );

package/dist/{containers/Nodes/NodesTable.scss → 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;
     }
 }

package/dist/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>
+    );
+};

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -24,7 +24,7 @@
             background-color: var(--yc-color-base-positive);
         }
         &_state_yellow {
-            color: var(--yc-color-text-warning-medium);
+            color: var(--yc-color-text-warning);
             background-color: var(--yc-color-base-warning);
         }
         &_state_blue {

package/dist/containers/App/App.scss

@@ -34,10 +34,6 @@ body,
     --ydb-data-table-color-hover: var(--yc-color-base-float-hover);
 }
 
-.yc-select__label {
-    font-weight: 600;
-}
-
 :is(#tab, .yc-tabs-item_active .yc-tabs-item__title) {
     color: var(--yc-color-text-primary) !important;
 }
@@ -110,10 +106,17 @@ body,
         align-items: center;
     }
 
+    // Should be removed after https://github.com/ydb-platform/ydb-embedded-ui/issues/344
     .yc-button__text {
         display: flex;
         align-items: center;
     }
+
+    .g-select {
+        .yc-button__text {
+            align-items: baseline;
+        }
+    }
 }
 
 .error {

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {connect} from 'react-redux';
 import {useLocation} from 'react-router';
 import {useHistory} from 'react-router-dom';
@@ -170,16 +170,6 @@ function AsideNavigation(props: AsideNavigationProps) {
         props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
     };
 
-    // navigation managed its compact state internally before, and its approach is not compatible with settings
-    // to migrate, save the incoming value again; save only `false` because `true` is the default value
-    // assume it is safe to remove this code block if it is at least a few months old
-    // there a two of these, search for a similar comment
-    useEffect(() => {
-        if (props.compact === false) {
-            setIsCompact(props.compact);
-        }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
         const isClusterPage = pathname === '/cluster';

package/dist/containers/Header/Header.tsx

@@ -8,7 +8,7 @@ import Divider from '../../components/Divider/Divider';
 import {Icon} from '../../components/Icon';
 
 import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
-import {getClusterInfo} from '../../store/reducers/cluster';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getHostInfo} from '../../store/reducers/host';
 import {HeaderItemType} from '../../store/reducers/header';
 

package/dist/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,

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -256,18 +256,14 @@ function StorageGroups({
             name: TableColumnsIds.VDisks,
             className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({value, row}) => (
+            render: ({value}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as TVDiskStateInfo[], (el) => {
                         const donors = el.Donors;
 
                         return donors && donors.length > 0 ? (
                             <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk
-                                    data={el}
-                                    poolName={row[TableColumnsIds.PoolName]}
-                                    nodes={nodes}
-                                />
+                                <VDisk data={el} nodes={nodes} />
                                 {donors.map((donor) => {
                                     const isFullData = isFullVDiskData(donor);
 
@@ -275,7 +271,6 @@ function StorageGroups({
                                         <VDisk
                                             data={isFullData ? donor : {...donor, DonorMode: true}}
                                             // donor and acceptor are always in the same group
-                                            poolName={row[TableColumnsIds.PoolName]}
                                             nodes={nodes}
                                             key={stringifyVdiskId(
                                                 isFullData ? donor.VDiskId : donor,
@@ -286,11 +281,7 @@ function StorageGroups({
                             </Stack>
                         ) : (
                             <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk
-                                    data={el}
-                                    poolName={row[TableColumnsIds.PoolName]}
-                                    nodes={nodes}
-                                />
+                                <VDisk data={el} nodes={nodes} />
                             </div>
                         );
                     })}

package/dist/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;
-    }
 }

package/dist/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,
         },

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -16,7 +16,7 @@ import {STRUCTURE} from '../../Node/NodePages';
 import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
 import {VDiskPopup} from '../VDiskPopup';
 
-import type {IUnavailableDonor} from '../utils/types';
+import type {UnavailableDonor} from '../utils/types';
 import {NOT_AVAILABLE_SEVERITY} from '../utils';
 
 import './VDisk.scss';
@@ -49,13 +49,12 @@ const getColorSeverity = (color?: EFlag) => {
 };
 
 interface VDiskProps {
-    data?: TVDiskStateInfo | IUnavailableDonor;
-    poolName?: string;
+    data?: TVDiskStateInfo | UnavailableDonor;
     nodes?: NodesMap;
     compact?: boolean;
 }
 
-export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
+export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
     const isFullData = isFullVDiskData(data);
 
     const [severity, setSeverity] = useState(
@@ -125,13 +124,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
 
     return (
         <React.Fragment>
-            <VDiskPopup
-                data={data}
-                poolName={poolName}
-                nodes={nodes}
-                anchorRef={anchor}
-                open={isPopupVisible}
-            />
+            <VDiskPopup data={data} nodes={nodes} anchorRef={anchor} open={isPopupVisible} />
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
                 {data.NodeId && isFullData ? (
                     <InternalLink

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -13,7 +13,7 @@ import {stringifyVdiskId} from '../../../utils';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {isFullVDiskData} from '../../../utils/storage';
 
-import type {IUnavailableDonor} from '../utils/types';
+import type {UnavailableDonor} from '../utils/types';
 
 import {preparePDiskData} from '../PDiskPopup';
 
@@ -21,13 +21,13 @@ import './VDiskPopup.scss';
 
 const b = cn('vdisk-storage-popup');
 
-const prepareUnavailableVDiskData = (data: IUnavailableDonor, poolName?: string) => {
-    const {NodeId, PDiskId, VSlotId} = data;
+const prepareUnavailableVDiskData = (data: UnavailableDonor) => {
+    const {NodeId, PDiskId, VSlotId, StoragePoolName} = data;
 
     const vdiskData: InfoViewerItem[] = [{label: 'State', value: 'not available'}];
 
-    if (poolName) {
-        vdiskData.push({label: 'StoragePool', value: poolName});
+    if (StoragePoolName) {
+        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
     }
 
     vdiskData.push(
@@ -39,7 +39,7 @@ const prepareUnavailableVDiskData = (data: IUnavailableDonor, poolName?: string)
     return vdiskData;
 };
 
-const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
+const prepareVDiskData = (data: TVDiskStateInfo) => {
     const {
         VDiskId,
         VDiskState,
@@ -51,6 +51,7 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
         AllocatedSize,
         ReadThroughput,
         WriteThroughput,
+        StoragePoolName,
     } = data;
 
     const vdiskData: InfoViewerItem[] = [
@@ -58,8 +59,8 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
         {label: 'State', value: VDiskState ?? 'not available'},
     ];
 
-    if (poolName) {
-        vdiskData.push({label: 'StoragePool', value: poolName});
+    if (StoragePoolName) {
+        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
     }
 
     if (SatisfactionRank && SatisfactionRank.FreshRank?.Flag !== EFlag.Green) {
@@ -128,20 +129,16 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 };
 
 interface VDiskPopupProps extends PopupProps {
-    data: TVDiskStateInfo | IUnavailableDonor;
-    poolName?: string;
+    data: TVDiskStateInfo | UnavailableDonor;
     nodes?: NodesMap;
 }
 
-export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {
+export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
 
     const vdiskInfo = useMemo(
-        () =>
-            isFullData
-                ? prepareVDiskData(data, poolName)
-                : prepareUnavailableVDiskData(data, poolName),
-        [data, poolName, isFullData],
+        () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
+        [data, isFullData],
     );
     const pdiskInfo = useMemo(
         () => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),

package/dist/containers/Storage/utils/types.ts

@@ -1,5 +1,6 @@
 import {TVSlotId} from '../../../types/api/vdisk';
 
-export interface IUnavailableDonor extends TVSlotId {
+export interface UnavailableDonor extends TVSlotId {
     DonorMode?: boolean;
+    StoragePoolName?: string;
 }

package/dist/containers/Tablet/Tablet.scss

@@ -89,4 +89,8 @@
         line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
+
+    &__host {
+        width: 300px;
+    }
 }

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -1,7 +1,13 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {InternalLink} from '../../../components/InternalLink/InternalLink';
+
 import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
 import {calcUptime} from '../../../utils';
+import {getDefaultNodePath} from '../../Node/NodePages';
+
+import {b} from '../Tablet';
 
 const columns: Column<ITabletPreparedHistoryItem>[] = [
     {
@@ -9,12 +15,6 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
         align: DataTable.RIGHT,
         render: ({row}) => row.generation,
     },
-    {
-        name: 'Node ID',
-        align: DataTable.RIGHT,
-        sortable: false,
-        render: ({row}) => row.nodeId,
-    },
     {
         name: 'Change time',
         align: DataTable.RIGHT,
@@ -33,6 +33,28 @@ const columns: Column<ITabletPreparedHistoryItem>[] = [
             return row.leader ? 'leader' : row.followerId;
         },
     },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => {
+            return <InternalLink to={getDefaultNodePath(row.nodeId)}>{row.nodeId}</InternalLink>;
+        },
+    },
+    {
+        name: 'Node FQDN',
+        sortable: false,
+        render: ({row}) => {
+            if (!row.fqdn) {
+                return <span>—</span>;
+            }
+            return (
+                <div className={b('host')}>
+                    <EntityStatus name={row.fqdn} showStatus={false} hasClipboardButton />
+                </div>
+            );
+        },
+    },
 ];
 
 const TABLE_SETTINGS = {

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -80,7 +80,7 @@
         }
         &_degraded,
         &_yellow {
-            color: var(--yc-color-text-warning-medium);
+            color: var(--yc-color-text-warning);
             background-color: var(--yc-color-base-warning);
         }