feat(Node): rework page

Author: artemmufazalov

src/components/BasicNodeViewer/BasicNodeViewer.scss

@@ -1,4 +1,4 @@
-import type {EFlag} from '../../types/api/enums';
+import {EFlag} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 
@@ -8,12 +8,17 @@ const b = cn('ydb-entity-page-title');
 
 interface EntityPageTitleProps {
     entityName: React.ReactNode;
-    status: EFlag;
+    status?: EFlag;
     id: React.ReactNode;
     className?: string;
 }
 
-export function EntityPageTitle({entityName, status, id, className}: EntityPageTitleProps) {
+export function EntityPageTitle({
+    entityName,
+    status = EFlag.Grey,
+    id,
+    className,
+}: EntityPageTitleProps) {
     return (
         <div className={b(null, className)}>
             <span className={b('prefix')}>{entityName}</span>

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -3,15 +3,11 @@
 .full-node-viewer {
     @include mixins.body-2-typography();
 
-    &__common-info {
+    &__section {
         display: flex;
         flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
-    }
 
-    &__section {
-        border-radius: 10px;
+        width: 500px;
 
         &_pools {
             display: grid;
@@ -26,8 +22,6 @@
     }
 
     &__section-title {
-        margin: 15px 0 10px;
-
-        font-weight: 600;
+        @include mixins.info-viewer-title();
     }
 }

src/components/BasicNodeViewer/index.ts

@@ -1,83 +1,110 @@
+import {Flex} from '@gravity-ui/uikit';
+
 import type {PreparedNode} from '../../store/reducers/node/types';
 import {cn} from '../../utils/cn';
-import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
+import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
 import {InfoViewer} from '../InfoViewer/InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {NodeUptime} from '../UptimeViewer/UptimeViewer';
 
+import i18n from './i18n';
+
 import './FullNodeViewer.scss';
 
 const b = cn('full-node-viewer');
 
 interface FullNodeViewerProps {
-    node: PreparedNode | undefined;
+    node?: PreparedNode;
     className?: string;
 }
+const getLoadAverageIntervalTitle = (index: number) => {
+    return [i18n('la-interval-1m'), i18n('la-interval-5m'), i18n('la-interval-15m')][index];
+};
 
 export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
-    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
-        label: Name,
-        value: Address,
-    }));
+    const developerUIHref = useNodeDeveloperUIHref(node);
 
     const commonInfo: InfoViewerItem[] = [];
 
-    // Do not add DB field for static nodes (they have no Tenants)
     if (node?.Tenants?.length) {
-        commonInfo.push({label: 'Database', value: node.Tenants[0]});
+        commonInfo.push({label: i18n('database'), value: node.Tenants[0]});
     }
 
     commonInfo.push(
-        {label: 'Version', value: node?.Version},
+        {label: i18n('version'), value: node?.Version},
         {
-            label: 'Uptime',
+            label: i18n('uptime'),
             value: <NodeUptime StartTime={node?.StartTime} DisconnectTime={node?.DisconnectTime} />,
         },
-        {label: 'DC', value: node?.DataCenterDescription || node?.DC},
-        {label: 'Rack', value: node?.Rack},
+        {label: i18n('dc'), value: node?.DataCenterDescription || node?.DC},
     );
 
+    if (node?.Rack) {
+        commonInfo.push({label: i18n('rack'), value: node?.Rack});
+    }
+
+    if (developerUIHref) {
+        commonInfo.push({
+            label: i18n('links'),
+            value: <LinkWithIcon url={developerUIHref} title={i18n('developer-ui')} />,
+        });
+    }
+
+    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
+        label: Name,
+        value: Address,
+    }));
+
     const averageInfo = node?.LoadAveragePercents?.map((load, loadIndex) => ({
-        label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
+        label: getLoadAverageIntervalTitle(loadIndex),
         value: (
             <ProgressViewer value={load} percents={true} colorizeProgress={true} capacity={100} />
         ),
     }));
 
