fix: symbols pagination #506 (#526)

chrisleekr · Oct 11, 2022 · aba1c14 · aba1c14
1 parent ab272d9
commit aba1c14
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 13 deletions.
diff --git a/app/cronjob/trailingTradeHelper/__tests__/common.test.js b/app/cronjob/trailingTradeHelper/__tests__/common.test.js
@@ -3492,4 +3492,63 @@ describe('common.js', () => {
       });
     });
   });
+
+  describe('countCacheTrailingTradeSymbols', () => {
+    describe('when nothing is returned', () => {
+      beforeEach(async () => {
+        const { mongo, logger } = require('../../../helpers');
+
+        mongoMock = mongo;
+        loggerMock = logger;
+
+        mongoMock.aggregate = jest.fn().mockResolvedValue(null);
+
+        commonHelper = require('../common');
+        result = await commonHelper.countCacheTrailingTradeSymbols(loggerMock);
+      });
+
+      it('triggers mongo.aggregate', () => {
+        expect(mongoMock.aggregate).toHaveBeenCalledWith(
+          loggerMock,
+          'trailing-trade-cache',
+          [{ $match: {} }, { $group: { _id: null, count: { $sum: 1 } } }]
+        );
+      });
+
+      it('returns expected value', () => {
+        expect(result).toStrictEqual(0);
+      });
+    });
+
+    describe('when returned cached symbols count', () => {
+      beforeEach(async () => {
+        const { mongo, logger } = require('../../../helpers');
+
+        mongoMock = mongo;
+        loggerMock = logger;
+
+        mongoMock.aggregate = jest.fn().mockResolvedValue([
+          {
+            _id: null,
+            count: 10
+          }
+        ]);
+
+        commonHelper = require('../common');
+        result = await commonHelper.countCacheTrailingTradeSymbols(loggerMock);
+      });
+
+      it('triggers mongo.aggregate', () => {
+        expect(mongoMock.aggregate).toHaveBeenCalledWith(
+          loggerMock,
+          'trailing-trade-cache',
+          [{ $match: {} }, { $group: { _id: null, count: { $sum: 1 } } }]
+        );
+      });
+
+      it('returns expected value', () => {
+        expect(result).toStrictEqual(10);
+      });
+    });
+  });
 });
diff --git a/app/cronjob/trailingTradeHelper/common.js b/app/cronjob/trailingTradeHelper/common.js
@@ -879,6 +879,15 @@ const updateAccountInfo = async (logger, balances, lastAccountUpdate) => {
   return accountInfo;
 };
 
+const countCacheTrailingTradeSymbols = async logger => {
+  const result = await mongo.aggregate(logger, 'trailing-trade-cache', [
+    { $match: {} },
+    { $group: { _id: null, count: { $sum: 1 } } }
+  ]);
+
+  return _.get(result, ['0', 'count'], 0);
+};
+
 const getCacheTrailingTradeSymbols = async (
   logger,
   sortByDesc,
@@ -1194,6 +1203,7 @@ module.exports = {
   saveOverrideIndicatorAction,
   saveCandle,
   updateAccountInfo,
+  countCacheTrailingTradeSymbols,
   getCacheTrailingTradeSymbols,
   getCacheTrailingTradeTotalProfitAndLoss,
   getCacheTrailingTradeQuoteEstimates,

diff --git a/app/frontend/websocket/handlers/__tests__/fixtures/latest-stats-authenticated.json b/app/frontend/websocket/handlers/__tests__/fixtures/latest-stats-authenticated.json
@@ -176,7 +176,8 @@
     ],
     "totalProfitAndLoss": [],
     "streamsCount": 6,
-    "symbolsCount": 5,
+    "monitoringSymbolsCount": 5,
+    "cachedMonitoringSymbolsCount": 5,
     "totalPages": 1
   },
   "stats": {

diff --git a/...end/websocket/handlers/__tests__/fixtures/latest-stats-not-authenticated-unlock-list.json b/...end/websocket/handlers/__tests__/fixtures/latest-stats-not-authenticated-unlock-list.json
@@ -176,7 +176,8 @@
     ],
     "totalProfitAndLoss": [],
     "streamsCount": 6,
