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

fix: logs are not fully loaded

Browse Source
This commit is contained in:
jialin
2025-11-30 20:33:16 +08:00
parent 306daf7591
commit 769cc09906
14 changed files with 133 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
-1
View File
@@ -4,7 +4,6 @@ import { compressionPluginConfig, monacoPluginConfig } from './plugins';
import proxy from './proxy';
import routes from './routes';
import { getBranchInfo } from './utils';
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const versionInfo = getBranchInfo();
process.env.VERSION = JSON.stringify(versionInfo);
src/components/logs-viewer/logs-list.tsx
+3 -3
View File
@@ -64,9 +64,9 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
const handleOnWheel = useCallback(
(e: any) => {
const scrollTop = scrollEventElement?.scrollTop;
const scrollHeight = scrollEventElement?.scrollHeight;
const clientHeight = scrollEventElement?.clientHeight;
const scrollTop = scrollEventElement?.current.scrollTop;
const scrollHeight = scrollEventElement?.current.scrollHeight;
const clientHeight = scrollEventElement?.current.clientHeight;
stopScroll.current = scrollTop + clientHeight <= scrollHeight;
src/components/logs-viewer/virtual-log-list.tsx
+3 -12
View File
@@ -1,4 +1,5 @@
import useSetChunkFetch from '@/hooks/use-chunk-fetch';
import { useMemoizedFn } from 'ahooks';
import { Spin } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
@@ -177,7 +178,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
});
};
const handleOnScroll = useCallback(
const handleOnScroll = useMemoizedFn(
async (data: { isTop: boolean; isBottom: boolean }) => {
const { isTop, isBottom } = data;
setIsAtTop(isTop);
@@ -225,17 +226,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
} else if (isBottom && page < totalPage) {
// getNextPage();
}
},
[
loading,
logs.length,
pageSize,
enableScorllLoad,
page,
totalPage,
setScrollPos,
createChunkConnection
]
}
);
const debouncedScroll = useCallback(
src/components/seal-form/base/select.tsx
+57 -41
View File
@@ -2,52 +2,68 @@ import IconFont from '@/components/icon-font';
import type { SelectProps } from 'antd';
import { Select } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import styled from 'styled-components';
import NotFoundContent from '../components/not-found-content';
const BaseSelect: React.FC<SelectProps & { ref?: any }> = forwardRef(
(props, ref) => {
const { notFoundContent, loading, ...restProps } = props;
const [isFocus, setIsFocus] = React.useState(false);
const inputRef = React.useRef<any>(null);
const Footer = styled.div`
color: var(--ant-color-text-tertiary);
margin-top: 8px;
margin-bottom: 0;
padding: 8px 12px;
border-top: 1px solid var(--ant-color-split);
`;
useImperativeHandle(ref, () => ({
...(inputRef.current || ({} as any))
}));
const BaseSelect: React.FC<
SelectProps & { ref?: any; footer?: React.ReactNode }
> = forwardRef((props, ref) => {
const { notFoundContent, loading, ...restProps } = props;
const [isFocus, setIsFocus] = React.useState(false);
const inputRef = React.useRef<any>(null);
const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
setIsFocus(true);
props.onFocus?.(e);
};
const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
setIsFocus(false);
props.onBlur?.(e);
};
const renderSuffixIcon = () => {
if (props.suffixIcon) {
return props.suffixIcon;
useImperativeHandle(ref, () => ({
...(inputRef.current || ({} as any))
}));
const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
setIsFocus(true);
props.onFocus?.(e);
};
const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
setIsFocus(false);
props.onBlur?.(e);
};
const renderSuffixIcon = () => {
if (props.suffixIcon) {
return props.suffixIcon;
}
if (!props.showSearch) {
return <IconFont type="icon-down"></IconFont>;
}
return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
};
return (
<Select
{...restProps}
notFoundContent={
<NotFoundContent loading={loading} notFoundContent={notFoundContent} />
}
if (!props.showSearch) {
return <IconFont type="icon-down"></IconFont>;
ref={inputRef}
onFocus={handleFocus}
onBlur={handleBlur}
suffixIcon={renderSuffixIcon()}
popupRender={
props.footer
? (originNode) => (
<>
{originNode}
{props.footer && <Footer>{props.footer}</Footer>}
</>
)
: undefined
}
return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
};
return (
<Select
{...restProps}
notFoundContent={
<NotFoundContent
loading={loading}
notFoundContent={notFoundContent}
/>
}
ref={inputRef}
onFocus={handleFocus}
onBlur={handleBlur}
suffixIcon={renderSuffixIcon()}
/>
);
}
);
/>
);
});
export default BaseSelect;
src/components/seal-form/seal-select.tsx
+3 -1
View File
@@ -10,7 +10,9 @@ import { SealFormItemProps } from './types';
import Wrapper from './wrapper';
import SelectWrapper from './wrapper/select';
const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
const SealSelect: React.FC<
SelectProps & SealFormItemProps & { footer?: React.ReactNode }
> = (props) => {
const {
label,
placeholder,
src/locales/en-US/models.ts
+2 -1
View File
@@ -267,5 +267,6 @@ export default {
'models.accessSettings.authed.tips':
'Accessible to all authenticated platform users.',
'models.accessSettings.allowedUsers.tips':
'Only designated users can access the model.'
'Only designated users can access the model.',
'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
};
src/locales/ja-JP/models.ts
+4 -2
View File
@@ -267,7 +267,8 @@ export default {
'models.accessSettings.authed.tips':
'Accessible to all authenticated platform users.',
'models.accessSettings.allowedUsers.tips':
'Only designated users can access the model.'
'Only designated users can access the model.',
'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -358,5 +359,6 @@ export default {
// 68. 'models.form.backendVersion.deprecated': 'Deprecated',
// 69. 'models.accessSettings.public.desc': 'Accessible to anyone without authentication.',
// 70. 'models.accessSettings.authed.tips': 'Accessible to all authenticated platform users.',
// 71.'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.'
// 71.'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.',
// 72. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
// ========== End of To-Do List ==========
src/locales/ru-RU/models.ts
+4 -2
View File
@@ -272,11 +272,13 @@ export default {
'models.accessSettings.authed.tips':
'Accessible to all authenticated platform users.',
'models.accessSettings.allowedUsers.tips':
'Only designated users can access the model.'
'Only designated users can access the model.',
'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'models.accessSettings.public.desc': 'Accessible to anyone without authentication.',
// 2. 'models.accessSettings.authed.tips': 'Accessible to all authenticated platform users.',
// 3. 'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.'
// 3. 'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.',
// 4. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+2 -1
View File
@@ -251,5 +251,6 @@ export default {
'models.form.backendVersion.deprecated': '已弃用',
'models.accessSettings.public.desc': '任何人无需认证即可访问。',
'models.accessSettings.authed.tips': '平台内所有已认证用户可访问。',
'models.accessSettings.allowedUsers.tips': '仅允许选定的特定用户访问。'
'models.accessSettings.allowedUsers.tips': '仅允许选定的特定用户访问。',
'models.form.backendVersions.tips': `如需使用更多版本，请前往{link}页面并编辑对应的后端以添加版本。`
};
src/pages/backends/config/index.ts
+6 -6
View File
@@ -152,37 +152,37 @@ export const frameworks = [
label: 'CANN',
value: GPUDriverMap.ASCEND,
tips: ManufacturerMap[GPUDriverMap.ASCEND],
locale: true
tipLocale: true
},
{
label: 'DTK',
value: GPUDriverMap.HYGON,
tips: ManufacturerMap[GPUDriverMap.HYGON],
locale: true
tipLocale: true
},
{
label: 'MACA',
value: GPUDriverMap.METAX,
tips: ManufacturerMap[GPUDriverMap.METAX],
locale: true
tipLocale: true
},
{
label: 'CoreX',
value: GPUDriverMap.ILUVATAR,
tips: ManufacturerMap[GPUDriverMap.ILUVATAR],
locale: true
tipLocale: true
},
{
label: 'MUSA',
value: GPUDriverMap.MOORE_THREADS,
tips: ManufacturerMap[GPUDriverMap.MOORE_THREADS],
locale: true
tipLocale: true
},
{
label: 'Neuware',
value: GPUDriverMap.CAMBRICON,
tips: ManufacturerMap[GPUDriverMap.CAMBRICON],
locale: true
tipLocale: true
},
{
label: 'CPU',
src/pages/backends/forms/versions-config.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
<span>
{option.label}
{data.tips ? (
data.locale ? (
data.tipLocale ? (
<span className="text-tertiary m-l-4">{` [${intl.formatMessage({ id: data.tips })}]`}</span>
) : (
<span className="text-tertiary m-l-4">{` [${data.tips}]`}</span>
src/pages/cluster-management/components/add-credential.tsx
+22 -11
View File
@@ -8,12 +8,24 @@ import { ExportOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import { ProviderType, ProviderValueMap } from '../config';
import {
CredentialFormData as FormData,
CredentialListItem as ListItem
} from '../config/types';
const ExtraContent = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 6px;
right: 32px;
z-index: 1;
background: var(--ant-color-bg-container);
padding-inline: 8px;
`;
type AddModalProps = {
title: string;
action: PageActionType;
@@ -105,18 +117,17 @@ const AddModal: React.FC<AddModalProps> = ({
id: 'clusters.credential.token'
})}
required={action === PageAction.CREATE}
labelExtra={
<Typography.Link
href="https://cloud.digitalocean.com/account/api/tokens"
target="_blank"
rel="noopener noreferrer"
style={{ marginLeft: 8, lineHeight: 1 }}
>
{intl.formatMessage({ id: 'clusters.button.genToken' })}{' '}
<ExportOutlined style={{ fontSize: 12 }} />
</Typography.Link>
}
></SealInput.Password>
<ExtraContent>
<Typography.Link
href="https://cloud.digitalocean.com/account/api/tokens"
target="_blank"
rel="noopener noreferrer"
>
{intl.formatMessage({ id: 'clusters.button.genToken' })}{' '}
<ExportOutlined style={{ transform: 'scale(0.8)' }} />
</Typography.Link>
</ExtraContent>
</Form.Item>
</>
)}
src/pages/llmodels/forms/backend.tsx
+24 -2
View File
@@ -1,8 +1,8 @@
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import useAppUtils from '@/hooks/use-app-utils';
import { CaretDownOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { CaretDownOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { useIntl, useNavigate } from '@umijs/max';
import { Form, Select } from 'antd';
import React, { useMemo } from 'react';
import styled from 'styled-components';
@@ -24,6 +24,7 @@ const CaretDownWrapper = styled.span`
const BackendFields: React.FC = () => {
const intl = useIntl();
const navigate = useNavigate();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
@@ -193,6 +194,27 @@ const BackendFields: React.FC = () => {
})}
onChange={handleBackendVersionOnChange}
label={intl.formatMessage({ id: 'models.form.backendVersion' })}
footer={
<dl className="flex" style={{ marginBottom: 0 }}>
<dt>
<InfoCircleOutlined />
</dt>
<dd style={{ marginLeft: 8, marginBottom: 0 }}>
{intl.formatMessage(
{
id: 'models.form.backendVersions.tips'
},
{
link: (
<a onClick={() => navigate('/resources/backends')}>
{intl.formatMessage({ id: 'backends.title' })}
</a>
)
}
)}
</dd>
</dl>
}
>
{renderVersionOptions(
backendVersions.builtIn,
src/pages/llmodels/forms/basic.tsx
+2 -27
View File
@@ -1,16 +1,14 @@
import { clusterSessionAtom } from '@/atoms/clusters';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { modelNameReg, PageAction } from '@/config';
import { modelNameReg } from '@/config';
import { GPUSTACK_API_BASE_URL } from '@/config/settings';
import useAppUtils from '@/hooks/use-app-utils';
import {
ClusterStatusLabelMap,
ClusterStatusValueMap
} from '@/pages/cluster-management/config';
import { Link, useIntl } from '@umijs/max';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useAtom } from 'jotai';
import { useMemo } from 'react';
import { sourceOptions } from '../config';
import { FormData } from '../config/types';
@@ -30,26 +28,6 @@ interface BasicFormProps {
onSourceChange?: (value: string) => void;
}
const NotFoundCredentialContent: React.FC = () => {
const [, setFromClusterCreation] = useAtom(clusterSessionAtom);
const intl = useIntl();
const handleOnClick = () => {
setFromClusterCreation({
firstAddWorker: false,
firstAddCluster: true
});
};
return (
<Link
to={`/cluster-management/clusters/create?action=${PageAction.CREATE}`}
onClick={handleOnClick}
>
{intl.formatMessage({ id: 'noresult.resources.gotocluster' })}
</Link>
);
};
const BasicForm: React.FC<BasicFormProps> = (props) => {
const {
fields = [],
@@ -140,9 +118,6 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
>
{
<SealSelect
notFoundContent={
<NotFoundCredentialContent></NotFoundCredentialContent>
}
onChange={handleClusterChange}
label={intl.formatMessage({ id: 'clusters.title' })}
options={clusterOptions}