root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: logs page by the data after parsing

Browse Source
This commit is contained in:
jialin
2025-01-12 17:04:12 +08:00
parent 04d5b692b8
commit 0de0426f72
12 changed files with 1063 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/logs-viewer/virtual-log-list.tsx
+85 -156
View File
@@ -11,7 +11,7 @@ import React, {
useRef,
useState
} from 'react';
import { controlSeqRegex, replaceLineRegex } from './config';
import { replaceLineRegex } from './config';
import LogsList from './logs-list';
import LogsPagination from './logs-pagination';
import './styles/index.less';
@@ -36,8 +36,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const cacheDataRef = useRef<any>('');
const [logs, setLogs] = useState<any[]>([]);
const logParseWorker = useRef<any>(null);
const tail = useRef<any>(defaultTail);
const [isLoadend, setIsLoadend] = useState(false);
const tail = useRef<any>(pageSize - 1);
const [loading, setLoading] = useState(false);
const [isAtTop, setIsAtTop] = useState(false);
const [scrollPos, setScrollPos] = useState<any[]>([]);
@@ -46,6 +45,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const pageRef = useRef<any>(page);
const totalPageRef = useRef<any>(totalPage);
const isLoadingMoreRef = useRef(false);
const [currentData, setCurrentData] = useState<any[]>([]);
const scrollPosRef = useRef<any>({
pos: 'bottom',
page: 1
@@ -60,181 +60,70 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
}
}));
useEffect(() => {
logParseWorker.current?.terminate?.();
logParseWorker.current = new Worker(
// @ts-ignore
new URL('./parse-worker.ts', import.meta.url),
{
type: 'module'
}
);
logParseWorker.current.onmessage = (event: any) => {
const { result, lines } = event.data;
lineCountRef.current = lines;
setLogs(result);
};
return () => {
if (logParseWorker.current) {
logParseWorker.current.terminate();
}
};
}, []);
const debounceLoading = _.debounce(() => {
setLoading(false);
isLoadingMoreRef.current = false;
}, 200);
const isClean = useCallback((input: string) => {
let match = controlSeqRegex.exec(input) || [];
const command = match?.[3];
const n = parseInt(match?.[1], 10) || 1;
return command === 'J' && n === 2;
}, []);
const getLastPage = (data: string) => {
const list = _.split(data.trim(), '\n');
let result = '';
const totalPage = Math.ceil(list.length / pageSize);
pageRef.current = totalPage;
totalPageRef.current = totalPage;
const lastPageLogs = list.slice(-pageSize).join('\n');
result = lastPageLogs;
setPage(totalPage);
setTotalPage(totalPage);
setScrollPos(['bottom', totalPage]);
scrollPosRef.current = {
pos: 'bottom',
page: totalPage
};
return result;
};
const getCurrentPage = () => {
const list = _.split(cacheDataRef.current.trim(), '\n');
const totalPage = Math.ceil(list.length / pageSize);
let newPage = pageRef.current;
if (newPage < 1) {
newPage = 1;
const getCurrent = useCallback(() => {
if (pageRef.current < 1) {
pageRef.current = 1;
}
if (isLoadingMoreRef.current) {
setLoading(true);
}
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const currentPage = list.slice(start, end).join('\n');
setPage(newPage);
setTotalPage(totalPage);
if (
pageRef.current === totalPageRef.current &&
scrollPosRef.current.pos === 'bottom'
) {
setScrollPos(['bottom', newPage]);
scrollPosRef.current = {
pos: 'bottom',
page: newPage
};
}
debounceLoading();
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: currentPage
});
};
const start = (pageRef.current - 1) * pageSize;
const end = pageRef.current * pageSize;
const currentLogs = logs.slice(start, end);
setPage(pageRef.current);
setCurrentData(currentLogs);
}, [logs, pageSize]);
const getPrePage = useCallback(() => {
const list = _.split(cacheDataRef.current.trim(), '\n');
let newPage = page - 1;
if (newPage < 1) {
newPage = 1;
}
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const prePage = list.slice(start, end).join('\n');
pageRef.current = pageRef.current - 1;
setPage(() => newPage);
setScrollPos(['bottom', newPage]);
getCurrent();
setScrollPos(['bottom', pageRef.current]);
scrollPosRef.current = {
pos: 'bottom',
page: newPage
page: pageRef.current
};
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: prePage
});
}, [page, pageSize]);
}, [getCurrent]);
const getNextPage = useCallback(() => {
const list = _.split(cacheDataRef.current.trim(), '\n');
let newPage = page + 1;
if (newPage > totalPage) {
newPage = totalPage;
}
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const nextPage = list.slice(start, end).join('\n');
pageRef.current = pageRef.current + 1;
setPage(() => newPage);
setScrollPos(['top', newPage]);
getCurrent();
setScrollPos(['top', pageRef.current]);
scrollPosRef.current = {
pos: 'top',
page: newPage
page: pageRef.current
};
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: nextPage
});
}, [totalPage, page, pageSize]);
}, [getCurrent]);
const handleonBackend = useCallback(() => {
const list = _.split(cacheDataRef.current.trim(), '\n');
let newPage = totalPage;
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const nextPage = list.slice(start, end).join('\n');
setPage(() => newPage);
setScrollPos(['bottom', newPage]);
pageRef.current = totalPageRef.current;
getCurrent();
setPage(pageRef.current);
console.log('pageRef.current', pageRef.current);
setScrollPos(['bottom', pageRef.current]);
scrollPosRef.current = {
pos: 'bottom',
page: newPage
page: pageRef.current
};
pageRef.current = totalPage;
totalPageRef.current = totalPage;
logParseWorker.current.postMessage({
inputStr: nextPage
});
}, [totalPage, page, pageSize]);
}, [getCurrent]);
const updateContent = (inputStr: string) => {
const data = inputStr.replace(replaceLineRegex, '\n');
if (isClean(data)) {
cacheDataRef.current = data;
} else {
cacheDataRef.current += data;
}
if (
pageRef.current === totalPageRef.current &&
scrollPosRef.current.pos === 'bottom'
) {
logParseWorker.current.postMessage({
inputStr: getLastPage(cacheDataRef.current)
});
} else {
getCurrentPage();
cacheDataRef.current = data;
if (isLoadingMoreRef.current) {
setLoading(true);
}
logParseWorker.current.postMessage({
inputStr: data
});
};
const createChunkConnection = async () => {
cacheDataRef.current = '';
chunkRequedtRef.current?.current?.abort?.();
chunkRequedtRef.current = setChunkFetch({
@@ -258,8 +147,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
isBottom,
loadMoreDone: loadMoreDone.current,
loading: loading,
lineCount: lineCountRef.current,
dataLength: dataLengthRef.current
lineCount: lineCountRef.current
});
if (isBottom) {
scrollPosRef.current = {
@@ -280,7 +168,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
if (
loading ||
(logs.length > 0 &&
lineCountRef.current < pageSize &&
lineCountRef.current < pageSize - 1 &&
!loadMoreDone.current) ||
!enableScorllLoad
) {
@@ -312,11 +200,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const debouncedScroll = useCallback(
_.debounce(() => {
console.log('scrollPos+++++++++++=', scrollPos);
if (scrollPos[0] === 'top' && scrollPosRef.current.pos === 'top') {
logListRef.current?.scrollToTop();
}
if (scrollPos[0] === 'bottom' && scrollPosRef.current.pos === 'bottom') {
if (scrollPosRef.current.pos === 'bottom') {
logListRef.current?.scrollToBottom();
}
}, 150),
@@ -334,21 +221,63 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
debouncedScroll();
}, [scrollPos]);
useEffect(() => {
logParseWorker.current?.terminate?.();
logParseWorker.current = new Worker(
// @ts-ignore
new URL('./parse-worker.ts', import.meta.url),
{
type: 'module'
}
);
logParseWorker.current.onmessage = (event: any) => {
const { result, lines } = event.data;
lineCountRef.current = lines;
if (pageRef.current < 1) {
pageRef.current = 1;
}
const start = (pageRef.current - 1) * pageSize;
const end = pageRef.current * pageSize;
const currentLogs = result.slice(start, end);
totalPageRef.current = Math.ceil(result.length / pageSize);
console.log(
'lineCountRef.current+++++++++++',
lineCountRef.current,
result.length
);
setLogs(result);
setTotalPage(totalPageRef.current);
setPage(pageRef.current);
setCurrentData(currentLogs);
debounceLoading();
};
return () => {
if (logParseWorker.current) {
logParseWorker.current.terminate();
}
};
}, []);
return (
<div className="logs-viewer-wrap-w2">
<div className="wrap">
<div>
<LogsList
ref={logListRef}
dataList={logs}
dataList={currentData}
diffHeight={diffHeight}
onScroll={handleOnScroll}
></LogsList>
</div>
<Spin
spinning={loading && isAtTop}
spinning={loading}
className={classNames({
loading: loading && isAtTop
loading: loading
})}
></Spin>
{totalPage > 1 && (