feat: implement simple and narrow vertical progress bar

Author: astandrik

src/components/ProgressViewer/ProgressViewer.scss

@@ -12,6 +12,10 @@
     align-items: center;
 
     min-width: 150px;
+
+    &_vertical {
+        min-width: unset;
+    }
     height: 23px;
     padding: 0 4px;
 
@@ -58,6 +62,12 @@
         left: 0;
 
         height: 100%;
+
+        &_vertical {
+            width: 100%;
+            bottom: 0;
+            top: auto;
+        }
     }
 
     &__text {

src/components/ProgressViewer/ProgressViewer.tsx

@@ -48,6 +48,8 @@ export interface ProgressViewerProps {
     inverseColorize?: boolean;
     warningThreshold?: number;
     dangerThreshold?: number;
+    vertical?: boolean;
+    hideCapacity?: boolean;
 }
 
 export function ProgressViewer({
@@ -56,11 +58,13 @@ export function ProgressViewer({
     formatValues = defaultFormatValues,
     percents,
     className,
+    vertical,
     size = 'xs',
     colorizeProgress,
     inverseColorize,
     warningThreshold = 60,
     dangerThreshold = 80,
+    hideCapacity,
 }: ProgressViewerProps) {
     const theme = useTheme();
 
@@ -89,12 +93,16 @@ export function ProgressViewer({
         fillWidth = 100;
     }
 
-    const lineStyle = {
-        width: fillWidth + '%',
-    };
+    const lineStyle = vertical
+        ? {
+              height: fillWidth + '%',
+          }
+        : {
+              width: fillWidth + '%',
+          };
 
     const renderContent = () => {
-        if (isNumeric(capacity)) {
+        if (isNumeric(capacity) && !hideCapacity) {
             return `${valueText} ${divider} ${capacityText}`;
         }
 
@@ -103,8 +111,8 @@ export function ProgressViewer({
 
     if (isNumeric(value)) {
         return (
-            <div className={b({size, theme, status}, className)}>
-                <div className={b('line')} style={lineStyle}></div>
+            <div className={b({size, theme, status, vertical}, className)}>
+                <div className={b('line', {vertical})} style={lineStyle}></div>
                 <span className={b('text')}>{renderContent()}</span>
             </div>
         );

src/components/nodesColumns/columns.tsx

@@ -5,7 +5,10 @@ import type {TPoolStats} from '../../types/api/nodes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {valueIsDefined} from '../../utils';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
-import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
+import {
+    formatStorageValues,
+    formatStorageValuesToGb,
+} from '../../utils/dataFormatters/dataFormatters';
 import {getSpaceUsageSeverity} from '../../utils/storage';
 import type {Column} from '../../utils/tableUtils/types';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
@@ -111,6 +114,29 @@ export function getMemoryColumn<
         resizeMinWidth: 170,
     };
 }
+export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: string}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.RAM,
+        header: NODES_COLUMNS_TITLES.RAM,
+        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({row}) => (
+            <ProgressViewer
+                value={row.MemoryUsed}
+                capacity={row.MemoryLimit}
+                formatValues={(value, total) =>
+                    formatStorageValues(value, total, 'gb', undefined, true)
+                }
+                colorizeProgress
+                vertical
+                hideCapacity
+            />
+        ),
+        align: DataTable.LEFT,
+        width: 85,
+        resizeMinWidth: 40,
+    };
+}
 export function getSharedCacheUsageColumn<
     T extends {SharedCacheUsed?: string | number; SharedCacheLimit?: string | number},
 >(): Column<T> {
@@ -143,6 +169,34 @@ export function getCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T>
         resizeMinWidth: 60,
     };
 }
+export function getTotalCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T> {
+    return {
+        name: NODES_COLUMNS_IDS.TotalCPU,
+        header: NODES_COLUMNS_TITLES.TotalCPU,
+        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);
+
+            return (
+                <ProgressViewer
+                    value={totalPoolUsage}
+                    capacity={1}
+                    colorizeProgress
+                    percents
+                    vertical
+                />
+            );
+        },
+        align: DataTable.LEFT,
+        width: 85,
+        resizeMinWidth: 40,
+    };
+}
 export function getLoadAverageColumn<T extends {LoadAveragePercents?: number[]}>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.LoadAverage,

src/components/nodesColumns/constants.ts

@@ -14,7 +14,9 @@ export const NODES_COLUMNS_IDS = {
     Version: 'Version',
     Uptime: 'Uptime',
     Memory: 'Memory',
+    RAM: 'RAM',
     CPU: 'CPU',
+    TotalCPU: 'TotalCPU',
     LoadAverage: 'LoadAverage',
     Load: 'Load',
     DiskSpaceUsage: 'DiskSpaceUsage',
@@ -54,9 +56,15 @@ export const NODES_COLUMNS_TITLES = {
     get Memory() {
         return i18n('memory');
     },
+    get RAM() {
+        return i18n('ram');
+    },
     get CPU() {
         return i18n('cpu');
     },
+    get TotalCPU() {
+        return i18n('totalcpu');
+    },
     get LoadAverage() {
         return i18n('load-average');
     },
@@ -94,7 +102,9 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     Version: ['Version'],
     Uptime: ['Uptime'],
     Memory: ['Memory'],
+    RAM: ['Memory'],
     CPU: ['CPU'],
+    TotalCPU: ['CPU'],
     LoadAverage: ['LoadAverage'],
     Load: ['LoadAverage'],
     DiskSpaceUsage: ['DiskSpaceUsage'],

src/components/nodesColumns/i18n/en.json

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

src/containers/Nodes/columns/columns.tsx

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