closing ws on modal open (#904)

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.128",
+  "version": "1.0.129",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -48,10 +48,13 @@ interface TrafficViewerProps {
   trafficViewerApiProp: TrafficViewerApi,
   actionButtons?: JSX.Element,
   isShowStatusBar?: boolean,
-  webSocketUrl : string
+  webSocketUrl : string,
+  isCloseWebSocket : boolean
 }
 
-export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp, actionButtons,isShowStatusBar,webSocketUrl}) => {
+export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp,
+                                                               actionButtons,isShowStatusBar,webSocketUrl,
+                                                               isCloseWebSocket}) => {
 
   const classes = useLayoutStyles();
 
@@ -103,6 +106,10 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
     handleQueryChange(query);
   }, [query, handleQueryChange]);
 
+  useEffect(()=>{
+    isCloseWebSocket && closeWebSocket()
+  },[isCloseWebSocket])
+
   const ws = useRef(null);
 
   const listEntry = useRef(null);
@@ -142,6 +149,10 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
     }, 500)
   }
 
+  const closeWebSocket = () => {
+    ws.current && ws.current.close()
+  }
+
   if (ws.current) {
     ws.current.onmessage = (e) => {
       if (!e?.data) return;
@@ -200,7 +211,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
   }
 
   useEffect(() => {
-    setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : () => ws.current.close()}});
+    setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : closeWebSocket}});
     (async () => {
       openWebSocket("leftOff(-1)", true);
       try{
@@ -330,10 +341,13 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
 };
 
 const MemoiedTrafficViewer = React.memo(TrafficViewer)
-const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp, actionButtons, isShowStatusBar = true ,webSocketUrl}) => {
+const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp,
+                                                                actionButtons, isShowStatusBar = true ,
+                                                                webSocketUrl, isCloseWebSocket}) => {
   return <RecoilRoot>
     <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
-      trafficViewerApiProp={trafficViewerApiProp} setAnalyzeStatus={setAnalyzeStatus} />
+                          isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
+                          setAnalyzeStatus={setAnalyzeStatus} />
   </RecoilRoot>
 }
 

ui-common/src/components/TrafficViewer/TrafficViewerApi.ts

@@ -1,13 +1,13 @@
 type TrafficViewerApi = {
-    validateQuery : (query: any) => any
+  validateQuery: (query: any) => any
-    tapStatus : () => any
+  tapStatus: () => any
-    analyzeStatus : () => any
+  analyzeStatus: () => any
-    fetchEntries : (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
+  fetchEntries: (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
-    getEntry : (entryId : any, query:string) => any
+  getEntry: (entryId: any, query: string) => any
-    getRecentTLSLinks : () => any,
+  getRecentTLSLinks: () => any,
-    webSocket : {
+  webSocket: {
-      close : () => {}
+    close: () => void
-    }
   }
+}
 
-  export default TrafficViewerApi
+export default TrafficViewerApi

ui/package.json

@@ -13,7 +13,7 @@
     "@types/jest": "^26.0.22",
     "@types/node": "^12.20.10",
     "@uiw/react-textarea-code-editor": "^1.4.12",
-    "@up9/mizu-common": "^1.0.128",
+    "@up9/mizu-common": "^1.0.129",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import { Button } from "@material-ui/core";
 import Api,{getWebsocketUrl} from "../../../helpers/api";
 import debounce from 'lodash/debounce';
@@ -21,15 +21,17 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
   const commonClasses = useCommonStyles();
   const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom);
   const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
+  const [openWebSocket, setOpenWebSocket] = useState(true);
 
 const trafficViewerApi = {...api}
 
   const handleOpenOasModal = () => {
-    //closeSocket() -- Todo: Add Close webSocket
+    setOpenWebSocket(false)
     setOpenOasModal(true);
   }
 
   const openServiceMapModalDebounce = debounce(() => {
+    setOpenWebSocket(false)
     setServiceMapModalOpen(true)
   }, 500);
 
@@ -63,7 +65,7 @@ const trafficViewerApi = {...api}
 
   return (
   <>
-      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()}
+      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket}
                      trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal}/>
   </>
   );