console: optimise count fetch in data browser (#4692)

* in table-browse-rows, make intelligent count

* update changelog

* simplify getting estimatedCount

* prevent doubled requests

* hide estimated count

* update changelog

* Update CHANGELOG.md

Co-authored-by: Rishichandra Wawhal <rishi@hasura.io>
Co-authored-by: Aleksandra Sikora <ola.zxcvbnm@gmail.com>

CHANGELOG.md

@@ -36,6 +36,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 
 (Add entries here in the order of: server, console, cli, docs, others)
 
+- console: avoid count queries for large tables (#4692)
 - console: add read replica support section to pro popup (#4118)
 - cli: list all avialable commands in root command help (fix #4623)
 

console/src/components/Services/Data/DataState.js

@@ -22,6 +22,8 @@ const defaultViewState = {
   manualTriggers: [],
   triggeredRow: -1,
   triggeredFunction: null,
+  estimatedCount: 0,
+  isCountEstimated: 0,
 };
 
 const defaultPermissionsState = {

console/src/components/Services/Data/TableBrowseRows/FilterQuery.js

@@ -27,6 +27,7 @@ import Button from '../../../Common/Button/Button';
 import ReloadEnumValuesButton from '../Common/Components/ReloadEnumValuesButton';
 import styles from '../../../Common/FilterQuery/FilterQuery.scss';
 import { getPersistedPageSize } from './localStorageUtils';
+import { isEmpty } from '../../../Common/utils/jsUtils';
 
 const history = createHistory();
 
@@ -205,7 +206,7 @@ class FilterQuery extends Component {
   componentDidMount() {
     const { dispatch, tableSchema, curQuery } = this.props;
     const limit = getPersistedPageSize();
-    if (!this.props.urlQuery) {
+    if (isEmpty(this.props.urlQuery)) {
       dispatch(setDefaultQuery({ ...curQuery, limit }));
       return;
     }

console/src/components/Services/Data/TableBrowseRows/ViewActions.js

@@ -17,6 +17,7 @@ import {
   getRunSqlQuery,
 } from '../../../Common/utils/v1QueryUtils';
 import { generateTableDef } from '../../../Common/utils/pgUtils';
+import { COUNT_LIMIT } from '../constants';
 
 /* ****************** View actions *************/
 const V_SET_DEFAULTS = 'ViewTable/V_SET_DEFAULTS';
@@ -96,7 +97,7 @@ const vMakeRowsRequest = () => {
             dispatch({
               type: V_REQUEST_SUCCESS,
               data: data[0],
-              estimatedCount: data[1].result[1],
+              estimatedCount: parseInt(data[1].result[1][0], 10),
             }),
             dispatch({ type: V_REQUEST_PROGRESS, data: false }),
           ]);
@@ -157,9 +158,19 @@ const vMakeCountRequest = () => {
   };
 };
 
-const vMakeTableRequests = () => dispatch => {
-  dispatch(vMakeRowsRequest());
-  dispatch(vMakeCountRequest());
+const vMakeTableRequests = () => (dispatch, getState) => {
+  dispatch(vMakeRowsRequest()).then(() => {
+    const { estimatedCount } = getState().tables.view;
+    if (estimatedCount > COUNT_LIMIT) {
+      dispatch({
+        type: V_COUNT_REQUEST_SUCCESS,
+        count: estimatedCount,
+        isEstimated: true,
+      });
+    } else {
+      dispatch(vMakeCountRequest());
+    }
+  });
 };
 
 const fetchManualTriggers = tableName => {
@@ -572,7 +583,11 @@ const viewReducer = (tableName, currentSchema, schemas, viewState, action) => {
     case V_REQUEST_PROGRESS:
       return { ...viewState, isProgressing: action.data };
     case V_COUNT_REQUEST_SUCCESS:
-      return { ...viewState, count: action.count };
+      return {
+        ...viewState,
+        count: action.count,
+        isCountEstimated: action.isEstimated === true,
+      };
     case V_EXPAND_ROW:
       return {
         ...viewState,

console/src/components/Services/Data/TableBrowseRows/ViewTable.js

@@ -110,6 +110,7 @@ class ViewTable extends Component {
       triggeredFunction,
       location,
       estimatedCount,
+      isCountEstimated,
     } = this.props;
 
     // check if table exists
@@ -161,7 +162,8 @@ class ViewTable extends Component {
     // Choose the right nav bar header thing
     const header = (
       <TableHeader
-        count={count}
+        count={isCountEstimated ? estimatedCount : count}
+        isCountEstimated={isCountEstimated}
         dispatch={dispatch}
         table={tableSchema}
         tabName="browse"

console/src/components/Services/Data/TableCommon/TableHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 import { changeTableName } from '../TableModify/ModifyActions';
-import { capitalize } from '../../../Common/utils/jsUtils';
+import { capitalize, exists } from '../../../Common/utils/jsUtils';
 import EditableHeading from '../../../Common/EditableHeading/EditableHeading';
 import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb';
 import { tabNameMap } from '../utils';
@@ -26,6 +26,7 @@ import { getReadableNumber } from '../../../Common/utils/jsUtils';
 const TableHeader = ({
   tabName,
   count,
+  isCountEstimated,
   table,
   migrationMode,
   readOnlyMode,
@@ -38,8 +39,11 @@ const TableHeader = ({
   const isTable = checkIfTable(table);
 
   let countDisplay = '';
-  if (!(count === null || count === undefined)) {
-    countDisplay = '(' + getReadableNumber(count) + ')';
+  // if (exists(count)) {
+  //   countDisplay = `(${isCountEstimated ? '~' : '' }${getReadableNumber(count)})`;
+  // }
+  if (exists(count) && !isCountEstimated) {
+    countDisplay = `(${getReadableNumber(count)})`;
   }
   const activeTab = tabNameMap[tabName];
 

console/src/components/Services/Data/constants.js

@@ -38,6 +38,8 @@ export const Integers = [
   'bigint',
 ];
 
+export const COUNT_LIMIT = 100000;
+
 export const Reals = ['float4', 'float8', 'numeric'];
 
 export const Numerics = [...Integers, ...Reals];