fix NPE in number formatting (#16760)

apache · Jul 19, 2024 · 72eeeec · 72eeeec
1 parent a34a06e
commit 72eeeec
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -33,6 +33,7 @@ import {
   columnToWidth,
   formatNumber,
   getNumericColumnBraces,
+  isNumberLike,
 } from '../../utils';
 import { BracedText } from '../braced-text/braced-text';
 import { CellFilterMenu } from '../cell-filter-menu/cell-filter-menu';
@@ -157,7 +158,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
                       {numericColumnBraces[i] ? (
                         <BracedText
                           className="table-padding"
-                          text={formatNumber(value)}
+                          text={isNumberLike(value) ? formatNumber(value) : String(value)}
                           braces={numericColumnBraces[i]}
                           padFractionalPart
                         />

diff --git a/web-console/src/utils/general.spec.ts b/web-console/src/utils/general.spec.ts
@@ -24,6 +24,7 @@ import {
   formatInteger,
   formatMegabytes,
   formatMillions,
+  formatNumber,
   formatPercent,
   hashJoaat,
   moveElement,
@@ -96,6 +97,15 @@ describe('general', () => {
     });
   });
 
+  describe('formatNumber', () => {
+    it('works', () => {
+      expect(formatNumber(null as any)).toEqual('0');
+      expect(formatNumber(0)).toEqual('0');
+      expect(formatNumber(5)).toEqual('5');
+      expect(formatNumber(5.1)).toEqual('5.1');
+    });
+  });
+
   describe('formatInteger', () => {
     it('works', () => {
       expect(formatInteger(10000)).toEqual('10,000');

diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
@@ -240,7 +240,7 @@ export function formatInteger(n: NumberLike): string {
 }
 
 export function formatNumber(n: NumberLike): string {
-  return n.toLocaleString('en-US', { maximumFractionDigits: 20 });
+  return (n || 0).toLocaleString('en-US', { maximumFractionDigits: 20 });
 }
 
 export function formatRate(n: NumberLike) {

diff --git a/web-console/src/utils/table-helpers.ts b/web-console/src/utils/table-helpers.ts
@@ -20,7 +20,7 @@ import type { QueryResult } from '@druid-toolkit/query';
 import { C } from '@druid-toolkit/query';
 import type { Filter } from 'react-table';
 
-import { filterMap, formatNumber, oneOf } from './general';
+import { filterMap, formatNumber, isNumberLike, oneOf } from './general';
 import { deepSet } from './object-change';
 
 export interface Pagination {
@@ -55,9 +55,7 @@ export function getNumericColumnBraces(
     queryResult.header.forEach((column, i) => {
       if (!oneOf(column.nativeType, 'LONG', 'FLOAT', 'DOUBLE')) return;
       const formatter = columnHints?.get(column.name)?.formatter || formatNumber;
-      const braces = filterMap(rows, row =>
-        oneOf(typeof row[i], 'number', 'bigint') ? formatter(row[i]) : undefined,
-      );
+      const braces = filterMap(rows, row => (isNumberLike(row[i]) ? formatter(row[i]) : undefined));
       if (braces.length) {
         numericColumnBraces[i] = braces;
       }