feat: show records count on connections page

Column is called `Records` Count is shorten when greater than 1000. Ex: 1.6K, 3M Non-shorten count is always shown in the hover tooltip
NangoHQ · Nov 1, 2024 · c62465b · c62465b
1 parent 1fa7ae1
commit c62465b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/packages/webapp/src/pages/Connection/Syncs.tsx b/packages/webapp/src/pages/Connection/Syncs.tsx
@@ -69,8 +69,9 @@ export const Syncs: React.FC<SyncsProps> = ({ syncs, connection, provider }) =>
                             <Table.Head className="w-[120px]">Models</Table.Head>
                             <Table.Head className="w-[120px]">Last Execution</Table.Head>
                             <Table.Head className="w-[80px]">Frequency</Table.Head>
+                            <Table.Head className="w-[80px]">Records</Table.Head>
                             <Table.Head className="w-[120px]">Last Sync Start</Table.Head>
-                            <Table.Head className="w-[130px]">Next Sync Start</Table.Head>
+                            <Table.Head className="w-[140px]">Next Sync Start</Table.Head>
                             <Table.Head className="w-[40px]"></Table.Head>
                         </Table.Row>
                     </Table.Header>

diff --git a/packages/webapp/src/pages/Connection/components/SyncRow.tsx b/packages/webapp/src/pages/Connection/components/SyncRow.tsx
@@ -3,7 +3,7 @@ import * as Table from '../../../components/ui/Table';
 import { Tag } from '../../../components/ui/label/Tag';
 import { Link } from 'react-router-dom';
 import { EllipsisHorizontalIcon, QueueListIcon } from '@heroicons/react/24/outline';
-import { formatFrequency, getRunTime, parseLatestSyncResult, formatDateToUSFormat, interpretNextRun } from '../../../utils/utils';
+import { formatFrequency, getRunTime, parseLatestSyncResult, formatDateToUSFormat, interpretNextRun, formatRecordsCount } from '../../../utils/utils';
 import { getLogsUrl } from '../../../utils/logs';
 import { UserFacingSyncCommand } from '../../../types';
 import type { RunSyncCommand, SyncResponse } from '../../../types';
@@ -134,6 +134,9 @@ export const SyncRow: React.FC<{ sync: SyncResponse; connection: ApiConnectionFu
                 )}
             </Table.Cell>
             <Table.Cell bordered>{formatFrequency(sync.frequency)}</Table.Cell>
+            <Table.Cell bordered>
+                <SimpleTooltip tooltipContent={sync.record_count.toLocaleString()}>{formatRecordsCount(sync.record_count)}</SimpleTooltip>
+            </Table.Cell>
             <Table.Cell bordered>
                 <SimpleTooltip
                     tooltipContent={

diff --git a/packages/webapp/src/utils/utils.tsx b/packages/webapp/src/utils/utils.tsx
@@ -265,6 +265,27 @@ export function formatFrequency(frequency: string): string {
     return frequency;
 }
 
+export function formatRecordsCount(count: number): string {
+    const thresholds = [
+        { value: 1e12, suffix: 'T' }, // Trillion and above
+        { value: 1e9, suffix: 'B' }, // Billion
+        { value: 1e6, suffix: 'M' }, // Million
+        { value: 1e3, suffix: 'K' } // Thousand
+    ];
+
+    // Handle all cases with the same logic
+    for (const { value, suffix } of thresholds) {
+        if (count >= value) {
+            const number = count / value;
+            if (Number.isInteger(number)) {
+                return `${number.toLocaleString()}${suffix}`;
+            }
+            return `${Number(number.toFixed(1)).toLocaleString()}${suffix}`;
+        }
+    }
+    return count.toLocaleString();
+}
+
 // https://stackoverflow.com/a/42186143
 export function stringArrayEqual(prev: string[], next: string[]) {
     // can't use toSorted yet