From 81fe4af30d71a8d4038da349e86a1532714dd512 Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Tue, 12 Apr 2022 17:56:03 +0300
Subject: [PATCH] close ws on modals open (#994)

---
 .../components/TrafficViewer/TrafficViewer.tsx   | 16 ++++++++++------
 .../components/Pages/TrafficPage/TrafficPage.tsx |  8 ++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
index af72dd605..d4b751014 100644
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -49,14 +49,15 @@ interface TrafficViewerProps {
   actionButtons?: JSX.Element,
   isShowStatusBar?: boolean,
   webSocketUrl: string,
-  isCloseWebSocket: boolean,
+  shouldCloseWebSocket: boolean,
+  setShouldCloseWebSocket: (flag: boolean) => void,
   isDemoBannerView: boolean
 }
 
 export const TrafficViewer: React.FC<TrafficViewerProps> = ({
                                                               setAnalyzeStatus, trafficViewerApiProp,
                                                               actionButtons, isShowStatusBar, webSocketUrl,
-                                                              isCloseWebSocket, isDemoBannerView
+                                                              shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
                                                             }) => {
 
   const classes = useLayoutStyles();
@@ -104,8 +105,11 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   }, [query, handleQueryChange]);
 
   useEffect(() => {
-    isCloseWebSocket && closeWebSocket()
-  }, [isCloseWebSocket])
+    if(shouldCloseWebSocket){
+      closeWebSocket()
+      setShouldCloseWebSocket(false);
+    }
+  }, [shouldCloseWebSocket])
 
   useEffect(() => {
     reopenConnection()
@@ -295,11 +299,11 @@ const MemoiedTrafficViewer = React.memo(TrafficViewer)
 const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({
                                                                 setAnalyzeStatus, trafficViewerApiProp,
                                                                 actionButtons, isShowStatusBar = true,
-                                                                webSocketUrl, isCloseWebSocket, isDemoBannerView
+                                                                webSocketUrl, shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
                                                               }) => {
   return <RecoilRoot>
     <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
-                          isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
+                          shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
                           setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView}/>
     <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
                     position="bottom-right"
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index d0da56213..96c54469a 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -21,17 +21,17 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({ setAnalyzeStatus }) =>
   const commonClasses = useCommonStyles();
   const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
   const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
-  const [openWebSocket, setOpenWebSocket] = useState(true);
+  const [shouldCloseWebSocket, setShouldCloseWebSocket] = useState(false);
 
   const trafficViewerApi = { ...api }
 
   const handleOpenOasModal = () => {
-    setOpenWebSocket(false)
+    setShouldCloseWebSocket(true)
     setOpenOasModal(true);
   }
 
   const openServiceMapModalDebounce = debounce(() => {
-    setOpenWebSocket(false)
+    setShouldCloseWebSocket(true)
     setServiceMapModalOpen(true)
   }, 500);
 
@@ -59,7 +59,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({ setAnalyzeStatus }) =>
 
   return (
     <>
-      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={MizuWebsocketURL} isCloseWebSocket={!openWebSocket}
+      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={MizuWebsocketURL} shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket}
         trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen)} isDemoBannerView={false} />
     </>
   );