From c0d5ed9f950d441ef7a3cda672ea03a7aa03d731 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 09:07:07 +0000
Subject: [PATCH 1/6] Initial plan


From a6715caf5f55ce947dd52e131b319895d9a88d86 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 09:23:03 +0000
Subject: [PATCH 2/6] feat: make RAM and CPU bars fill container width in
 tables

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 src/components/MemoryViewer/MemoryViewer.scss            | 5 +++++
 src/components/MemoryViewer/MemoryViewer.tsx             | 4 +++-
 src/components/ProgressViewer/ProgressViewer.scss        | 5 +++++
 src/components/ProgressViewer/ProgressViewer.tsx         | 4 +++-
 src/components/nodesColumns/NodesColumns.scss            | 2 ++
 src/components/nodesColumns/columns.tsx                  | 9 ++++++++-
 src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss | 5 +++--
 7 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/MemoryViewer/MemoryViewer.scss b/src/components/MemoryViewer/MemoryViewer.scss
index e7c07d4cc2..bee0fdc4b6 100644
--- a/src/components/MemoryViewer/MemoryViewer.scss
+++ b/src/components/MemoryViewer/MemoryViewer.scss
@@ -19,6 +19,11 @@ $memory-type-colors: (
     min-width: 150px;
     padding: 0 var(--g-spacing-1);
 
+    &_width_full {
+        width: 100%;
+        min-width: 40px;
+    }
+
     &__progress-container {
         position: relative;
 
diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
index 1f7252e5f1..b3897437c7 100644
--- a/src/components/MemoryViewer/MemoryViewer.tsx
+++ b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -43,6 +43,7 @@ export interface MemoryProgressViewerProps {
     dangerThreshold?: number;
     formatValues: FormatProgressViewerValues;
     percents?: boolean;
+    width?: 'full';
 }
 
 export function MemoryViewer({
@@ -52,6 +53,7 @@ export function MemoryViewer({
     className,
     warningThreshold,
     dangerThreshold,
+    width,
 }: MemoryProgressViewerProps) {
     const memoryUsage = stats.AnonRss ?? calculateAllocatedMemory(stats);
 
@@ -134,7 +136,7 @@ export function MemoryViewer({
                 </DefinitionList>
             )}
         >
-            <div className={b({theme, status}, className)}>
+            <div className={b({theme, status, width}, className)}>
                 <div className={b('progress-container')}>
                     {memorySegments
                         .filter(({isInfo}) => !isInfo)
diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
index 470a598f58..662d9e016e 100644
--- a/src/components/ProgressViewer/ProgressViewer.scss
+++ b/src/components/ProgressViewer/ProgressViewer.scss
@@ -22,6 +22,11 @@
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
+    &_width_full {
+        width: 100%;
+        min-width: 40px;
+    }
+
     &_theme_dark {
         color: var(--g-color-text-light-primary);
 
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index 3e4fdcb69c..36c7f0574d 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -38,6 +38,7 @@ export interface ProgressViewerProps {
     dangerThreshold?: number;
     hideCapacity?: boolean;
     withOverflow?: boolean;
+    width?: 'full';
 }
 
 export function ProgressViewer({
@@ -53,6 +54,7 @@ export function ProgressViewer({
     warningThreshold,
     dangerThreshold,
     hideCapacity,
+    width,
 }: ProgressViewerProps) {
     const theme = useTheme();
 
@@ -96,7 +98,7 @@ export function ProgressViewer({
 
     if (isNumeric(value)) {
         return (
-            <div className={b({size, theme, status}, className)}>
+            <div className={b({size, theme, status, width}, className)}>
                 <div className={b('line')} style={lineStyle}></div>
                 <span className={b('text')}>{renderContent()}</span>
             </div>
diff --git a/src/components/nodesColumns/NodesColumns.scss b/src/components/nodesColumns/NodesColumns.scss
index b342bcc119..39cd33fb6f 100644
--- a/src/components/nodesColumns/NodesColumns.scss
+++ b/src/components/nodesColumns/NodesColumns.scss
@@ -1,6 +1,8 @@
 .ydb-nodes-columns {
     &__column-ram,
     &__column-cpu {
+        flex: 1;
+
         min-width: 40px;
     }
 }
diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
index 729a5ea404..0dc7da0ff4 100644
--- a/src/components/nodesColumns/columns.tsx
+++ b/src/components/nodesColumns/columns.tsx
@@ -187,6 +187,7 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                         className={b('column-ram')}
                         colorizeProgress
                         hideCapacity
+                        width="full"
                     />
                 </CellWithPopover>
             );
@@ -205,13 +206,18 @@ export function getMemoryColumn<
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) => {
             return row.MemoryStats ? (
-                <MemoryViewer formatValues={formatStorageValuesToGb} stats={row.MemoryStats} />
+                <MemoryViewer
+                    formatValues={formatStorageValuesToGb}
+                    stats={row.MemoryStats}
+                    width="full"
+                />
             ) : (
                 <ProgressViewer
                     value={row.MemoryUsed}
                     capacity={row.MemoryLimit}
                     formatValues={formatStorageValuesToGb}
                     colorizeProgress={true}
+                    width="full"
                 />
             );
         },
@@ -283,6 +289,7 @@ export function getCpuColumn<
                         capacity={1}
                         colorizeProgress
                         percents
+                        width="full"
                     />
                 </CellWithPopover>
             );
diff --git a/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss b/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
index 724e167354..336e2b3ce3 100644
--- a/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
+++ b/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
@@ -1,6 +1,7 @@
 .cpu-usage-bar {
     &__progress {
-        width: 60px;
-        min-width: 60px;
+        flex: 1;
+
+        min-width: 40px;
     }
 }

From ef82c22ac38f8c3f87decfb659d26d403050857e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:04:27 +0000
Subject: [PATCH 3/6] fix: remove width prop from progress bars with flex
 layout to avoid CSS conflicts

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 src/components/nodesColumns/columns.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
index 0dc7da0ff4..274996a32a 100644
--- a/src/components/nodesColumns/columns.tsx
+++ b/src/components/nodesColumns/columns.tsx
@@ -187,7 +187,6 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                         className={b('column-ram')}
                         colorizeProgress
                         hideCapacity
-                        width="full"
                     />
                 </CellWithPopover>
             );
@@ -289,7 +288,6 @@ export function getCpuColumn<
                         capacity={1}
                         colorizeProgress
                         percents
-                        width="full"
                     />
                 </CellWithPopover>
             );

From 7310b9fd9dc34fcc672173baff14d96cf5e80e88 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:38:54 +0000
Subject: [PATCH 4/6] fix: address critical issues from code review - fix error
 state bug, remove CSS conflicts, and use proper i18n

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 src/components/ProgressViewer/ProgressViewer.tsx | 3 ++-
 src/components/nodesColumns/columns.tsx          | 2 --
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index 36c7f0574d..068b3f7de0 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {calculateProgressStatus, defaultFormatProgressValues} from '../../utils/progress';
 import type {FormatProgressViewerValues} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
@@ -105,5 +106,5 @@ export function ProgressViewer({
         );
     }
 
-    return <div className={`${b({size})} ${className} error`}>no data</div>;
+    return <div className={b({size, width}, className)}>{EMPTY_DATA_PLACEHOLDER}</div>;
 }
diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
index 274996a32a..5f925be80a 100644
--- a/src/components/nodesColumns/columns.tsx
+++ b/src/components/nodesColumns/columns.tsx
@@ -208,7 +208,6 @@ export function getMemoryColumn<
                 <MemoryViewer
                     formatValues={formatStorageValuesToGb}
                     stats={row.MemoryStats}
-                    width="full"
                 />
             ) : (
                 <ProgressViewer
@@ -216,7 +215,6 @@ export function getMemoryColumn<
                     capacity={row.MemoryLimit}
                     formatValues={formatStorageValuesToGb}
                     colorizeProgress={true}
-                    width="full"
                 />
             );
         },

From 2498aa79ab39ecdd373363ffb841a4426c660de7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:54:46 +0000
Subject: [PATCH 5/6] feat: remove unused width prop from ProgressViewer and
 MemoryViewer components

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 src/components/MemoryViewer/MemoryViewer.scss     | 5 -----
 src/components/MemoryViewer/MemoryViewer.tsx      | 4 +---
 src/components/ProgressViewer/ProgressViewer.scss | 5 -----
 src/components/ProgressViewer/ProgressViewer.tsx  | 6 ++----
 4 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/MemoryViewer/MemoryViewer.scss b/src/components/MemoryViewer/MemoryViewer.scss
index bee0fdc4b6..e7c07d4cc2 100644
--- a/src/components/MemoryViewer/MemoryViewer.scss
+++ b/src/components/MemoryViewer/MemoryViewer.scss
@@ -19,11 +19,6 @@ $memory-type-colors: (
     min-width: 150px;
     padding: 0 var(--g-spacing-1);
 
-    &_width_full {
-        width: 100%;
-        min-width: 40px;
-    }
-
     &__progress-container {
         position: relative;
 
diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
index b3897437c7..1f7252e5f1 100644
--- a/src/components/MemoryViewer/MemoryViewer.tsx
+++ b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -43,7 +43,6 @@ export interface MemoryProgressViewerProps {
     dangerThreshold?: number;
     formatValues: FormatProgressViewerValues;
     percents?: boolean;
-    width?: 'full';
 }
 
 export function MemoryViewer({
@@ -53,7 +52,6 @@ export function MemoryViewer({
     className,
     warningThreshold,
     dangerThreshold,
-    width,
 }: MemoryProgressViewerProps) {
     const memoryUsage = stats.AnonRss ?? calculateAllocatedMemory(stats);
 
@@ -136,7 +134,7 @@ export function MemoryViewer({
                 </DefinitionList>
             )}
         >
-            <div className={b({theme, status, width}, className)}>
+            <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>
                     {memorySegments
                         .filter(({isInfo}) => !isInfo)
diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
index 662d9e016e..470a598f58 100644
--- a/src/components/ProgressViewer/ProgressViewer.scss
+++ b/src/components/ProgressViewer/ProgressViewer.scss
@@ -22,11 +22,6 @@
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
-    &_width_full {
-        width: 100%;
-        min-width: 40px;
-    }
-
     &_theme_dark {
         color: var(--g-color-text-light-primary);
 
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index 068b3f7de0..fb84d952bc 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -39,7 +39,6 @@ export interface ProgressViewerProps {
     dangerThreshold?: number;
     hideCapacity?: boolean;
     withOverflow?: boolean;
-    width?: 'full';
 }
 
 export function ProgressViewer({
@@ -55,7 +54,6 @@ export function ProgressViewer({
     warningThreshold,
     dangerThreshold,
     hideCapacity,
-    width,
 }: ProgressViewerProps) {
     const theme = useTheme();
 
@@ -99,12 +97,12 @@ export function ProgressViewer({
 
     if (isNumeric(value)) {
         return (
-            <div className={b({size, theme, status, width}, className)}>
+            <div className={b({size, theme, status}, className)}>
                 <div className={b('line')} style={lineStyle}></div>
                 <span className={b('text')}>{renderContent()}</span>
             </div>
         );
     }
 
-    return <div className={b({size, width}, className)}>{EMPTY_DATA_PLACEHOLDER}</div>;
+    return <div className={b({size}, className)}>{EMPTY_DATA_PLACEHOLDER}</div>;
 }

From 079a4442e00ea9491e18a13a19eefce4d4278526 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 11:25:53 +0000
Subject: [PATCH 6/6] fix: revert min-width back to 60px in CpuUsageBar to
 maintain original sizing

Co-authored-by: astandrik <8037318+astandrik@users.noreply.github.com>
---
 src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss b/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
index 336e2b3ce3..d71be40d52 100644
--- a/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
+++ b/src/containers/Node/Threads/CpuUsageBar/CpuUsageBar.scss
@@ -2,6 +2,6 @@
     &__progress {
         flex: 1;
 
-        min-width: 40px;
+        min-width: 60px;
     }
 }