From ba797d3e9a610ac1d82b4ed43ef04718a02cfda5 Mon Sep 17 00:00:00 2001
From: kungasc <kungasc@ydb.tech>
Date: Thu, 14 Nov 2024 15:02:32 +0000
Subject: [PATCH 1/3] Render tenant memory details

---
 src/components/MemoryViewer/MemoryViewer.tsx  | 77 ++++++++++---------
 src/components/nodesColumns/columns.tsx       |  7 +-
 .../TenantMemory/TenantMemory.tsx             | 31 +++++++-
 .../TenantOverview/TenantOverview.scss        |  5 ++
 .../TenantOverview/TenantOverview.tsx         |  9 ++-
 src/types/api/tenant.ts                       |  3 +-
 6 files changed, 86 insertions(+), 46 deletions(-)

diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
index 65b1b23ba..26228761c 100644
--- a/src/components/MemoryViewer/MemoryViewer.tsx
+++ b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -40,8 +40,6 @@ export interface MemoryProgressViewerProps {
     stats: TMemoryStats;
     className?: string;
     warningThreshold?: number;
-    value?: number | string;
-    capacity?: number | string;
     formatValues: FormatProgressViewerValues;
     percents?: boolean;
     dangerThreshold?: number;
@@ -49,14 +47,15 @@ export interface MemoryProgressViewerProps {
 
 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>
+    );
+}
diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
index 88ba1f9ff..b93d6fe33 100644
--- a/src/components/nodesColumns/columns.tsx
+++ b/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}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
index 5a1c7da49..bf00527a3 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
+++ b/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>
     );
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
index 87b8e594f..b5adc6387 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -63,4 +63,9 @@
     &__storage-info {
         margin-bottom: 36px;
     }
+
+    &__memory-info {
+        width: 400px;
+        margin-bottom: 36px;
+    }
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
index 3700207db..1a1304057 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
+++ b/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} />;
diff --git a/src/types/api/tenant.ts b/src/types/api/tenant.ts
index a4d2d1bef..08b5947e7 100644
--- a/src/types/api/tenant.ts
+++ b/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 */

From 0b151dd6695d4474d18fcef39cc61e3353b8683d Mon Sep 17 00:00:00 2001
From: kungasc <kungasc@ydb.tech>
Date: Fri, 15 Nov 2024 08:10:26 +0000
Subject: [PATCH 2/3] Render bar only

---
 src/components/MemoryViewer/MemoryViewer.tsx  | 70 +++++++++----------
 .../TenantMemory/TenantMemory.tsx             |  7 +-
 .../TenantOverview/TenantOverview.scss        |  2 +-
 3 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
index 26228761c..b5104bf59 100644
--- a/src/components/MemoryViewer/MemoryViewer.tsx
+++ b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -99,7 +99,39 @@ export function MemoryViewer({
 
     return (
         <HoverPopup
-            popupContent={<MemoryViewerComponents stats={stats} formatValues={formatValues} />}
+            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>
+            }
         >
             <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>
@@ -134,39 +166,3 @@ 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>
-    );
-}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
index bf00527a3..8c602149e 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {MemoryViewerComponents} from '../../../../../components/MemoryViewer/MemoryViewer';
+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';
@@ -29,10 +29,7 @@ export function TenantMemory({
             <div className={b('title')}>{'Memory details'}</div>
             <div className={b('memory-info')}>
                 {memoryStats ? (
-                    <MemoryViewerComponents
-                        formatValues={formatStorageValuesToGb}
-                        stats={memoryStats}
-                    />
+                    <MemoryViewer formatValues={formatStorageValuesToGb} stats={memoryStats} />
                 ) : (
                     <ProgressViewer
                         value={memoryUsed}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
index b5adc6387..003311176 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -65,7 +65,7 @@
     }
 
     &__memory-info {
-        width: 400px;
+        width: 300px;
         margin-bottom: 36px;
     }
 }

From e627e6a8b02f61914029baf5c36be85f34980e29 Mon Sep 17 00:00:00 2001
From: kungasc <kungasc@ydb.tech>
Date: Fri, 15 Nov 2024 09:32:26 +0000
Subject: [PATCH 3/3] request memory

---
 src/services/api.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/api.ts b/src/services/api.ts
index df8d7d0a9..7949c0e0d 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -201,6 +201,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 tablets: false,
                 storage: true,
+                memory: true,
             },
             {concurrentId, requestConfig: {signal}},
         );