From ea4d3a95ffe99c8380f0a8971ff41f9b9b534aa7 Mon Sep 17 00:00:00 2001
From: Hellen <el-makarova@yandex-team.ru>
Date: Wed, 23 Oct 2024 17:59:35 +0300
Subject: [PATCH] fix(EntityStatus): remove additionalControls, fix
 ClipboardButton layout (#1524)

---
 package-lock.json                             | 38 +++++-----
 package.json                                  |  2 +-
 src/components/EntityStatus/EntityStatus.scss | 26 ++++++-
 src/components/EntityStatus/EntityStatus.tsx  | 43 ++++++-----
 .../MonitoringButton/MonitoringButton.scss    | 11 ---
 .../MonitoringButton/MonitoringButton.tsx     | 16 +---
 .../NodeHostWrapper/NodeHostWrapper.tsx       |  8 +-
 .../TabletNameWrapper/TabletNameWrapper.tsx   | 49 ++++++++++++
 src/components/TabletNameWrapper/i18n/en.json |  4 +
 .../TabletNameWrapper/i18n/index.ts           |  7 ++
 .../TenantNameWrapper/TenantNameWrapper.tsx   | 75 +++++++++++++++++++
 src/components/TenantNameWrapper/i18n/en.json |  5 ++
 .../TenantNameWrapper/i18n/index.ts           |  7 ++
 .../NodeEndpointsTooltipContent.scss          |  7 ++
 .../NodeEndpointsTooltipContent.tsx           | 50 +++++++++++--
 .../NodeEndpointsTooltipContent/i18n/en.json  |  5 ++
 .../NodeEndpointsTooltipContent/i18n/index.ts |  7 ++
 src/containers/App/App.scss                   |  6 +-
 .../ExtendedCluster/ExtendedCluster.tsx       |  4 +-
 .../ExtendedTenant/ExtendedTenant.tsx         |  4 +-
 src/containers/Cluster/Cluster.scss           | 19 ++---
 src/containers/Cluster/Cluster.tsx            |  1 -
 src/containers/Tablets/TabletsTable.tsx       | 22 +-----
 .../TenantOverview/TenantOverview.tsx         |  5 +-
 .../TopShards/getTopShardsColumns.tsx         | 20 +----
 src/containers/Tenants/Tenants.tsx            | 48 ++----------
 src/types/additionalProps.ts                  |  2 +-
 27 files changed, 306 insertions(+), 185 deletions(-)
 delete mode 100644 src/components/MonitoringButton/MonitoringButton.scss
 create mode 100644 src/components/TabletNameWrapper/TabletNameWrapper.tsx
 create mode 100644 src/components/TabletNameWrapper/i18n/en.json
 create mode 100644 src/components/TabletNameWrapper/i18n/index.ts
 create mode 100644 src/components/TenantNameWrapper/TenantNameWrapper.tsx
 create mode 100644 src/components/TenantNameWrapper/i18n/en.json
 create mode 100644 src/components/TenantNameWrapper/i18n/index.ts
 create mode 100644 src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json
 create mode 100644 src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/index.ts

diff --git a/package-lock.json b/package-lock.json
index 7c7f71460..d519c0989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@gravity-ui/paranoid": "^2.0.1",
         "@gravity-ui/react-data-table": "^2.1.1",
         "@gravity-ui/table": "^0.5.0",
-        "@gravity-ui/uikit": "^6.20.1",
+        "@gravity-ui/uikit": "^6.33.0",
         "@gravity-ui/websql-autocomplete": "^9.1.0",
         "@hookform/resolvers": "^3.9.0",
         "@reduxjs/toolkit": "^2.2.3",
@@ -3927,9 +3927,9 @@
       }
     },
     "node_modules/@gravity-ui/i18n": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz",
