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

fix: logs scrollbar ux

Browse Source
This commit is contained in:
jialin
2024-10-22 09:29:03 +08:00
parent 57386eeb55
commit eb5cf9da8d
17 changed files with 224 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auto-tooltip/index.tsx
+3
View File
@@ -13,6 +13,7 @@ import React, {
interface AutoTooltipProps extends Omit<TagProps, 'title'> {
children: React.ReactNode;
maxWidth?: number | string;
minWidth?: number | string;
color?: string;
style?: React.CSSProperties;
ghost?: boolean;
@@ -24,6 +25,7 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
const AutoTooltip: React.FC<AutoTooltipProps> = ({
children,
maxWidth = '100%',
minWidth,
ghost = false,
title,
showTitle = false,
@@ -61,6 +63,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
const tagStyle = useMemo(
() => ({
maxWidth,
minWidth,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap' as const,
src/components/logs-viewer/index.tsx
+15 -12
View File
@@ -15,9 +15,10 @@ interface LogsViewerProps {
}
const LogsViewer: React.FC<LogsViewerProps> = (props) => {
const { height, url } = props;
const { initialize, updateScrollerPosition } = useOverlayScroller({
theme: 'os-theme-light'
});
const { initialize, updateScrollerPosition, scrollEventElement } =
useOverlayScroller({
theme: 'os-theme-light'
});
const { isClean, parseAnsi } = useParseAnsi();
const { setChunkFetch } = useSetChunkFetch();
const chunkRequedtRef = useRef<any>(null);
@@ -25,7 +26,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
const cacheDataRef = useRef<any>('');
const uidRef = useRef<any>(0);
const [logs, setLogs] = useState<any[]>([]);
const autoScroll = useRef(true);
const stopScroll = useRef(false);
const setId = () => {
@@ -33,10 +33,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
return uidRef.current;
};
const clearScreen = () => {
cacheDataRef.current = '';
};
const updateContent = useCallback(
(data: string) => {
if (isClean(data)) {
@@ -44,7 +40,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
} else {
cacheDataRef.current += data;
}
const res = parseAnsi(cacheDataRef.current, setId, clearScreen);
const res = parseAnsi(cacheDataRef.current, setId);
setLogs(res);
},
[setLogs, setId]
@@ -65,10 +61,17 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
const debounceResetStopScroll = _.debounce(() => {
stopScroll.current = false;
}, 3000);
}, 30000);
const handleOnWheel = useCallback(
(e: any) => {
stopScroll.current = true;
const scrollTop = scrollEventElement.scrollTop;
const scrollHeight = scrollEventElement.scrollHeight;
const clientHeight = scrollEventElement.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
stopScroll.current = false;
} else {
stopScroll.current = true;
}
debounceResetStopScroll();
},
[debounceResetStopScroll]
@@ -91,7 +94,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
if (logs.length && !stopScroll.current) {
updateScrollerPosition(0);
}
}, [logs, autoScroll.current, stopScroll.current]);
}, [logs, stopScroll.current]);
return (
<div className="logs-viewer-wrap-w2">
src/components/logs-viewer/parse-ansi.ts
+121 -124
View File
@@ -17,138 +17,135 @@ const useParseAnsi = () => {
return command === 'J' && n === 2;
}, []);
const parseAnsi = useCallback(
(inputStr: string, setId: () => number, clearScreen: () => void) => {
let cursorRow = 0; // current row
let cursorCol = 0; // current column
// screen content array
let screen = [['']];
// replace carriage return and newline characters in the text
let input = inputStr.replace(/\r\n/g, '\n');
const parseAnsi = useCallback((inputStr: string, setId: () => number) => {
let cursorRow = 0; // current row
let cursorCol = 0; // current column
// screen content array
let screen = [['']];
// replace carriage return and newline characters in the text
let input = inputStr.replace(/\r\n/g, '\n');
lastIndex.current = 0;
lastIndex.current = 0;
// 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.current, match.index);
output += handleText(textBeforeControl); // add the processed text to the output
lastIndex.current = 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': // color
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 \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;
};
// handle the remaining text
output += handleText(input.slice(lastIndex.current));
let output = ''; // output text
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()
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.current, match.index);
output += handleText(textBeforeControl); // add the processed text to the output
lastIndex.current = 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
});
return result;
},
[]
);
// 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': // color
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.current));
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;
}, []);
return { parseAnsi, isClean };
};
src/components/version-info/index.tsx
+6 -1
View File
@@ -61,7 +61,12 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
{ version: currentVersion }
)}
</span>
<Button type="link" href={externalLinks.release} target="_blank">
<Button
type="link"
href={externalLinks.release}
target="_blank"
style={{ paddingInline: 0 }}
>
{intl.formatMessage({ id: 'common.text.changelog' })}
</Button>
</div>
src/hooks/use-overlay-scroller.ts
+18 -18
View File
@@ -56,7 +56,7 @@ export default function useOverlayScroller(options?: any) {
});
instanceRef.current?.update?.();
}, 300),
[scrollEventElement, instanceRef]
[scrollEventElement.current, instanceRef.current]
);
const scrollauto = React.useCallback(() => {
@@ -65,7 +65,7 @@ export default function useOverlayScroller(options?: any) {
behavior: 'auto'
});
instanceRef.current?.update?.();
}, [scrollEventElement, instanceRef]);
}, [scrollEventElement.current, instanceRef.current]);
const throttledUpdateScrollerPosition = React.useCallback(
(delay?: number) => {
@@ -78,25 +78,25 @@ export default function useOverlayScroller(options?: any) {
[throttledScroll, scrollauto]
);
// const createInstance = React.useCallback((el: any) => {
// if (el) {
// instanceRef.current?.destroy?.();
// initialize(el);
// instanceRef.current = instance?.();
// scrollEventElement.current =
// instanceRef.current?.elements()?.scrollEventElement;
// }
// }, []);
React.useEffect(() => {
return () => {
instanceRef.current?.destroy?.();
};
}, []);
const createInstance = React.useCallback(
(el: any) => {
if (instanceRef.current) {
return;
}
if (el) {
initialize(el);
instanceRef.current = instance?.();
scrollEventElement.current =
instanceRef.current?.elements()?.scrollEventElement;
}
},
[initialize, instance]
);
return {
initialize,
initialize: createInstance,
instance: instanceRef.current,
scrollEventElement: scrollEventElement.current,
updateScrollerPosition: throttledUpdateScrollerPosition
};
}
src/layouts/rightRender.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export const getRightRenderContent = (opts: {
mode: 'vertical',
expandIcon: false,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'click',
triggerSubMenuAction: 'hover',
items: [
{
key: 'help',
src/locales/en-US/resources.ts
+1
View File
@@ -37,6 +37,7 @@ export default {
'resources.table.vramutilization': 'VRAM Utilization',
'resources.table.total': 'Total',
'resources.table.used': 'Used',
'resources.table.allocated': 'Allocated',
'resources.table.wokers': 'workers',
'resources.worker.linuxormaxos': 'Linux or MacOS',
'resources.table.unified': 'Unified Memory',
src/locales/en-US/users.ts
+1 -1
View File
@@ -27,5 +27,5 @@ export default {
'users.password.confirm.error': 'The two passwords entered do not match.',
'users.login.title': 'Log in to {name}',
'users.version.islatest': '{version} is the latest version',
'users.version.update': 'Version {version} is available'
'users.version.update': 'GPUStack {version} is available'
};
src/locales/zh-CN/resources.ts
+1
View File
@@ -37,6 +37,7 @@ export default {
'resources.table.utilization': '利用率',
'resources.table.total': '总量',
'resources.table.used': '已用',
'resources.table.allocated': '已分配',
'resources.table.wokers': 'workers',
'resources.table.unified': '统一内存',
'resources.worker.linuxormaxos': 'Linux 或 MacOS',
src/locales/zh-CN/users.ts
+1 -1
View File
@@ -26,5 +26,5 @@ export default {
'users.password.confirm.error': '两次输入的密码不一致',
'users.login.title': '登录 {name}',
'users.version.islatest': '{version} 已是最新版本',
'users.version.update': '{version} 版本可供更新'
'users.version.update': 'GPUStack {version} 版本可供更新'
};
src/pages/llmodels/components/table-list.tsx
+1 -6
View File
@@ -39,11 +39,7 @@ import {
queryModelInstancesList,
updateModel
} from '../apis';
import {
InstanceStatusMap,
getSourceRepoConfigValue,
modelSourceMap
} from '../config';
import { getSourceRepoConfigValue, modelSourceMap } from '../config';
import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
import DeployModal from './deploy-modal';
import InstanceItem from './instance-item';
@@ -657,7 +653,6 @@ const Models: React.FC<ModelsProps> = ({
></DeployModal>
<ViewLogsModal
url={currentInstance.url}
autoScroll={currentInstance.status !== InstanceStatusMap.Downloading}
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>
src/pages/llmodels/components/view-logs-modal.tsx
-1
View File
@@ -66,7 +66,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
<LogsViewer
height={modalSize.height}
url={url}
autoScroll={props.autoScroll}
params={{
follow: true
}}
src/pages/playground/components/ground-left.tsx
+4 -1
View File
@@ -173,7 +173,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
]
: [...formatMessages],
...parameters,
stream: true
stream: true,
stream_otpions: {
include_usage: true
}
};
const result: any = await fetchChunkedData({
data: chatParams,
src/pages/playground/components/multiple-chat/model-item.tsx
+4 -1
View File
@@ -173,7 +173,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
]
: [...formatMessages],
...params,
stream: true
stream: true,
stream_otpions: {
include_usage: true
}
};
// ============== payload end ================
const result: any = await fetchChunkedData({
src/pages/playground/components/view-code-modal.tsx
+1 -3
View File
@@ -4,7 +4,7 @@ import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Modal } from 'antd';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useState } from 'react';
type ViewModalProps = {
systemMessage?: string;
@@ -40,8 +40,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
} = props || {};
const intl = useIntl();
const editorRef = useRef(null);
const [loaded, setLoaded] = useState(false);
const [codeValue, setCodeValue] = useState('');
const [lang, setLang] = useState(langMap.shell);
src/pages/resources/components/gpus.tsx
+25 -5
View File
@@ -1,3 +1,4 @@
import AutoTooltip from '@/components/auto-tooltip';
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import useTableSort from '@/hooks/use-table-sort';
@@ -140,6 +141,16 @@ const GPUList: React.FC = () => {
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
{text}
</AutoTooltip>
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
@@ -160,7 +171,7 @@ const GPUList: React.FC = () => {
dataIndex="core"
key="Core"
render={(text, record: GPUDeviceItem) => {
return <span>{record.core?.total}</span>;
return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>;
}}
/> */}
<Column
@@ -169,9 +180,15 @@ const GPUList: React.FC = () => {
key="gpuUtil"
render={(text, record: GPUDeviceItem) => {
return (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
<>
{record.core ? (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
) : (
'-'
)}
</>
);
}}
/>
@@ -192,7 +209,10 @@ const GPUList: React.FC = () => {
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(record.memory?.used, 0)}
{convertFileSize(
record.memory?.used || record.memory?.allocated,
0
)}
</span>
</span>
}
src/pages/resources/components/workers.tsx
+21 -5
View File
@@ -307,6 +307,14 @@ const Resources: React.FC = () => {
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={100}
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>{record.name}</span>
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.labels' })}
@@ -408,10 +416,14 @@ const Resources: React.FC = () => {
>
[{item.index}]
</span>
<ProgressBar
key={index}
percent={_.round(item.core?.utilization_rate, 0)}
></ProgressBar>
{item.core ? (
<ProgressBar
key={index}
percent={_.round(item.core?.utilization_rate, 0)}
></ProgressBar>
) : (
'-'
)}
</span>
);
}
@@ -455,7 +467,11 @@ const Resources: React.FC = () => {
{intl.formatMessage({
id: 'resources.table.used'
})}
: {convertFileSize(item.memory?.used, 0)}
:{' '}
{convertFileSize(
item.memory?.used || item.memory?.allocated,
0
)}
</span>
</span>
}