Skip to content

Commit 87f2b92

Browse files
authored
fix(Nodes): better memory bars (#1091)
1 parent 5f8a852 commit 87f2b92

File tree

4 files changed

+29
-49
lines changed

4 files changed

+29
-49
lines changed

src/components/ProgressViewer/ProgressViewer.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ export function ProgressViewer({
8686
} else if (fillWidth > dangerThreshold) {
8787
status = inverseColorize ? 'good' : 'danger';
8888
}
89+
if (!isNumeric(capacity)) {
90+
fillWidth = 100;
91+
}
8992
}
9093

9194
const lineStyle = {

src/containers/Nodes/getNodesColumns.tsx

Lines changed: 22 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@ import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
1212
import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
1313
import type {GetNodeRefFunc} from '../../types/additionalProps';
1414
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
15-
import {
16-
formatBytesToGigabyte,
17-
formatStorageValuesToGb,
18-
} from '../../utils/dataFormatters/dataFormatters';
15+
import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
1916

2017
export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
2118

@@ -110,13 +107,14 @@ const memoryColumn: NodesColumn = {
110107
header: 'Memory',
111108
sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
112109
defaultOrder: DataTable.DESCENDING,
113-
render: ({row}) => {
114-
if (row.MemoryUsed) {
115-
return formatBytesToGigabyte(row.MemoryUsed);
116-
} else {
117-
return '—';
118-
}
119-
},
110+
render: ({row}) => (
111+
<ProgressViewer
112+
value={row.MemoryUsed}
113+
capacity={row.MemoryLimit}
114+
formatValues={formatStorageValuesToGb}
115+
colorizeProgress={true}
116+
/>
117+
),
120118
align: DataTable.RIGHT,
121119
width: 120,
122120
};
@@ -138,17 +136,18 @@ const loadAverageColumn: NodesColumn = {
138136
header: 'Load average',
139137
sortAccessor: ({LoadAveragePercents = []}) => LoadAveragePercents[0],
140138
defaultOrder: DataTable.DESCENDING,
141-
render: ({row}) =>
142-
row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (
143-
<ProgressViewer
144-
value={row.LoadAveragePercents[0]}
145-
percents={true}
146-
colorizeProgress={true}
147-
capacity={100}
148-
/>
149-
) : (
150-
'—'
151-
),
139+
render: ({row}) => (
140+
<ProgressViewer
141+
value={
142+
row.LoadAveragePercents && row.LoadAveragePercents.length > 0
143+
? row.LoadAveragePercents[0]
144+
: undefined
145+
}
146+
percents={true}
147+
colorizeProgress={true}
148+
capacity={100}
149+
/>
150+
),
152151
align: DataTable.LEFT,
153152
width: 140,
154153
resizeMinWidth: 140,
@@ -211,7 +210,7 @@ const topNodesMemoryColumn: NodesColumn = {
211210

212211
const sharedCacheUsageColumn: NodesColumn = {
213212
name: NODES_COLUMNS_IDS.SharedCacheUsage,
214-
header: 'Tablet Cache',
213+
header: 'Caches',
215214
render: ({row}) => (
216215
<ProgressViewer
217216
value={row.SharedCacheUsed}
@@ -226,23 +225,6 @@ const sharedCacheUsageColumn: NodesColumn = {
226225
sortable: false,
227226
};
228227

229-
const memoryUsedInAllocColumn: NodesColumn = {
230-
name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
231-
header: 'Query Runtime',
232-
render: ({row}) => (
233-
<ProgressViewer
234-
value={row.MemoryUsedInAlloc}
235-
capacity={row.MemoryLimit}
236-
formatValues={formatStorageValuesToGb}
237-
colorizeProgress={true}
238-
/>
239-
),
240-
align: DataTable.LEFT,
241-
width: 140,
242-
resizeMinWidth: 140,
243-
sortable: false,
244-
};
245-
246228
const sessionsColumn: NodesColumn = {
247229
name: NODES_COLUMNS_IDS.TotalSessions,
248230
header: 'Sessions',
@@ -295,7 +277,6 @@ export function getTopNodesByMemoryColumns({
295277
topNodesLoadAverageColumn,
296278
topNodesMemoryColumn,
297279
sharedCacheUsageColumn,
298-
memoryUsedInAllocColumn,
299280
sessionsColumn,
300281
getTabletsColumn(tabletsPath),
301282
];

src/containers/Tenants/Tenants.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ import type {AdditionalTenantsProps} from '../../types/additionalProps';
3131
import {cn} from '../../utils/cn';
3232
import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
3333
import {
34-
formatBytesToGigabyte,
3534
formatCPU,
3635
formatNumber,
36+
formatStorageValuesToGb,
3737
} from '../../utils/dataFormatters/dataFormatters';
3838
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
3939
import {getTenantPath} from '../Tenant/TenantPages';
@@ -183,15 +183,15 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
183183
name: 'memory',
184184
header: 'Memory',
185185
width: 120,
186-
render: ({row}) => (row.memory ? formatBytesToGigabyte(row.memory) : '—'),
186+
render: ({row}) => (row.memory ? formatStorageValuesToGb(row.memory) : '—'),
187187
align: DataTable.RIGHT,
188188
defaultOrder: DataTable.DESCENDING,
189189
},
190190
{
191191
name: 'storage',
192192
header: 'Storage',
193193
width: 120,
194-
render: ({row}) => (row.storage ? formatBytesToGigabyte(row.storage) : '—'),
194+
render: ({row}) => (row.storage ? formatStorageValuesToGb(row.storage) : '—'),
195195
align: DataTable.RIGHT,
196196
defaultOrder: DataTable.DESCENDING,
197197
},

src/utils/dataFormatters/dataFormatters.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
getSizeWithSignificantDigits,
77
} from '../bytesParsers/formatBytes';
88
import type {BytesSizes} from '../bytesParsers/formatBytes';
9-
import {DAY_IN_SECONDS, GIGABYTE, HOUR_IN_SECONDS} from '../constants';
9+
import {DAY_IN_SECONDS, HOUR_IN_SECONDS} from '../constants';
1010
import {configuredNumeral} from '../numeral';
1111
import {isNumeric} from '../utils';
1212

@@ -33,10 +33,6 @@ export const formatBps = (bytes?: string | number) => {
3333
return formattedBytes + '/s';
3434
};
3535

36-
export const formatBytesToGigabyte = (bytes: number | string) => {
37-
return `${Math.floor(Number(bytes) / GIGABYTE)} GB`;
38-
};
39-
4036
export const stringifyVdiskId = (id?: TVDiskID | TVSlotId) => {
4137
return id ? Object.values(id).join('-') : '';
4238
};

0 commit comments

Comments
 (0)