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
-    tapStatus : () => any
-    analyzeStatus : () => any
-    fetchEntries : (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
-    getEntry : (entryId : any, query:string) => any
-    getRecentTLSLinks : () => any,
-    webSocket : {
-      close : () => {}
-    }
+  validateQuery: (query: any) => any
+  tapStatus: () => any
+  analyzeStatus: () => any
+  fetchEntries: (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
+  getEntry: (entryId: any, query: string) => any
+  getRecentTLSLinks: () => any,
+  webSocket: {
+    close: () => void
   }
+}
 
-  export default TrafficViewerApi
+export default TrafficViewerApi