feat: show developer ui links for hosts and tablets (#1017)

Author: kunga

src/components/DeveloperUiLink/DeveloperUiLink.scss

@@ -0,0 +1,11 @@
+.developer-ui-link {
+    display: none;
+
+    &_visible {
+        display: inline-block;
+    }
+
+    .data-table__row:hover & {
+        display: inline-block;
+    }
+}

src/components/DeveloperUiLink/DeveloperUiLink.tsx

@@ -0,0 +1,22 @@
+import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+import './DeveloperUiLink.scss';
+
+const b = cn('developer-ui-link');
+
+interface DeveloperUiLinkProps {
+    className?: string;
+    visible?: boolean;
+    href: string;
+}
+
+export function DeveloperUiLink({href, visible = false, className}: DeveloperUiLinkProps) {
+    return (
+        <Button size="s" href={href} className={b({visible}, className)} target="_blank">
+            <Icon data={ArrowUpRightFromSquare} />
+        </Button>
+    );
+}

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -5,6 +5,7 @@ import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
+import {createDeveloperUILinkWithNodeId} from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
@@ -25,15 +26,22 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
     }
 
     const isNodeAvailable = !isUnavailableNode(node);
-    const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+
+    let nodeHref: string | undefined;
+    if (getNodeRef) {
+        nodeHref = getNodeRef(node) + 'internal';
+    } else if (node.NodeId) {
+        nodeHref = createDeveloperUILinkWithNodeId(node.NodeId) + 'internal';
+    }
+
     const nodePath = isNodeAvailable
         ? getDefaultNodePath(node.NodeId, {
               tenantName: node.TenantName,
           })
         : undefined;
 
-    const additionalControls = nodeRef ? (
-        <Button size="s" href={nodeRef} className={b('external-button')} target="_blank">
+    const additionalControls = nodeHref ? (
+        <Button size="s" href={nodeHref} className={b('external-button')} target="_blank">
             <Icon data={ArrowUpRightFromSquare} />
         </Button>
     ) : null;

src/containers/Tablets/Tablets.tsx

@@ -4,12 +4,14 @@ import {Icon, Label, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import {DeveloperUiLink} from '../../components/DeveloperUiLink/DeveloperUiLink';
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import routes, {createHref} from '../../routes';
+import {backend} from '../../store';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
@@ -41,6 +43,7 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
     },
     {
         name: 'TabletId',
+        width: 230,
         get header() {
             return i18n('Tablet');
         },
@@ -49,7 +52,17 @@ const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
                 row.TabletId &&
                 createHref(routes.tablet, {id: row.TabletId}, {nodeId: row.NodeId, type: row.Type});
 
-            return <InternalLink to={tabletPath}>{row.TabletId}</InternalLink>;
+            return (
+                <EntityStatus
+                    name={row.TabletId?.toString()}
+                    path={tabletPath}
+                    hasClipboardButton
+                    showStatus={false}
+                    additionalControls={
+                        <DeveloperUiLink href={`${backend}/tablets?TabletID=${row.TabletId}`} />
+                    }
+                />
+            );
         },
     },
     {

src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx

@@ -2,10 +2,13 @@ import DataTable from '@gravity-ui/react-data-table';
 import type {Column} from '@gravity-ui/react-data-table';
 import type {Location} from 'history';
 
+import {DeveloperUiLink} from '../../../../components/DeveloperUiLink/DeveloperUiLink';
+import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../../components/InternalLink';
 import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
 import routes, {createHref} from '../../../../routes';
+import {backend} from '../../../../store';
 import {getLoadSeverityForShard} from '../../../../store/reducers/tenantOverview/topShards/utils';
 import type {KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
@@ -83,9 +86,15 @@ const tabletIdColumn: Column<KeyValueRow> = {
             return '–';
         }
         return (
-            <InternalLink to={createHref(routes.tablet, {id: row.TabletId})}>
-                {row.TabletId}
-            </InternalLink>
+            <EntityStatus
+                name={row.TabletId?.toString()}
+                path={createHref(routes.tablet, {id: row.TabletId})}
+                hasClipboardButton
+                showStatus={false}
+                additionalControls={
+                    <DeveloperUiLink href={`${backend}/tablets?TabletID=${row.TabletId}`} />
+                }
+            />
         );
     },
     sortable: false,