feat: render tenant memory details (#1623)

Author: kunga

src/components/MemoryViewer/MemoryViewer.tsx

@@ -40,23 +40,22 @@ export interface MemoryProgressViewerProps {
     stats: TMemoryStats;
     className?: string;
     warningThreshold?: number;
-    value?: number | string;
-    capacity?: number | string;
     formatValues: FormatProgressViewerValues;
     percents?: boolean;
     dangerThreshold?: number;
 }
 
 export function MemoryViewer({
     stats,
-    value,
-    capacity,
     percents,
     formatValues,
     className,
     warningThreshold = 60,
     dangerThreshold = 80,
 }: MemoryProgressViewerProps) {
+    const value = stats.AnonRss;
+    const capacity = stats.HardLimit;
+
     const theme = useTheme();
     let fillWidth =
         Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;

src/components/nodesColumns/columns.tsx

@@ -172,12 +172,7 @@ export function getMemoryColumn<
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) => {
             return row.MemoryStats ? (
-                <MemoryViewer
-                    capacity={row.MemoryLimit}
-                    value={row.MemoryStats.AnonRss}
-                    formatValues={formatStorageValuesToGb}
-                    stats={row.MemoryStats}
-                />
+                <MemoryViewer formatValues={formatStorageValuesToGb} stats={row.MemoryStats} />
             ) : (
                 <ProgressViewer
                     value={row.MemoryUsed}

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

@@ -1,18 +1,44 @@
 import React from 'react';
 
+import {MemoryViewer} from '../../../../../components/MemoryViewer/MemoryViewer';
+import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
+import type {TMemoryStats} from '../../../../../types/api/nodes';
+import {formatStorageValuesToGb} from '../../../../../utils/dataFormatters/dataFormatters';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {b} from '../utils';
 
 import {TopNodesByMemory} from './TopNodesByMemory';
 import {memoryDashboardConfig} from './memoryDashboardConfig';
 
 interface TenantMemoryProps {
     tenantName: string;
+    memoryStats?: TMemoryStats;
+    memoryUsed?: string;
+    memoryLimit?: string;
 }
 
-export function TenantMemory({tenantName}: TenantMemoryProps) {
+export function TenantMemory({
+    tenantName,
+    memoryStats,
+    memoryUsed,
+    memoryLimit,
+}: TenantMemoryProps) {
     return (
         <React.Fragment>
             <TenantDashboard database={tenantName} charts={memoryDashboardConfig} />
+            <div className={b('title')}>{'Memory details'}</div>
+            <div className={b('memory-info')}>
+                {memoryStats ? (
+                    <MemoryViewer formatValues={formatStorageValuesToGb} stats={memoryStats} />
+                ) : (
+                    <ProgressViewer
+                        value={memoryUsed}
+                        capacity={memoryLimit}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                    />
+                )}
+            </div>
             <TopNodesByMemory tenantName={tenantName} />
         </React.Fragment>
     );

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -63,4 +63,9 @@
     &__storage-info {
         margin-bottom: 36px;
     }
+
+    &__memory-info {
+        width: 300px;
+        margin-bottom: 36px;
+    }
 }

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

@@ -123,7 +123,14 @@ export function TenantOverview({
                 return <TenantStorage tenantName={tenantName} metrics={storageMetrics} />;
             }
             case TENANT_METRICS_TABS_IDS.memory: {
-                return <TenantMemory tenantName={tenantName} />;
+                return (
+                    <TenantMemory
+                        tenantName={tenantName}
+                        memoryUsed={tenantData.MemoryUsed}
+                        memoryLimit={tenantData.MemoryLimit}
+                        memoryStats={tenantData.MemoryStats}
+                    />
+                );
             }
             case TENANT_METRICS_TABS_IDS.healthcheck: {
                 return <HealthcheckDetails tenantName={tenantName} />;

src/services/api.ts

@@ -202,6 +202,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 tablets: false,
                 storage: true,
+                memory: true,
             },
             {concurrentId, requestConfig: {signal}},
         );

src/types/api/tenant.ts

@@ -1,5 +1,5 @@
 import type {EFlag} from './enums';
-import type {TPoolStats, TSystemStateInfo} from './nodes';
+import type {TMemoryStats, TPoolStats, TSystemStateInfo} from './nodes';
 import type {TTabletStateInfo} from './tablet';
 
 /**
@@ -50,6 +50,7 @@ export interface TTenant {
     MemoryUsed?: string; // Actual memory consumption
     /** uint64 */
     MemoryLimit?: string;
+    MemoryStats?: TMemoryStats;
     /** double */
     CoresUsed?: number; // Actual cpu consumption
     /** uint64 */