closing ws on modal open (#904)

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

ui-common/package.json

 {
   "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

 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

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

-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';
@@ -8,8 +8,8 @@ import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
 import TrafficViewer from "@up9/mizu-common"
 import "@up9/mizu-common/dist/index.css"
 import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom";
-import serviceMap from "../../assets/serviceMap.svg";	
-import services from "../../assets/services.svg";	
+import serviceMap from "../../assets/serviceMap.svg";
+import services from "../../assets/services.svg";
 
 interface TrafficPageProps {
   setAnalyzeStatus?: (status: any) => void;
@@ -21,38 +21,40 @@ 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
-    setOpenOasModal(true);	
+  const handleOpenOasModal = () => {
+    setOpenWebSocket(false)
+    setOpenOasModal(true);
   }
 
   const openServiceMapModalDebounce = debounce(() => {
+    setOpenWebSocket(false)
     setServiceMapModalOpen(true)
   }, 500);
 
-  const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) && 
-                          <div style={{ display: 'flex', height: "100%" }}>	
-                              {window["isOasEnabled"] && <Button	
-                                startIcon={<img className="custom" src={services} alt="services"></img>}	
-                                size="large"	
-                                type="submit"	
-                                variant="contained"	
-                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}	
-                                style={{ marginRight: 25 }}	
-                                onClick={handleOpenOasModal}>	
-                                Show OAS	
-                              </Button>}	
-                              {window["isServiceMapEnabled"] && <Button	
-                                startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}	
-                                size="large"	
-                                variant="contained"	
-                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}	
-                                onClick={openServiceMapModalDebounce}>	
-                                Service Map	
-                              </Button>}	
+  const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) &&
+                          <div style={{ display: 'flex', height: "100%" }}>
+                              {window["isOasEnabled"] && <Button
+                                startIcon={<img className="custom" src={services} alt="services"></img>}
+                                size="large"
+                                type="submit"
+                                variant="contained"
+                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+                                style={{ marginRight: 25 }}
+                                onClick={handleOpenOasModal}>
+                                Show OAS
+                              </Button>}
+                              {window["isServiceMapEnabled"] && <Button
+                                startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}
+                                size="large"
+                                variant="contained"
+                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+                                onClick={openServiceMapModalDebounce}>
+                                Service Map
+                              </Button>}
                         </div>
 
   useEffect(() => {
@@ -61,9 +63,9 @@ const trafficViewerApi = {...api}
     }
   },[])
 
-  return ( 
+  return (
   <>
-      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()}
+      <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket}
                      trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal}/>
   </>
   );