From fdc8aa283340054d94b3fde593a82aed5b2ba0f4 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Thu, 5 Jan 2023 18:06:32 -0800 Subject: [PATCH] better show totals when grouping (#13631) --- .../src/bootstrap/react-table-defaults.tsx | 9 ++ .../src/views/services-view/services-view.tsx | 126 +++++++++--------- 2 files changed, 69 insertions(+), 66 deletions(-) diff --git a/web-console/src/bootstrap/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx index 139a13bcd5a..89370866b21 100644 --- a/web-console/src/bootstrap/react-table-defaults.tsx +++ b/web-console/src/bootstrap/react-table-defaults.tsx @@ -46,6 +46,15 @@ export function bootstrapReactTable() { NoDataComponent: NoData, FilterComponent: GenericFilterInput, PaginationComponent: ReactTablePagination, + PivotValueComponent: function PivotValue(opt: any) { + const { value, subRows } = opt; + let msg = String(value); + if (msg === 'undefined') msg = 'n/a'; + if (subRows) { + msg += ` (${subRows.length})`; + } + return {msg}; + }, AggregatedComponent: function Aggregated(opt: any) { const { subRows, column } = opt; const previewValues = subRows diff --git a/web-console/src/views/services-view/services-view.tsx b/web-console/src/views/services-view/services-view.tsx index 6fd79852962..d3e4ce9d430 100644 --- a/web-console/src/views/services-view/services-view.tsx +++ b/web-console/src/views/services-view/services-view.tsx @@ -407,16 +407,16 @@ ORDER BY filterable: false, accessor: 'curr_size', className: 'padded', - Aggregated: row => { - if (row.row._pivotVal !== 'historical') return ''; - const originals = row.subRows.map(r => r._original); - const totalCurr = sum(originals, s => s.curr_size); + Aggregated: ({ subRows }) => { + const originalRows = subRows.map(r => r._original); + if (!originalRows.some(r => r.service_type === 'historical')) return ''; + const totalCurr = sum(originalRows, s => s.curr_size); return formatBytes(totalCurr); }, - Cell: row => { - if (row.aggregated || row.original.service_type !== 'historical') return ''; - if (row.value === null) return ''; - return formatBytes(row.value); + Cell: ({ value, aggregated, original }) => { + if (aggregated || original.service_type !== 'historical') return ''; + if (value === null) return ''; + return formatBytes(value); }, }, { @@ -427,16 +427,16 @@ ORDER BY filterable: false, accessor: 'max_size', className: 'padded', - Aggregated: row => { - if (row.row._pivotVal !== 'historical') return ''; - const originals = row.subRows.map(r => r._original); - const totalMax = sum(originals, s => s.max_size); + Aggregated: ({ subRows }) => { + const originalRows = subRows.map(r => r._original); + if (!originalRows.some(r => r.service_type === 'historical')) return ''; + const totalMax = sum(originalRows, s => s.max_size); return formatBytes(totalMax); }, - Cell: row => { - if (row.aggregated || row.original.service_type !== 'historical') return ''; - if (row.value === null) return ''; - return formatBytes(row.value); + Cell: ({ value, aggregated, original }) => { + if (aggregated || original.service_type !== 'historical') return ''; + if (value === null) return ''; + return formatBytes(value); }, }, { @@ -457,56 +457,51 @@ ORDER BY return row.max_size ? Number(row.curr_size) / Number(row.max_size) : null; } }, - Aggregated: row => { - switch (row.row._pivotVal) { - case 'historical': { - const originalHistoricals: ServiceResultRow[] = row.subRows.map(r => r._original); - const totalCurr = sum(originalHistoricals, s => Number(s.curr_size)); - const totalMax = sum(originalHistoricals, s => Number(s.max_size)); - return fillIndicator(totalCurr / totalMax); + Aggregated: ({ subRows }) => { + const originalRows = subRows.map(r => r._original); + + if (originalRows.some(r => r.service_type === 'historical')) { + const totalCurr = sum(originalRows, s => Number(s.curr_size)); + const totalMax = sum(originalRows, s => Number(s.max_size)); + return fillIndicator(totalCurr / totalMax); + } else if ( + originalRows.some( + r => r.service_type === 'indexer' || r.service_type === 'middle_manager', + ) + ) { + const workerInfos: WorkerInfo[] = filterMap(originalRows, r => r.workerInfo); + + if (!workerInfos.length) { + return 'Could not get worker infos'; } - case 'indexer': - case 'middle_manager': { - const workerInfos: WorkerInfo[] = filterMap( - row.subRows, - r => r._original.workerInfo, - ); - - if (!workerInfos.length) { - return 'Could not get worker infos'; - } - - const totalCurrCapacityUsed = sum( - workerInfos, - w => Number(w.currCapacityUsed) || 0, - ); - const totalWorkerCapacity = sum( - workerInfos, - s => deepGet(s, 'worker.capacity') || 0, - ); - return `${totalCurrCapacityUsed} / ${totalWorkerCapacity} (total slots)`; - } - - default: - return ''; + const totalCurrCapacityUsed = sum( + workerInfos, + w => Number(w.currCapacityUsed) || 0, + ); + const totalWorkerCapacity = sum( + workerInfos, + s => deepGet(s, 'worker.capacity') || 0, + ); + return `Slots used: ${totalCurrCapacityUsed} of ${totalWorkerCapacity}`; + } else { + return ''; } }, - Cell: row => { - if (row.aggregated) return ''; - const { service_type } = row.original; + Cell: ({ value, aggregated, original }) => { + if (aggregated) return ''; + const { service_type } = original; switch (service_type) { case 'historical': - return fillIndicator(row.value); + return fillIndicator(value); case 'indexer': case 'middle_manager': { - if (!deepGet(row, 'original.workerInfo')) { + if (!deepGet(original, 'workerInfo')) { return 'Could not get capacity info'; } - const currCapacityUsed = - deepGet(row, 'original.workerInfo.currCapacityUsed') || 0; - const capacity = deepGet(row, 'original.workerInfo.worker.capacity'); + const currCapacityUsed = deepGet(original, 'workerInfo.currCapacityUsed') || 0; + const capacity = deepGet(original, 'workerInfo.worker.capacity'); if (typeof capacity === 'number') { return `Slots used: ${currCapacityUsed} of ${capacity}`; } else { @@ -563,18 +558,18 @@ ORDER BY return 0; } }, - Cell: row => { - if (row.aggregated) return ''; - const { service_type } = row.original; + Cell: ({ value, aggregated, original }) => { + if (aggregated) return ''; + const { service_type } = original; switch (service_type) { case 'middle_manager': case 'indexer': case 'coordinator': case 'overlord': - return row.value; + return value; case 'historical': { - const { loadQueueInfo } = row.original; + const { loadQueueInfo } = original; if (!loadQueueInfo) return 'Could not get load queue info'; const { segmentsToLoad, segmentsToLoadSize, segmentsToDrop, segmentsToDropSize } = @@ -591,12 +586,11 @@ ORDER BY return ''; } }, - Aggregated: row => { - if (row.row._pivotVal !== 'historical') return ''; - const loadQueueInfos: LoadQueueInfo[] = filterMap( - row.subRows, - r => r._original.loadQueueInfo, - ); + Aggregated: ({ subRows }) => { + const originalRows = subRows.map(r => r._original); + if (!originalRows.some(r => r.service_type === 'historical')) return ''; + + const loadQueueInfos: LoadQueueInfo[] = filterMap(originalRows, r => r.loadQueueInfo); if (!loadQueueInfos.length) { return 'Could not get load queue infos';