From b47718e094b1e0e58bd0cfe4dcdc79f9f37bcc61 Mon Sep 17 00:00:00 2001 From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com> Date: Sun, 3 Apr 2022 15:51:20 +0300 Subject: [PATCH] TRA-4442 Improve UI performance (#960) * Move ws entry listener to entriesList component * unused code --- .../components/TrafficViewer/EntriesList.tsx | 30 +++++++++++++-- .../TrafficViewer/TrafficViewer.tsx | 38 ++++++------------- ui/package.json | 3 +- 3 files changed, 40 insertions(+), 31 deletions(-) diff --git a/ui-common/src/components/TrafficViewer/EntriesList.tsx b/ui-common/src/components/TrafficViewer/EntriesList.tsx index c7c8e9e86..81c7b6b07 100644 --- a/ui-common/src/components/TrafficViewer/EntriesList.tsx +++ b/ui-common/src/components/TrafficViewer/EntriesList.tsx @@ -10,6 +10,7 @@ import entriesAtom from "../../recoil/entries"; import queryAtom from "../../recoil/query"; import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi"; import TrafficViewerApi from "./TrafficViewerApi"; +import focusedEntryIdAtom from "../../recoil/focusedEntryId"; interface EntriesListProps { listEntryREF: any; @@ -18,8 +19,6 @@ interface EntriesListProps { setIsSnappedToBottom: any; queriedCurrent: number; setQueriedCurrent: any; - queriedTotal: number; - setQueriedTotal: any; startTime: number; noMoreDataTop: boolean; setNoMoreDataTop: (flag: boolean) => void; @@ -33,16 +32,18 @@ interface EntriesListProps { ws: any; } -export const EntriesList: React.FC = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef, ws}) => { +export const EntriesList: React.FC = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef, ws}) => { const [entries, setEntries] = useRecoilState(entriesAtom); const query = useRecoilValue(queryAtom); const isWsConnectionClosed = ws?.current?.readyState !== WebSocket.OPEN; + const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState) const [loadMoreTop, setLoadMoreTop] = useState(false); const [isLoadingTop, setIsLoadingTop] = useState(false); + const [queriedTotal, setQueriedTotal] = useState(0); useEffect(() => { const list = document.getElementById('list').firstElementChild; @@ -103,6 +104,29 @@ export const EntriesList: React.FC = ({listEntryREF, onSnapBro const scrollbarVisible = scrollableRef.current?.childWrapperRef.current.clientHeight > scrollableRef.current?.wrapperRef.current.clientHeight; + 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 "queryMetadata": + setQueriedTotal(message.data.total); + break; + }; + } + } + return
diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx index 8cd01934b..9fbbbab5c 100644 --- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx +++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx @@ -58,19 +58,18 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, const classes = useLayoutStyles(); - const [entries, setEntries] = useRecoilState(entriesAtom); + const setEntries = useSetRecoilState(entriesAtom); const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); const query = useRecoilValue(queryAtom); const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState) const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom); const [noMoreDataTop, setNoMoreDataTop] = useState(false); const [isSnappedToBottom, setIsSnappedToBottom] = useState(true); - const [forceRender, setForceRender] = useState(0); + const [wsReadyState, setWsReadyState] = useState(0); const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5"); const [queriedCurrent, setQueriedCurrent] = useState(0); - const [queriedTotal, setQueriedTotal] = useState(0); const [leftOffBottom, setLeftOffBottom] = useState(0); const [leftOffTop, setLeftOffTop] = useState(null); const [truncatedTimestamp, setTruncatedTimestamp] = useState(0); @@ -144,9 +143,12 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, ws.current = new WebSocket(webSocketUrl); sendQueryWhenWsOpen(query); + ws.current.onopen = () => { + setWsReadyState(ws?.current?.readyState); + } + ws.current.onclose = () => { - if (window.location.pathname === "/") - setForceRender(forceRender + 1); + setWsReadyState(ws?.current?.readyState); } ws.current.onerror = (event) => { console.error("WebSocket error:", event); @@ -177,17 +179,6 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, 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; @@ -208,7 +199,6 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, break; case "queryMetadata": setQueriedCurrent(queriedCurrent + message.data.current); - setQueriedTotal(message.data.total); setLeftOffBottom(message.data.leftOff); setTruncatedTimestamp(message.data.truncatedTimestamp); if (leftOffTop === null) { @@ -218,10 +208,6 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, case "startTime": setStartTime(message.data); break; - default: - console.error( - `unsupported websocket message type, Got: ${message.messageType}` - ); } }; } @@ -272,7 +258,7 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, }; const getConnectionIndicator = () => { - switch (ws?.current?.readyState) { + switch (wsReadyState) { case WebSocket.OPEN: return
@@ -285,7 +271,7 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, } const getConnectionTitle = () => { - switch (ws?.current?.readyState) { + switch (wsReadyState) { case WebSocket.OPEN: return "streaming live traffic" default: @@ -305,9 +291,9 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, {tappingStatus && isShowStatusBar && }
- pause - play
{getConnectionTitle()} @@ -331,8 +317,6 @@ export const TrafficViewer: React.FC = ({ setAnalyzeStatus, setIsSnappedToBottom={setIsSnappedToBottom} queriedCurrent={queriedCurrent} setQueriedCurrent={setQueriedCurrent} - queriedTotal={queriedTotal} - setQueriedTotal={setQueriedTotal} startTime={startTime} noMoreDataTop={noMoreDataTop} setNoMoreDataTop={setNoMoreDataTop} diff --git a/ui/package.json b/ui/package.json index 63846ff89..4d6e96dc2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -48,7 +48,8 @@ "npm-link-shared": "^0.5.6", "react-app-rewire-alias": "^1.1.7", "react-dev-utils": "^12.0.0", - "recoil": "^0.5.2" + "recoil": "^0.5.2", + "react-error-overlay": "6.0.9" }, "scripts": { "start": "craco start",