diff --git a/ui-common/package.json b/ui-common/package.json index 55360d2ec..a598f775e 100644 --- a/ui-common/package.json +++ b/ui-common/package.json @@ -20,7 +20,7 @@ "test:lint": "eslint .", "predeploy": "cd example && npm install && npm run build", "deploy": "gh-pages -d example/build", - "eslint": "eslint . --ext .js,.jsx,.ts,.tsx" + "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0" }, "peerDependencies": { "@craco/craco": "^6.4.3", diff --git a/ui-common/src/components/EntriesList/EntriesList.tsx b/ui-common/src/components/EntriesList/EntriesList.tsx index 68236c5e1..28a1a8edb 100644 --- a/ui-common/src/components/EntriesList/EntriesList.tsx +++ b/ui-common/src/components/EntriesList/EntriesList.tsx @@ -109,7 +109,7 @@ export const EntriesList: React.FC = ({ if (scrollTo) { scrollableRef.current.scrollToIndex(data.data.length - 1); } - }, [setLoadMoreTop, setIsLoadingTop, entries, setEntries, query, setNoMoreDataTop, leftOffTop, setLeftOffTop, setQueriedTotal, setTruncatedTimestamp, scrollableRef]); + }, [setLoadMoreTop, setIsLoadingTop, entries, setEntries, query, setNoMoreDataTop, leftOffTop, setLeftOffTop, setQueriedTotal, setTruncatedTimestamp, scrollableRef, trafficViewerApi]); useEffect(() => { if (!isWsConnectionClosed || !loadMoreTop || noMoreDataTop) return; @@ -121,7 +121,7 @@ export const EntriesList: React.FC = ({ useEffect(() => { if (!focusedEntryId && entries.length > 0) setFocusedEntryId(entries[0].id); - }, [focusedEntryId, entries]) + }, [focusedEntryId, entries, setFocusedEntryId]) useEffect(() => { const newEntries = [...entries]; @@ -131,7 +131,7 @@ export const EntriesList: React.FC = ({ setNoMoreDataTop(false); setEntries(newEntries); } - }, [entries]) + }, [entries, setLeftOffTop, setNoMoreDataTop, setEntries]) if(ws.current && !ws.current.onmessage) { ws.current.onmessage = (e) => { diff --git a/ui-common/src/components/EntryListItem/EntryListItem.tsx b/ui-common/src/components/EntryListItem/EntryListItem.tsx index 0baaded7d..5d25c3d1e 100644 --- a/ui-common/src/components/EntryListItem/EntryListItem.tsx +++ b/ui-common/src/components/EntryListItem/EntryListItem.tsx @@ -15,7 +15,6 @@ import outgoingIconFailure from "assets/outgoing-traffic-failure.svg" import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg" import {useRecoilState} from "recoil"; import focusedEntryIdAtom from "../../recoil/focusedEntryId"; -import queryAtom from "../../recoil/query"; interface TCPInterface { ip: string @@ -66,7 +65,6 @@ enum CaptureTypes { export const EntryItem: React.FC = ({entry, style, headingMode, namespace}) => { const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); - const [queryState, setQuery] = useRecoilState(queryAtom); const isSelected = focusedEntryId === entry.id; const classification = getClassification(entry.status) diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx index 1888b4218..a713c1b10 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, {useCallback, useEffect, useRef, useState} from "react"; import { Filters } from "../Filters/Filters"; import { EntriesList } from "../EntriesList/EntriesList"; import makeStyles from '@mui/styles/makeStyles'; @@ -59,7 +59,6 @@ export const TrafficViewer: React.FC = ({ }) => { const classes = useLayoutStyles(); - const setEntries = useSetRecoilState(entriesAtom); const setFocusedEntryId = useSetRecoilState(focusedEntryIdAtom); const query = useRecoilValue(queryAtom); @@ -68,40 +67,44 @@ export const TrafficViewer: React.FC = ({ const [noMoreDataTop, setNoMoreDataTop] = useState(false); const [isSnappedToBottom, setIsSnappedToBottom] = useState(true); const [wsReadyState, setWsReadyState] = useState(0); - const setLeftOffTop = useSetRecoilState(leftOffTopAtom); const scrollableRef = useRef(null); + const ws = useRef(null); - + const closeWebSocket = useCallback(() => { + if (ws?.current?.readyState === WebSocket.OPEN) { + ws.current.close(); + return true; + } + }, []) useEffect(() => { if(shouldCloseWebSocket){ closeWebSocket() setShouldCloseWebSocket(false); } - }, [shouldCloseWebSocket]) + }, [shouldCloseWebSocket, setShouldCloseWebSocket, closeWebSocket]) - useEffect(() => { - reopenConnection() - }, [webSocketUrl]) - - const ws = useRef(null); - - const openEmptyWebSocket = () => { - openWebSocket(DEFAULT_LEFTOFF, query, true, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS); - } - - const closeWebSocket = () => { - if (ws?.current?.readyState === WebSocket.OPEN) { - ws.current.close(); - return true; - } - } + const sendQueryWhenWsOpen = useCallback((leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => { + setTimeout(() => { + if (ws?.current?.readyState === WebSocket.OPEN) { + ws.current.send(JSON.stringify({ + "leftOff": leftOff, + "query": query, + "enableFullEntries": false, + "fetch": fetch, + "timeoutMs": fetchTimeoutMs + })); + } else { + sendQueryWhenWsOpen(leftOff, query, fetch, fetchTimeoutMs); + } + }, 500) + }, []) const listEntry = useRef(null); - const openWebSocket = (leftOff: string, query: string, resetEntries: boolean, fetch: number, fetchTimeoutMs: number) => { + const openWebSocket = useCallback((leftOff: string, query: string, resetEntries: boolean, fetch: number, fetchTimeoutMs: number) => { if (resetEntries) { setFocusedEntryId(null); setEntries([]); @@ -127,24 +130,11 @@ export const TrafficViewer: React.FC = ({ } } catch (e) { } - } - - const sendQueryWhenWsOpen = (leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => { - setTimeout(() => { - if (ws?.current?.readyState === WebSocket.OPEN) { - ws.current.send(JSON.stringify({ - "leftOff": leftOff, - "query": query, - "enableFullEntries": false, - "fetch": fetch, - "timeoutMs": fetchTimeoutMs - })); - } else { - sendQueryWhenWsOpen(leftOff, query, fetch, fetchTimeoutMs); - } - }, 500) - } + }, [setFocusedEntryId, setEntries, setLeftOffTop, setNoMoreDataTop, ws, sendQueryWhenWsOpen, webSocketUrl]) + const openEmptyWebSocket = useCallback(() => { + openWebSocket(DEFAULT_LEFTOFF, query, true, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS); + }, [openWebSocket, query]) useEffect(() => { setTrafficViewerApiState({...trafficViewerApiProp, webSocket: {close: closeWebSocket}}); @@ -156,7 +146,7 @@ export const TrafficViewer: React.FC = ({ console.error(error); } })() - }, []); + }, [trafficViewerApiProp, closeWebSocket, setTappingStatus, setTrafficViewerApiState]); const toggleConnection = () => { if (!closeWebSocket()) { @@ -166,12 +156,17 @@ export const TrafficViewer: React.FC = ({ } } - const reopenConnection = async () => { + const reopenConnection = useCallback(async () => { closeWebSocket() openEmptyWebSocket(); scrollableRef.current.jumpToBottom(); setIsSnappedToBottom(true); - } + }, [scrollableRef, setIsSnappedToBottom, closeWebSocket, openEmptyWebSocket]) + + useEffect(() => { + reopenConnection() + // eslint-disable-next-line + }, [webSocketUrl]) useEffect(() => { return () => { diff --git a/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx b/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx index 310fa0c02..bcb5d6dca 100644 --- a/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx +++ b/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx @@ -11,7 +11,7 @@ interface LinkProps { } export const Link: React.FC = ({ link, className, title, children }) => { - return + return {children} } diff --git a/ui-common/src/components/UI/SelectList/SelectList.tsx b/ui-common/src/components/UI/SelectList/SelectList.tsx index f71dd8b5e..9cffd4e96 100644 --- a/ui-common/src/components/UI/SelectList/SelectList.tsx +++ b/ui-common/src/components/UI/SelectList/SelectList.tsx @@ -66,7 +66,7 @@ const SelectList: React.FC = ({ items, tableName, checkedValues = [], mul } setCheckedValues(newChecked) - }, [searchValue, checkedValues, filteredValuesKeys]) + }, [checkedValues, filteredValuesKeys, items, setCheckedValues]) const dataFieldFunc = (listValue) => listValue.component ? listValue.component : diff --git a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx index 7f559bc81..48cc83cfb 100644 --- a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx +++ b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx @@ -40,7 +40,7 @@ export const TimelineBarChart: React.FC = ({ timeLineBarC if (!data) return; const protocolsBarsData = []; const prtcNames = []; - data.map(protocolObj => { + data.forEach(protocolObj => { let obj: { [k: string]: any } = {}; obj.timestamp = getHoursAndMinutes(protocolObj.timestamp); protocolObj.protocols.forEach(protocol => { diff --git a/ui-common/src/recoil/TrafficViewerApi/atom.ts b/ui-common/src/recoil/TrafficViewerApi/atom.ts index 92d5c07e0..453a7665e 100644 --- a/ui-common/src/recoil/TrafficViewerApi/atom.ts +++ b/ui-common/src/recoil/TrafficViewerApi/atom.ts @@ -1,5 +1,4 @@ import { atom } from "recoil"; -import TrafficViewerApi from "../../components/TrafficViewer/TrafficViewerApi"; const TrafficViewerApiAtom = atom({ key: "TrafficViewerApiAtom",