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

style: add field tips in model form

Browse Source
This commit is contained in:
jialin
2024-09-05 18:43:13 +08:00
parent a6e5ec0a08
commit 01962e5e00
8 changed files with 88 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/data-form.tsx
+30 -10
View File
@@ -5,9 +5,9 @@ import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { RightOutlined } from '@ant-design/icons';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Checkbox, Collapse, Form, Typography } from 'antd';
import { Checkbox, Collapse, Form, Tooltip, Typography } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
@@ -303,11 +303,21 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enablePartialOffload'
<Tooltip
title={intl.formatMessage({
id: 'models.form.partialoffload.tips'
})}
</span>
>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enablePartialOffload'
})}
</span>
<InfoCircleOutlined
className="m-l-2"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
</Tooltip>
</Checkbox>
</Form.Item>
</FormItemWrapper>
@@ -321,11 +331,21 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
<Tooltip
title={intl.formatMessage({
id: 'models.form.distribution.tips'
})}
</span>
>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
})}
</span>
<InfoCircleOutlined
className="m-l-2"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
</Tooltip>
</Checkbox>
</Form.Item>
</FormItemWrapper>
src/pages/llmodels/components/table-list.tsx
+4 -2
View File
@@ -494,8 +494,10 @@ const Models: React.FC<ModelsProps> = ({
key="replicas"
align="center"
span={4}
editable
valueType="number"
editable={{
valueType: 'number',
title: intl.formatMessage({ id: 'models.table.replicas.edit' })
}}
render={(text, record: ListItem) => {
return (
<span>
src/pages/llmodels/components/update-modal.tsx
+30 -10
View File
@@ -7,9 +7,9 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { convertFileSize } from '@/utils';
import { RightOutlined } from '@ant-design/icons';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Checkbox, Collapse, Form, Modal, Typography } from 'antd';
import { Checkbox, Collapse, Form, Modal, Tooltip, Typography } from 'antd';
import _ from 'lodash';
import { memo, useCallback, useEffect, useState } from 'react';
import SimpleBar from 'simplebar-react';
@@ -371,11 +371,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enablePartialOffload'
<Tooltip
title={intl.formatMessage({
id: 'models.form.partialoffload.tips'
})}
</span>
>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enablePartialOffload'
})}
</span>
<InfoCircleOutlined
className="m-l-2"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
</Tooltip>
</Checkbox>
</Form.Item>
</FormItemWrapper>
@@ -388,11 +398,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
style={{ padding: '0 10px', marginBottom: 0 }}
>
<Checkbox>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
<Tooltip
title={intl.formatMessage({
id: 'models.form.distribution.tips'
})}
</span>
>
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
{intl.formatMessage({
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
})}
</span>
<InfoCircleOutlined
className="m-l-2"
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
</Tooltip>
</Checkbox>
</Form.Item>
</FormItemWrapper>