Merge pull request #150 from errsole/feat/auto-refresh-loading-icon

Feat/auto refresh loading icon

Author: venki91

lib/web/src/components/ConsoleLogs.js

@@ -73,6 +73,7 @@ class ConsoleLogs extends React.Component {
       isAutoRefreshing: false,
       latestOnTop,
       showCancelButton: false,
+      isAutoRefreshLoading: false,
       abortController: new AbortController()
     };
   }
@@ -122,8 +123,19 @@ class ConsoleLogs extends React.Component {
 
   startAutoRefresh = () => {
     this.autoRefreshInterval = setInterval(() => {
-      this.setState({ isAutoRefreshing: true });
-      this.getConsoleLogs(null, 'autoRefresh');
+      this.setState({ isAutoRefreshing: true, isAutoRefreshLoading: true });
+
+      const { currentConsoleLogs, latestOnTop } = this.state;
+      let logId, datetime;
+      if (currentConsoleLogs.length > 0) {
+        const topLog = latestOnTop === 'Newest First'
+          ? currentConsoleLogs[0]
+          : currentConsoleLogs[currentConsoleLogs.length - 1];
+
+        logId = topLog?.id;
+        datetime = topLog?.attributes?.timestamp;
+      }
+      this.getConsoleLogs({ logOrder: 'latest', logId, datetime }, 'autoRefresh');
     }, 5000);
   };
 
@@ -407,7 +419,9 @@ class ConsoleLogs extends React.Component {
           this.setState({
             consoleLogLoading: false,
             showCancelButton: false,
-            abortController: null
+            abortController: null,
+            isAutoRefreshLoading: false
+
           });
           return;
         }
@@ -420,7 +434,11 @@ class ConsoleLogs extends React.Component {
             // no-search result
             if (!filters || Object.keys(filters).length === 0) {
               if (logs.length === 0) {
-                this.notificationMsg('info', 'No logs to load with the applied filters.', '', 3);
+                if (this.state.autoRefresh && this.state.isAutoRefreshing) {
+                  // skip showing notification during auto-refresh
+                } else {
+                  this.notificationMsg('info', 'No logs to load with the applied filters.', '', 3);
+                }
               } else {
                 logs = this.combineLogs(logs, logOrder, latestOnTop);
                 logs = this.removeDuplicateLogs(logs);
@@ -471,7 +489,8 @@ class ConsoleLogs extends React.Component {
         this.setState({
           consoleLogLoading: false,
           showCancelButton: false,
-          abortController: null
+          abortController: null,
+          isAutoRefreshLoading: false
         });
       }
     );
@@ -884,6 +903,7 @@ class ConsoleLogs extends React.Component {
     const errorLogId = this.state.errorLogId || null;
     const errorLogHostname = this.state.errorLogHostname || null;
     const antIcon = <LoadingOutlined style={{ fontSize: 30 }} spin />;
+    const antIconSmall = <LoadingOutlined style={{ fontSize: 20 }} spin />;
     const searchTerms = this.state.searchTerms || [];
     const activeLogMeta = this.state.activeLogMeta || null;
     const metaModalStatus = this.state.metaModalStatus || false;
@@ -1103,18 +1123,35 @@ class ConsoleLogs extends React.Component {
                     {this.state.latestOnTop === 'Newest First'
                       ? (
                         <>
-                          <p className='logs_more'>There may be newer logs to load. <a onClick={() => this.loadMoreErrors('latest')}>Load More</a> </p>
+                          {this.state.isAutoRefreshLoading
+                            ? (
+                              <p className='logs_more'><Spin indicator={antIconSmall} style={{ marginRight: 8 }} /> Fetching newer logs...</p>
+                              )
+                            : (
+                              <p className='logs_more'>There may be newer logs to load. <a onClick={() => this.loadMoreErrors('latest')}>Load More</a></p>
+                              )}
+
                           {renderConsoleLogs()}
-                          <p className='logs_more'>There may be older logs to load. <a onClick={() => this.loadMoreErrors('old')}>Load More</a> </p>
+
+                          <p className='logs_more'>There may be older logs to load. <a onClick={() => this.loadMoreErrors('old')}>Load More</a></p>
                         </>
                         )
                       : (
                         <>
-                          <p className='logs_more'>There may be older logs to load. <a onClick={() => this.loadMoreErrors('old')}>Load More</a> </p>
+                          <p className='logs_more'>There may be older logs to load. <a onClick={() => this.loadMoreErrors('old')}>Load More</a></p>
+
                           {renderConsoleLogs()}
-                          <p className='logs_more'>There may be newer logs to load. <a onClick={() => this.loadMoreErrors('latest')}>Load More</a> </p>
+
+                          {this.state.isAutoRefreshLoading
+                            ? (
+                              <p className='logs_more'><Spin indicator={antIconSmall} style={{ marginRight: 8 }} />Fetching newer logs...</p>
+                              )
+                            : (
+                              <p className='logs_more'>There may be newer logs to load. <a onClick={() => this.loadMoreErrors('latest')}>Load More</a></p>
+                              )}
                         </>
                         )}
+
                   </Collapse>}
                 {currentConsoleLogs.length === 0 && <div className='ant-empty ant-empty-normal'><div className='ant-empty-image'><svg width='64' height='41' viewBox='0 0 64 41' xmlns='http://www.w3.org/2000/svg'><g transform='translate(0 1)' fill='none' fillRule='evenodd'><ellipse fill='#F5F5F5' cx='32' cy='33' rx='32' ry='7' /><g fillRule='nonzero' stroke='#D9D9D9'><path d='M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z' /><path d='M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z' fill='#FAFAFA' /></g></g></svg></div><p className='ant-empty-description'>No Data</p></div>}
               </div>