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

style: backend check info

Browse Source
This commit is contained in:
jialin
2025-03-20 12:16:46 +08:00
parent b8f58b2cc1
commit 1819649a3a
9 changed files with 104 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/alert-info/block.less
+2 -13
View File
@@ -1,7 +1,7 @@
.alert-info-block {
padding: 6px 10px;
position: relative;
padding-top: 35px;
padding-left: 32px;
text-align: left;
border-radius: var(--border-radius-base);
margin: 0;
@@ -30,22 +30,11 @@
left: 0;
top: 0;
display: flex;
height: 30px;
width: 100%;
height: 32px;
padding: 5px 10px;
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
&.danger {
background-color: var(--ant-color-error-bg-filled-hover);
}
&.warning {
background-color: var(--ant-color-warning-bg-hover);
}
.info-icon {
margin-right: 8px;
&.danger {
color: var(--ant-color-error);
}
src/components/alert-info/block.tsx
+5 -8
View File
@@ -14,7 +14,7 @@ interface AlertInfoProps {
}
const AlertInfo: React.FC<AlertInfoProps> = (props) => {
const { message, type, rows = 1, ellipsis, style, title } = props;
const { message, type, rows = 1, ellipsis, style } = props;
return (
<>
@@ -25,17 +25,14 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
>
<Typography.Paragraph
ellipsis={
ellipsis !== undefined
? ellipsis
: {
rows: rows,
tooltip: message
}
ellipsis ?? {
rows: rows,
tooltip: message
}
}
>
<div className={classNames('title', type)}>
<WarningFilled className={classNames('info-icon', type)} />
<span className="text">{title}</span>
</div>
<span className="content">{message}</span>
</Typography.Paragraph>
src/hooks/use-app-utils.ts
+30
View File
@@ -0,0 +1,30 @@
import { useIntl } from '@umijs/max';
const useAppUtils = () => {
const intl = useIntl();
const getRuleMessage = (
type: 'input' | 'select',
name: string,
locale = true
) => {
const nameStr = locale ? intl.formatMessage({ id: name }) : name;
if (type === 'input') {
return intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: nameStr }
);
}
return intl.formatMessage(
{ id: 'common.form.rule.select' },
{ name: nameStr }
);
};
return {
getRuleMessage
};
};
export default useAppUtils;
src/layouts/rightRender.tsx
+14 -17
View File
@@ -17,6 +17,7 @@ import {
import { getAllLocales, history, setLocale } from '@umijs/max';
import { Avatar, Menu, Spin } from 'antd';
import _ from 'lodash';
import React from 'react';
export const getRightRenderContent = (opts: {
runtimeConfig: any;
@@ -282,27 +283,23 @@ export const getRightRenderContent = (opts: {
]
};
const getMenuStyle = (
collapsed: boolean,
siderWidth: number,
extraStyle: React.CSSProperties = {}
) => ({
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
...extraStyle
});
return (
<div>
<Menu
{...helpMenu}
style={{
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
}}
></Menu>
<Menu
{...langMenu}
style={{
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
}}
></Menu>
<Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu
{...userMenu}
style={{
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
marginTop: 20
}}
></Menu>
style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
/>
</div>
);
};
src/pages/llmodels/components/advance-config.tsx
+3 -10
View File
@@ -7,6 +7,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 useAppUtils from '@/hooks/use-app-utils';
import { QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import {
@@ -42,6 +43,7 @@ interface AdvanceConfigProps {
const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
const { form, isGGUF, gpuOptions, source } = props;
const { getRuleMessage } = useAppUtils();
const intl = useIntl();
const wokerSelector = Form.useWatch('worker_selector', form);
const EnviromentVars = Form.useWatch('env', form);
@@ -289,16 +291,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({
id: 'models.form.gpuselector'
})
}
)
message: getRuleMessage('select', 'models.form.gpuselector')
}
]}
>
src/pages/llmodels/components/data-form.tsx
+11 -64
View File
@@ -5,6 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import _ from 'lodash';
@@ -53,13 +54,6 @@ interface DataFormProps {
fields?: string[];
}
interface GPUOption {
label: string;
value: string;
disableCheckbox?: boolean;
children: GPUOption[];
}
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
@@ -80,7 +74,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onSourceChange,
onOk
} = props;
console.log('DataForm -> props');
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const intl = useIntl();
const [modelTask, setModelTask] = useState<Record<string, any>>({
@@ -208,12 +202,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
)
message: getRuleMessage('input', 'models.form.repoid')
}
]}
>
@@ -230,12 +219,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
)
message: getRuleMessage('input', 'models.form.filename')
}
]}
>
@@ -259,12 +243,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.table.name' }) }
)
message: getRuleMessage('input', 'models.table.name')
}
]}
>
@@ -308,12 +287,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filePath' }) }
)
message: getRuleMessage('input', 'models.form.filePath')
}
]}
>
@@ -351,12 +325,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: 'size' }
)
message: getRuleMessage('input', 'size', false)
}
]}
>
@@ -378,12 +347,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: 'quantization' }
)
message: getRuleMessage('select', 'quantization', false)
}
]}
>
@@ -534,12 +498,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
message: getRuleMessage('input', 'common.table.name')
}
]}
>
@@ -556,12 +515,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
message: getRuleMessage('select', 'models.form.source')
}
]}
>
@@ -627,14 +581,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
src/pages/llmodels/components/deploy-modal.tsx
+24 -22
View File
@@ -5,7 +5,7 @@ import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import { debounce } from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { backendOptionsMap, modelSourceMap } from '../config';
import { FormData } from '../config/types';
import ColumnWrapper from './column-wrapper';
@@ -27,7 +27,7 @@ type AddModalProps = {
onCancel: () => void;
};
const AddModal: React.FC<AddModalProps> = (props) => {
const AddModal: FC<AddModalProps> = (props) => {
const {
title,
open,
@@ -235,28 +235,30 @@ const AddModal: React.FC<AddModalProps> = (props) => {
)}
<div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
<ColumnWrapper
paddingBottom={warningStatus.show ? 155 : 50}
paddingBottom={warningStatus.show ? 125 : 50}
footer={
<>
{warningStatus.show && (
<AlertBlockInfo
ellipsis={false}
message={
<span
style={{}}
dangerouslySetInnerHTML={{
__html: intl.formatMessage({
id: warningStatus.message
})
}}
></span>
}
title={intl.formatMessage({
id: 'common.text.tips'
})}
type="warning"
></AlertBlockInfo>
)}
<div style={{ paddingInline: 12 }}>
{warningStatus.show && (
<AlertBlockInfo
ellipsis={false}
message={
<span
style={{}}
dangerouslySetInnerHTML={{
__html: intl.formatMessage({
id: warningStatus.message
})
}}
></span>
}
title={intl.formatMessage({
id: 'common.text.tips'
})}
type="warning"
></AlertBlockInfo>
)}
</div>
<ModalFooter
onCancel={handleCancel}
onOk={handleSumit}
src/pages/llmodels/components/update-modal.tsx
+10 -48
View File
@@ -7,6 +7,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Modal, Typography } from 'antd';
import _ from 'lodash';
@@ -16,7 +17,8 @@ import {
backendTipsList,
localPathTipsList,
modelSourceMap,
ollamaModelOptions
ollamaModelOptions,
sourceOptions
} from '../config';
import { FormData, ListItem } from '../config/types';
import AdvanceConfig from './advance-config';
@@ -40,30 +42,6 @@ const SEARCH_SOURCE = [
modelSourceMap.modelscope_value
];
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
},
{
label: 'ModelScope',
value: modelSourceMap.modelscope_value,
key: 'model_scope'
},
{
label: 'models.form.localPath',
value: modelSourceMap.local_path_value,
locale: true,
key: 'local_path'
}
];
const UpdateModal: React.FC<AddModalProps> = (props) => {
const {
title,
@@ -73,6 +51,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
onCancel,
updateFormInitials: { gpuOptions, isGGUF, data: formData }
} = props || {};
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const intl = useIntl();
const localPathCache = useRef<string>('');
@@ -428,9 +407,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
>
<ColumnWrapper
maxHeight={550}
paddingBottom={warningStatus.show ? 100 : 0}
paddingBottom={warningStatus.show ? 70 : 0}
footer={
<>
<div style={{ paddingInline: 12 }}>
{warningStatus.show && (
<AlertBlockInfo
ellipsis={false}
@@ -449,7 +428,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
type="warning"
></AlertBlockInfo>
)}
</>
</div>
}
>
<Form
@@ -471,12 +450,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
message: getRuleMessage('input', 'common.table.name')
}
]}
>
@@ -492,12 +466,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
message: getRuleMessage('select', 'models.form.source')
}
]}
>
@@ -555,14 +524,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
src/pages/llmodels/download/target-form.tsx
+5 -18
View File
@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
import SealAutoComplete from '@/components/seal-form/auto-complete';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import useAppUtils from '@/hooks/use-app-utils';
import { ModelFile as FormData } from '@/pages/resources/config/types';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
@@ -15,6 +16,7 @@ interface TargetFormProps {
const TargetForm: React.FC<TargetFormProps> = (props) => {
const { onOk, source } = props;
const { getRuleMessage } = useAppUtils();
const intl = useIntl();
const [form] = Form.useForm();
@@ -31,12 +33,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.table.name' }) }
)
message: getRuleMessage('input', 'models.table.name')
}
]}
>
@@ -88,12 +85,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
message: getRuleMessage('select', 'models.form.source')
}
]}
>
@@ -104,12 +96,7 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
message: getRuleMessage('input', 'common.table.name')
}
]}
>