github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-13 22:27:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the glitch (#529)

Browse Source 
* Fix the glitch

* Bring back the functionality to "Fetch old records" and "Snap to bottom" buttons
This commit is contained in:
M. Mert Yıldıran 2021-12-15 12:26:18 +03:00 committed by GitHub
parent f1ba397543
commit a830bbe023
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/components/EntriesList.tsx
View File

@ -26,14 +26,15 @@ interface EntriesListProps {
updateQuery: any; updateQuery: any;
leftOffTop: number; leftOffTop: number;
setLeftOffTop: (leftOffTop: number) => void; setLeftOffTop: (leftOffTop: number) => void;
reconnectWebSocket: any;
isWebSocketConnectionClosed: boolean; isWebSocketConnectionClosed: boolean;
closeWebSocket: any; ws: any;
openWebSocket: (query: string, resetEntries: boolean) => void;
leftOffBottom: number;
} }
const api = new Api(); const api = new Api();
export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, query, listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, focusedEntryId, setFocusedEntryId, updateQuery, leftOffTop, setLeftOffTop, reconnectWebSocket, isWebSocketConnectionClosed, closeWebSocket}) => { export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, query, listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, focusedEntryId, setFocusedEntryId, updateQuery, leftOffTop, setLeftOffTop, isWebSocketConnectionClosed, ws, openWebSocket, leftOffBottom}) => {
const [loadMoreTop, setLoadMoreTop] = useState(false); const [loadMoreTop, setLoadMoreTop] = useState(false);
const [isLoadingTop, setIsLoadingTop] = useState(false); const [isLoadingTop, setIsLoadingTop] = useState(false);
const scrollableRef = useRef(null); const scrollableRef = useRef(null);
@ -118,7 +119,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
title="Fetch old records" title="Fetch old records"
className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`} className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`}
onClick={(_) => { onClick={(_) => {
closeWebSocket(); ws.close();
getOldEntries(); getOldEntries();
}}> }}>
<img alt="down" src={down} /> <img alt="down" src={down} />
@ -127,7 +128,13 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
title="Snap to bottom" title="Snap to bottom"
className={`${styles.btnLive} ${isSnappedToBottom && !isWebSocketConnectionClosed ? styles.hideButton : styles.showButton}`} className={`${styles.btnLive} ${isSnappedToBottom && !isWebSocketConnectionClosed ? styles.hideButton : styles.showButton}`}
onClick={(_) => { onClick={(_) => {
reconnectWebSocket(); if (isWebSocketConnectionClosed) {
if (query) {
openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
} else {
openWebSocket(`leftOff(${leftOffBottom})`, false);
}
}
scrollableRef.current.jumpToBottom(); scrollableRef.current.jumpToBottom();
setIsSnappedToBottom(true); setIsSnappedToBottom(true);
}}> }}>

21
ui/src/components/TrafficPage.tsx
View File

@ -224,24 +224,16 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
// eslint-disable-next-line // eslint-disable-next-line
}, [focusedEntryId]); }, [focusedEntryId]);
const closeWebSocket = () => { const toggleConnection = () => {
if (connection === ConnectionStatus.Connected) {
ws.current.close(); ws.current.close();
} } else {
const reconnectWebSocket = () => {
if (query) { if (query) {
openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false); openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
} else { } else {
openWebSocket(`leftOff(${leftOffBottom})`, false); openWebSocket(`leftOff(${leftOffBottom})`, false);
} }
} }
const toggleConnection = () => {
if (connection === ConnectionStatus.Connected) {
closeWebSocket();
} else {
reconnectWebSocket();
}
} }
const getConnectionStatusClass = (isContainer) => { const getConnectionStatusClass = (isContainer) => {
@ -266,7 +258,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
const onSnapBrokenEvent = () => { const onSnapBrokenEvent = () => {
setIsSnappedToBottom(false); setIsSnappedToBottom(false);
if (connection === ConnectionStatus.Connected) { if (connection === ConnectionStatus.Connected) {
closeWebSocket(); ws.current.close();
} }
} }
@ -313,9 +305,10 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
updateQuery={updateQuery} updateQuery={updateQuery}
leftOffTop={leftOffTop} leftOffTop={leftOffTop}
setLeftOffTop={setLeftOffTop} setLeftOffTop={setLeftOffTop}
reconnectWebSocket={reconnectWebSocket}
isWebSocketConnectionClosed={connection === ConnectionStatus.Closed} isWebSocketConnectionClosed={connection === ConnectionStatus.Closed}
closeWebSocket={closeWebSocket} ws={ws.current}
openWebSocket={openWebSocket}
leftOffBottom={leftOffBottom}
/> />
</div> </div>
</div> </div>