From c2fdcd04715202dfab07a9ac77a76c7f744d09f6 Mon Sep 17 00:00:00 2001
From: Rikin Kachhia <54616969+rikinsk@users.noreply.github.com>
Date: Wed, 6 May 2020 23:37:56 +0530
Subject: [PATCH] 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                                  |  1 +
 .../src/components/Services/Data/DataState.js |  2 ++
 .../Data/TableBrowseRows/FilterQuery.js       |  3 ++-
 .../Data/TableBrowseRows/ViewActions.js       | 25 +++++++++++++++----
 .../Data/TableBrowseRows/ViewTable.js         |  4 ++-
 .../Services/Data/TableCommon/TableHeader.js  | 10 +++++---
 .../src/components/Services/Data/constants.js |  2 ++
 7 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b30b1c3342..55f2306c39d 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/console/src/components/Services/Data/DataState.js b/console/src/components/Services/Data/DataState.js
index 9f232887390..943dac4ad10 100644
--- a/console/src/components/Services/Data/DataState.js
+++ b/console/src/components/Services/Data/DataState.js
@@ -22,6 +22,8 @@ const defaultViewState = {
   manualTriggers: [],
   triggeredRow: -1,
   triggeredFunction: null,
+  estimatedCount: 0,
+  isCountEstimated: 0,
 };
 
 const defaultPermissionsState = {
diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
index c259cb4f9fd..0aca0fce421 100644
--- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
+++ b/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;
     }
diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewActions.js b/console/src/components/Services/Data/TableBrowseRows/ViewActions.js
index fa1f540f714..ef41d593e51 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ViewActions.js
+++ b/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,
diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
index 9a63821006e..257efa49a05 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
+++ b/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"
diff --git a/console/src/components/Services/Data/TableCommon/TableHeader.js b/console/src/components/Services/Data/TableCommon/TableHeader.js
index ef333b6d897..f20ab9b8ae5 100644
--- a/console/src/components/Services/Data/TableCommon/TableHeader.js
+++ b/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];
 
diff --git a/console/src/components/Services/Data/constants.js b/console/src/components/Services/Data/constants.js
index d1ae99952d5..d2021915afd 100644
--- a/console/src/components/Services/Data/constants.js
+++ b/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];