Web console: fix row numbers to be abbreviated (apache#17942)

* fix row numbers to be abbreviated

* preview dialog sort descending

Author: vogievetsky

web-console/src/components/segment-timeline/segment-bar-chart-render.tsx

@@ -40,6 +40,7 @@ import {
   filterMap,
   formatBytes,
   formatNumber,
+  formatNumberAbbreviated,
   formatStartDuration,
   groupBy,
   groupByAsMap,
@@ -345,7 +346,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
         return formatNumber(n); // + ' seg/day';
 
       case 'rows':
-        return formatNumber(n); // + ' row/day';
+        return formatNumberAbbreviated(n); // + ' row/day';
 
       case 'size':
         return formatBytes(n);

web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.tsx

@@ -43,7 +43,7 @@ export const DatasourcePreviewPane = React.memo(function DatasourcePreviewPane(
       let result: QueryResult;
       try {
         result = await queryRunner.runQuery({
-          query: `SELECT * FROM ${T(datasource)}`,
+          query: `SELECT * FROM ${T(datasource)} ORDER BY __time DESC`,
           extraQueryContext: { sqlOuterLimit: 100 },
           cancelToken,
         });

web-console/src/utils/general.spec.ts

@@ -25,6 +25,7 @@ import {
   formatMegabytes,
   formatMillions,
   formatNumber,
+  formatNumberAbbreviated,
   formatPercent,
   hashJoaat,
   moveElement,
@@ -106,6 +107,18 @@ describe('general', () => {
     });
   });
 
+  describe('formatNumberAbbreviated', () => {
+    it('works', () => {
+      expect(formatNumberAbbreviated(null as any)).toEqual('0');
+      expect(formatNumberAbbreviated(0)).toEqual('0');
+      expect(formatNumberAbbreviated(5)).toEqual('5');
+      expect(formatNumberAbbreviated(5.1)).toEqual('5.1');
+      expect(formatNumberAbbreviated(10000)).toEqual('10K');
+      expect(formatNumberAbbreviated(4000000000)).toEqual('4B');
+      expect(formatNumberAbbreviated(1234567890)).toEqual('1.23B');
+    });
+  });
+
   describe('formatInteger', () => {
     it('works', () => {
       expect(formatInteger(10000)).toEqual('10,000');

web-console/src/utils/general.tsx

@@ -279,6 +279,14 @@ export function formatNumber(n: NumberLike): string {
   return (n || 0).toLocaleString('en-US', { maximumFractionDigits: 20 });
 }
 
+export function formatNumberAbbreviated(n: NumberLike): string {
+  return (n || 0).toLocaleString('en-US', {
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 2,
+  });
+}
+
 export function formatRate(n: NumberLike) {
   return numeral(n).format('0,0.0') + '/s';
 }