-    "symbolsCount": 5,
+    "monitoringSymbolsCount": 5,
+    "cachedMonitoringSymbolsCount": 5,
     "totalPages": 1
   },
   "stats": {

diff --git a/app/frontend/websocket/handlers/__tests__/latest.test.js b/app/frontend/websocket/handlers/__tests__/latest.test.js
@@ -10,6 +10,7 @@ describe('latest.test.js', () => {
 
   const trailingTradeStatsAuthenticated = require('./fixtures/latest-stats-authenticated.json');
 
+  let mockCountCacheTrailingTradeSymbols;
   let mockGetCacheTrailingTradeSymbols;
   let mockGetCacheTrailingTradeTotalProfitAndLoss;
   let mockGetCacheTrailingTradeQuoteEstimates;
@@ -41,6 +42,10 @@ describe('latest.test.js', () => {
       .fn()
       .mockResolvedValue(trailingTradeSymbols);
 
+    mockCountCacheTrailingTradeSymbols = jest
+      .fn()
+      .mockResolvedValue(trailingTradeSymbols.length);
+
     mockGetCacheTrailingTradeTotalProfitAndLoss = jest
       .fn()
       .mockResolvedValue([]);
@@ -106,6 +111,7 @@ describe('latest.test.js', () => {
 
     jest.mock('../../../../cronjob/trailingTradeHelper/common', () => ({
       isActionDisabled: mockIsActionDisabled,
+      countCacheTrailingTradeSymbols: mockCountCacheTrailingTradeSymbols,
       getCacheTrailingTradeSymbols: mockGetCacheTrailingTradeSymbols,
       getCacheTrailingTradeTotalProfitAndLoss:
         mockGetCacheTrailingTradeTotalProfitAndLoss,

diff --git a/app/frontend/websocket/handlers/latest.js b/app/frontend/websocket/handlers/latest.js
@@ -8,14 +8,14 @@ const {
 
 const {
   isActionDisabled,
+  countCacheTrailingTradeSymbols,
   getCacheTrailingTradeSymbols,
   getCacheTrailingTradeTotalProfitAndLoss,
   getCacheTrailingTradeQuoteEstimates
 } = require('../../../cronjob/trailingTradeHelper/common');
 
 const handleLatest = async (logger, ws, payload) => {
   const globalConfiguration = await getConfiguration(logger);
-  // logger.info({ globalConfiguration }, 'Configuration from MongoDB');
 
   const { sortByDesc, sortBy, searchKeyword, page } = payload.data;
 
@@ -52,8 +52,13 @@ const handleLatest = async (logger, ws, payload) => {
 
   const symbolsPerPage = 12;
 
-  const symbolsCount = globalConfiguration.symbols.length;
-  const totalPages = _.ceil(symbolsCount / symbolsPerPage);
+  const monitoringSymbolsCount = globalConfiguration.symbols.length;
+
+  const cachedMonitoringSymbolsCount = await countCacheTrailingTradeSymbols(
+    logger
+  );
+
+  const totalPages = _.ceil(cachedMonitoringSymbolsCount / symbolsPerPage);
 
   const cacheTrailingTradeSymbols = await getCacheTrailingTradeSymbols(
     logger,
@@ -153,7 +158,8 @@ const handleLatest = async (logger, ws, payload) => {
       closedTrades: cacheTrailingTradeClosedTrades,
       totalProfitAndLoss: cacheTrailingTradeTotalProfitAndLoss,
       streamsCount,
-      symbolsCount,
+      monitoringSymbolsCount,
+      cachedMonitoringSymbolsCount,
       totalPages
     };
   } catch (err) {

diff --git a/public/js/App.js b/public/js/App.js
@@ -57,7 +57,8 @@ class App extends React.Component {
       authToken: localStorage.getItem('authToken') || '',
       totalProfitAndLoss: {},
       streamsCount: 0,
-      symbolsCount: 0,
+      monitoringSymbolsCount: 0,
+      cachedMonitoringSymbolsCount: 0,
       page: 1,
       totalPages: 1
     };
@@ -213,7 +214,16 @@ class App extends React.Component {
             ''
           ),
           streamsCount: _.get(response, ['common', 'streamsCount'], 0),
-          symbolsCount: _.get(response, ['common', 'symbolsCount'], 0),
+          monitoringSymbolsCount: _.get(
+            response,
+            ['common', 'monitoringSymbolsCount'],
+            0
+          ),
+          cachedMonitoringSymbolsCount: _.get(
+            response,
+            ['common', 'cachedMonitoringSymbolsCount'],
+            0
+          ),
           totalPages: _.get(response, ['common', 'totalPages'], 1)
         });
       }
@@ -330,7 +340,8 @@ class App extends React.Component {
       publicURL,
       apiInfo,
       streamsCount,
-      symbolsCount,
+      monitoringSymbolsCount,
+      cachedMonitoringSymbolsCount,
       dustTransfer,
       availableSortOptions,
       selectedSortOption,
@@ -461,7 +472,8 @@ class App extends React.Component {
               <Status
                 apiInfo={apiInfo}
                 streamsCount={streamsCount}
-                symbolsCount={symbolsCount}
+                monitoringSymbolsCount={monitoringSymbolsCount}
+                cachedMonitoringSymbolsCount={cachedMonitoringSymbolsCount}
               />
             </div>
           </div>

diff --git a/public/js/Status.js b/public/js/Status.js
@@ -3,12 +3,48 @@
 /* eslint-disable no-undef */
 class Status extends React.Component {
   render() {
-    const { apiInfo, streamsCount, symbolsCount } = this.props;
+    const {
+      apiInfo,
+      monitoringSymbolsCount,
+      cachedMonitoringSymbolsCount,
+      streamsCount
+    } = this.props;
 
     if (!apiInfo) {
       return '';
     }
 
+    let monitoringSymbolsStatus = '';
+
+    if (monitoringSymbolsCount < cachedMonitoringSymbolsCount) {
+      monitoringSymbolsStatus = (
+        <OverlayTrigger
+          trigger='click'
+          key='monitoring-symbols-status-alert-overlay'
+          placement='top'
+          overlay={
+            <Popover id='monitoring-symbols-status-alert-overlay-bottom'>
+              <Popover.Content>
+                You are currently monitoring <b>{monitoringSymbolsCount}</b>{' '}
+                symbols. However, the symbols you have in your frontend is equal
+                to <b>{cachedMonitoringSymbolsCount}</b>. That means you added
+                some symbols in your <b>Global Settings</b> and after that you
+                removed them. These symbols will remain exists in your frontend
+                and you can see them but they are not monitored. You can remove
+                them by clicking on the cross icon.
+              </Popover.Content>
+            </Popover>
+          }>
+          <Button
+            variant='link'
+            className='p-0 m-0 ml-1 d-inline-block'
+            style={{ lineHeight: '14px' }}>
+            <i className='fas fa-exclamation-circle mx-1 text-warning'></i>
+          </Button>
+        </OverlayTrigger>
+      );
+    }
+
     return (
       <div className='accordion-wrapper status-wrapper'>
         <Accordion defaultActiveKey='0'>
@@ -40,10 +76,11 @@ class Status extends React.Component {
                     </HightlightChange>
                   </li>
                   <li>
-                    Symbols:{' '}
+                    Monitoring Symbols:{' '}
                     <HightlightChange className='coin-info-value'>
-                      {symbolsCount}
+                      {monitoringSymbolsCount}
                     </HightlightChange>
+                    {monitoringSymbolsStatus}
                   </li>
                 </ul>
               </Card.Body>