github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-26 16:24:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

close ws on modals open (#994)

Browse Source
This commit is contained in:
lirazyehezkel 2022-04-12 17:56:03 +03:00 committed by GitHub
parent df1fd2c3a7
commit 81fe4af30d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,14 +49,15 @@ interface TrafficViewerProps {
actionButtons?: JSX.Element, actionButtons?: JSX.Element,
isShowStatusBar?: boolean, isShowStatusBar?: boolean,
webSocketUrl: string, webSocketUrl: string,
isCloseWebSocket: boolean, shouldCloseWebSocket: boolean,
setShouldCloseWebSocket: (flag: boolean) => void,
isDemoBannerView: boolean isDemoBannerView: boolean
} }
export const TrafficViewer: React.FC<TrafficViewerProps> = ({ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
setAnalyzeStatus, trafficViewerApiProp, setAnalyzeStatus, trafficViewerApiProp,
actionButtons, isShowStatusBar, webSocketUrl, actionButtons, isShowStatusBar, webSocketUrl,
isCloseWebSocket, isDemoBannerView shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
}) => { }) => {
const classes = useLayoutStyles(); const classes = useLayoutStyles();
@ -104,8 +105,11 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
}, [query, handleQueryChange]); }, [query, handleQueryChange]);
useEffect(() => { useEffect(() => {
isCloseWebSocket && closeWebSocket() if(shouldCloseWebSocket){
}, [isCloseWebSocket]) closeWebSocket()
setShouldCloseWebSocket(false);
}
}, [shouldCloseWebSocket])
useEffect(() => { useEffect(() => {
reopenConnection() reopenConnection()
@ -295,11 +299,11 @@ const MemoiedTrafficViewer = React.memo(TrafficViewer)
const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({
setAnalyzeStatus, trafficViewerApiProp, setAnalyzeStatus, trafficViewerApiProp,
actionButtons, isShowStatusBar = true, actionButtons, isShowStatusBar = true,
webSocketUrl, isCloseWebSocket, isDemoBannerView webSocketUrl, shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
}) => { }) => {
return <RecoilRoot> return <RecoilRoot>
<MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl} <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp} shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView}/> setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView}/>
<ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID} <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
position="bottom-right" position="bottom-right"

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

@ -21,17 +21,17 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({ setAnalyzeStatus }) =>
const commonClasses = useCommonStyles(); const commonClasses = useCommonStyles();
const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom); const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom); const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
const [openWebSocket, setOpenWebSocket] = useState(true); const [shouldCloseWebSocket, setShouldCloseWebSocket] = useState(false);
const trafficViewerApi = { ...api } const trafficViewerApi = { ...api }
const handleOpenOasModal = () => { const handleOpenOasModal = () => {
setOpenWebSocket(false) setShouldCloseWebSocket(true)
setOpenOasModal(true); setOpenOasModal(true);
} }
const openServiceMapModalDebounce = debounce(() => { const openServiceMapModalDebounce = debounce(() => {
setOpenWebSocket(false) setShouldCloseWebSocket(true)
setServiceMapModalOpen(true) setServiceMapModalOpen(true)
}, 500); }, 500);
@ -59,7 +59,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({ setAnalyzeStatus }) =>
return ( 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} /> trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen)} isDemoBannerView={false} />
</> </>
); );