fix: page got stuck when logs size too large
This commit is contained in:
jialin
@@ -0,0 +1,2 @@
|
||||
export const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
|
||||
export const replaceLineRegex = /\r\n/g;
|
||||
@@ -4,8 +4,9 @@ import '@xterm/xterm/css/xterm.css';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import './index.less';
|
||||
import { replaceLineRegex } from './config';
|
||||
import useParseAnsi from './parse-ansi';
|
||||
import './styles/index.less';
|
||||
|
||||
interface LogsViewerProps {
|
||||
height: number;
|
||||
@@ -40,13 +41,15 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
||||
};
|
||||
|
||||
const updateContent = useCallback(
|
||||
(data: string) => {
|
||||
(inputStr: string) => {
|
||||
const data = inputStr.replace(replaceLineRegex, '\n');
|
||||
if (isClean(data)) {
|
||||
cacheDataRef.current = data;
|
||||
} else {
|
||||
cacheDataRef.current += data;
|
||||
}
|
||||
const res = parseAnsi(cacheDataRef.current, setId);
|
||||
console.log('res===', res);
|
||||
setLogs(res);
|
||||
},
|
||||
[setLogs, setId]
|
||||
@@ -126,9 +129,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div className="logs-viewer-wrap-w2">
|
||||
{/* <span className="copy">
|
||||
<CopyButton text={copyText} type="text" size="small"></CopyButton>
|
||||
</span> */}
|
||||
<div
|
||||
className="wrap"
|
||||
style={{ height: height }}
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
import _, { throttle } from 'lodash';
|
||||
import List from 'rc-virtual-list';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface LogsInnerProps {
|
||||
data: { content: string; uid: number }[];
|
||||
onScroll?: (e: any) => void;
|
||||
diffHeight?: number;
|
||||
}
|
||||
|
||||
const LogsInner: React.FC<LogsInnerProps> = (props) => {
|
||||
const { data, diffHeight = 96 } = props;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const viewHeight = viewportHeight - diffHeight;
|
||||
const [innerHieght, setInnerHeight] = useState(viewHeight);
|
||||
const scroller = useRef<any>(null);
|
||||
const stopScroll = useRef(false);
|
||||
const logsWrapper = useRef<any>(null);
|
||||
|
||||
const RC_VIRTUAL_LIST_HOLDER_CLASS = '.rc-virtual-list-holder';
|
||||
|
||||
const updataPositionToBottom = useCallback(
|
||||
throttle(() => {
|
||||
if (!stopScroll.current && data.length > 0) {
|
||||
scroller.current?.scrollTo?.({
|
||||
index: data.length - 1,
|
||||
align: 'bottom'
|
||||
});
|
||||
console.log('scrollToBottom', stopScroll.current, data.length);
|
||||
}
|
||||
}, 200),
|
||||
[scroller.current, stopScroll.current, data]
|
||||
);
|
||||
|
||||
const debounceResetStopScroll = _.debounce(() => {
|
||||
stopScroll.current = false;
|
||||
}, 30000);
|
||||
|
||||
const updatePositionToTop = useCallback(
|
||||
_.throttle((isTop: boolean) => {
|
||||
props.onScroll?.(isTop);
|
||||
}, 200),
|
||||
[props.onScroll]
|
||||
);
|
||||
|
||||
const isScrollBottom = useCallback((root: HTMLElement) => {
|
||||
const virtualList = root.querySelector(RC_VIRTUAL_LIST_HOLDER_CLASS);
|
||||
if (!virtualList) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
virtualList.scrollTop >=
|
||||
virtualList.scrollHeight - virtualList.clientHeight
|
||||
);
|
||||
}, []);
|
||||
|
||||
const isScrollTop = useCallback((root: HTMLElement) => {
|
||||
const virtualList = root.querySelector(RC_VIRTUAL_LIST_HOLDER_CLASS);
|
||||
if (!virtualList) {
|
||||
return false;
|
||||
}
|
||||
return virtualList.scrollTop <= 0;
|
||||
}, []);
|
||||
|
||||
const handleOnScroll = useCallback(
|
||||
(e: any) => {
|
||||
const isBottom = isScrollBottom(logsWrapper.current);
|
||||
const isTop = isScrollTop(logsWrapper.current);
|
||||
console.log('isBottom===', isBottom);
|
||||
if (isBottom) {
|
||||
stopScroll.current = false;
|
||||
} else {
|
||||
stopScroll.current = true;
|
||||
}
|
||||
debounceResetStopScroll();
|
||||
updatePositionToTop(isTop);
|
||||
},
|
||||
[debounceResetStopScroll]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!stopScroll.current && data.length > 0) {
|
||||
updataPositionToBottom();
|
||||
console.log('updataPositionToBottom', stopScroll.current);
|
||||
}
|
||||
}, [updataPositionToBottom]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = throttle(() => {
|
||||
const viewportHeight = window.innerHeight;
|
||||
const viewHeight = viewportHeight - diffHeight;
|
||||
setInnerHeight(viewHeight);
|
||||
}, 100);
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [diffHeight]);
|
||||
return (
|
||||
<div ref={logsWrapper}>
|
||||
<List
|
||||
ref={scroller}
|
||||
onScroll={handleOnScroll}
|
||||
data={data}
|
||||
itemHeight={22}
|
||||
height={innerHieght}
|
||||
itemKey="uid"
|
||||
styles={{
|
||||
verticalScrollBar: {
|
||||
width: 'var(--scrollbar-size)'
|
||||
},
|
||||
verticalScrollBarThumb: {
|
||||
borderRadius: '4px',
|
||||
backgroundColor: 'var(--scrollbar-handle-light-bg)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(item: any) => (
|
||||
<div key={item.uid} className="text">
|
||||
{item.content}
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(LogsInner);
|
||||
@@ -0,0 +1,69 @@
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
import './styles/pagination.less';
|
||||
|
||||
interface LogsPaginationProps {
|
||||
page: number;
|
||||
total: number;
|
||||
pageSize?: number;
|
||||
onPrev?: () => void;
|
||||
onNext?: () => void;
|
||||
}
|
||||
|
||||
const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
|
||||
const { page, total, pageSize, onNext, onPrev } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
const handleOnPrev = () => {
|
||||
onPrev?.();
|
||||
};
|
||||
|
||||
const handleOnNext = () => {
|
||||
onNext?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pagination">
|
||||
<Tooltip
|
||||
title={intl.formatMessage(
|
||||
{ id: 'models.logs.pagination.prev' },
|
||||
{ lines: pageSize }
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
onClick={handleOnPrev}
|
||||
type="text"
|
||||
shape="circle"
|
||||
style={{ color: 'rgba(255,255,255,.7)' }}
|
||||
>
|
||||
<UpOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<span className="pages">
|
||||
<span className="curr">{page}</span> /{' '}
|
||||
<span className="total">{total}</span>
|
||||
</span>
|
||||
{page < total && (
|
||||
<Tooltip
|
||||
title={intl.formatMessage(
|
||||
{ id: 'models.logs.pagination.next' },
|
||||
{ lines: pageSize }
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
onClick={handleOnNext}
|
||||
type="text"
|
||||
shape="circle"
|
||||
style={{ color: 'rgba(255,255,255,.7)' }}
|
||||
>
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(LogsPagination);
|
||||
@@ -0,0 +1,95 @@
|
||||
import { controlSeqRegex, replaceLineRegex } from './config';
|
||||
|
||||
const useParseAnsi = () => {
|
||||
const removeBrackets = (str) => str?.replace?.(/^\(…\)/, '');
|
||||
|
||||
const getRowContent = (screen, row) => {
|
||||
let rowContent = [];
|
||||
let col = 0;
|
||||
while (screen.has(`${row},${col}`)) {
|
||||
rowContent.push(screen.get(`${row},${col}`));
|
||||
col++;
|
||||
}
|
||||
return rowContent.join('');
|
||||
};
|
||||
|
||||
const handleText = function* (text, screen, cursor) {
|
||||
for (let char of text) {
|
||||
if (char === '\r') {
|
||||
cursor.col = 0; // Move to the beginning of the line
|
||||
} else if (char === '\n') {
|
||||
// Move to the next line
|
||||
yield getRowContent(screen, cursor.row);
|
||||
cursor.row++;
|
||||
cursor.col = 0;
|
||||
} else {
|
||||
const position = `${cursor.row},${cursor.col}`;
|
||||
screen.set(position, char);
|
||||
cursor.col++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const parseAnsi = function* (inputStr, setId) {
|
||||
let cursor = { row: 0, col: 0 };
|
||||
const screen = new Map();
|
||||
let lastIndex = 0;
|
||||
|
||||
// Replace \r\n with \n
|
||||
const input = inputStr.replace(replaceLineRegex, '\n');
|
||||
let match;
|
||||
|
||||
while ((match = controlSeqRegex.exec(input)) !== null) {
|
||||
const textBeforeControl = input.slice(lastIndex, match.index);
|
||||
yield* handleText(textBeforeControl, screen, cursor);
|
||||
lastIndex = controlSeqRegex.lastIndex;
|
||||
|
||||
const [_, n = '1', m = '1', command] = match;
|
||||
const parsedN = parseInt(n, 10);
|
||||
const parsedM = parseInt(m, 10);
|
||||
|
||||
switch (command) {
|
||||
case 'A':
|
||||
cursor.row = Math.max(0, cursor.row - parsedN);
|
||||
break;
|
||||
case 'B':
|
||||
cursor.row += parsedN;
|
||||
break;
|
||||
case 'C':
|
||||
cursor.col += parsedN;
|
||||
break;
|
||||
case 'D':
|
||||
cursor.col = Math.max(0, cursor.col - parsedN);
|
||||
break;
|
||||
case 'H':
|
||||
cursor.row = Math.max(0, parsedN - 1);
|
||||
cursor.col = Math.max(0, parsedM - 1);
|
||||
break;
|
||||
case 'J':
|
||||
if (parsedN === 2) {
|
||||
screen.clear();
|
||||
cursor.row = 0;
|
||||
cursor.col = 0;
|
||||
}
|
||||
break;
|
||||
case 'm':
|
||||
// Skipping color handling in this basic example; can be expanded as needed
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
yield* handleText(input.slice(lastIndex), screen, cursor);
|
||||
|
||||
// Yield remaining rows
|
||||
for (let row = 0; row <= cursor.row; row++) {
|
||||
yield {
|
||||
content: removeBrackets(getRowContent(screen, row)),
|
||||
uid: setId()
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return { parseAnsi };
|
||||
};
|
||||
|
||||
export default useParseAnsi;
|
||||
@@ -1,31 +1,24 @@
|
||||
import { useCallback, useRef } from 'react';
|
||||
|
||||
const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
|
||||
import { controlSeqRegex } from './config';
|
||||
|
||||
const useParseAnsi = () => {
|
||||
const lastIndex = useRef(0);
|
||||
|
||||
const removeBrackets = useCallback((str: string) => {
|
||||
const removeBrackets = (str: string) => {
|
||||
return str?.replace?.(/^\(…\)/, '');
|
||||
}, []);
|
||||
};
|
||||
|
||||
const isClean = useCallback((ansiStr: string) => {
|
||||
let input = ansiStr.replace(/\r\n/g, '\n');
|
||||
const isClean = (input: string) => {
|
||||
let match = controlSeqRegex.exec(input) || [];
|
||||
const command = match?.[3];
|
||||
const n = parseInt(match?.[1], 10) || 1;
|
||||
return command === 'J' && n === 2;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const parseAnsi = useCallback((inputStr: string, setId: () => number) => {
|
||||
let cursorRow = 0; // current row
|
||||
let cursorCol = 0; // current column
|
||||
// screen content array
|
||||
const parseAnsi = (input: string, setId: () => number) => {
|
||||
let cursorRow = 0;
|
||||
let cursorCol = 0;
|
||||
let screen = [['']];
|
||||
// replace carriage return and newline characters in the text
|
||||
let input = inputStr.replace(/\r\n/g, '\n');
|
||||
let lastIndex = 0;
|
||||
|
||||
lastIndex.current = 0;
|
||||
// let input = inputStr.replace(replaceLineRegex, '\n');
|
||||
|
||||
// handle the \r and \n characters in the text
|
||||
const handleText = (text: string) => {
|
||||
@@ -67,9 +60,9 @@ const useParseAnsi = () => {
|
||||
// match ANSI control characters
|
||||
while ((match = controlSeqRegex.exec(input)) !== null) {
|
||||
// handle text before the control character
|
||||
let textBeforeControl = input.slice(lastIndex.current, match.index);
|
||||
let textBeforeControl = input.slice(lastIndex, match.index);
|
||||
output += handleText(textBeforeControl); // add the processed text to the output
|
||||
lastIndex.current = controlSeqRegex.lastIndex; // update the last index
|
||||
lastIndex = controlSeqRegex.lastIndex; // update the last index
|
||||
|
||||
const n = parseInt(match[1], 10) || 1;
|
||||
const m = parseInt(match[2], 10) || 1;
|
||||
@@ -110,12 +103,12 @@ const useParseAnsi = () => {
|
||||
cursorCol = 0;
|
||||
}
|
||||
break;
|
||||
case 'm': // color
|
||||
if (match[1] === '0') {
|
||||
currentStyle = '';
|
||||
} else if (colorMap[match[1]]) {
|
||||
currentStyle = `color: ${colorMap[match[1]]};`;
|
||||
}
|
||||
case 'm':
|
||||
// if (match[1] === '0') {
|
||||
// currentStyle = '';
|
||||
// } else if (colorMap[match[1]]) {
|
||||
// currentStyle = `color: ${colorMap[match[1]]};`;
|
||||
// }
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -129,7 +122,7 @@ const useParseAnsi = () => {
|
||||
}
|
||||
|
||||
// handle the remaining text
|
||||
output += handleText(input.slice(lastIndex.current));
|
||||
output += handleText(input.slice(lastIndex));
|
||||
|
||||
let result = [];
|
||||
for (let row = 0; row < screen.length; row++) {
|
||||
@@ -145,7 +138,7 @@ const useParseAnsi = () => {
|
||||
});
|
||||
|
||||
return result;
|
||||
}, []);
|
||||
};
|
||||
|
||||
return { parseAnsi, isClean };
|
||||
};
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { controlSeqRegex } from './config';
|
||||
|
||||
let uid = 0;
|
||||
|
||||
const setId = () => {
|
||||
uid += 1;
|
||||
return uid;
|
||||
};
|
||||
|
||||
const removeBrackets = (str: string) => {
|
||||
return str?.replace?.(/^\(…\)/, '');
|
||||
};
|
||||
|
||||
const isClean = (input: string) => {
|
||||
let match = controlSeqRegex.exec(input) || [];
|
||||
const command = match?.[3];
|
||||
const n = parseInt(match?.[1], 10) || 1;
|
||||
return command === 'J' && n === 2;
|
||||
};
|
||||
|
||||
const parseAnsi = (input: string, setId: () => number) => {
|
||||
let cursorRow = 0;
|
||||
let cursorCol = 0;
|
||||
let screen = [['']];
|
||||
let lastIndex = 0;
|
||||
|
||||
// let input = inputStr.replace(replaceLineRegex, '\n');
|
||||
|
||||
// handle the \r and \n characters in the text
|
||||
const handleText = (text: string) => {
|
||||
let processed = '';
|
||||
for (let char of text) {
|
||||
if (char === '\r') {
|
||||
cursorCol = 0; // move to the beginning of the line
|
||||
} else if (char === '\n') {
|
||||
cursorRow++; // move to the next line
|
||||
cursorCol = 0; // move to the beginning of the line
|
||||
screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
|
||||
} else {
|
||||
// add the character to the screen content array
|
||||
screen[cursorRow][cursorCol] = char;
|
||||
cursorCol++;
|
||||
}
|
||||
}
|
||||
return processed;
|
||||
};
|
||||
|
||||
let output = ''; // output text
|
||||
|
||||
let match;
|
||||
|
||||
// ANSI color map
|
||||
const colorMap: Record<string, string> = {
|
||||
'30': 'black',
|
||||
'31': 'red',
|
||||
'32': 'green',
|
||||
'33': 'yellow',
|
||||
'34': 'blue',
|
||||
'35': 'magenta',
|
||||
'36': 'cyan',
|
||||
'37': 'white'
|
||||
};
|
||||
|
||||
let currentStyle = ''; // current text style
|
||||
|
||||
// match ANSI control characters
|
||||
while ((match = controlSeqRegex.exec(input)) !== null) {
|
||||
// handle text before the control character
|
||||
let textBeforeControl = input.slice(lastIndex, match.index);
|
||||
output += handleText(textBeforeControl); // add the processed text to the output
|
||||
lastIndex = controlSeqRegex.lastIndex; // update the last index
|
||||
|
||||
const n = parseInt(match[1], 10) || 1;
|
||||
const m = parseInt(match[2], 10) || 1;
|
||||
const command = match[3];
|
||||
console.log('command', {
|
||||
command,
|
||||
cursorRow,
|
||||
n
|
||||
});
|
||||
|
||||
// handle ANSI control characters
|
||||
switch (command) {
|
||||
case 'A': // up
|
||||
cursorRow = Math.max(0, cursorRow - n);
|
||||
if (cursorRow === 0) {
|
||||
// screen = [['']];
|
||||
// cursorCol = 0;
|
||||
}
|
||||
break;
|
||||
case 'B': // down
|
||||
cursorRow += n;
|
||||
break;
|
||||
case 'C': // right
|
||||
cursorCol += n;
|
||||
break;
|
||||
case 'D': // left
|
||||
cursorCol = Math.max(0, cursorCol - n);
|
||||
break;
|
||||
case 'H': // move the cursor to the specified position (n, m)
|
||||
cursorRow = Math.max(0, n - 1);
|
||||
cursorCol = Math.max(0, m - 1);
|
||||
break;
|
||||
case 'J': // clear the screen
|
||||
if (n === 2) {
|
||||
console.log('clear====');
|
||||
screen = [['']];
|
||||
cursorRow = 0;
|
||||
cursorCol = 0;
|
||||
}
|
||||
break;
|
||||
case 'm':
|
||||
// if (match[1] === '0') {
|
||||
// currentStyle = '';
|
||||
// } else if (colorMap[match[1]]) {
|
||||
// currentStyle = `color: ${colorMap[match[1]]};`;
|
||||
// }
|
||||
break;
|
||||
}
|
||||
|
||||
// check if the row and column are within the screen content array
|
||||
while (screen.length <= cursorRow) {
|
||||
screen.push(['']);
|
||||
}
|
||||
while (screen[cursorRow].length <= cursorCol) {
|
||||
screen[cursorRow].push('');
|
||||
}
|
||||
}
|
||||
|
||||
// handle the remaining text
|
||||
output += handleText(input.slice(lastIndex));
|
||||
|
||||
let result = [];
|
||||
for (let row = 0; row < screen.length; row++) {
|
||||
let rowContent = screen[row].join('');
|
||||
result.push({
|
||||
content: removeBrackets(rowContent),
|
||||
uid: setId()
|
||||
});
|
||||
}
|
||||
result.push({
|
||||
content: output,
|
||||
uid: setId()
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
self.onmessage = function (event) {
|
||||
const { inputStr } = event.data;
|
||||
|
||||
const parsedData = Array.from(parseAnsi(inputStr, setId));
|
||||
|
||||
const result = parsedData.map((item) => ({
|
||||
content: item.content,
|
||||
uid: item.uid
|
||||
}));
|
||||
self.postMessage(result);
|
||||
};
|
||||
+25
-2
@@ -1,6 +1,29 @@
|
||||
.logs-viewer-wrap-w2 {
|
||||
position: relative;
|
||||
|
||||
.pg {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 25%);
|
||||
|
||||
.ant-spin-dot-holder {
|
||||
color: rgba(255, 255, 255, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@@ -19,16 +42,16 @@
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: 5px 0 5px 10px;
|
||||
padding: 5px 0 2px 10px;
|
||||
background-color: var(--color-logs-bg);
|
||||
border-radius: var(--border-radius-mini);
|
||||
overflow: auto;
|
||||
font-family: monospace, Menlo, Courier, 'Courier New', Consolas, Monaco,
|
||||
'Liberation Mono' !important;
|
||||
|
||||
.content {
|
||||
word-wrap: break-word;
|
||||
height: 100%;
|
||||
padding-right: 2px;
|
||||
|
||||
&.line-break {
|
||||
word-wrap: break-word;
|
||||
@@ -0,0 +1,21 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 70%);
|
||||
gap: 5px;
|
||||
|
||||
.ant-btn:hover {
|
||||
color: rgba(255, 255, 255, 90%) !important;
|
||||
background-color: rgba(71, 71, 71, 100%) !important;
|
||||
}
|
||||
|
||||
.pages {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
const useLogsPagination = () => {
|
||||
const [pageSize, setPageSize] = useState(1000);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(1);
|
||||
|
||||
const nextPage = () => {
|
||||
setPage(page + 1);
|
||||
};
|
||||
|
||||
const prePage = () => {
|
||||
let newPage = page - 1;
|
||||
if (newPage < 1) {
|
||||
newPage = 1;
|
||||
}
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const resetPage = () => {
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const setTotalPage = (total: number) => {
|
||||
setTotal(total);
|
||||
};
|
||||
|
||||
return {
|
||||
nextPage,
|
||||
resetPage,
|
||||
prePage,
|
||||
setPage,
|
||||
pageSize,
|
||||
setTotalPage,
|
||||
page,
|
||||
totalPage: total
|
||||
};
|
||||
};
|
||||
|
||||
export default useLogsPagination;
|
||||
@@ -0,0 +1,200 @@
|
||||
import useSetChunkFetch from '@/hooks/use-chunk-fetch';
|
||||
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
||||
import { Spin } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { controlSeqRegex, replaceLineRegex } from './config';
|
||||
import LogsInner from './logs-inner';
|
||||
import LogsPagination from './logs-pagination';
|
||||
import './styles/index.less';
|
||||
import useLogsPagination from './use-logs-pagination';
|
||||
|
||||
interface LogsViewerProps {
|
||||
height: number;
|
||||
content?: string;
|
||||
url: string;
|
||||
params?: object;
|
||||
diffHeight?: number;
|
||||
}
|
||||
const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
||||
const { diffHeight, url } = props;
|
||||
const { pageSize, page, setPage, setTotalPage, totalPage } =
|
||||
useLogsPagination();
|
||||
const { setChunkRequest } = useSetChunkRequest();
|
||||
const { setChunkFetch } = useSetChunkFetch();
|
||||
const chunkRequedtRef = useRef<any>(null);
|
||||
const cacheDataRef = useRef<any>('');
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const logParseWorker = useRef<any>(null);
|
||||
const tail = useRef<any>(pageSize);
|
||||
const isLoadend = useRef<any>(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isAtTop, setIsAtTop] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
logParseWorker.current?.terminate?.();
|
||||
|
||||
logParseWorker.current = new Worker(
|
||||
new URL('./parse-worker.ts', import.meta.url)
|
||||
);
|
||||
|
||||
logParseWorker.current.onmessage = (event: any) => {
|
||||
const res = event.data;
|
||||
setLogs(res);
|
||||
};
|
||||
|
||||
return () => {
|
||||
if (logParseWorker.current) {
|
||||
logParseWorker.current.terminate();
|
||||
}
|
||||
};
|
||||
}, [setLogs, logParseWorker.current]);
|
||||
|
||||
const debounceLoading = _.debounce(() => {
|
||||
setLoading(false);
|
||||
}, 100);
|
||||
|
||||
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 = useCallback(
|
||||
(data: string) => {
|
||||
const list = _.split(data, '\n');
|
||||
isLoadend.current = list.length < pageSize;
|
||||
console.log('isLoadend.current===', isLoadend.current, list.length);
|
||||
if (list.length <= pageSize) {
|
||||
setTotalPage(1);
|
||||
return data;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
const totalPage = Math.ceil(list.length / pageSize);
|
||||
setTotalPage(totalPage);
|
||||
setPage(totalPage);
|
||||
const lastPage = list.slice(-pageSize).join('\n');
|
||||
debounceLoading();
|
||||
return lastPage;
|
||||
},
|
||||
[pageSize, setTotalPage, setPage, debounceLoading]
|
||||
);
|
||||
|
||||
const getPrePage = useCallback(() => {
|
||||
const list = _.split(cacheDataRef.current, '\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');
|
||||
setPage(newPage);
|
||||
logParseWorker.current.postMessage({
|
||||
inputStr: prePage
|
||||
});
|
||||
}, [page, pageSize]);
|
||||
|
||||
const getNextPage = useCallback(() => {
|
||||
const list = _.split(cacheDataRef.current, '\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');
|
||||
setPage(newPage);
|
||||
logParseWorker.current.postMessage({
|
||||
inputStr: nextPage
|
||||
});
|
||||
}, [totalPage, page, pageSize]);
|
||||
|
||||
const updateContent = useCallback(
|
||||
(inputStr: string) => {
|
||||
console.log('data========', inputStr);
|
||||
const data = inputStr.replace(replaceLineRegex, '\n');
|
||||
if (isClean(data)) {
|
||||
cacheDataRef.current = data;
|
||||
} else {
|
||||
cacheDataRef.current += data;
|
||||
}
|
||||
|
||||
logParseWorker.current.postMessage({
|
||||
inputStr: getLastPage(cacheDataRef.current)
|
||||
});
|
||||
},
|
||||
[getLastPage]
|
||||
);
|
||||
|
||||
const createChunkConnection = async () => {
|
||||
cacheDataRef.current = '';
|
||||
chunkRequedtRef.current?.current?.abort?.();
|
||||
chunkRequedtRef.current = setChunkFetch({
|
||||
url,
|
||||
params: {
|
||||
...props.params,
|
||||
tail: tail.current,
|
||||
watch: true
|
||||
},
|
||||
contentType: 'text',
|
||||
handler: updateContent
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnScroll = useCallback(
|
||||
(isTop: boolean) => {
|
||||
setIsAtTop(isTop && isLoadend.current);
|
||||
if (loading || isLoadend.current) {
|
||||
return;
|
||||
}
|
||||
if (isTop && !isLoadend.current) {
|
||||
tail.current = undefined;
|
||||
createChunkConnection();
|
||||
}
|
||||
},
|
||||
[loading, isLoadend.current]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
createChunkConnection();
|
||||
return () => {
|
||||
chunkRequedtRef.current?.current?.abort?.();
|
||||
};
|
||||
}, [url, props.params]);
|
||||
|
||||
return (
|
||||
<div className="logs-viewer-wrap-w2">
|
||||
<div className="wrap">
|
||||
<div className={classNames('content')}>
|
||||
<LogsInner
|
||||
data={logs}
|
||||
diffHeight={diffHeight}
|
||||
onScroll={handleOnScroll}
|
||||
></LogsInner>
|
||||
</div>
|
||||
<Spin
|
||||
spinning={loading && isAtTop}
|
||||
className={classNames({
|
||||
loading: loading && isAtTop
|
||||
})}
|
||||
></Spin>
|
||||
{totalPage > 1 && isAtTop && (
|
||||
<div className="pg">
|
||||
<LogsPagination
|
||||
page={page}
|
||||
total={totalPage}
|
||||
onNext={getNextPage}
|
||||
onPrev={getPrePage}
|
||||
></LogsPagination>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(LogsViewer);
|
||||
Reference in New Issue
Block a user