From a830bbe0238c26ea801fb63bbf7adead5431bb3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Wed, 15 Dec 2021 12:26:18 +0300
Subject: [PATCH] Fix the glitch (#529)

* Fix the glitch

* Bring back the functionality to "Fetch old records" and "Snap to bottom" buttons
---
 ui/src/components/EntriesList.tsx | 17 ++++++++++++-----
 ui/src/components/TrafficPage.tsx | 27 ++++++++++-----------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/EntriesList.tsx b/ui/src/components/EntriesList.tsx
index 14fff2e87..b5da7736e 100644
--- a/ui/src/components/EntriesList.tsx
+++ b/ui/src/components/EntriesList.tsx
@@ -26,14 +26,15 @@ interface EntriesListProps {
     updateQuery: any;
     leftOffTop: number;
     setLeftOffTop: (leftOffTop: number) => void;
-    reconnectWebSocket: any;
     isWebSocketConnectionClosed: boolean;
-    closeWebSocket: any;
+    ws: any;
+    openWebSocket: (query: string, resetEntries: boolean) => void;
+    leftOffBottom: number;
 }
 
 const api = new Api();
 
-export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, query, listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, focusedEntryId, setFocusedEntryId, updateQuery, leftOffTop, setLeftOffTop, reconnectWebSocket, isWebSocketConnectionClosed, closeWebSocket}) => {
+export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, query, listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, focusedEntryId, setFocusedEntryId, updateQuery, leftOffTop, setLeftOffTop, isWebSocketConnectionClosed, ws, openWebSocket, leftOffBottom}) => {
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
     const scrollableRef = useRef(null);
@@ -118,7 +119,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
                         title="Fetch old records"
                         className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`}
                         onClick={(_) => {
-                            closeWebSocket();
+                            ws.close();
                             getOldEntries();
                         }}>
                         <img alt="down" src={down} />
@@ -127,7 +128,13 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
                         title="Snap to bottom"
                         className={`${styles.btnLive} ${isSnappedToBottom && !isWebSocketConnectionClosed ? styles.hideButton : styles.showButton}`}
                         onClick={(_) => {
-                            reconnectWebSocket();
+                            if (isWebSocketConnectionClosed) {
+                                if (query) {
+                                    openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
+                                } else {
+                                    openWebSocket(`leftOff(${leftOffBottom})`, false);
+                                }
+                            }
                             scrollableRef.current.jumpToBottom();
                             setIsSnappedToBottom(true);
                         }}>
diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/TrafficPage.tsx
index 76fe8fd47..f9264588d 100644
--- a/ui/src/components/TrafficPage.tsx
+++ b/ui/src/components/TrafficPage.tsx
@@ -224,23 +224,15 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
         // eslint-disable-next-line
     }, [focusedEntryId]);
 
-    const closeWebSocket = () => {
-        ws.current.close();
-    }
-
-    const reconnectWebSocket = () => {
-        if (query) {
-            openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
-        } else {
-            openWebSocket(`leftOff(${leftOffBottom})`, false);
-        }
-    }
-
     const toggleConnection = () => {
         if (connection === ConnectionStatus.Connected) {
-            closeWebSocket();
+            ws.current.close();
         } else {
-            reconnectWebSocket();
+            if (query) {
+                openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
+            } else {
+                openWebSocket(`leftOff(${leftOffBottom})`, false);
+            }
         }
     }
 
@@ -266,7 +258,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
     const onSnapBrokenEvent = () => {
         setIsSnappedToBottom(false);
         if (connection === ConnectionStatus.Connected) {
-            closeWebSocket();
+            ws.current.close();
         }
     }
 
@@ -313,9 +305,10 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                             updateQuery={updateQuery}
                             leftOffTop={leftOffTop}
                             setLeftOffTop={setLeftOffTop}
-                            reconnectWebSocket={reconnectWebSocket}
                             isWebSocketConnectionClosed={connection === ConnectionStatus.Closed}
-                            closeWebSocket={closeWebSocket}
+                            ws={ws.current}
+                            openWebSocket={openWebSocket}
+                            leftOffBottom={leftOffBottom}
                         />
                     </div>
                 </div>