feat: implement simple and narrow vertical progress bar (#1560)

astandrik · web-flow · commit e5d0823d7869 · 2024-11-02T08:10:33.000Z
diff --git a/src/components/CellWithPopover/CellWithPopover.scss b/src/components/CellWithPopover/CellWithPopover.scss
@@ -16,5 +16,9 @@
         .g-popover__handler {
             display: inline;
         }
+
+        &_full-width {
+            width: 100%;
+        }
     }
 }
diff --git a/src/components/CellWithPopover/CellWithPopover.tsx b/src/components/CellWithPopover/CellWithPopover.tsx
@@ -9,6 +9,7 @@ const b = cn('ydb-cell-with-popover');
 
 interface CellWithPopoverProps extends PopoverProps {
     wrapperClassName?: string;
+    fullWidth?: boolean;
 }
 
 const DELAY_TIMEOUT = 100;
@@ -17,14 +18,15 @@ export function CellWithPopover({
     children,
     className,
     wrapperClassName,
+    fullWidth,
     ...props
 }: CellWithPopoverProps) {
     return (
-        <div className={b(null, wrapperClassName)}>
+        <div className={b({fullWidth}, wrapperClassName)}>
             <Popover
                 delayClosing={DELAY_TIMEOUT}
                 delayOpening={DELAY_TIMEOUT}
-                className={b('popover', className)}
+                className={b('popover', {'full-width': fullWidth}, className)}
                 {...props}
             >
                 {children}
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -48,6 +48,7 @@ export interface ProgressViewerProps {
     inverseColorize?: boolean;
     warningThreshold?: number;
     dangerThreshold?: number;
+    hideCapacity?: boolean;
 }
 
 export function ProgressViewer({
@@ -61,6 +62,7 @@ export function ProgressViewer({
     inverseColorize,
     warningThreshold = 60,
     dangerThreshold = 80,
+    hideCapacity,
 }: ProgressViewerProps) {
     const theme = useTheme();
 
@@ -94,7 +96,7 @@ export function ProgressViewer({
     };
 
     const renderContent = () => {
-        if (isNumeric(capacity)) {
+        if (isNumeric(capacity) && !hideCapacity) {
             return `${valueText} ${divider} ${capacityText}`;
         }
 
diff --git a/src/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.tsx b/src/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.tsx
@@ -1,7 +1,7 @@
 import type {TPoolStats} from '../../../types/api/nodes';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
 
-const formatPool = createInfoFormatter<TPoolStats>({
+export const formatPool = createInfoFormatter<TPoolStats>({
     values: {
         Usage: (value) => value && `${(Number(value) * 100).toFixed(2)} %`,
     },
diff --git a/src/components/nodesColumns/NodesColumns.scss b/src/components/nodesColumns/NodesColumns.scss
@@ -0,0 +1,6 @@
+.ydb-nodes-columns {
+    &__column-ram,
+    &__column-cpu {
+        min-width: 40px;
+    }
+}
diff --git a/src/components/nodesColumns/columns.tsx b/src/components/nodesColumns/columns.tsx
@@ -1,24 +1,36 @@
 import DataTable from '@gravity-ui/react-data-table';
+import {DefinitionList} from '@gravity-ui/uikit';
 
 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 {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 {isNumeric} from '../../utils/utils';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {NodeHostWrapper} from '../NodeHostWrapper/NodeHostWrapper';
 import type {NodeHostData} from '../NodeHostWrapper/NodeHostWrapper';
 import {PoolsGraph} from '../PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../TabletsStatistic';
+import {formatPool} from '../TooltipsContent';
 import {UsageLabel} from '../UsageLabel/UsageLabel';
 
 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,
@@ -111,6 +123,57 @@ 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}) => {
+            const [memoryUsed, memoryLimit] =
+                isNumeric(row.MemoryUsed) && isNumeric(row.MemoryLimit)
+                    ? formatStorageValues(
+                          Number(row.MemoryUsed),
+                          Number(row.MemoryLimit),
+                          'gb',
+                          undefined,
+                          true,
+                      )
+                    : [0, 0];
+            return (
+                <CellWithPopover
+                    placement={['top', 'auto']}
+                    fullWidth
+                    content={
+                        <DefinitionList responsive>
+                            <DefinitionList.Item name={i18n('field_memory-used')}>
+                                {memoryUsed}
+                            </DefinitionList.Item>
+                            <DefinitionList.Item name={i18n('field_memory-limit')}>
+                                {memoryLimit}
+                            </DefinitionList.Item>
+                        </DefinitionList>
+                    }
+                >
+                    <ProgressViewer
+                        value={row.MemoryUsed}
+                        capacity={row.MemoryLimit}
+                        formatValues={(value, total) =>
+                            formatStorageValues(value, total, 'gb', undefined, true)
+                        }
+                        className={b('column-ram')}
+                        colorizeProgress
+                        hideCapacity
+                    />
+                </CellWithPopover>
+            );
+        },
+        align: DataTable.LEFT,
+        width: 80,
+        resizeMinWidth: 40,
+    };
+}
 export function getSharedCacheUsageColumn<
     T extends {SharedCacheUsed?: string | number; SharedCacheLimit?: string | number},
 >(): Column<T> {
@@ -130,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}) =>
@@ -143,6 +206,65 @@ export function getCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Column<T>
         resizeMinWidth: 60,
     };
 }
+export function getCpuColumn<
+    T extends {PoolStats?: TPoolStats[]; CoresUsed?: number; CoresTotal?: number},
+>(): Column<T> {
+    return {
+        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;
+            }
+
+            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
+                    placement={['top', 'auto']}
+                    fullWidth
+                    content={
+                        <DefinitionList responsive>
+                            {row.PoolStats.map((pool) =>
+                                isNumeric(pool.Usage) ? (
+                                    <DefinitionList.Item key={pool.Name} name={pool.Name}>
+                                        {formatPool('Usage', pool.Usage).value}
+                                    </DefinitionList.Item>
+                                ) : null,
+                            )}
+                        </DefinitionList>
+                    }
+                >
+                    <ProgressViewer
+                        className={b('column-cpu')}
+                        value={totalPoolUsage}
+                        capacity={1}
+                        colorizeProgress
+                        percents
+                    />
+                </CellWithPopover>
+            );
+        },
+        align: DataTable.LEFT,
+        width: 80,
+        resizeMinWidth: 40,
+    };
+}
 export function getLoadAverageColumn<T extends {LoadAveragePercents?: number[]}>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.LoadAverage,
diff --git a/src/components/nodesColumns/constants.ts b/src/components/nodesColumns/constants.ts
@@ -14,7 +14,9 @@ export const NODES_COLUMNS_IDS = {
     Version: 'Version',
     Uptime: 'Uptime',
     Memory: 'Memory',
+    RAM: 'RAM',
     CPU: 'CPU',
+    Pools: 'Pools',
     LoadAverage: 'LoadAverage',
     Load: 'Load',
     DiskSpaceUsage: 'DiskSpaceUsage',
@@ -54,6 +56,12 @@ export const NODES_COLUMNS_TITLES = {
     get Memory() {
         return i18n('memory');
     },
+    get RAM() {
+        return i18n('ram');
+    },
+    get Pools() {
+        return i18n('pools');
+    },
     get CPU() {
         return i18n('cpu');
     },
@@ -94,6 +102,8 @@ export const NODES_COLUMNS_TO_DATA_FIELDS: Record<NodesColumnId, NodesRequiredFi
     Version: ['Version'],
     Uptime: ['Uptime'],
     Memory: ['Memory'],
+    RAM: ['Memory'],
+    Pools: ['CPU'],
     CPU: ['CPU'],
     LoadAverage: ['LoadAverage'],
     Load: ['LoadAverage'],
diff --git a/src/components/nodesColumns/i18n/en.json b/src/components/nodesColumns/i18n/en.json
@@ -7,13 +7,17 @@
   "version": "Version",
   "uptime": "Uptime",
   "memory": "Memory",
+  "ram": "RAM",
   "cpu": "CPU",
+  "pools": "Pools",
   "disk-usage": "Disk usage",
   "tablets": "Tablets",
   "load-average": "Load Average",
   "load": "Load",
   "caches": "Caches",
   "sessions": "Sessions",
   "missing": "Missing",
-  "pdisks": "PDisks"
+  "pdisks": "PDisks",
+  "field_memory-used": "Memory used",
+  "field_memory-limit": "Memory limit"
 }
diff --git a/src/containers/Nodes/columns/columns.tsx b/src/containers/Nodes/columns/columns.tsx
@@ -6,6 +6,8 @@ import {
     getMemoryColumn,
     getNodeIdColumn,
     getNodeNameColumn,
+    getPoolsColumn,
+    getRAMColumn,
     getRackColumn,
     getTabletsColumn,
     getUptimeColumn,
@@ -26,6 +28,8 @@ export function getNodesColumns(params: GetNodesColumnsParams): Column<NodesPrep
         getVersionColumn<NodesPreparedEntity>(),
         getUptimeColumn<NodesPreparedEntity>(),
         getMemoryColumn<NodesPreparedEntity>(),
+        getRAMColumn<NodesPreparedEntity>(),
+        getPoolsColumn<NodesPreparedEntity>(),
         getCpuColumn<NodesPreparedEntity>(),
         getLoadAverageColumn<NodesPreparedEntity>(),
         getTabletsColumn<NodesPreparedEntity>(params),
diff --git a/src/containers/Nodes/columns/constants.ts b/src/containers/Nodes/columns/constants.ts
@@ -10,7 +10,7 @@ export const DEFAULT_NODES_COLUMNS: NodesColumnId[] = [
     'Version',
     'Uptime',
     'Memory',
-    'CPU',
+    'Pools',
     'LoadAverage',
     'Tablets',
 ];
diff --git a/src/containers/Nodes/getNodes.ts b/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);
diff --git a/src/containers/Storage/StorageNodes/columns/columns.tsx b/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>(),
diff --git a/src/containers/Storage/StorageNodes/columns/constants.ts b/src/containers/Storage/StorageNodes/columns/constants.ts
@@ -13,7 +13,7 @@ export const DEFAULT_STORAGE_NODES_COLUMNS: NodesColumnId[] = [
     'Host',
     'DC',
     'Rack',
-    'CPU',
+    'Pools',
     'Uptime',
     'PDisks',
 ];
diff --git a/src/containers/Storage/StorageNodes/getNodes.ts b/src/containers/Storage/StorageNodes/getNodes.ts
@@ -7,7 +7,11 @@ import type {
 import {prepareStorageNodesResponse} from '../../../store/reducers/storage/utils';
 import type {NodesRequestParams} from '../../../types/api/nodes';
 import {prepareSortValue} from '../../../utils/filters';
-import {getUptimeParamValue, isSortableNodesProperty} from '../../../utils/nodes';
+import {
+    NODES_SORT_VALUE_TO_FIELD,
+    getUptimeParamValue,
+    isSortableNodesProperty,
+} from '../../../utils/nodes';
 import {getRequiredDataFields} from '../../../utils/tableUtils/getRequiredDataFields';
 
 export const getStorageNodes: FetchData<
@@ -37,7 +41,7 @@ export const getStorageNodes: FetchData<
     const {sortOrder, columnId} = sortParams ?? {};
 
     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);
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx
diff --git a/src/types/api/nodes.ts b/src/types/api/nodes.ts
diff --git a/src/utils/nodes.ts b/src/utils/nodes.ts
diff --git a/tests/suites/nodes/nodes.test.ts b/tests/suites/nodes/nodes.test.ts

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,9 @@`
`16`	`16`	`.g-popover__handler {`
`17`	`17`	`display: inline;`
`18`	`18`	`}`
	`19`	`+`
	`20`	`+ &_full-width {`
	`21`	`+ width: 100%;`
	`22`	`+ }`
`19`	`23`	`}`
`20`	`24`	`}`