Fixing acceptance tests (#900)

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 () =>{

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"

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<TrafficViewerProps> = ({ setAnalyzeStatus, message, error, isWebSocketOpen, trafficViewerApiProp, actionButtons, isShowStatusBar }) => {
+export const TrafficViewer : React.FC<TrafficViewerProps> = ({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<TrafficViewerApi>)
   const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
-
-
   const [noMoreDataTop, setNoMoreDataTop] = useState(false);
   const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
 
@@ -107,6 +103,7 @@ const TrafficViewer: React.FC<TrafficViewerProps> = ({ 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<TrafficViewerProps> = ({ 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<TrafficViewerProps> = ({ 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<TrafficViewerProps> = ({ 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<TrafficViewerProps> = ({ setAnalyzeStatus, message
   const onSnapBrokenEvent = () => {
     setIsSnappedToBottom(false);
     if (wsConnection === WsConnectionStatus.Connected) {
-      trafficViewerApiProp.webSocket.close()
+      ws.current.close();
     }
   }
 
@@ -330,16 +324,17 @@ const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, message
         setAddressesWithTLS={setAddressesWithTLS}
         userDismissedTLSWarning={userDismissedTLSWarning}
         setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
+      <ToastContainer/>
     </div>
   );
 };
 
 const MemoiedTrafficViewer = React.memo(TrafficViewer)
-const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, message, isWebSocketOpen, trafficViewerApiProp, actionButtons, isShowStatusBar = true }) => {
+const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp, actionButtons, isShowStatusBar = true ,webSocketUrl}) => {
   return <RecoilRoot>
-    <MemoiedTrafficViewer message={message} isWebSocketOpen={isWebSocketOpen} actionButtons={actionButtons} isShowStatusBar={isShowStatusBar}
+    <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
       trafficViewerApiProp={trafficViewerApiProp} setAnalyzeStatus={setAnalyzeStatus} />
   </RecoilRoot>
 }
 
-export default TrafficViewerContainer 
+export default TrafficViewerContainer

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
+  export default TrafficViewerApi

ui-common/src/components/UI/Queryable.tsx

@@ -54,7 +54,7 @@ const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTool
                 {flipped && addButton}
                 {children}
                 {!flipped && addButton}
-                {useTooltip && showTooltip && <span className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
+                {useTooltip && showTooltip && <span data-cy={"QueryableTooltip"} className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
         </div>
     );
 };

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 <div className={`${style.statusBar} ${(expandedBar ? `${style.expandedStatusBar}` : "")}`} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
+    return <div className={`${style.statusBar} ${(expandedBar ? `${style.expandedStatusBar}` : "")}`} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar">
         <div className={style.podsCount}>
         {tappingStatus.some(pod => !pod.isTapped) && <img src={warningIcon} alt="warning"/>}
-            <span className={style.podsCountText}>
+            <span className={style.podsCountText} data-cy="podsCountText">
                 {`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
             </span>
         </div>

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
+export default useWS