fix: review fixes

Author: astandrik

src/components/ProgressViewer/ProgressViewer.scss

@@ -22,10 +22,6 @@
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
-    &_vertical {
-        min-width: unset;
-    }
-
     &_theme_dark {
         color: var(--g-color-text-light-primary);
 
@@ -62,13 +58,6 @@
         left: 0;
 
         height: 100%;
-
-        &_vertical {
-            top: auto;
-            bottom: 0;
-
-            width: 100%;
-        }
     }
 
     &__text {

src/components/ProgressViewer/ProgressViewer.tsx

@@ -48,7 +48,6 @@ export interface ProgressViewerProps {
     inverseColorize?: boolean;
     warningThreshold?: number;
     dangerThreshold?: number;
-    vertical?: boolean;
     hideCapacity?: boolean;
 }
 
@@ -58,7 +57,6 @@ export function ProgressViewer({
     formatValues = defaultFormatValues,
     percents,
     className,
-    vertical,
     size = 'xs',
     colorizeProgress,
     inverseColorize,
@@ -93,13 +91,9 @@ export function ProgressViewer({
         fillWidth = 100;
     }
 
-    const lineStyle = vertical
-        ? {
-              height: fillWidth + '%',
-          }
-        : {
-              width: fillWidth + '%',
-          };
+    const lineStyle = {
+        width: fillWidth + '%',
+    };
 
     const renderContent = () => {
         if (isNumeric(capacity) && !hideCapacity) {
@@ -111,8 +105,8 @@ export function ProgressViewer({
 
     if (isNumeric(value)) {
         return (
-            <div className={b({size, theme, status, vertical}, className)}>
-                <div className={b('line', {vertical})} style={lineStyle}></div>
+            <div className={b({size, theme, status}, className)}>
+                <div className={b('line')} style={lineStyle}></div>
                 <span className={b('text')}>{renderContent()}</span>
             </div>
         );

src/components/nodesColumns/NodesColumns.scss

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

src/components/nodesColumns/columns.tsx

@@ -5,6 +5,7 @@ import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import type {TPoolStats} from '../../types/api/nodes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {valueIsDefined} from '../../utils';
+import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {
     formatStorageValues,
@@ -26,6 +27,10 @@ import {NODES_COLUMNS_IDS, NODES_COLUMNS_TITLES} from './constants';
 import i18n from './i18n';
 import type {GetNodesColumnsParams} from './types';
 
+import './NodesColumns.scss';
+
+const b = cn('ydb-nodes-columns');
+
 export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.NodeId,
@@ -157,15 +162,15 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                         formatValues={(value, total) =>
                             formatStorageValues(value, total, 'gb', undefined, true)
                         }
+                        className={b('column-ram')}
                         colorizeProgress
-                        vertical
                         hideCapacity
                     />
                 </CellWithPopover>
             );
         },
         align: DataTable.LEFT,
-        width: 85,
+        width: 80,
         resizeMinWidth: 40,
     };
 }
@@ -188,10 +193,10 @@ export function getSharedCacheUsageColumn<
         resizeMinWidth: 170,
     };
 }
-export function getCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T> {
+export function getPoolsColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T> {
     return {
-        name: NODES_COLUMNS_IDS.CPU,
-        header: NODES_COLUMNS_TITLES.CPU,
+        name: NODES_COLUMNS_IDS.Pools,
+        header: NODES_COLUMNS_TITLES.Pools,
         sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) =>
@@ -201,18 +206,33 @@ export function getCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T>
         resizeMinWidth: 60,
     };
 }
-export function getTotalCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T> {
+export function getCpuColumn<
+    T extends {PoolStats?: TPoolStats[]; CoresUsed?: number; CoresTotal?: number},
+>(): Column<T> {
     return {
-        name: NODES_COLUMNS_IDS.TotalCPU,
-        header: NODES_COLUMNS_TITLES.TotalCPU,
+        name: NODES_COLUMNS_IDS.CPU,
+        header: NODES_COLUMNS_TITLES.CPU,
         sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) => {
             if (!row.PoolStats) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
 
-            const totalPoolUsage = row.PoolStats.reduce((acc, pool) => acc + (pool.Usage || 0), 0);
+            let totalPoolUsage =
+                isNumeric(row.CoresUsed) && isNumeric(row.CoresTotal)
+                    ? row.CoresUsed / row.CoresTotal
+                    : undefined;
+
+            if (totalPoolUsage === undefined) {
+                let totalThreadsCount = 0;
+                totalPoolUsage = row.PoolStats.reduce((acc, pool) => {
+                    totalThreadsCount += Number(pool.Threads);
+                    return acc + Number(pool.Usage) * Number(pool.Threads);
+                }, 0);
+
+                totalPoolUsage = totalPoolUsage / totalThreadsCount;
+            }
 
             return (
                 <CellWithPopover
@@ -231,17 +251,17 @@ export function getTotalCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Colum
                     }
                 >
                     <ProgressViewer
+                        className={b('column-cpu')}
                         value={totalPoolUsage}
                         capacity={1}
                         colorizeProgress
                         percents
-                        vertical
                     />
                 </CellWithPopover>
             );
         },
         align: DataTable.LEFT,
-        width: 85,
+        width: 80,
         resizeMinWidth: 40,
     };
 }

src/components/nodesColumns/constants.ts

@@ -16,7 +16,7 @@ export const NODES_COLUMNS_IDS = {
     Memory: 'Memory',
     RAM: 'RAM',
     CPU: 'CPU',
-    TotalCPU: 'TotalCPU',
+    Pools: 'Pools',
     LoadAverage: 'LoadAverage',
     Load: 'Load',
     DiskSpaceUsage: 'DiskSpaceUsage',
@@ -59,12 +59,12 @@ export const NODES_COLUMNS_TITLES = {
     get RAM() {
         return i18n('ram');
     },
+    get Pools() {
+        return i18n('pools');
+    },
     get CPU() {
         return i18n('cpu');
     },
-    get TotalCPU() {
-        return i18n('totalcpu');
-    },
     get LoadAverage() {
         return i18n('load-average');
     },
@@ -103,8 +103,8 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     Uptime: ['Uptime'],
     Memory: ['Memory'],
     RAM: ['Memory'],
+    Pools: ['CPU'],
     CPU: ['CPU'],
-    TotalCPU: ['CPU'],
     LoadAverage: ['LoadAverage'],
     Load: ['LoadAverage'],
     DiskSpaceUsage: ['DiskSpaceUsage'],

src/components/nodesColumns/i18n/en.json

@@ -9,7 +9,7 @@
   "memory": "Memory",
   "ram": "RAM",
   "cpu": "CPU",
-  "totalcpu": "TotalCPU",
+  "pools": "Pools",
   "disk-usage": "Disk usage",
   "tablets": "Tablets",
   "load-average": "Load Average",

src/containers/Nodes/columns/columns.tsx

@@ -6,10 +6,10 @@ import {
     getMemoryColumn,
     getNodeIdColumn,
     getNodeNameColumn,
+    getPoolsColumn,
     getRAMColumn,
     getRackColumn,
     getTabletsColumn,
-    getTotalCpuColumn,
     getUptimeColumn,
     getVersionColumn,
 } from '../../../components/nodesColumns/columns';
@@ -29,8 +29,8 @@ export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPrep
         getUptimeColumn<NodesPreparedEntity>(),
         getMemoryColumn<NodesPreparedEntity>(),
         getRAMColumn<NodesPreparedEntity>(),
+        getPoolsColumn<NodesPreparedEntity>(),
         getCpuColumn<NodesPreparedEntity>(),
-        getTotalCpuColumn<NodesPreparedEntity>(),
         getLoadAverageColumn<NodesPreparedEntity>(),
         getTabletsColumn<NodesPreparedEntity>(params),
     ];

src/containers/Nodes/columns/constants.ts

@@ -10,7 +10,7 @@ export const DEFAULT_NODES_COLUMNS: NodesColumnId[] = [
     'Version',
     'Uptime',
     'Memory',
-    'CPU',
+    'Pools',
     'LoadAverage',
     'Tablets',
 ];

src/containers/Nodes/getNodes.ts

@@ -5,6 +5,7 @@ import {prepareNodesData} from '../../store/reducers/nodes/utils';
 import type {NodesRequestParams} from '../../types/api/nodes';
 import {prepareSortValue} from '../../utils/filters';
 import {
+    NODES_SORT_VALUE_TO_FIELD,
     getProblemParamValue,
     getUptimeParamValue,
     isSortableNodesProperty,
@@ -35,7 +36,7 @@ export const getNodes: FetchData<
     const {path, database, searchValue, problemFilter, uptimeFilter} = filters ?? {};
 
     const sort = isSortableNodesProperty(columnId)
-        ? prepareSortValue(columnId, sortOrder)
+        ? prepareSortValue(NODES_SORT_VALUE_TO_FIELD[columnId], sortOrder)
         : undefined;
 
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -9,6 +9,8 @@ import {
     getMissingDisksColumn,
     getNodeIdColumn,
     getNodeNameColumn,
+    getPoolsColumn,
+    getRAMColumn,
     getRackColumn,
     getUptimeColumn,
     getVersionColumn,
@@ -72,6 +74,8 @@ export const getStorageNodesColumns = ({
         getRackColumn<PreparedStorageNode>(),
         getVersionColumn<PreparedStorageNode>(),
         getMemoryColumn<PreparedStorageNode>(),
+        getRAMColumn<PreparedStorageNode>(),
+        getPoolsColumn<PreparedStorageNode>(),
         getCpuColumn<PreparedStorageNode>(),
         getDiskSpaceUsageColumn<PreparedStorageNode>(),
         getUptimeColumn<PreparedStorageNode>(),