-      "integrity": "sha512-ZvaQtRUf4Yl9zi0+SMzjlDeHp9+p5IXkNu2k6RtW04c+RYKA1jX+umeKNwzft4iR3+KxDlpLX2trTFEW6W7HKQ=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.6.0.tgz",
+      "integrity": "sha512-ftMLGZy7migLEtPkZa8jM6onipIeEOnEg9976RRpg3f39H+Q2bYYAGMjU+NJpWQ90ZDp6ztYLt5WAMEg248tEg=="
     },
     "node_modules/@gravity-ui/icons": {
       "version": "2.10.0",
@@ -4044,18 +4044,18 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.20.1.tgz",
-      "integrity": "sha512-BtkEWkpPLvXm7C/R23jp1nRwWkcd+pmBbsuJZU4qoYASFk0uhq7apkrrPcfCX+9Qk3PXiZg8xHwUlqjG33y0bw==",
+      "version": "6.33.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.33.0.tgz",
+      "integrity": "sha512-QBIkSABA/psZSUhyF9Xgdhzxk4Z4OS/+eZAruEbqlH8QYMweUanlYMmSZoVGzHBxsKO4l/Qxr+MybPY5bOsWkQ==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
-        "@gravity-ui/i18n": "^1.3.0",
+        "@gravity-ui/i18n": "^1.6.0",
         "@gravity-ui/icons": "^2.8.1",
         "@popperjs/core": "^2.11.8",
         "blueimp-md5": "^2.19.0",
         "focus-trap": "^7.5.4",
         "lodash": "^4.17.21",
-        "rc-slider": "^10.5.0",
+        "rc-slider": "^10.6.2",
         "react-beautiful-dnd": "^13.1.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-popper": "^2.3.0",
@@ -20634,13 +20634,13 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz",
-      "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==",
+      "version": "10.6.2",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.6.2.tgz",
+      "integrity": "sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
-        "rc-util": "^5.27.0"
+        "rc-util": "^5.36.0"
       },
       "engines": {
         "node": ">=8.x"
@@ -20651,9 +20651,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.39.1",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.39.1.tgz",
-      "integrity": "sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==",
+      "version": "5.43.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz",
+      "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^18.2.0"
@@ -20664,9 +20664,9 @@
       }
     },
     "node_modules/rc-util/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/react": {
       "version": "18.3.1",
diff --git a/package.json b/package.json
index a1295a5f2..126d7595d 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@gravity-ui/paranoid": "^2.0.1",
     "@gravity-ui/react-data-table": "^2.1.1",
     "@gravity-ui/table": "^0.5.0",
-    "@gravity-ui/uikit": "^6.20.1",
+    "@gravity-ui/uikit": "^6.33.0",
     "@gravity-ui/websql-autocomplete": "^9.1.0",
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.3",
diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index 3769c6ba9..667862ad8 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -1,12 +1,12 @@
 @import '../../styles/mixins.scss';
 
 .entity-status {
+    --button-width: 28px;
     position: relative;
 
     display: inline-flex;
     align-items: center;
 
-    min-width: 90px;
     max-width: 100%;
     height: 100%;
 
@@ -20,6 +20,18 @@
         color: var(--g-color-text-secondary);
 
         @include table-hover-appearing-button();
+
+        &_visible {
+            opacity: 1;
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+
+        overflow: hidden;
+
+        padding-right: var(--button-width);
     }
 
     &__controls-wrapper {
@@ -34,13 +46,18 @@
         width: 0;
         height: 100%;
 
-        background-color: var(--g-color-base-float);
+        &_visible {
+            width: min-content;
+            padding: var(--g-spacing-1);
+        }
 
         .data-table__row:hover &,
         .ydb-paginated-table__row:hover &,
         .ydb-tree-view__item & {
             width: min-content;
             padding: var(--g-spacing-1);
+
+            background-color: var(--g-color-base-float);
         }
     }
 
@@ -57,13 +74,18 @@
     }
 
     &__link {
+        display: inline-block;
         overflow: hidden;
 
+        width: calc(100% + var(--button-width));
+        margin-top: 5px;
+
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
     &__link_with-left-trim {
+        text-align: end;
         direction: rtl;
 
         .entity-status__name {
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index 7866c92b2..1f73a96a4 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -28,8 +28,6 @@ interface EntityStatusProps {
     clipboardButtonAlwaysVisible?: boolean;
 
     className?: string;
-
-    additionalControls?: React.ReactNode;
 }
 
 export function EntityStatus({
@@ -50,8 +48,6 @@ export function EntityStatus({
     clipboardButtonAlwaysVisible = false,
 
     className,
-
-    additionalControls,
 }: EntityStatusProps) {
     const renderIcon = () => {
         if (!showStatus) {
@@ -93,22 +89,29 @@ export function EntityStatus({
                     {label}
                 </span>
             )}
-            <span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
-            <div className={b('controls-wrapper')}>
-                {hasClipboardButton && (
-                    <ClipboardButton
-                        text={name}
-                        size="xs"
-                        view="normal"
-                        className={b('clipboard-button', {
-                            visible: clipboardButtonAlwaysVisible,
-                        })}
-                    />
-                )}
-                {additionalControls && (
-                    <span className={b('additional-controls')}>{additionalControls}</span>
-                )}
-            </div>
+            {(path || name) && (
+                <div className={b('wrapper')}>
+                    <span className={b('link', {'with-left-trim': withLeftTrim})}>
+                        {renderLink()}
+                    </span>
+                    {hasClipboardButton && (
+                        <div
+                            className={b('controls-wrapper', {
+                                visible: clipboardButtonAlwaysVisible,
+                            })}
+                        >
+                            <ClipboardButton
+                                text={name}
+                                size="xs"
+                                view="normal"
+                                className={b('clipboard-button', {
+                                    visible: clipboardButtonAlwaysVisible,
+                                })}
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
         </div>
     );
 }
diff --git a/src/components/MonitoringButton/MonitoringButton.scss b/src/components/MonitoringButton/MonitoringButton.scss
deleted file mode 100644
index 09e1fb111..000000000
--- a/src/components/MonitoringButton/MonitoringButton.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.kv-monitoring-button {
-    display: none;
-
-    &_visible {
-        display: inline-block;
-    }
-
-    .data-table__row:hover & {
-        display: inline-block;
-    }
-}
diff --git a/src/components/MonitoringButton/MonitoringButton.tsx b/src/components/MonitoringButton/MonitoringButton.tsx
index 6a36d19e4..2c57b5dd1 100644
--- a/src/components/MonitoringButton/MonitoringButton.tsx
+++ b/src/components/MonitoringButton/MonitoringButton.tsx
@@ -1,32 +1,20 @@
 import type {ButtonSize} from '@gravity-ui/uikit';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {cn} from '../../utils/cn';
-
 import monitoringIcon from '../../assets/icons/monitoring.svg';
 
-import './MonitoringButton.scss';
-
-const b = cn('kv-monitoring-button');
-
 interface MonitoringButtonProps {
     className?: string;
-    visible?: boolean;
     href: string;
     size?: ButtonSize;
 }
 
-export function MonitoringButton({
-    href,
-    visible = false,
-    className,
-    size = 's',
-}: MonitoringButtonProps) {
+export function MonitoringButton({href, className, size = 'xs'}: MonitoringButtonProps) {
     return (
         <Button
             href={href}
             target="_blank"
-            className={b({visible}, className)}
+            className={className}
             size={size}
             title="Monitoring dashboard"
         >
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
index b185684d3..5ad0557f4 100644
--- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx
+++ b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -6,7 +6,6 @@ import type {TSystemStateInfo} from '../../types/api/nodes';
 import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
-import {DeveloperUILinkButton} from '../DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 
@@ -42,14 +41,10 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
           })
         : undefined;
 
-    const additionalControls = nodeHref ? (
-        <DeveloperUILinkButton href={nodeHref} size="xs" />
-    ) : null;
-
     return (
         <CellWithPopover
             disabled={!isNodeAvailable}
-            content={<NodeEndpointsTooltipContent data={node} />}
+            content={<NodeEndpointsTooltipContent data={node} nodeHref={nodeHref} />}
             placement={['top', 'bottom']}
             behavior={PopoverBehavior.Immediate}
         >
@@ -58,7 +53,6 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
                 status={node.SystemState}
                 path={nodePath}
                 hasClipboardButton
-                additionalControls={additionalControls}
             />
         </CellWithPopover>
     );
diff --git a/src/components/TabletNameWrapper/TabletNameWrapper.tsx b/src/components/TabletNameWrapper/TabletNameWrapper.tsx
new file mode 100644
index 000000000..e5b1066fa
--- /dev/null
+++ b/src/components/TabletNameWrapper/TabletNameWrapper.tsx
@@ -0,0 +1,49 @@
+import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
+
+import {getTabletPagePath} from '../../routes';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
+import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
+import {useTypedSelector} from '../../utils/hooks';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import i18n from './i18n';
+
+interface TabletNameWrapperProps {
+    tabletId: string | number;
+    database?: string;
+}
+
+export function TabletNameWrapper({tabletId, database}: TabletNameWrapperProps) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
+    const tabletPath = getTabletPagePath(tabletId, {
+        tenantName: database,
+    });
+
+    return (
+        <CellWithPopover
+            disabled={!isUserAllowedToMakeChanges}
+            content={
+                <DefinitionList responsive>
+                    <DefinitionList.Item name={i18n('field_links')}>
+                        <LinkWithIcon
+                            title={i18n('context_developer-ui')}
+                            url={createTabletDeveloperUIHref(tabletId)}
+                        />
+                    </DefinitionList.Item>
+                </DefinitionList>
+            }
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <EntityStatus
+                name={tabletId.toString()}
+                path={tabletPath}
+                hasClipboardButton
+                showStatus={false}
+            />
+        </CellWithPopover>
+    );
+}
diff --git a/src/components/TabletNameWrapper/i18n/en.json b/src/components/TabletNameWrapper/i18n/en.json
new file mode 100644
index 000000000..0b488ea5d
--- /dev/null
+++ b/src/components/TabletNameWrapper/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "field_links": "Links",
+  "context_developer-ui": "Developer UI"
+}
diff --git a/src/components/TabletNameWrapper/i18n/index.ts b/src/components/TabletNameWrapper/i18n/index.ts
new file mode 100644
index 000000000..e63e41f80
--- /dev/null
+++ b/src/components/TabletNameWrapper/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tablet-name-wrapper';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
new file mode 100644
index 000000000..5810fcf0d
--- /dev/null
+++ b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
@@ -0,0 +1,75 @@
+import {DefinitionList, PopoverBehavior} from '@gravity-ui/uikit';
+
+import {getTenantPath} from '../../containers/Tenant/TenantPages';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
+import type {PreparedTenant} from '../../store/reducers/tenants/types';
+import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalProps';
+import {useTypedSelector} from '../../utils/hooks';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import i18n from './i18n';
+
+interface TenantNameWrapperProps {
+    tenant: PreparedTenant;
+    additionalTenantsProps?: AdditionalTenantsProps;
+}
+
+const getTenantBackend = (
+    tenant: PreparedTenant,
+    additionalTenantsProps?: AdditionalTenantsProps,
+) => {
+    if (typeof additionalTenantsProps?.prepareTenantBackend !== 'function') {
+        return undefined;
+    }
+
+    let backend: string | NodeAddress | undefined = tenant.MonitoringEndpoint ?? tenant.backend;
+    const nodeIds = tenant.NodeIds ?? tenant.sharedNodeIds;
+    if (!backend && nodeIds && nodeIds.length > 0) {
+        const index = Math.floor(Math.random() * nodeIds.length);
+        backend = {NodeId: nodeIds[index]};
+    }
+    return additionalTenantsProps.prepareTenantBackend(backend);
+};
+
+export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWrapperProps) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+
+    const backend = getTenantBackend(tenant, additionalTenantsProps);
+    const isExternalLink = Boolean(backend);
+
+    const monitoringLink = additionalTenantsProps?.getMonitoringLink?.(tenant.Name, tenant.Type);
+
+    return (
+        <CellWithPopover
+            disabled={!isUserAllowedToMakeChanges || !monitoringLink}
+            content={
+                monitoringLink ? (
+                    <DefinitionList responsive>
+                        <DefinitionList.Item name={i18n('field_links')}>
+                            <LinkWithIcon
+                                title={i18n('field_monitoring-link')}
+                                url={monitoringLink}
+                            />
+                        </DefinitionList.Item>
+                    </DefinitionList>
+                ) : null
+            }
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <EntityStatus
+                externalLink={isExternalLink}
+                name={tenant.Name || i18n('context_unknown')}
+                withLeftTrim={true}
+                status={tenant.Overall}
+                hasClipboardButton
+                path={getTenantPath({
+                    name: tenant.Name,
+                    backend,
+                })}
+            />
+        </CellWithPopover>
+    );
+}
diff --git a/src/components/TenantNameWrapper/i18n/en.json b/src/components/TenantNameWrapper/i18n/en.json
new file mode 100644
index 000000000..f3032a1b3
--- /dev/null
+++ b/src/components/TenantNameWrapper/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "field_links": "Links",
+  "field_monitoring-link": "Monitoring",
+  "context_unknown": "unknown database"
+}
diff --git a/src/components/TenantNameWrapper/i18n/index.ts b/src/components/TenantNameWrapper/i18n/index.ts
new file mode 100644
index 000000000..32fa0c249
--- /dev/null
+++ b/src/components/TenantNameWrapper/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tenant-name-wrapper';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss b/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss
index 75a234de4..234b60010 100644
--- a/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss
+++ b/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss
@@ -2,4 +2,11 @@
     .info-viewer__value {
         min-width: 70px;
     }
+    &__list-container {
+        padding-right: 20px;
+    }
+    &__definition {
+        text-align: right;
+        word-break: break-all;
+    }
 }
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx b/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx
index 336f446f6..be2c5b775 100644
--- a/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx
+++ b/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx
@@ -1,7 +1,13 @@
+import type {DefinitionListItemProps} from '@gravity-ui/uikit';
+import {DefinitionList} from '@gravity-ui/uikit';
+
+import {selectIsUserAllowedToMakeChanges} from '../../../store/reducers/authentication/authentication';
 import type {TSystemStateInfo} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
-import type {InfoViewerItem} from '../../InfoViewer';
-import {InfoViewer} from '../../InfoViewer';
+import {useTypedSelector} from '../../../utils/hooks';
+import {LinkWithIcon} from '../../LinkWithIcon/LinkWithIcon';
+
+import i18n from './i18n';
 
 import './NodeEndpointsTooltipContent.scss';
 
@@ -9,22 +15,52 @@ const b = cn('ydb-node-endpoints-tooltip-content');
 
 interface NodeEdpointsTooltipProps {
     data?: TSystemStateInfo;
+    nodeHref?: string;
 }
 
-export const NodeEndpointsTooltipContent = ({data}: NodeEdpointsTooltipProps) => {
-    const info: InfoViewerItem[] = [];
+export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsTooltipProps) => {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const info: (DefinitionListItemProps & {key: string})[] = [];
 
     if (data?.Rack) {
-        info.push({label: 'Rack', value: data.Rack});
+        info.push({name: i18n('field_rack'), children: data.Rack, key: 'Rack'});
     }
 
     if (data?.Endpoints && data.Endpoints.length) {
         data.Endpoints.forEach(({Name, Address}) => {
             if (Name && Address) {
-                info.push({label: Name, value: Address});
+                info.push({name: Name, children: Address, key: Name});
             }
         });
     }
+    if (data?.Host) {
+        info.push({
+            name: i18n('field_host'),
+            children: data.Host,
+            copyText: data.Host,
+            key: 'Host',
+        });
+    }
+
+    if (isUserAllowedToMakeChanges && nodeHref) {
+        info.push({
+            name: 'Links',
+            children: <LinkWithIcon title={i18n('context_developer-ui')} url={nodeHref} />,
+            key: 'developerUi',
+        });
+    }
 
-    return <InfoViewer className={b(null)} info={info} dots={false} size={'s'} />;
+    return (
+        <div className={b('list-container')}>
+            <DefinitionList responsive>
+                {info.map(({children, key, ...rest}) => {
+                    return (
+                        <DefinitionList.Item key={key} {...rest}>
+                            <span className={b('definition')}>{children}</span>
+                        </DefinitionList.Item>
+                    );
+                })}
+            </DefinitionList>
+        </div>
+    );
 };
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json b/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json
new file mode 100644
index 000000000..ad48d4961
--- /dev/null
+++ b/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "field_rack": "Rack",
+  "field_host": "Host",
+  "context_developer-ui": "Developer UI"
+}
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/index.ts b/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/index.ts
new file mode 100644
index 000000000..524bc5889
--- /dev/null
+++ b/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-node-name-tooltip';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
index fe68a4318..a696a34d2 100644
--- a/src/containers/App/App.scss
+++ b/src/containers/App/App.scss
@@ -46,6 +46,8 @@ body,
     --ydb-color-status-red: var(--g-color-base-danger-heavy);
     --ydb-color-status-blue: var(--g-color-base-info-heavy);
     --ydb-color-status-black: var(--g-color-base-misc-heavy);
+
+    --g-popover-max-width: 500px;
 }
 
 :is(#tab, .g-tabs-item_active .g-tabs-item__title) {
@@ -103,7 +105,3 @@ body,
 .app_embedded {
     font-family: 'Rubik', sans-serif;
 }
-
-.g-popup {
-    max-width: 500px;
-}
diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
index 70e42e4cf..e2e00815e 100644
--- a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
+++ b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
@@ -1,6 +1,5 @@
 import {ClipboardButton} from '@gravity-ui/uikit';
 
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import type {
     AdditionalClusterProps,
     AdditionalTenantsProps,
@@ -103,8 +102,7 @@ const getAdditionalTenantsProps = (
     if (monitoring && getMonitoringLink) {
         additionalTenantsProps.getMonitoringLink = (dbName?: string, dbType?: ETenantType) => {
             if (dbName && dbType) {
-                const href = getMonitoringLink({monitoring, dbName, dbType, clusterName});
-                return <MonitoringButton href={href} />;
+                return getMonitoringLink({monitoring, dbName, dbType, clusterName});
             }
 
             return null;
diff --git a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
index b92698d37..31df00a63 100644
--- a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
+++ b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
@@ -1,4 +1,3 @@
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
@@ -20,12 +19,11 @@ export function ExtendedTenant({
     const additionalTenantProps = {
         getMonitoringLink: (dbName?: string, dbType?: ETenantType) => {
             if (monitoring && dbName && dbType && getMonitoringLink) {
-                const href = getMonitoringLink({
+                return getMonitoringLink({
                     monitoring,
                     dbName,
                     dbType,
                 });
-                return href ? <MonitoringButton href={href} visible={true} size="xs" /> : null;
             }
 
             return null;
diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss
index f2a61a26f..51b407308 100644
--- a/src/containers/Cluster/Cluster.scss
+++ b/src/containers/Cluster/Cluster.scss
@@ -31,8 +31,11 @@
         z-index: 3;
 
         margin-top: 20px;
-        margin-right: -20px;
-        padding-right: 20px;
+        margin-right: -40px;
+        padding-right: 40px;
+        padding-left: 20px;
+
+        transform: translateX(-20px);
         @include sticky-top();
     }
     &__tabs {
@@ -61,20 +64,10 @@
     &__tablets {
         .data-table__sticky_moving {
             // Place table head right after controls
-            top: 60px !important;
+            top: 40px !important;
         }
     }
 
-    &__fake-block {
-        position: sticky;
-        z-index: 3;
-        top: 40px;
-
-        height: 20px;
-
-        background-color: var(--g-color-base-background);
-    }
-
     .ydb-table-with-controls-layout {
         --data-table-sticky-top-offset: 102px;
     }
diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
index 84810a7c1..23504308a 100644
--- a/src/containers/Cluster/Cluster.tsx
+++ b/src/containers/Cluster/Cluster.tsx
@@ -166,7 +166,6 @@ export function Cluster({
                     }
                 >
                     <div className={b('tablets')}>
-                        <div className={b('fake-block')} />
                         <TabletsTable
                             loading={infoLoading}
                             tablets={clusterTablets}
diff --git a/src/containers/Tablets/TabletsTable.tsx b/src/containers/Tablets/TabletsTable.tsx
index e26061b5d..6b9ea49a0 100644
--- a/src/containers/Tablets/TabletsTable.tsx
+++ b/src/containers/Tablets/TabletsTable.tsx
@@ -3,20 +3,18 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import {Icon, Text} from '@gravity-ui/uikit';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DeveloperUILinkButton} from '../../components/DeveloperUILinkButton/DeveloperUILinkButton';
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../components/InternalLink';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
+import {TabletNameWrapper} from '../../components/TabletNameWrapper/TabletNameWrapper';
 import {TabletState} from '../../components/TabletState/TabletState';
-import {getTabletPagePath} from '../../routes';
 import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {tabletApi} from '../../store/reducers/tablet';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
-import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../utils/hooks';
 import {getDefaultNodePath} from '../Node/NodePages';
 
@@ -50,23 +48,7 @@ function getColumns({database}: {database?: string}) {
                     return EMPTY_DATA_PLACEHOLDER;
                 }
 
-                const tabletPath = getTabletPagePath(row.TabletId, {
-                    tenantName: database,
-                });
-
-                return (
-                    <EntityStatus
-                        name={row.TabletId?.toString()}
-                        path={tabletPath}
-                        hasClipboardButton
-                        showStatus={false}
-                        additionalControls={
-                            <DeveloperUILinkButton
-                                href={createTabletDeveloperUIHref(row.TabletId)}
-                            />
-                        }
-                    />
-                );
+                return <TabletNameWrapper tabletId={row.TabletId} database={database} />;
             },
         },
         {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
index a16e1c2e8..facc3ca1a 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -1,6 +1,7 @@
 import {Loader} from '@gravity-ui/uikit';
 
 import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
+import {MonitoringButton} from '../../../../components/MonitoringButton/MonitoringButton';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {tenantApi} from '../../../../store/reducers/tenant/tenant';
@@ -147,13 +148,15 @@ export function TenantOverview({
         );
     }
 
+    const monitoringLink = additionalTenantProps?.getMonitoringLink?.(Name, Type);
+
     return (
         <div className={b()}>
             <div className={b('info')}>
                 <div className={b('top-label')}>{tenantType}</div>
                 <div className={b('top')}>
                     {renderName()}
-                    {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+                    {monitoringLink && <MonitoringButton href={monitoringLink} />}
                 </div>
                 <MetricsCards
                     poolsCpuStats={poolsStats}
diff --git a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx
index c6182c4c2..b5774bcf9 100644
--- a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx
+++ b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx
@@ -2,17 +2,14 @@ import DataTable from '@gravity-ui/react-data-table';
 import type {Column} from '@gravity-ui/react-data-table';
 import type {Location} from 'history';
 
-import {DeveloperUILinkButton} from '../../../../components/DeveloperUILinkButton/DeveloperUILinkButton';
-import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../../components/InternalLink';
 import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import {TabletNameWrapper} from '../../../../components/TabletNameWrapper/TabletNameWrapper';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
-import {getTabletPagePath} from '../../../../routes';
 import {getLoadSeverityForShard} from '../../../../store/reducers/tenantOverview/topShards/utils';
 import type {KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import {formatNumber, roundToPrecision} from '../../../../utils/dataFormatters/dataFormatters';
-import {createTabletDeveloperUIHref} from '../../../../utils/developerUI/developerUI';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
 export const TOP_SHARDS_COLUMNS_WIDTH_LS_KEY = 'topShardsColumnsWidth';
@@ -85,20 +82,7 @@ const tabletIdColumn: Column<KeyValueRow> = {
         if (!row.TabletId) {
             return '–';
         }
-        return (
-            <EntityStatus
-                name={row.TabletId?.toString()}
-                path={getTabletPagePath(row.TabletId)}
-                hasClipboardButton
-                showStatus={false}
-                additionalControls={
-                    <DeveloperUILinkButton
-                        href={createTabletDeveloperUIHref(row.TabletId)}
-                        size="xs"
-                    />
-                }
-            />
-        );
+        return <TabletNameWrapper tabletId={row.TabletId} />;
     },
     sortable: false,
     width: 220,
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
index 0547e94db..8656334f8 100644
--- a/src/containers/Tenants/Tenants.tsx
+++ b/src/containers/Tenants/Tenants.tsx
@@ -5,7 +5,6 @@ import DataTable from '@gravity-ui/react-data-table';
 import {Button} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
-import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Illustration} from '../../components/Illustration';
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
@@ -13,6 +12,7 @@ import {ProblemFilter} from '../../components/ProblemFilter';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../components/Search';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {TenantNameWrapper} from '../../components/TenantNameWrapper/TenantNameWrapper';
 import {clusterName} from '../../store';
 import {
     ProblemFilterValues,
@@ -27,7 +27,7 @@ import {
 } from '../../store/reducers/tenants/selectors';
 import {setSearchValue, tenantsApi} from '../../store/reducers/tenants/tenants';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
-import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalProps';
+import type {AdditionalTenantsProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {
@@ -36,7 +36,6 @@ import {
     formatStorageValuesToGb,
 } from '../../utils/dataFormatters/dataFormatters';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
-import {getTenantPath} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
@@ -92,47 +91,16 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     };
 
     const renderTable = () => {
-        const getTenantBackend = (tenant: PreparedTenant) => {
-            if (typeof additionalTenantsProps?.prepareTenantBackend !== 'function') {
-                return undefined;
-            }
-
-            let backend: string | NodeAddress | undefined =
-                tenant.MonitoringEndpoint ?? tenant.backend;
-            const nodeIds = tenant.NodeIds ?? tenant.sharedNodeIds;
-            if (!backend && nodeIds && nodeIds.length > 0) {
-                const index = Math.floor(Math.random() * nodeIds.length);
-                backend = {NodeId: nodeIds[index]};
-            }
-            return additionalTenantsProps.prepareTenantBackend(backend);
-        };
-
         const columns: Column<PreparedTenant>[] = [
             {
                 name: 'Name',
                 header: 'Database',
-                render: ({row}) => {
-                    const backend = getTenantBackend(row);
-                    const isExternalLink = Boolean(backend);
-                    return (
-                        <EntityStatus
-                            externalLink={isExternalLink}
-                            className={b('name')}
-                            name={row.Name || 'unknown database'}
-                            withLeftTrim={true}
-                            status={row.Overall}
-                            hasClipboardButton
-                            path={getTenantPath({
-                                name: row.Name,
-                                backend,
-                            })}
-                            additionalControls={additionalTenantsProps?.getMonitoringLink?.(
-                                row.Name,
-                                row.Type,
-                            )}
-                        />
-                    );
-                },
+                render: ({row}) => (
+                    <TenantNameWrapper
+                        tenant={row}
+                        additionalTenantsProps={additionalTenantsProps}
+                    />
+                ),
                 width: 440,
                 sortable: true,
                 defaultOrder: DataTable.DESCENDING,
diff --git a/src/types/additionalProps.ts b/src/types/additionalProps.ts
index 64712d96f..cdab115af 100644
--- a/src/types/additionalProps.ts
+++ b/src/types/additionalProps.ts
@@ -20,7 +20,7 @@ export interface AdditionalClusterProps {
 
 export interface AdditionalTenantsProps {
     prepareTenantBackend?: (backend: string | NodeAddress | undefined) => string | undefined;
-    getMonitoringLink?: (name?: string, type?: ETenantType) => React.ReactNode;
+    getMonitoringLink?: (name?: string, type?: ETenantType) => string | null;
 }
 
 export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;