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

refactor

Browse Source
This commit is contained in:
Liraz Yehezkel 2021-05-06 15:06:29 +03:00
parent 5ad26bd51e
commit 70e7d4b6ac
1 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
ui/src/components/HarEntriesList.tsx
View File

@ -1,5 +1,5 @@
import {HarEntry} from "./HarEntry"; import {HarEntry} from "./HarEntry";
import React, {useEffect, useMemo, useState} from "react"; import React, {useCallback, useEffect, useMemo, useState} from "react";
import styles from './style/HarEntriesList.module.sass'; import styles from './style/HarEntriesList.module.sass';
import spinner from './assets/spinner.svg'; import spinner from './assets/spinner.svg';
import ScrollableFeed from "react-scrollable-feed"; import ScrollableFeed from "react-scrollable-feed";
@ -30,32 +30,19 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
const [loadMoreTop, setLoadMoreTop] = useState(false); const [loadMoreTop, setLoadMoreTop] = useState(false);
const [isLoadingTop, setIsLoadingTop] = useState(false); const [isLoadingTop, setIsLoadingTop] = useState(false);
useEffect(() => { const filterEntries = useCallback((entry) => {
if(loadMoreTop && !connectionOpen && !noMoreDataTop)
fetchData(FetchOperator.LT);
}, [loadMoreTop, connectionOpen, noMoreDataTop]);
useEffect(() => {
const list = document.getElementById('list').firstElementChild;
list.addEventListener('scroll', (e) => {
const el: any = e.target;
if(el.scrollTop === 0) {
setLoadMoreTop(true);
} else {
setLoadMoreTop(false);
}
});
}, []);
const filterEntries = (entry) => {
if(methodsFilter.length > 0 && !methodsFilter.includes(entry.method.toLowerCase())) return; if(methodsFilter.length > 0 && !methodsFilter.includes(entry.method.toLowerCase())) return;
if(pathFilter && entry.path.toLowerCase().indexOf(pathFilter) === -1) return; if(pathFilter && entry.path.toLowerCase().indexOf(pathFilter) === -1) return;
if(statusFilter.includes(StatusType.SUCCESS) && entry.statusCode >= 400) return; if(statusFilter.includes(StatusType.SUCCESS) && entry.statusCode >= 400) return;
if(statusFilter.includes(StatusType.ERROR) && entry.statusCode < 400) return; if(statusFilter.includes(StatusType.ERROR) && entry.statusCode < 400) return;
return entry; return entry;
} },[methodsFilter, pathFilter, statusFilter]);
const fetchData = async (operator, firstEntryTimestamp?, lastEntryTimestamp?) => { const filteredEntries = useMemo(() => {
return entries.filter(filterEntries);
},[entries, filterEntries])
const fetchData = useCallback(async (operator, firstEntryTimestamp?, lastEntryTimestamp?) => {
const timestamp = operator === FetchOperator.LT ? (firstEntryTimestamp ?? entries[0].timestamp) : (lastEntryTimestamp ?? entries[entries.length - 1].timestamp); const timestamp = operator === FetchOperator.LT ? (firstEntryTimestamp ?? entries[0].timestamp) : (lastEntryTimestamp ?? entries[entries.length - 1].timestamp);
if(operator === FetchOperator.LT) if(operator === FetchOperator.LT)
@ -70,50 +57,61 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
setNoMoreDataTop(true); setNoMoreDataTop(true);
scrollTo = document.getElementById("noMoreDataTop"); scrollTo = document.getElementById("noMoreDataTop");
} else { } else {
scrollTo = document.getElementById(filteredEntries?.[0]?.id);
const newEntries = [...data, ...entries];
if(newEntries.length >= 1000) {
newEntries.splice(1000);
}
setEntries(newEntries);
if(data.filter(filterEntries).length === 0) { if(data.filter(filterEntries).length === 0) {
fetchData(operator, data[0].timestamp); fetchData(operator, data[0].timestamp);
return; return;
} }
scrollTo = document.getElementById(filteredEntries?.[0]?.id);
} }
const newEntries = [...data, ...entries];
if(newEntries.length >= 1000) {
newEntries.splice(1000);
}
setEntries(newEntries);
setLoadMoreTop(false); setLoadMoreTop(false);
setIsLoadingTop(false) setIsLoadingTop(false)
if(scrollTo) { if(scrollTo) {
scrollTo.scrollIntoView(); scrollTo.scrollIntoView();
} }
} } else if(operator === FetchOperator.GT) {
if(operator === FetchOperator.GT) {
if(data.length === 0) { if(data.length === 0) {
setNoMoreDataBottom(true); setNoMoreDataBottom(true);
} else { } else {
scrollTo = document.getElementById(filteredEntries?.[filteredEntries.length -1]?.id);
let newEntries = [...entries, ...data];
if(newEntries.length >= 1000) {
setNoMoreDataTop(false);
newEntries = newEntries.slice(-1000);
}
setEntries(newEntries);
if(data.filter(filterEntries).length === 0) { if(data.filter(filterEntries).length === 0) {
fetchData(operator, null, data[data.length-1].timestamp); fetchData(operator, null, data[data.length-1].timestamp);
return; return;
} }
} }
scrollTo = document.getElementById(filteredEntries?.[filteredEntries.length -1].id);
let newEntries = [...entries, ...data];
if(newEntries.length >= 1000) {
setNoMoreDataTop(false);
newEntries = newEntries.slice(-1000);
}
setEntries(newEntries);
if(scrollTo) { if(scrollTo) {
scrollTo.scrollIntoView({behavior: "smooth"}); scrollTo.scrollIntoView({behavior: "smooth"});
} }
} }
}); });
}; },[entries, filterEntries, filteredEntries, setEntries, setNoMoreDataBottom, setNoMoreDataTop]);
const filteredEntries = useMemo(() => { useEffect(() => {
return entries.filter(filterEntries); if(loadMoreTop && !connectionOpen && !noMoreDataTop)
},[entries, methodsFilter, pathFilter, statusFilter]) fetchData(FetchOperator.LT);
}, [loadMoreTop, connectionOpen, noMoreDataTop, fetchData]);
useEffect(() => {
const list = document.getElementById('list').firstElementChild;
list.addEventListener('scroll', (e) => {
const el: any = e.target;
if(el.scrollTop === 0) {
setLoadMoreTop(true);
} else {
setLoadMoreTop(false);
}
});
}, []);
return <> return <>
<div className={styles.list}> <div className={styles.list}>