+    if (!node) {
+        return <div className="error">{i18n('no-data')}</div>;
+    }
+
     return (
-        <div className={`${b()} ${className}`}>
-            {node ? (
-                <div className={b('common-info')}>
+        <div className={b(null, className)}>
+            <Flex wrap gap={2}>
+                <Flex direction="column" gap={2}>
+                    <InfoViewer
+                        title={i18n('title.common-info')}
+                        className={b('section')}
+                        info={commonInfo}
+                    />
+
+                    {endpointsInfo && endpointsInfo.length ? (
+                        <InfoViewer
+                            title={i18n('title.endpoints')}
+                            className={b('section')}
+                            info={endpointsInfo}
+                        />
+                    ) : null}
+                </Flex>
+
+                <Flex direction="column" gap={2}>
                     <div>
-                        <div className={b('section-title')}>Pools</div>
+                        <div className={b('section-title')}>{i18n('title.pools')}</div>
                         <div className={b('section', {pools: true})}>
                             {node?.PoolStats?.map((pool, poolIndex) => (
                                 <PoolUsage key={poolIndex} data={pool} />
                             ))}
                         </div>
                     </div>
 
-                    {endpointsInfo && endpointsInfo.length && (
-                        <InfoViewer
-                            title="Endpoints"
-                            className={b('section')}
-                            info={endpointsInfo}
-                        />
-                    )}
-
-                    <InfoViewer title="Common info" className={b('section')} info={commonInfo} />
-
                     <InfoViewer
-                        title="Load average"
+                        title={i18n('title.load-average')}
                         className={b('section', {average: true})}
                         info={averageInfo}
                     />
-                </div>
-            ) : (
-                <div className="error">no data</div>
-            )}
+                </Flex>
+            </Flex>
         </div>
     );
 };

src/components/EntityPageTitle/EntityPageTitle.tsx

@@ -0,0 +1,20 @@
+{
+  "database": "Database",
+  "uptime": "Uptime",
+  "version": "Version",
+  "dc": "DC",
+  "rack": "Rack",
+  "links": "Links",
+
+  "la-interval-1m": "1 min",
+  "la-interval-5m": "5 min",
+  "la-interval-15m": "15 min",
+
+  "developer-ui": "Developer UI",
+  "no-data": "No data",
+
+  "title.common-info": "Common info",
+  "title.endpoints": "Endpoints",
+  "title.pools": "Pools",
+  "title.load-average": "Load average"
+}

src/components/FullNodeViewer/FullNodeViewer.scss

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-node-info';
+
+export default registerKeysets(COMPONENT, {en});

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {Flex} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
@@ -14,13 +16,15 @@ interface PageMetaProps {
     loading?: boolean;
 }
 
+const separator = '\u00a0\u00a0\u00B7\u00a0\u00a0';
+
 export function PageMeta({items, loading}: PageMetaProps) {
     const renderContent = () => {
         if (loading) {
             return <Skeleton className={b('skeleton')} />;
         }
 
-        return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
+        return items.filter((item) => Boolean(item)).join(separator);
     };
 
     return <div className={b('info')}>{renderContent()}</div>;

src/components/FullNodeViewer/i18n/en.json

@@ -1,6 +1,6 @@
 import {Link} from 'react-router-dom';
 
-import {TABLETS, getDefaultNodePath} from '../../containers/Node/NodePages';
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {cn} from '../../utils/cn';
 import {getTabletLabel} from '../../utils/constants';
@@ -31,7 +31,7 @@ interface TabletsStatisticProps {
 
 export const TabletsStatistic = ({tablets = [], database, nodeId}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        const tabletsPath = getDefaultNodePath(nodeId, {database}, TABLETS);
+        const tabletsPath = getDefaultNodePath(nodeId, {database}, 'tablets');
 
         const label = `${item.label}: ${item.count}`;
         const className = b('tablet', {state: item.state?.toLowerCase()});