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

chore: update ui tips

Browse Source
This commit is contained in:
jialin
2025-02-17 13:49:55 +08:00
parent db53920153
commit 7c546ed6b8
11 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-table/types.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
export interface SealColumnProps {
title: string;
title: React.ReactNode;
render?: (text: any, record: any) => React.ReactNode;
dataIndex: string;
width?: number;
src/locales/en-US/models.ts
+3 -1
View File
@@ -100,5 +100,7 @@ export default {
' Specify the model file, e.g., /usr/local/models/model.gguf.',
'models.localpath.safe.tips':
'Specify the model directory that contains .safetensors and config.json files, e.g., /usr/local/models/model/.',
'models.localpath.chunks.tips': `Specify the first shard file of the model, e.g., /usr/local/models/model-00001-of-00004.gguf.`
'models.localpath.chunks.tips': `Specify the first shard file of the model, e.g., /usr/local/models/model-00001-of-00004.gguf.`,
'models.form.replicas.tips':
'Multiple replicas enable load balancing for inference requests.'
};
src/locales/zh-CN/models.ts
+2 -1
View File
@@ -97,5 +97,6 @@ export default {
'models.localpath.safe.tips':
'指向包含 .safetensors, config.json 文件的模型目录，例如 /usr/local/models/model/',
'models.localpath.chunks.tips':
'指向模型第一个分片文件，例如 /usr/local/models/model-00001-of-00004.gguf'
'指向模型第一个分片文件，例如 /usr/local/models/model-00001-of-00004.gguf',
'models.form.replicas.tips': '多副本数实现推理请求的负载均衡'
};
src/pages/llmodels/components/advance-config.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageActionType } from '@/config/types';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import {
Checkbox,
@@ -362,7 +362,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
id: 'resources.form.enablePartialOffload'
})}
</span>
<InfoCircleOutlined
<QuestionCircleOutlined
className="m-l-4"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
@@ -390,7 +390,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
})}
</span>
<InfoCircleOutlined
<QuestionCircleOutlined
className="m-l-4"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
src/pages/llmodels/components/catalog-list.tsx
+44 -37
View File
@@ -15,24 +15,55 @@ interface CatalogListProps {
onDeploy: (data: any) => void;
}
const ListSkeleton: React.FC<{
span: number;
loading: boolean;
isFirst: boolean;
}> = ({ span, loading, isFirst }) => {
return (
<div>
{loading && (
<div
style={{
width: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
height: 400,
right: 0
}}
>
<Spin
spinning={loading}
style={{
width: '100%'
}}
wrapperClassName="skelton-wrapper"
>
{isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
</Spin>
</div>
)}
</div>
);
};
const CatalogList: React.FC<CatalogListProps> = (props) => {
const { dataList, loading, activeId, isFirst, onDeploy } = props;
const [span, setSpan] = React.useState(8);
const getSpanByWidth = (width: number) => {
if (width < breakpoints.md) return 24;
if (width < breakpoints.lg) return 12;
return 8;
};
const handleResize = useCallback(
_.throttle((size: { width: number; height: number }) => {
const { width } = size;
if (width < breakpoints.xs) {
setSpan(24);
} else if (width < breakpoints.sm) {
setSpan(24);
} else if (width < breakpoints.md) {
setSpan(12);
} else if (width < breakpoints.lg) {
setSpan(12);
} else {
setSpan(8);
}
setSpan(getSpanByWidth(size.width));
}, 100),
[]
);
@@ -54,31 +85,7 @@ const CatalogList: React.FC<CatalogListProps> = (props) => {
);
})}
</Row>
{loading && (
<div
style={{
width: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
height: 400,
right: 0
}}
>
<Spin
spinning={loading}
style={{
width: '100%'
}}
wrapperClassName="skelton-wrapper"
>
{isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
</Spin>
</div>
)}
<ListSkeleton span={span} loading={loading} isFirst={isFirst} />
</div>
</ResizeObserver>
<FloatButton.BackTop visibilityHeight={1000} />
src/pages/llmodels/components/data-form.tsx
+1
View File
@@ -695,6 +695,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
id: 'models.form.replicas'
})}
required
description={intl.formatMessage({ id: 'models.form.replicas.tips' })}
min={0}
></SealInput.Number>
</Form.Item>
src/pages/llmodels/components/table-list.tsx
+19 -2
View File
@@ -25,12 +25,22 @@ import {
EditOutlined,
ExperimentOutlined,
PictureOutlined,
QuestionCircleOutlined,
SyncOutlined,
WechatWorkOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
import { Button, Dropdown, Input, Select, Space, Tag, message } from 'antd';
import {
Button,
Dropdown,
Input,
Select,
Space,
Tag,
Tooltip,
message
} from 'antd';
import dayjs from 'dayjs';
import { useAtom } from 'jotai';
import _ from 'lodash';
@@ -944,7 +954,14 @@ const Models: React.FC<ModelsProps> = ({
}}
/>
<SealColumn
title={intl.formatMessage({ id: 'models.form.replicas' })}
title={
<Tooltip
title={intl.formatMessage({ id: 'models.form.replicas.tips' })}
>
{intl.formatMessage({ id: 'models.form.replicas' })}
<QuestionCircleOutlined className="m-l-5" />
</Tooltip>
}
dataIndex="replicas"
key="replicas"
align="center"
src/pages/llmodels/components/update-modal.tsx
+3
View File
@@ -591,6 +591,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
id: 'models.form.replicas'
})}
required
description={intl.formatMessage({
id: 'models.form.replicas.tips'
})}
min={0}
></SealInput.Number>
</Form.Item>
src/pages/llmodels/index.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import {
} from '@/pages/resources/config/types';
import _ from 'lodash';
import qs from 'query-string';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import {
MODELS_API,
MODEL_INSTANCE_API,
@@ -316,4 +316,4 @@ const Models: React.FC = () => {
);
};
export default memo(Models);
export default Models;
src/pages/resources/components/gpus.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { SyncOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
import _ from 'lodash';
import { memo, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { queryGpuDevicesList } from '../apis';
import { GPUDeviceItem } from '../config/types';
const { Column } = Table;
@@ -252,4 +252,4 @@ const GPUList: React.FC = () => {
);
};
export default memo(GPUList);
export default GPUList;
src/pages/resources/components/workers.tsx
+3 -3
View File
@@ -27,7 +27,7 @@ import {
message
} from 'antd';
import _ from 'lodash';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
import { WorkerStatusMapValue, status } from '../config';
@@ -53,7 +53,7 @@ const ActionList = [
}
];
const Resources: React.FC = () => {
const Workers: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
@@ -589,4 +589,4 @@ const Resources: React.FC = () => {
);
};
export default memo(Resources);
export default Workers;