fix: informative popups

Author: astandrik

src/components/CellWithPopover/CellWithPopover.scss

@@ -16,5 +16,9 @@
         .g-popover__handler {
             display: inline;
         }
+
+        &_full-width {
+            width: 100%;
+        }
     }
 }

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}

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)} %`,
     },

src/components/nodesColumns/columns.tsx

@@ -1,4 +1,5 @@
 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';
@@ -11,15 +12,18 @@ import {
 } 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';
 
 export function getNodeIdColumn<T extends {NodeId?: string | number}>(): Column<T> {
@@ -114,24 +118,52 @@ 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
-            />
-        ),
+        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)
+                        }
+                        colorizeProgress
+                        vertical
+                        hideCapacity
+                    />
+                </CellWithPopover>
+            );
+        },
         align: DataTable.LEFT,
         width: 85,
         resizeMinWidth: 40,
@@ -183,13 +215,29 @@ export function getTotalCpuColumn<T extends {PoolStats?: TPoolStats[]}>(): Colum
             const totalPoolUsage = row.PoolStats.reduce((acc, pool) => acc + (pool.Usage || 0), 0);
 
             return (
-                <ProgressViewer
-                    value={totalPoolUsage}
-                    capacity={1}
-                    colorizeProgress
-                    percents
-                    vertical
-                />
+                <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
+                        value={totalPoolUsage}
+                        capacity={1}
+                        colorizeProgress
+                        percents
+                        vertical
+                    />
+                </CellWithPopover>
             );
         },
         align: DataTable.LEFT,

src/components/nodesColumns/i18n/en.json

@@ -17,5 +17,7 @@
   "caches": "Caches",
   "sessions": "Sessions",
   "missing": "Missing",
-  "pdisks": "PDisks"
+  "pdisks": "PDisks",
+  "field_memory-used": "Memory used",
+  "field_memory-limit": "Memory limit"
 }