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

style: change select to radio group

Browse Source
This commit is contained in:
jialin
2024-10-09 14:08:27 +08:00
parent c041d768b2
commit 2b22481443
12 changed files with 118 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/label-selector/wrapper.tsx
+4 -2
View File
@@ -6,7 +6,7 @@ const Wrapper: React.FC<{
label?: string;
description?: React.ReactNode;
children: React.ReactNode;
}> = ({ children, label, description }) => {
}> = ({ children, label, description, ...rest }) => {
return (
<div className={styles['wrapper']}>
{label && (
@@ -14,7 +14,9 @@ const Wrapper: React.FC<{
<LabelInfo label={label} description={description}></LabelInfo>
</span>
)}
{children}
{React.isValidElement(children)
? React.cloneElement(children, { ...rest })
: children}
</div>
);
};
src/components/logs-viewer/index.tsx
-7
View File
@@ -77,13 +77,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
fitAddonRef.current = new FitAddon();
termRef.current.loadAddon(fitAddonRef.current);
termRef.current.open(termwrapRef.current);
// add event
// termRef.current.onLineFeed((e: any) => {
// if (cacheDataRef.current) {
// throttleScroll();
// }
// });
};
const handleResize = _.throttle(() => {
src/components/markdown-viewer/index.tsx
+17 -9
View File
@@ -51,6 +51,19 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
return pattern.test(url);
}, []);
const generateImgSrc = useCallback(
(src: string | null) => {
if (!src) {
return '';
}
if (generateImgLink) {
return isValidURL(src) ? src : generateImgLink(src);
}
return src;
},
[generateImgLink]
);
const renderItem = useCallback(
(token: any, render: any) => {
if (!reDefineTypes.includes(token.type)) {
@@ -97,10 +110,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
}
if (token.type === 'image') {
let href = token.href;
if (!isValidURL(token.href)) {
href = generateImgLink ? generateImgLink(token.href) : token.href;
}
let href = generateImgSrc(token.href);
htmlstr = (
<Image
src={href}
@@ -149,7 +159,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
return htmlstr;
},
[generateImgLink]
[generateImgSrc]
);
const renderTokens = (tokens: TokensList): any => {
return tokens?.map((token: any, index: number) => {
@@ -164,11 +174,9 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
const imgs = document.querySelectorAll('.markdown-viewer img');
imgs.forEach((img) => {
const src = img.getAttribute('src');
if (src && !isValidURL(src)) {
img.setAttribute('src', generateImgLink ? generateImgLink(src) : src);
}
img.setAttribute('src', generateImgSrc(src));
});
}, [content, generateImgLink]);
}, [content, generateImgSrc]);
return (
<div
src/components/seal-form/field-wrapper.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface WrapperProps {
className?: string;
disabled?: boolean;
required?: boolean;
description?: string;
description?: React.ReactNode;
variant?: string;
style?: React.CSSProperties;
onClick?: () => void;
src/global.less
+10
View File
@@ -444,6 +444,16 @@ body {
}
&.user-menu-collapsed {
.ant-menu-submenu-title {
display: flex;
justify-content: center;
align-items: center;
color: var(--color-text-1) !important;
padding-inline: unset !important;
width: 100%;
margin-inline: 0 !important;
}
.user-avatar.ant-menu-submenu {
.ant-menu-submenu-title {
padding: 0 !important;
src/layouts/index.tsx
+3
View File
@@ -225,6 +225,9 @@ export default (props: any) => {
layout="side"
disableMobile={true}
siderWidth={220}
onCollapse={(collapsed) => {
setCollapsed(collapsed);
}}
onMenuHeaderClick={(e) => {
e.stopPropagation();
e.preventDefault();
src/layouts/rightRender.tsx
+6 -11
View File
@@ -99,11 +99,6 @@ export const getRightRenderContent = (opts: {
icon: <InfoCircleOutlined />,
label: intl.formatMessage({ id: 'common.button.version' })
}
// {
// key: 'shortcuts',
// icon: <IconFont type="icon-keyboard"></IconFont>,
// label: intl.formatMessage({ id: 'common.button.shortcut' })
// }
];
const helpMenu = {
@@ -113,7 +108,7 @@ export const getRightRenderContent = (opts: {
: 'user-menu-container',
mode: 'vertical',
expandIcon: false,
inlineCollapsed: collapsed,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'hover',
items: [
{
@@ -163,7 +158,7 @@ export const getRightRenderContent = (opts: {
: 'user-menu-container',
mode: 'vertical',
expandIcon: false,
inlineCollapsed: collapsed,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'hover',
items: [
{
@@ -196,7 +191,7 @@ export const getRightRenderContent = (opts: {
: 'user-menu-container',
mode: 'vertical',
expandIcon: false,
inlineCollapsed: collapsed,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'hover',
items: [
{
@@ -263,19 +258,19 @@ export const getRightRenderContent = (opts: {
<Menu
{...helpMenu}
style={{
width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
}}
></Menu>
<Menu
{...langMenu}
style={{
width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
}}
></Menu>
<Menu
{...userMenu}
style={{
width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`,
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
marginTop: 20
}}
></Menu>
src/pages/llmodels/components/advance-config.tsx
+56 -7
View File
@@ -1,22 +1,25 @@
import LabelSelector from '@/components/label-selector';
import FieldWrapper from '@/components/label-selector/wrapper';
import ListInput from '@/components/list-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import {
Checkbox,
Collapse,
Form,
FormInstance,
Radio,
Select,
Tooltip,
Typography
} from 'antd';
import _ from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { backendOptionsMap, placementStrategyOptions } from '../config';
import { backendOptionsMap } from '../config';
import llamaConfig from '../config/llama-config';
import { FormData } from '../config/types';
import vllmConfig from '../config/vllm-config';
@@ -116,7 +119,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
const children = (
<>
<Form.Item name="scheduleType">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({ id: 'models.form.scheduletype' })}
description={renderSelectTips(scheduleTypeTips)}
options={[
@@ -133,18 +136,46 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
value: 'manual'
}
]}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({ id: 'models.form.scheduletype' })}
description={renderSelectTips(scheduleTypeTips)}
>
<Radio.Group style={{ marginTop: 5 }}>
<Radio value="auto">
{intl.formatMessage({
id: 'models.form.scheduletype.auto'
})}
</Radio>
<Radio value="manual">
{intl.formatMessage({
id: 'models.form.scheduletype.manual'
})}
</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
{scheduleType === 'auto' && (
<>
<Form.Item<FormData> name="placement_strategy">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({
id: 'resources.form.placementStrategy'
})}
options={placementStrategyOptions}
description={renderSelectTips(placementStrategyTips)}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({
id: 'resources.form.placementStrategy'
})}
description={renderSelectTips(placementStrategyTips)}
>
<Radio.Group style={{ marginTop: 5 }}>
<Radio value="spread">Spread</Radio>
<Radio value="binpack">Binpack</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
<Form.Item<FormData>
name="worker_selector"
@@ -219,7 +250,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
</Form.Item>
)}
<Form.Item name="backend">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({ id: 'models.form.backend' })}
options={[
{
@@ -234,7 +265,25 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
}
]}
disabled={action === PageAction.EDIT}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({ id: 'models.form.backend' })}
>
<Radio.Group>
<Radio
value={backendOptionsMap.llamaBox}
disabled={!isGGUF || action === PageAction.EDIT}
>
llama-box(llama.cpp)
</Radio>
<Radio
value={backendOptionsMap.vllm}
disabled={isGGUF || action === PageAction.EDIT}
>
vLLM
</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
<Form.Item<FormData> name="backend_parameters">
<ListInput
src/pages/llmodels/components/update-modal.tsx
+17 -26
View File
@@ -72,33 +72,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
setGpuOptions(list);
};
const initFormValue = () => {
if (action === PageAction.CREATE && open) {
form.setFieldsValue({
source: modelSourceMap.huggingface_value,
replicas: 1
});
}
if (action === PageAction.EDIT && open) {
const result = setSourceRepoConfigValue(
props.data?.source || '',
props.data
);
const initFormValue = useMemo(() => {
const result = setSourceRepoConfigValue(
props.data?.source || '',
props.data
);
form.setFieldsValue({
...result.values,
..._.omit(props.data, result.omits),
scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: props.data?.gpu_selector
? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
: null
});
}
};
useEffect(() => {
initFormValue();
}, [open]);
return {
...result.values,
..._.omit(props.data, result.omits),
scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: props.data?.gpu_selector
? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
: null
};
}, [props.data]);
useEffect(() => {
setIsGGUF(props.data?.backend === backendOptionsMap.llamaBox);
@@ -306,6 +294,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
}}
initialValues={{
...initFormValue
}}
>
<Form.Item<FormData>
name="name"
src/pages/llmodels/components/view-logs-modal.tsx
+4 -1
View File
@@ -41,7 +41,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
<Modal
title={
<span className="flex flex-center">
<span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
<span style={{ fontWeight: 'var(--font-weight-bold)' }}>
{' '}
{intl.formatMessage({ id: 'common.button.viewlog' })}
</span>
</span>
}
open={open}
src/pages/playground/components/multiple-chat/content-item.tsx
-1
View File
@@ -119,7 +119,6 @@ const ContentItem: React.FC<MessageItemProps> = ({
const handleUpdateImgList = useCallback(
(list: { uid: number | string; dataUrl: string }[]) => {
console.log('list===========', data.imgs, list);
updateMessage?.({
role: data.role,
content: data.content,
src/pages/playground/style/content-item.less
-1
View File
@@ -12,7 +12,6 @@
.role {
position: relative;
cursor: pointer;
padding: 0 4px;
border-radius: var(--border-radius-mini);
}