diff --git a/ui-common/src/components/TrafficViewer/EntriesList.tsx b/ui-common/src/components/TrafficViewer/EntriesList.tsx index 53456eed0..9df325d46 100644 --- a/ui-common/src/components/TrafficViewer/EntriesList.tsx +++ b/ui-common/src/components/TrafficViewer/EntriesList.tsx @@ -55,7 +55,7 @@ export const EntriesList: React.FC = ({ const [startTime, setStartTime] = useState(0); const [truncatedTimestamp, setTruncatedTimestamp] = useState(0); - const leftOffBottom = entries.length > 0 ? entries[entries.length - 1].id : -1; + const leftOffBottom = entries.length > 0 ? entries[entries.length - 1].id + 1 : -1; useEffect(() => { const list = document.getElementById('list').firstElementChild; @@ -98,6 +98,9 @@ export const EntriesList: React.FC = ({ setIsLoadingTop(false); const newEntries = [...data.data.reverse(), ...entries]; + if(newEntries.length > 10000) { + newEntries.splice(10000, newEntries.length - 10000) + } setEntries(newEntries); setQueriedTotal(data.meta.total); @@ -126,9 +129,9 @@ export const EntriesList: React.FC = ({ const entry = message.data; if (!focusedEntryId) setFocusedEntryId(entry.id.toString()); const newEntries = [...entries, entry]; - if (newEntries.length === 10001) { + if (newEntries.length > 10000) { setLeftOffTop(newEntries[0].id); - newEntries.shift(); + newEntries.splice(0, newEntries.length - 10000) setNoMoreDataTop(false); } setEntries(newEntries);