github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-12 13:53:30 +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;
leftOffTop: number;
setLeftOffTop: (leftOffTop: number) => void;
reconnectWebSocket: any;
isWebSocketConnectionClosed: boolean;
closeWebSocket: any;
ws: any;
openWebSocket: (query: string, resetEntries: boolean) => void;
leftOffBottom: number;
}
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 [isLoadingTop, setIsLoadingTop] = useState(false);
const scrollableRef = useRef(null);
@ -118,7 +119,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
title="Fetch old records"
className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`}
onClick={(_) => {
closeWebSocket();
ws.close();
getOldEntries();
}}>
<img alt="down" src={down} />
@ -127,7 +128,13 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
title="Snap to bottom"
className={`${styles.btnLive} ${isSnappedToBottom && !isWebSocketConnectionClosed ? styles.hideButton : styles.showButton}`}
onClick={(_) => {
reconnectWebSocket();
if (isWebSocketConnectionClosed) {
if (query) {
openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
} else {
openWebSocket(`leftOff(${leftOffBottom})`, false);
}
}
scrollableRef.current.jumpToBottom();
setIsSnappedToBottom(true);
}}>

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

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