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

fix: do not update logs when viewing pre page

Browse Source
This commit is contained in:
jialin
2025-01-03 20:38:44 +08:00
parent 472ef1a231
commit 95058f7890
13 changed files with 164 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/logs-viewer/virtual-log-list.tsx
+79 -41
View File
@@ -43,6 +43,8 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const [scrollPos, setScrollPos] = useState<any[]>([]);
const logListRef = useRef<any>(null);
const loadMoreDone = useRef(false);
const pageRef = useRef<any>(page);
const totalPageRef = useRef<any>(totalPage);
useImperativeHandle(ref, () => ({
abort() {
@@ -84,28 +86,47 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
return command === 'J' && n === 2;
}, []);
const getLastPage = useCallback(
(data: string) => {
const list = _.split(data.trim(), '\n');
if (!enableScorllLoad) {
return list.join('\n');
}
const getLastPage = (data: string) => {
const list = _.split(data.trim(), '\n');
if (list.length <= pageSize) {
setTotalPage(1);
return data;
}
if (!enableScorllLoad) {
return list.join('\n');
}
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, enableScorllLoad]
);
if (list.length <= pageSize) {
setTotalPage(1);
return data;
}
setLoading(true);
const totalPage = Math.ceil(list.length / pageSize);
setTotalPage(totalPage);
setPage(() => totalPage);
pageRef.current = totalPage;
totalPageRef.current = totalPage;
const lastPage = list.slice(-pageSize).join('\n');
console.log('list.length===', list.length, totalPage, page);
debounceLoading();
return lastPage;
};
const getCurrentPage = () => {
const list = _.split(cacheDataRef.current.trim(), '\n');
let newPage = page;
if (newPage < 1) {
newPage = 1;
}
console.log('currentpage===', newPage);
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const currentPage = list.slice(start, end).join('\n');
setPage(() => newPage);
setScrollPos(['bottom', newPage]);
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: currentPage
});
};
const getPrePage = useCallback(() => {
const list = _.split(cacheDataRef.current.trim(), '\n');
@@ -116,8 +137,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const prePage = list.slice(start, end).join('\n');
setPage(newPage);
console.log('prePage===', newPage);
setPage(() => newPage);
setScrollPos(['bottom', newPage]);
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: prePage
});
@@ -132,29 +155,36 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const nextPage = list.slice(start, end).join('\n');
setPage(newPage);
console.log('nextPage===', newPage);
setPage(() => newPage);
setScrollPos(['top', newPage]);
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: nextPage
});
}, [totalPage, page, pageSize]);
const updateContent = useCallback(
(inputStr: string) => {
console.log('inputStr===', inputStr);
const data = inputStr.replace(replaceLineRegex, '\n');
if (isClean(data)) {
cacheDataRef.current = data;
} else {
cacheDataRef.current += data;
}
const debounceParseData = _.debounce(() => {
if (pageRef.current === totalPageRef.current) {
logParseWorker.current.postMessage({
inputStr: getLastPage(cacheDataRef.current)
});
},
[getLastPage]
);
} else {
getCurrentPage();
}
}, 100);
const updateContent = (inputStr: string) => {
console.log('inputStr===', inputStr);
const data = inputStr.replace(replaceLineRegex, '\n');
if (isClean(data)) {
cacheDataRef.current = data;
} else {
cacheDataRef.current += data;
}
console.log('page===', pageRef.current, totalPageRef.current);
debounceParseData();
};
const createChunkConnection = async () => {
cacheDataRef.current = '';
@@ -188,12 +218,20 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
createChunkConnection();
loadMoreDone.current = true;
} else if (isTop && page <= totalPage && page > 1) {
getPrePage();
// getPrePage();
} else if (isBottom && page < totalPage) {
getNextPage();
// getNextPage();
}
},
[loading, logs.length, pageSize, enableScorllLoad, page, totalPage]
[
loading,
logs.length,
pageSize,
enableScorllLoad,
page,
totalPage,
createChunkConnection
]
);
const debouncedScroll = useCallback(
@@ -215,9 +253,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
};
}, [url, props.params]);
// useEffect(() => {
// debouncedScroll();
// }, [scrollPos]);
useEffect(() => {
debouncedScroll();
}, [scrollPos]);
return (
<div className="logs-viewer-wrap-w2">
src/locales/en-US/resources.ts
+1 -1
View File
@@ -54,7 +54,7 @@ export default {
'resources.worker.select.command':
'Select a label to generate the command and copy it using the copy button.',
'resources.worker.script.install': 'Script Installation',
'resources.worker.container.install': 'Container Installation',
'resources.worker.container.install': 'Container Installation(Linux Only)',
'resources.worker.cann.tips':
'Set <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span> to 0 for a single GPU or to the index range (e.g., 0-7 for 8 GPUs) for multiple GPUs.'
};
src/locales/zh-CN/resources.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export default {
'resources.worker.driver.install':
'在安装 GPUStack 之前，确保系统上安装了所有必需的驱动程序和库',
'resources.worker.script.install': '脚本安装',
'resources.worker.container.install': '容器安装',
'resources.worker.container.install': '容器安装(仅支持 Linux)',
'resources.worker.cann.tips':
'若 GPU 数量为 1，则设 ASCEND_VISIBLE_DEVICES=0；若大于 1，则设为索引范围（如 8 张为 0-7）'
};
src/pages/llmodels/components/table-list.tsx
+19 -1
View File
@@ -23,7 +23,8 @@ import {
EditOutlined,
ExperimentOutlined,
PictureOutlined,
SyncOutlined
SyncOutlined,
WechatWorkOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
@@ -651,6 +652,23 @@ const Models: React.FC<ModelsProps> = ({
</Tag>
);
}
if (record.categories?.includes(modelCategoriesMap.llm)) {
return (
<Tag
icon={<WechatWorkOutlined />}
style={{
margin: 0,
opacity: 1,
paddingInline: 8,
borderRadius: 12,
transform: 'scale(0.9)'
}}
color="green"
>
LLM
</Tag>
);
}
return null;
},
[intl]
src/pages/llmodels/config/index.ts
+3 -1
View File
@@ -248,11 +248,13 @@ export const modelCategoriesMap = {
text_to_speech: 'text_to_speech',
speech_to_text: 'speech_to_text',
embedding: 'embedding',
reranker: 'reranker'
reranker: 'reranker',
llm: 'llm'
};
export const modelCategories = [
{ label: 'common.options.auto', value: null, locale: true },
{ label: 'LLM', value: modelCategoriesMap.llm },
{ label: 'Image', value: 'image' },
{ label: 'Text-to-speech', value: 'text_to_speech' },
{ label: 'Speech-to-text', value: 'speech_to_text' },
src/pages/playground/embedding.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import HotKeys from '@/config/hotkeys';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Space } from 'antd';
@@ -30,7 +31,7 @@ const PlaygroundEmbedding: React.FC = () => {
const getModelListByEmbedding = async () => {
try {
const params = {
categories: 'embedding'
categories: modelCategoriesMap.embedding
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
src/pages/playground/images.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
@@ -85,7 +86,7 @@ const TextToImages: React.FC = () => {
const getModelList = async () => {
try {
const params = {
categories: 'image',
categories: modelCategoriesMap.image,
with_meta: true
};
const res = await queryModelsList(params);
src/pages/playground/index.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
@@ -79,7 +80,7 @@ const Playground: React.FC = () => {
const getModelList = async () => {
try {
const params = {
categories: '',
categories: modelCategoriesMap.llm,
with_meta: true
};
const res = await queryModelsList(params);
src/pages/playground/rerank.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import HotKeys from '@/config/hotkeys';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Space } from 'antd';
@@ -32,7 +33,7 @@ const PlaygroundRerank: React.FC = () => {
const getModelListByReranker = async () => {
try {
const params = {
categories: 'reranker'
categories: modelCategoriesMap.reranker
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
src/pages/playground/speech.tsx
+3 -2
View File
@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { AudioOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useSearchParams } from '@umijs/max';
@@ -102,7 +103,7 @@ const Playground: React.FC = () => {
const getTextToSpeechModels = async () => {
try {
const params = {
categories: 'text_to_speech',
categories: modelCategoriesMap.text_to_speech,
with_meta: true
};
const res = await queryModelsList(params);
@@ -122,7 +123,7 @@ const Playground: React.FC = () => {
const getSpeechToText = async () => {
try {
const params = {
categories: 'speech_to_text',
categories: modelCategoriesMap.speech_to_text,
with_meta: true
};
const res = await queryModelsList(params);
src/pages/resources/components/add-worker.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
width={600}
styles={{
body: {
height: 420
height: 550
}
}}
footer={null}
src/pages/resources/components/container-install.tsx
+22 -6
View File
@@ -1,7 +1,7 @@
import { GPUStackVersionAtom } from '@/atoms/user';
import { getAtomStorage } from '@/atoms/utils';
import HighlightCode from '@/components/highlight-code';
import { BulbOutlined, WarningOutlined } from '@ant-design/icons';
import { WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Radio } from 'antd';
import React from 'react';
@@ -31,13 +31,13 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
return commandCode?.registerWorker({
server: origin,
tag: version,
token: props.token
token: '${mytoken}'
});
}
return commandCode?.registerWorker({
server: origin,
tag: `${version}-${activeKey}`,
token: props.token
token: '${mytoken}'
});
}, [versionInfo, activeKey, props.token, origin]);
@@ -78,6 +78,23 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
</Button>
</li>
</ul>
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
<HighlightCode
code={addWorkerGuide.mac.getToken}
theme="dark"
></HighlightCode>
<h3>
2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
<span
className="font-size-12"
style={{ color: 'var(--ant-color-text-tertiary)' }}
dangerouslySetInnerHTML={{
__html: `(${intl.formatMessage({
id: 'resources.worker.add.step2.tips'
})})`
}}
></span>
</h3>
<div className="m-b-20">
<Radio.Group
block
@@ -99,9 +116,8 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
></div>
)}
<HighlightCode theme="dark" code={code}></HighlightCode>
<h3>
<BulbOutlined className="m-r-5"></BulbOutlined>
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
<h3 className="m-b-0">
3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
</h3>
</div>
);
src/pages/resources/components/script-install.tsx
+27 -6
View File
@@ -1,5 +1,4 @@
import HighlightCode from '@/components/highlight-code';
import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import React from 'react';
import { addWorkerGuide } from '../config';
@@ -13,11 +12,34 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
return (
<div className="script-install">
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.getToken}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode
code={addWorkerGuide.win.getToken}
theme="dark"
></HighlightCode>
<h3>
2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
<span
className="font-size-12"
style={{ color: 'var(--ant-color-text-tertiary)' }}
dangerouslySetInnerHTML={{
__html: `(${intl.formatMessage({
id: 'resources.worker.add.step2.tips'
})})`
}}
></span>
</h3>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.registerWorker({
server: origin,
token: props.token
token: '${mytoken}'
})}
theme="dark"
></HighlightCode>
@@ -26,12 +48,11 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
theme="dark"
code={addWorkerGuide.win.registerWorker({
server: origin,
token: props.token
token: '${mytoken}'
})}
></HighlightCode>
<h3>
<BulbOutlined className="m-r-5"></BulbOutlined>
{intl.formatMessage({ id: 'resources.worker.add.step3' })}
<h3 className="m-b-0">
3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
</h3>
</div>
);