fix: accept non int stats values (#748)

* added logic to surface any string
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint fix and adde dunit tests
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* typed and always return something
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* added tests for component
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

amundsen_application/static/js/components/ColumnList/ColumnStats/index.spec.tsx

@@ -114,5 +114,27 @@ describe('ColumnStats', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when different stat values are passed', () => {
+      const { stats } = dataBuilder.withNonNumericStats().build();
+
+      it('displays formatted number', () => {
+        const { wrapper } = setup({ stats });
+        const actual = wrapper.find('.stat-value').first().text();
+
+        const expected = '12,345';
+
+        expect(actual).toEqual(expected);
+      });
+
+      it('displays date string', () => {
+        const { wrapper } = setup({ stats });
+        const actual = wrapper.find('.stat-value').last().text();
+
+        const expected = '2020-11-03';
+
+        expect(actual).toEqual(expected);
+      });
+    });
   });
 });

amundsen_application/static/js/components/ColumnList/ColumnStats/index.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 
 import { TableColumnStats } from 'interfaces/index';
-import { formatNumber } from 'utils/numberUtils';
+import { formatNumber, isNumber } from 'utils/numberUtils';
 import { getStatsInfoText } from '../utils';
 
 import { COLUMN_STATS_TITLE } from '../constants';
@@ -24,12 +24,12 @@ const ColumnStatRow: React.FC<ColumnStatRowProps> = ({
   stat_type,
   stat_val,
 }: ColumnStatRowProps) => {
-  const numberVal = +stat_val;
-
   return (
     <div className="column-stat-row">
       <div className="stat-name body-3">{stat_type.toUpperCase()}</div>
-      <div className="stat-value">{formatNumber(numberVal)}</div>
+      <div className="stat-value">
+        {isNumber(stat_val) ? formatNumber(+stat_val) : stat_val}
+      </div>
     </div>
   );
 };

amundsen_application/static/js/components/ColumnList/ColumnStats/testDataBuilder.ts

@@ -135,6 +135,26 @@ function TestDataBuilder(config = {}) {
 
     return new this.Klass(attr);
   };
+  this.withNonNumericStats = () => {
+    const attr = {
+      stats: [
+        {
+          end_epoch: 1571616000,
+          start_epoch: 1571616000,
+          stat_type: 'count',
+          stat_val: '12345',
+        },
+        {
+          end_epoch: 1571616000,
+          start_epoch: 1571616000,
+          stat_type: 'date',
+          stat_val: '2020-11-03',
+        },
+      ],
+    };
+
+    return new this.Klass(attr);
+  };
 
   this.withEmptyStats = () => {
     const attr = { stats: [] };

amundsen_application/static/js/utils/index.spec.ts

 import { ResourceType } from 'interfaces/Resources';
+import { assert } from 'console';
+import { access } from 'fs';
+import { sys } from 'typescript';
 import * as DateUtils from './dateUtils';
 import * as LogUtils from './logUtils';
 import * as NavigationUtils from './navigationUtils';
 import * as TextUtils from './textUtils';
+import * as NumberUtils from './numberUtils';
 
 describe('textUtils', () => {
   describe('convertText', () => {
@@ -48,6 +52,41 @@ describe('textUtils', () => {
   });
 });
 
+describe('numberUtils', () => {
+  describe('isNumber', () => {
+    it('returns true if string is number', () => {
+      const actual = NumberUtils.isNumber('1234');
+      const expected = true;
+
+      expect(actual).toEqual(expected);
+    });
+    it('returns false if string is not number', () => {
+      const actualString = NumberUtils.isNumber('abcd');
+      const actualDate = NumberUtils.isNumber('2020-11-03');
+      const actualAlphaNum = NumberUtils.isNumber('1a2b3c');
+      const expected = false;
+
+      expect(actualString).toEqual(expected);
+      expect(actualDate).toEqual(expected);
+      expect(actualAlphaNum).toEqual(expected);
+    });
+  });
+  describe('formatNumber', () => {
+    it('returns formatted number', () => {
+      const actual = NumberUtils.formatNumber('1998');
+      const expected = '1,998';
+
+      expect(actual).toEqual(expected);
+    });
+    it('get NaN on non numbers', () => {
+      const actual = NumberUtils.formatNumber('2020-11-03');
+      const expected = 'NaN';
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+
 describe('navigationUtils', () => {
   describe('updateSearchUrl', () => {
     let mockUrl;

amundsen_application/static/js/utils/numberUtils.ts

@@ -12,3 +12,7 @@ export function formatNumber(value) {
   }
   return Intl.NumberFormat().format(value);
 }
+
+export function isNumber(value): boolean {
+  return !Number.isNaN(Number(value));
+}