diff --git a/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js b/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js index 7f3ab13db..d16581752 100644 --- a/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js +++ b/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js @@ -1,8 +1,7 @@ const columns = {podName : 1, namespace : 2, tapping : 3}; -const greenStatusImageSrc = '/static/media/success.662997eb.svg'; function getDomPathInStatusBar(line, column) { - return `.expandedStatusBar > :nth-child(2) > > :nth-child(2) > :nth-child(${line}) > :nth-child(${column})`; + return `[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > :nth-child(${line}) > :nth-child(${column})`; } export function checkLine(line, expectedValues) { @@ -12,14 +11,14 @@ export function checkLine(line, expectedValues) { cy.get(getDomPathInStatusBar(line, columns.namespace)).invoke('text').then(namespaceValue => { expect(namespaceValue).to.equal(expectedValues.namespace); - cy.get(getDomPathInStatusBar(line, columns.tapping)).children().should('have.attr', 'src', greenStatusImageSrc); + cy.get(getDomPathInStatusBar(line, columns.tapping)).children().should('have.attr', 'src').and("match", /success.*\.svg/); }); }); } export function findLineAndCheck(expectedValues) { - cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(1)').then(pods => { - cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(2)').then(namespaces => { + cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > > :nth-child(1)').then(pods => { + cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) > > :nth-child(2)').then(namespaces => { // organizing namespaces array const podObjectsArray = Object.values(pods ?? {}); const namespacesObjectsArray = Object.values(namespaces ?? {}); diff --git a/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js b/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js index b4b668b77..b125271ac 100644 --- a/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js +++ b/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js @@ -45,7 +45,7 @@ export function leftTextCheck(entryNum, path, expectedText) { export function leftOnHoverCheck(entryNum, path, filterName) { cy.get(`#list #entry-${entryNum} ${path}`).trigger('mouseover'); - cy.get(`#list #entry-${entryNum} .Queryable-Tooltip`).invoke('text').should('match', new RegExp(filterName)); + cy.get(`#list #entry-${entryNum} [data-cy='QueryableTooltip']`).invoke('text').should('match', new RegExp(filterName)); } export function rightTextCheck(path, expectedText) { @@ -54,7 +54,7 @@ export function rightTextCheck(path, expectedText) { export function rightOnHoverCheck(path, expectedText) { cy.get(`#rightSideContainer ${path}`).trigger('mouseover'); - cy.get(`#rightSideContainer .Queryable-Tooltip`).invoke('text').should('match', new RegExp(expectedText)); + cy.get(`#rightSideContainer [data-cy='QueryableTooltip']`).invoke('text').should('match', new RegExp(expectedText)); } export function checkThatAllEntriesShown() { diff --git a/acceptanceTests/cypress/integration/tests/GuiPort.js b/acceptanceTests/cypress/integration/tests/GuiPort.js index 16627db19..e47e53fbf 100644 --- a/acceptanceTests/cypress/integration/tests/GuiPort.js +++ b/acceptanceTests/cypress/integration/tests/GuiPort.js @@ -8,6 +8,6 @@ it('check', function () { cy.visit(`http://localhost:${port}`); cy.wait('@statusTap').its('response.statusCode').should('match', /^2\d{2}/); - cy.get('.podsCount').trigger('mouseover'); + cy.get(`[data-cy="expandedStatusBar"]`).trigger('mouseover',{force: true}); findLineAndCheck(getExpectedDetailsDict(podName, namespace)); }); diff --git a/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js b/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js index c27a3636e..c696747c1 100644 --- a/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js +++ b/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js @@ -2,7 +2,7 @@ import {findLineAndCheck, getExpectedDetailsDict} from '../testHelpers/StatusBar it('opening', function () { cy.visit(Cypress.env('testUrl')); - cy.get('.podsCount').trigger('mouseover'); + cy.get(`[data-cy="podsCountText"]`).trigger('mouseover'); }); [1, 2, 3].map(doItFunc); diff --git a/acceptanceTests/cypress/integration/tests/Regex.js b/acceptanceTests/cypress/integration/tests/Regex.js index de449a7a4..ac9ddf9ef 100644 --- a/acceptanceTests/cypress/integration/tests/Regex.js +++ b/acceptanceTests/cypress/integration/tests/Regex.js @@ -3,9 +3,9 @@ import {getExpectedDetailsDict, checkLine} from '../testHelpers/StatusBarHelper' it('opening', function () { cy.visit(Cypress.env('testUrl')); - cy.get('.podsCount').trigger('mouseover'); + cy.get(`[data-cy="podsCountText"]`).trigger('mouseover'); - cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) >').should('have.length', 1); // one line + cy.get('[data-cy="expandedStatusBar"] > :nth-child(2) > > :nth-child(2) >').should('have.length', 1); // one line checkLine(1, getExpectedDetailsDict(Cypress.env('name'), Cypress.env('namespace'))); }); diff --git a/acceptanceTests/cypress/integration/tests/UiTest.js b/acceptanceTests/cypress/integration/tests/UiTest.js index 01c131238..ec2395a17 100644 --- a/acceptanceTests/cypress/integration/tests/UiTest.js +++ b/acceptanceTests/cypress/integration/tests/UiTest.js @@ -26,7 +26,7 @@ it('opening mizu', function () { verifyMinimumEntries(); it('top bar check', function () { - cy.get('.podsCount').trigger('mouseover'); + cy.get(`[data-cy="podsCountText"]`).trigger('mouseover'); podsArray.map(findLineAndCheck); cy.reload(); }); @@ -205,6 +205,7 @@ function checkFilter(filterDetails){ // checks the hover on the last entry (the only one in DOM at the beginning) leftOnHoverCheck(totalEntries - 1, leftSidePath, name); + cy.get('.w-tc-editor-text').clear(); // applying the filter with alt+enter or with the button cy.get('.w-tc-editor-text').type(`${name}${applyByEnter ? '{alt+enter}' : ''}`); cy.get('.w-tc-editor').should('have.attr', 'style').and('include', Cypress.env('greenFilterColor')); diff --git a/ui-common/example/src/App.tsx b/ui-common/example/src/App.tsx index 5ec1e3c68..111318db5 100644 --- a/ui-common/example/src/App.tsx +++ b/ui-common/example/src/App.tsx @@ -5,10 +5,10 @@ import Api, {getWebsocketUrl} from "./api"; const api = Api.getInstance() -const App = () => { - const {message,error,isOpen, openSocket, closeSocket, sendQuery} = useWS(getWebsocketUrl()) - const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQuery: sendQuery}} - sendQuery(DEFAULT_QUERY); +const App = () => { + const {message,error,isOpen, openSocket, closeSocket, sendQueryWhenWsOpen} = useWS(getWebsocketUrl()) + const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQueryWhenWsOpen: sendQueryWhenWsOpen}} + sendQueryWhenWsOpen(DEFAULT_QUERY); useEffect(() => { return () =>{ diff --git a/ui-common/package.json b/ui-common/package.json index d08771ed9..dd174e752 100644 --- a/ui-common/package.json +++ b/ui-common/package.json @@ -1,6 +1,6 @@ { "name": "@up9/mizu-common", - "version": "1.0.125", + "version": "1.0.128", "description": "Made with create-react-library", "author": "", "license": "MIT", @@ -30,7 +30,6 @@ "react":"^17.0.2", "react-dom": "^17.0.2", "recoil": "^0.5.2", - "react-copy-to-clipboard": "^5.0.3", "@types/jest": "^26.0.22", "@types/node": "^12.20.10" diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx index 86f4d8f5c..2d9326980 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx @@ -8,7 +8,8 @@ import { EntryDetailed } from "./EntryDetailed"; import playIcon from 'assets/run.svg'; import pauseIcon from 'assets/pause.svg'; import variables from '../../variables.module.scss'; -import { toast } from 'react-toastify'; +import { toast,ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import debounce from 'lodash/debounce'; import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import entriesAtom from "../../recoil/entries"; @@ -21,7 +22,6 @@ import TrafficViewerApi from "./TrafficViewerApi"; import { StatusBar } from "../UI/StatusBar"; import tappingStatusAtom from "../../recoil/tappingStatus/atom"; - const useLayoutStyles = makeStyles(() => ({ details: { flex: "0 0 50%", @@ -45,26 +45,22 @@ const useLayoutStyles = makeStyles(() => ({ interface TrafficViewerProps { setAnalyzeStatus?: (status: any) => void; api?: any - message?: {} - error?: {} - isWebSocketOpen: boolean trafficViewerApiProp: TrafficViewerApi, actionButtons?: JSX.Element, - isShowStatusBar?: boolean + isShowStatusBar?: boolean, + webSocketUrl : string } -const TrafficViewer: React.FC = ({ setAnalyzeStatus, message, error, isWebSocketOpen, trafficViewerApiProp, actionButtons, isShowStatusBar }) => { +export const TrafficViewer : React.FC = ({setAnalyzeStatus, trafficViewerApiProp, actionButtons,isShowStatusBar,webSocketUrl}) => { + const classes = useLayoutStyles(); const [entries, setEntries] = useRecoilState(entriesAtom); const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); const [wsConnection, setWsConnection] = useRecoilState(websocketConnectionAtom); const query = useRecoilValue(queryAtom); - const [queryToSend, setQueryToSend] = useState("") const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState) const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom); - - const [noMoreDataTop, setNoMoreDataTop] = useState(false); const [isSnappedToBottom, setIsSnappedToBottom] = useState(true); @@ -107,6 +103,7 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message handleQueryChange(query); }, [query, handleQueryChange]); + const ws = useRef(null); const listEntry = useRef(null); const openWebSocket = (query: string, resetEntries: boolean) => { @@ -117,98 +114,99 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message setLeftOffTop(null); setNoMoreDataTop(false); } - setQueryToSend(query) - trafficViewerApiProp.webSocket.open(); - } - - const onmessage = useCallback((e) => { - if (!e?.data) return; - const message = JSON.parse(e.data); - switch (message.messageType) { - case "entry": - const entry = message.data; - if (!focusedEntryId) setFocusedEntryId(entry.id.toString()); - const newEntries = [...entries, entry]; - if (newEntries.length === 10001) { - setLeftOffTop(newEntries[0].entry.id); - newEntries.shift(); - setNoMoreDataTop(false); - } - setEntries(newEntries); - break; - case "status": - setTappingStatus(message.tappingStatus); - break; - case "analyzeStatus": - setAnalyzeStatus(message.analyzeStatus); - break; - case "outboundLink": - onTLSDetected(message.Data.DstIP); - break; - case "toast": - toast[message.data.type](message.data.text, { - position: "bottom-right", - theme: "colored", - autoClose: message.data.autoClose, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - break; - case "queryMetadata": - setQueriedCurrent(queriedCurrent + message.data.current); - setQueriedTotal(message.data.total); - setLeftOffBottom(message.data.leftOff); - setTruncatedTimestamp(message.data.truncatedTimestamp); - if (leftOffTop === null) { - setLeftOffTop(message.data.leftOff - 1); - } - break; - case "startTime": - setStartTime(message.data); - break; - default: - console.error( - `unsupported websocket message type, Got: ${message.messageType}` - ); + ws.current = new WebSocket(webSocketUrl); + ws.current.onopen = () => { + setWsConnection(WsConnectionStatus.Connected); + sendQueryWhenWsOpen(query); } - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [message]); - - useEffect(() => { - onmessage(message) - }, [message, onmessage]) - - useEffect(() => { - onerror(error) - }, [error]) - - - useEffect(() => { - isWebSocketOpen ? setWsConnection(WsConnectionStatus.Connected) : setWsConnection(WsConnectionStatus.Closed) - trafficViewerApiProp.webSocket.sendQuery(queryToSend) - }, [isWebSocketOpen, queryToSend, setWsConnection]) - - const onerror = (event) => { - console.error("WebSocket error:", event); - if (query) { - openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false); - } else { - openWebSocket(`leftOff(${leftOffBottom})`, false); + ws.current.onclose = () => { + setWsConnection(WsConnectionStatus.Closed); + } + ws.current.onerror = (event) => { + console.error("WebSocket error:", event); + if (query) { + openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false); + } else { + openWebSocket(`leftOff(${leftOffBottom})`, false); + } } } + const sendQueryWhenWsOpen = (query) => { + setTimeout(() => { + if (ws?.current?.readyState === WebSocket.OPEN) { + ws.current.send(JSON.stringify({"query": query, "enableFullEntries": false})); + } else { + sendQueryWhenWsOpen(query); + } + }, 500) + } + + if (ws.current) { + ws.current.onmessage = (e) => { + if (!e?.data) return; + const message = JSON.parse(e.data); + switch (message.messageType) { + case "entry": + const entry = message.data; + if (!focusedEntryId) setFocusedEntryId(entry.id.toString()); + const newEntries = [...entries, entry]; + if (newEntries.length === 10001) { + setLeftOffTop(newEntries[0].entry.id); + newEntries.shift(); + setNoMoreDataTop(false); + } + setEntries(newEntries); + break; + case "status": + setTappingStatus(message.tappingStatus); + break; + case "analyzeStatus": + setAnalyzeStatus(message.analyzeStatus); + break; + case "outboundLink": + onTLSDetected(message.Data.DstIP); + break; + case "toast": + toast[message.data.type](message.data.text, { + position: "bottom-right", + theme: "colored", + autoClose: message.data.autoClose, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + break; + case "queryMetadata": + setQueriedCurrent(queriedCurrent + message.data.current); + setQueriedTotal(message.data.total); + setLeftOffBottom(message.data.leftOff); + setTruncatedTimestamp(message.data.truncatedTimestamp); + if (leftOffTop === null) { + setLeftOffTop(message.data.leftOff - 1); + } + break; + case "startTime": + setStartTime(message.data); + break; + default: + console.error( + `unsupported websocket message type, Got: ${message.messageType}` + ); + } + }; + } + useEffect(() => { + setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : () => ws.current.close()}}); (async () => { - setTrafficViewerApiState(trafficViewerApiProp) openWebSocket("leftOff(-1)", true); - try { + try{ const tapStatusResponse = await trafficViewerApiProp.tapStatus(); setTappingStatus(tapStatusResponse); - if (setAnalyzeStatus) { + if(setAnalyzeStatus) { const analyzeStatusResponse = await trafficViewerApiProp.analyzeStatus(); setAnalyzeStatus(analyzeStatusResponse); } @@ -220,8 +218,8 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message }, []); const toggleConnection = () => { - if (wsConnection === WsConnectionStatus.Closed) { - + ws.current.close(); + if (wsConnection !== WsConnectionStatus.Connected) { if (query) { openWebSocket(`(${query}) and leftOff(-1)`, true); } else { @@ -230,10 +228,6 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message scrollableRef.current.jumpToBottom(); setIsSnappedToBottom(true); } - else if (wsConnection === WsConnectionStatus.Connected) { - trafficViewerApiProp.webSocket.close() - setWsConnection(WsConnectionStatus.Closed); - } } const onTLSDetected = (destAddress: string) => { @@ -270,7 +264,7 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message const onSnapBrokenEvent = () => { setIsSnappedToBottom(false); if (wsConnection === WsConnectionStatus.Connected) { - trafficViewerApiProp.webSocket.close() + ws.current.close(); } } @@ -330,16 +324,17 @@ const TrafficViewer: React.FC = ({ setAnalyzeStatus, message setAddressesWithTLS={setAddressesWithTLS} userDismissedTLSWarning={userDismissedTLSWarning} setUserDismissedTLSWarning={setUserDismissedTLSWarning} /> + ); }; const MemoiedTrafficViewer = React.memo(TrafficViewer) -const TrafficViewerContainer: React.FC = ({ setAnalyzeStatus, message, isWebSocketOpen, trafficViewerApiProp, actionButtons, isShowStatusBar = true }) => { +const TrafficViewerContainer: React.FC = ({ setAnalyzeStatus, trafficViewerApiProp, actionButtons, isShowStatusBar = true ,webSocketUrl}) => { return - } -export default TrafficViewerContainer \ No newline at end of file +export default TrafficViewerContainer diff --git a/ui-common/src/components/TrafficViewer/TrafficViewerApi.ts b/ui-common/src/components/TrafficViewer/TrafficViewerApi.ts index 0aa753bd4..e05744e7a 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewerApi.ts +++ b/ui-common/src/components/TrafficViewer/TrafficViewerApi.ts @@ -6,10 +6,8 @@ type TrafficViewerApi = { getEntry : (entryId : any, query:string) => any getRecentTLSLinks : () => any, webSocket : { - open : () => {}, - close : () => {}, - sendQuery : (query:string) => {} + close : () => {} } } - export default TrafficViewerApi \ No newline at end of file + export default TrafficViewerApi diff --git a/ui-common/src/components/TrafficViewer/assets/ebpf.png b/ui-common/src/components/TrafficViewer/assets/ebpf.png new file mode 100644 index 000000000..53424467e Binary files /dev/null and b/ui-common/src/components/TrafficViewer/assets/ebpf.png differ diff --git a/ui-common/src/components/UI/Queryable.tsx b/ui-common/src/components/UI/Queryable.tsx index 53827fe0e..b38cfa1d3 100644 --- a/ui-common/src/components/UI/Queryable.tsx +++ b/ui-common/src/components/UI/Queryable.tsx @@ -54,7 +54,7 @@ const Queryable: React.FC = ({query, style, iconStyle, className, useTool {flipped && addButton} {children} {!flipped && addButton} - {useTooltip && showTooltip && {query}} + {useTooltip && showTooltip && {query}} ); }; diff --git a/ui-common/src/components/UI/StatusBar.tsx b/ui-common/src/components/UI/StatusBar.tsx index 4e6265d08..b7f09cbca 100644 --- a/ui-common/src/components/UI/StatusBar.tsx +++ b/ui-common/src/components/UI/StatusBar.tsx @@ -11,15 +11,14 @@ const pluralize = (noun: string, amount: number) => { } export const StatusBar = () => { - const tappingStatus = useRecoilValue(tappingStatusAtom); const [expandedBar, setExpandedBar] = useState(false); const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails); - return
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}> + return
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar">
{tappingStatus.some(pod => !pod.isTapped) && warning} - + {`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
diff --git a/ui-common/src/hooks/useWS.tsx b/ui-common/src/hooks/useWS.tsx index 49c03b40a..f972cc0ca 100644 --- a/ui-common/src/hooks/useWS.tsx +++ b/ui-common/src/hooks/useWS.tsx @@ -18,7 +18,9 @@ const useWS = (wsUrl: string) => { const onMessage = (e) => { setMessage(e) } const onError = (e) => setError(e) const onOpen = () => { setisOpen(true) } - const onClose = () => setisOpen(false) + const onClose = () => { + setisOpen(false) + } const openSocket = () => { ws.current = new WebSocket(wsUrl) @@ -36,13 +38,17 @@ const useWS = (wsUrl: string) => { ws.current.removeEventListener("close", onClose) } - const sendQuery = (query: string) => { - if (ws.current && (ws.current.readyState === WebSocketReadyState.OPEN)) { - ws.current.send(JSON.stringify({ "query": query, "enableFullEntries": false })); - } + const sendQueryWhenWsOpen = (query) => { + setTimeout(() => { + if (ws?.current?.readyState === WebSocket.OPEN) { + ws.current.send(JSON.stringify({"query": query, "enableFullEntries": false})); + } else { + sendQueryWhenWsOpen(query); + } + }, 500) } - return { message, error, isOpen, openSocket, closeSocket, sendQuery } + return { message, error, isOpen, openSocket, closeSocket, sendQueryWhenWsOpen } } -export default useWS \ No newline at end of file +export default useWS diff --git a/ui/package.json b/ui/package.json index c9e8cc50e..80cf4f7b8 100644 --- a/ui/package.json +++ b/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.125", + "@up9/mizu-common": "^1.0.128", "axios": "^0.25.0", "core-js": "^3.20.2", "craco-babel-loader": "^1.0.3", diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index a881ae37b..60b307aba 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -1,11 +1,11 @@ -import React, { useEffect } from "react"; +import React, {useEffect} from "react"; import { Button } from "@material-ui/core"; -import Api, {getWebsocketUrl} from "../../../helpers/api"; +import Api,{getWebsocketUrl} from "../../../helpers/api"; import debounce from 'lodash/debounce'; import {useSetRecoilState, useRecoilState} from "recoil"; import {useCommonStyles} from "../../../helpers/commonStyle" import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen"; -import TrafficViewer ,{useWS,DEFAULT_QUERY} from "@up9/mizu-common" +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"; @@ -22,11 +22,10 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus}) => { const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom); const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom); - const {message,error,isOpen, openSocket, closeSocket, sendQuery} = useWS(getWebsocketUrl()) - const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQuery: sendQuery}} +const trafficViewerApi = {...api} const handleOpenOasModal = () => { - closeSocket() + //closeSocket() -- Todo: Add Close webSocket setOpenOasModal(true); } @@ -56,18 +55,16 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus}) => { }
- sendQuery(DEFAULT_QUERY); - useEffect(() => { return () => { - closeSocket() + //closeSocket() } },[]) return ( <> - ); -}; \ No newline at end of file +};