From 72eeeec02441e6421337d13420d3a364cb39354a Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 19 Jul 2024 15:20:44 -0700
Subject: [PATCH] fix NPE in number formatting (#16760)

---
 .../components/record-table-pane/record-table-pane.tsx |  3 ++-
 web-console/src/utils/general.spec.ts                  | 10 ++++++++++
 web-console/src/utils/general.tsx                      |  2 +-
 web-console/src/utils/table-helpers.ts                 |  6 ++----
 4 files changed, 15 insertions(+), 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
index 9ba090fa1102..262298c1052e 100644
--- 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
index a0f268a8c789..4b97cb19acb0 100644
--- 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
index a4e32bbf126a..a3256c3ab11d 100644
--- 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
index a2b97350fa4e..006d56dff48e 100644
--- 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;
       }