fix(Nodes): better memory bars (#1091)

Author: kunga

src/components/ProgressViewer/ProgressViewer.tsx

@@ -86,6 +86,9 @@ export function ProgressViewer({
         } else if (fillWidth > dangerThreshold) {
             status = inverseColorize ? 'good' : 'danger';
         }
+        if (!isNumeric(capacity)) {
+            fillWidth = 100;
+        }
     }
 
     const lineStyle = {

src/containers/Nodes/getNodesColumns.tsx

@@ -12,10 +12,7 @@ import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import type {GetNodeRefFunc} from '../../types/additionalProps';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
-import {
-    formatBytesToGigabyte,
-    formatStorageValuesToGb,
-} from '../../utils/dataFormatters/dataFormatters';
+import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 
 export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 
@@ -110,13 +107,14 @@ const memoryColumn: NodesColumn = {
     header: 'Memory',
     sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
     defaultOrder: DataTable.DESCENDING,
-    render: ({row}) => {
-        if (row.MemoryUsed) {
-            return formatBytesToGigabyte(row.MemoryUsed);
-        } else {
-            return '—';
-        }
-    },
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.MemoryUsed}
+            capacity={row.MemoryLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
     align: DataTable.RIGHT,
     width: 120,
 };
@@ -138,17 +136,18 @@ const loadAverageColumn: NodesColumn = {
     header: 'Load average',
     sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
     defaultOrder: DataTable.DESCENDING,
-    render: ({row}) =>
-        row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
-            <ProgressViewer
-                value={row.LoadAveragePercents[0]}
-                percents={true}
-                colorizeProgress={true}
-                capacity={100}
-            />
-        ) : (
-            '—'
-        ),
+    render: ({row}) => (
+        <ProgressViewer
+            value={
+                row.LoadAveragePercents && row.LoadAveragePercents.length > 0
+                    ? row.LoadAveragePercents[0]
+                    : undefined
+            }
+            percents={true}
+            colorizeProgress={true}
+            capacity={100}
+        />
+    ),
     align: DataTable.LEFT,
     width: 140,
     resizeMinWidth: 140,
@@ -211,7 +210,7 @@ const topNodesMemoryColumn: NodesColumn = {
 
 const sharedCacheUsageColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.SharedCacheUsage,
-    header: 'Tablet Cache',
+    header: 'Caches',
     render: ({row}) => (
         <ProgressViewer
             value={row.SharedCacheUsed}
@@ -226,23 +225,6 @@ const sharedCacheUsageColumn: NodesColumn = {
     sortable: false,
 };
 
-const memoryUsedInAllocColumn: NodesColumn = {
-    name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
-    header: 'Query Runtime',
-    render: ({row}) => (
-        <ProgressViewer
-            value={row.MemoryUsedInAlloc}
-            capacity={row.MemoryLimit}
-            formatValues={formatStorageValuesToGb}
-            colorizeProgress={true}
-        />
-    ),
-    align: DataTable.LEFT,
-    width: 140,
-    resizeMinWidth: 140,
-    sortable: false,
-};
-
 const sessionsColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TotalSessions,
     header: 'Sessions',
@@ -295,7 +277,6 @@ export function getTopNodesByMemoryColumns({
         topNodesLoadAverageColumn,
         topNodesMemoryColumn,
         sharedCacheUsageColumn,
-        memoryUsedInAllocColumn,
         sessionsColumn,
         getTabletsColumn(tabletsPath),
     ];

src/containers/Tenants/Tenants.tsx

@@ -31,9 +31,9 @@ import type {AdditionalTenantsProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {
-    formatBytesToGigabyte,
     formatCPU,
     formatNumber,
+    formatStorageValuesToGb,
 } from '../../utils/dataFormatters/dataFormatters';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {getTenantPath} from '../Tenant/TenantPages';
@@ -183,15 +183,15 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                 name: 'memory',
                 header: 'Memory',
                 width: 120,
-                render: ({row}) => (row.memory ? formatBytesToGigabyte(row.memory) : '—'),
+                render: ({row}) => (row.memory ? formatStorageValuesToGb(row.memory) : '—'),
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },
             {
                 name: 'storage',
                 header: 'Storage',
                 width: 120,
-                render: ({row}) => (row.storage ? formatBytesToGigabyte(row.storage) : '—'),
+                render: ({row}) => (row.storage ? formatStorageValuesToGb(row.storage) : '—'),
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },

src/utils/dataFormatters/dataFormatters.ts

@@ -6,7 +6,7 @@ import {
     getSizeWithSignificantDigits,
 } from '../bytesParsers/formatBytes';
 import type {BytesSizes} from '../bytesParsers/formatBytes';
-import {DAY_IN_SECONDS, GIGABYTE, HOUR_IN_SECONDS} from '../constants';
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS} from '../constants';
 import {configuredNumeral} from '../numeral';
 import {isNumeric} from '../utils';
 
@@ -33,10 +33,6 @@ export const formatBps = (bytes?: string | number) => {
     return formattedBytes + '/s';
 };
 
-export const formatBytesToGigabyte = (bytes: number | string) => {
-    return `${Math.floor(Number(bytes) / GIGABYTE)} GB`;
-};
-
 export const stringifyVdiskId = (id?: TVDiskID | TVSlotId) => {
     return id ? Object.values(id).join('-') : '';
 };