github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-21 11:40:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

closing ws on modal open (#904)

Browse Source 
Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
This commit is contained in:
Adam Kol 2022-03-21 16:44:40 +02:00 committed by GitHub
parent 774f07fccd
commit 7893b4596d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-common/package.json
View File

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

24
ui-common/src/components/TrafficViewer/TrafficViewer.tsx
View File

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

20
ui-common/src/components/TrafficViewer/TrafficViewerApi.ts
View File

@ -1,13 +1,13 @@
type TrafficViewerApi = { 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

2
ui/package.json
View File

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

58
ui/src/components/Pages/TrafficPage/TrafficPage.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect} from "react"; import React, {useEffect, useState} from "react";
import { Button } from "@material-ui/core"; import { Button } from "@material-ui/core";
import Api,{getWebsocketUrl} from "../../../helpers/api"; import Api,{getWebsocketUrl} from "../../../helpers/api";
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
@ -8,8 +8,8 @@ import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
import TrafficViewer from "@up9/mizu-common" import TrafficViewer from "@up9/mizu-common"
import "@up9/mizu-common/dist/index.css" import "@up9/mizu-common/dist/index.css"
import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom"; import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom";
import serviceMap from "../../assets/serviceMap.svg"; import serviceMap from "../../assets/serviceMap.svg";
import services from "../../assets/services.svg"; import services from "../../assets/services.svg";
interface TrafficPageProps { interface TrafficPageProps {
setAnalyzeStatus?: (status: any) => void; setAnalyzeStatus?: (status: any) => void;
@ -21,38 +21,40 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
const commonClasses = useCommonStyles(); const commonClasses = useCommonStyles();
const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom); const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom);
const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom); const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
const [openWebSocket, setOpenWebSocket] = useState(true);
const trafficViewerApi = {...api} const trafficViewerApi = {...api}
const handleOpenOasModal = () => { const handleOpenOasModal = () => {
//closeSocket() -- Todo: Add Close webSocket setOpenWebSocket(false)
setOpenOasModal(true); setOpenOasModal(true);
} }
const openServiceMapModalDebounce = debounce(() => { const openServiceMapModalDebounce = debounce(() => {
setOpenWebSocket(false)
setServiceMapModalOpen(true) setServiceMapModalOpen(true)
}, 500); }, 500);
const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) && const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) &&
<div style={{ display: 'flex', height: "100%" }}> <div style={{ display: 'flex', height: "100%" }}>
{window["isOasEnabled"] && <Button {window["isOasEnabled"] && <Button
startIcon={<img className="custom" src={services} alt="services"></img>} startIcon={<img className="custom" src={services} alt="services"></img>}
size="large" size="large"
type="submit" type="submit"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
style={{ marginRight: 25 }} style={{ marginRight: 25 }}
onClick={handleOpenOasModal}> onClick={handleOpenOasModal}>
Show OAS Show OAS
</Button>} </Button>}
{window["isServiceMapEnabled"] && <Button {window["isServiceMapEnabled"] && <Button
startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>} startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}
size="large" size="large"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
onClick={openServiceMapModalDebounce}> onClick={openServiceMapModalDebounce}>
Service Map Service Map
</Button>} </Button>}
</div> </div>
useEffect(() => { 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}/> trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal}/>
</> </>
); );