feat: make RAM and CPU bars fill container width in tables

Co-authored-by: astandrik <[email protected]>

Author: Copilot

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;
 

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)

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);
 

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>

src/components/nodesColumns/NodesColumns.scss

@@ -1,6 +1,8 @@
 .ydb-nodes-columns {
     &__column-ram,
     &__column-cpu {
+        flex: 1;
+
         min-width: 40px;
     }
 }

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>
             );

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;
     }
 }