fix: network table

Author: astandrik

src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TenantNetwork.tsx

@@ -1,5 +1,10 @@
 import {Flex, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 
+import {EmptyState} from '../../../../../components/EmptyState/EmptyState';
+import {Illustration} from '../../../../../components/Illustration';
+import {LoaderWrapper} from '../../../../../components/LoaderWrapper/LoaderWrapper';
+import {useShouldShowDatabaseNetworkTable} from '../../../../../components/NetworkTable/hooks';
+import {useCapabilitiesLoaded} from '../../../../../store/reducers/capabilities/hooks';
 import {TENANT_NETWORK_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {cn} from '../../../../../utils/cn';
@@ -24,6 +29,8 @@ interface TenantNetworkProps {
 }
 
 export function TenantNetwork({tenantName, additionalNodesProps}: TenantNetworkProps) {
+    const capabilitiesLoaded = useCapabilitiesLoaded();
+    const shouldShowNetworkTable = useShouldShowDatabaseNetworkTable();
     const {networkTab, handleNetworkTabChange} = useTenantNetworkQueryParams();
 
     const renderTabContent = () => {
@@ -50,25 +57,48 @@ export function TenantNetwork({tenantName, additionalNodesProps}: TenantNetworkP
         }
     };
 
-    return (
-        <Flex direction="column" gap={4} className={b()}>
-            <Flex direction="column" gap={3} className={b('tabs-container')}>
-                <TabProvider value={networkTab}>
-                    <TabList size="m">
-                        {networkTabs.map(({id, title}) => {
-                            return (
-                                <Tab key={id} value={id} onClick={() => handleNetworkTabChange(id)}>
-                                    {title}
-                                </Tab>
-                            );
-                        })}
-                    </TabList>
-                </TabProvider>
+    const renderNetworkStatsUnavailable = () => {
+        return (
+            <EmptyState
+                image={<Illustration name="thumbsUp" />}
+                title={i18n('network-stats-unavailable.title')}
+                description={i18n('network-stats-unavailable.description')}
+                size="s"
+            />
+        );
+    };
+
+    const renderContent = () => {
+        if (!shouldShowNetworkTable) {
+            return renderNetworkStatsUnavailable();
+        }
 
-                <Flex direction="column" className={b('tab-content')}>
-                    {renderTabContent()}
+        return (
+            <Flex direction="column" gap={4} className={b()}>
+                <Flex direction="column" gap={3} className={b('tabs-container')}>
+                    <TabProvider value={networkTab}>
+                        <TabList size="m">
+                            {networkTabs.map(({id, title}) => {
+                                return (
+                                    <Tab
+                                        key={id}
+                                        value={id}
+                                        onClick={() => handleNetworkTabChange(id)}
+                                    >
+                                        {title}
+                                    </Tab>
+                                );
+                            })}
+                        </TabList>
+                    </TabProvider>
+
+                    <Flex direction="column" className={b('tab-content')}>
+                        {renderTabContent()}
+                    </Flex>
                 </Flex>
             </Flex>
-        </Flex>
-    );
+        );
+    };
+
+    return <LoaderWrapper loading={!capabilitiesLoaded}>{renderContent()}</LoaderWrapper>;
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/columns.ts

@@ -1,37 +1,29 @@
 import {
     getClockSkewColumn,
-    getDataCenterColumn,
     getNetworkHostColumn,
     getNodeIdColumn,
     getPingTimeColumn,
-    getRackColumn,
     getUptimeColumn,
 } from '../../../../../components/nodesColumns/columns';
-import {isSortableNodesColumn} from '../../../../../components/nodesColumns/constants';
+import {
+    NODES_COLUMNS_TO_DATA_FIELDS,
+    isSortableNodesColumn,
+} from '../../../../../components/nodesColumns/constants';
 import type {GetNodesColumnsParams} from '../../../../../components/nodesColumns/types';
 import type {NodesPreparedEntity} from '../../../../../store/reducers/nodes/types';
+import {getRequiredDataFields} from '../../../../../utils/tableUtils/getRequiredDataFields';
 import type {Column} from '../../../../../utils/tableUtils/types';
 
 export function getTopNodesByPingColumns(params: GetNodesColumnsParams) {
     const columns: Column<NodesPreparedEntity>[] = [
         getNodeIdColumn(),
         getNetworkHostColumn(params),
-        getDataCenterColumn(),
-        getRackColumn(),
         getUptimeColumn(),
         getPingTimeColumn(),
     ];
 
-    const fieldsRequired = [
-        'NodeId',
-        'Host',
-        'DataCenter',
-        'Rack',
-        'UptimeSeconds',
-        'PingTimeUs',
-        'PingTimeMinUs',
-        'PingTimeMaxUs',
-    ];
+    const columnsIds = columns.map((column) => column.name);
+    const fieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
     return [
         columns.map((column) => ({
@@ -46,22 +38,12 @@ export function getTopNodesBySkewColumns(params: GetNodesColumnsParams) {
     const columns: Column<NodesPreparedEntity>[] = [
         getNodeIdColumn(),
         getNetworkHostColumn(params),
-        getDataCenterColumn(),
-        getRackColumn(),
         getUptimeColumn(),
         getClockSkewColumn(),
     ];
 
-    const fieldsRequired = [
-        'NodeId',
-        'Host',
-        'DataCenter',
-        'Rack',
-        'UptimeSeconds',
-        'ClockSkewUs',
-        'ClockSkewMinUs',
-        'ClockSkewMaxUs',
-    ];
+    const columnsIds = columns.map((column) => column.name);
+    const fieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
     return [
         columns.map((column) => ({

src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -56,5 +56,7 @@
   "action_by-pool-usage": "By Pool Usage",
   "title_memory-details": "Memory Details",
   "field_memory-usage": "Memory usage",
-  "context_capacity-usage": "{{value}} of {{capacity}}"
+  "context_capacity-usage": "{{value}} of {{capacity}}",
+  "network-stats-unavailable.title": "Network Statistics Unavailable",
+  "network-stats-unavailable.description": "Network ping and clock skew statistics require a newer backend version. Please upgrade your YDB installation to access these features."
 }