Render tenant memory details

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;
@@ -100,39 +99,7 @@ export function MemoryViewer({
 
     return (
         <HoverPopup
-            popupContent={
-                <DefinitionList responsive>
-                    {memorySegments.map(
-                        ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
-                            <DefinitionList.Item
-                                key={label}
-                                name={
-                                    <div className={b('container')}>
-                                        <div className={b('legend', {type: key})}></div>
-                                        <div className={b('name')}>{label}</div>
-                                    </div>
-                                }
-                            >
-                                {segmentCapacity ? (
-                                    <ProgressViewer
-                                        value={segmentSize}
-                                        capacity={segmentCapacity}
-                                        formatValues={formatDetailedValues}
-                                        colorizeProgress
-                                    />
-                                ) : (
-                                    formatBytes({
-                                        value: segmentSize,
-                                        size: 'gb',
-                                        withSizeLabel: true,
-                                        precision: 2,
-                                    })
-                                )}
-                            </DefinitionList.Item>
-                        ),
-                    )}
-                </DefinitionList>
-            }
+            popupContent={<MemoryViewerComponents stats={stats} formatValues={formatValues} />}
         >
             <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>
@@ -167,3 +134,39 @@ export function MemoryViewer({
         </HoverPopup>
     );
 }
+
+export function MemoryViewerComponents({stats}: MemoryProgressViewerProps) {
+    const memorySegments = getMemorySegments(stats);
+
+    return (
+        <DefinitionList responsive>
+            {memorySegments.map(({label, value: segmentSize, capacity: segmentCapacity, key}) => (
+                <DefinitionList.Item
+                    key={label}
+                    name={
+                        <div className={b('container')}>
+                            <div className={b('legend', {type: key})}></div>
+                            <div className={b('name')}>{label}</div>
+                        </div>
+                    }
+                >
+                    {segmentCapacity ? (
+                        <ProgressViewer
+                            value={segmentSize}
+                            capacity={segmentCapacity}
+                            formatValues={formatDetailedValues}
+                            colorizeProgress
+                        />
+                    ) : (
+                        formatBytes({
+                            value: segmentSize,
+                            size: 'gb',
+                            withSizeLabel: true,
+                            precision: 2,
+                        })
+                    )}
+                </DefinitionList.Item>
+            ))}
+        </DefinitionList>
+    );
+}

src/components/nodesColumns/columns.tsx

@@ -163,12 +163,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,47 @@
 import React from 'react';
 
+import {MemoryViewerComponents} 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 ? (
+                    <MemoryViewerComponents
+                        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: 400px;
+        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/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 */