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

style: update model modal type

Browse Source
This commit is contained in:
jialin
2025-10-14 20:09:43 +08:00
parent 83403a1a1a
commit 8398ac59a1
6 changed files with 333 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-overlay-scroller.ts
+69 -40
View File
@@ -1,3 +1,4 @@
import { useMemoizedFn } from 'ahooks';
import { throttle } from 'lodash';
import {
UseOverlayScrollbarsParams,
@@ -108,48 +109,44 @@ export default function useOverlayScroller(data?: {
}
};
const throttledScroll = React.useCallback(
const throttledScroll = useMemoizedFn(
throttle(() => {
scrollEventElement.current?.scrollTo?.({
top: scrollEventElement.current?.scrollHeight,
behavior: 'smooth'
});
instanceRef.current?.update?.();
}, 100),
[(scrollEventElement.current, instanceRef.current)]
}, 100)
);
const scrollauto = React.useCallback(() => {
const scrollauto = useMemoizedFn(() => {
scrollEventElement.current?.scrollTo?.({
top: scrollEventElement.current.scrollHeight,
behavior: 'auto'
});
instanceRef.current?.update?.();
}, [scrollEventElement.current, instanceRef.current]);
});
// scroll to bottom
const throttledUpdateScrollerPosition = React.useCallback(
(delay?: number) => {
if (stopUpdatePosition.current) {
return;
}
if (delay === 0) {
scrollauto();
} else {
throttledScroll();
}
},
[throttledScroll, scrollauto]
);
const throttledUpdateScrollerPosition = useMemoizedFn((delay?: number) => {
if (stopUpdatePosition.current) {
return;
}
if (delay === 0) {
scrollauto();
} else {
throttledScroll();
}
});
// scroll to top
const updateScrollerPositionToTop = React.useCallback(() => {
const updateScrollerPositionToTop = useMemoizedFn(() => {
scrollEventElement.current?.scrollTo?.({
top: 0,
behavior: 'auto'
});
instanceRef.current?.update?.();
}, [scrollEventElement.current, instanceRef.current]);
});
const generateInstance = () => {
instanceRef.current = instance?.();
@@ -157,7 +154,7 @@ export default function useOverlayScroller(data?: {
instanceRef.current?.elements()?.scrollEventElement;
};
const handleWheelCallback = React.useCallback((e: any) => {
const handleWheelCallback = useMemoizedFn((e: any) => {
handleOnScroll();
if (timerRef.current) {
clearTimeout(timerRef.current);
@@ -165,7 +162,7 @@ export default function useOverlayScroller(data?: {
timerRef.current = setTimeout(() => {
stopUpdatePosition.current = false;
}, RESETSCROLLDELAY);
}, []);
});
// add wheel event
const handleWheelEvent = () => {
@@ -180,24 +177,21 @@ export default function useOverlayScroller(data?: {
);
};
const createInstance = React.useCallback(
(el: any) => {
if (instanceRef.current) {
return instanceRef.current;
}
if (el) {
initialize(el);
scrollElementRef.current = el;
initialized.current = true;
instanceRef.current = instance?.();
scrollEventElement.current =
instanceRef.current?.elements()?.scrollEventElement;
handleWheelEvent();
}
const createInstance = useMemoizedFn((el: any) => {
if (instanceRef.current) {
return instanceRef.current;
},
[initialize, instance]
);
}
if (el) {
initialize(el);
scrollElementRef.current = el;
initialized.current = true;
instanceRef.current = instance?.();
scrollEventElement.current =
instanceRef.current?.elements()?.scrollEventElement;
handleWheelEvent();
}
return instanceRef.current;
});
const destroyInstance = () => {
instanceRef.current?.destroy?.();
@@ -205,6 +199,38 @@ export default function useOverlayScroller(data?: {
instanceRef.current = null;
};
const scrollToTarget = (target: any, offset = 100) => {
if (!target) return;
if (!instanceRef.current || !scrollEventElement.current) {
instanceRef.current = instance?.();
scrollEventElement.current =
instanceRef.current?.elements()?.scrollEventElement;
}
const viewport = instanceRef.current?.elements().viewport;
const containerRect = viewport.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const scrollerState = instanceRef.current?.state();
const currentScroll = scrollerState.current?.overflowAmount?.y;
// const currentScroll = instanceRef.current?.scroll().position.y;
const targetPos = targetRect.top - containerRect.top + currentScroll;
console.log(
'target=======',
currentScroll,
targetPos,
instanceRef.current?.options()
);
scrollEventElement.current.scroll({
y: targetPos - offset,
behavior: 'smooth'
});
instanceRef.current?.update?.();
};
useEffect(() => {
return () => {
instanceRef.current?.destroy?.();
@@ -220,6 +246,9 @@ export default function useOverlayScroller(data?: {
generateInstance,
destroyInstance: destroyInstance,
updateScrollerPosition: throttledUpdateScrollerPosition,
updateScrollerPositionToTop: updateScrollerPositionToTop
updateScrollerPositionToTop: updateScrollerPositionToTop,
scrollToBottom: scrollauto,
scrollToTop: updateScrollerPositionToTop,
scrollToTarget
};
}
src/pages/_components/column-wrapper/index.tsx
+12 -8
View File
@@ -1,6 +1,7 @@
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import React from 'react';
import './style.less';
import { WrapperContext } from './use-wrapper-context';
interface ColumnWrapperProps {
children: React.ReactNode;
@@ -21,13 +22,14 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
styles = {}
}) => {
const scroller = React.useRef<any>(null);
const { initialize } = useOverlayScroller({
options: {
scrollbars: {
autoHide: 'move'
const { initialize, instance, scrollToBottom, scrollToTarget } =
useOverlayScroller({
options: {
scrollbars: {
autoHide: 'move'
}
}
}
});
});
React.useEffect(() => {
if (scroller.current) {
@@ -36,7 +38,9 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
}, []);
return (
<>
<WrapperContext.Provider
value={{ osInstance: instance, scrollToBottom, scrollToTarget }}
>
<div
className="column-wrapper-footer"
style={{ height: maxHeight || '100%', ...styles.wrapper }}
@@ -56,7 +60,7 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
</div>
{footer && <div className="footer">{footer}</div>}
</div>
</>
</WrapperContext.Provider>
);
};
src/pages/_components/column-wrapper/use-wrapper-context.ts
+20
View File
@@ -0,0 +1,20 @@
import { createContext, useContext } from 'react';
interface WrapperContextProps {
osInstance?: any;
scrollToBottom?: () => void;
scrollToTop?: () => void;
scrollToTarget?: (target: any, offset?: number) => void;
}
export const WrapperContext = createContext<WrapperContextProps>(
{} as WrapperContextProps
);
export const useWrapperContext = () => {
const context = useContext(WrapperContext);
if (!context) {
throw new Error('useWrapperContext must be used within a WrapperProvider');
}
return context;
};
src/pages/llmodels/components/update-modal.tsx
+38 -39
View File
@@ -1,7 +1,8 @@
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Button, Modal } from 'antd';
import { Button } from 'antd';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef } from 'react';
import ColumnWrapper from '../../_components/column-wrapper';
@@ -34,6 +35,12 @@ type AddModalProps = {
onCancel: () => void;
};
const ModalFooterStyle = {
padding: '16px 24px',
display: 'flex',
justifyContent: 'flex-end'
};
const UpdateModal: React.FC<AddModalProps> = (props) => {
const {
title,
@@ -249,57 +256,34 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
}, [open, formData]);
return (
<Modal
<GSDrawer
title={title}
open={open}
centered={true}
onOk={handleSumit}
onCancel={handleOnClose}
onClose={handleOnClose}
destroyOnHidden={true}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
styles={{
content: {
padding: '0 0 16px 0'
},
header: {
padding: 'var(--ant-modal-content-padding)',
paddingBottom: '0'
},
body: {
padding: '0'
height: 'calc(100vh - 57px)',
padding: '16px 0',
overflowX: 'hidden'
},
footer: {
padding: '16px 24px',
margin: '0'
content: {
borderRadius: '6px 0 0 6px'
}
}}
footer={
<>
<ModalFooter
onCancel={onCancel}
onOk={handleSumit}
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}
</Button>
)
}
></ModalFooter>
</>
}
footer={false}
>
<ColumnWrapper
maxHeight={550}
paddingBottom={
warningStatus.show ? (warningStatus.isDefault ? 50 : 100) : 0
}
styles={{
container: {
paddingTop: 0
}
}}
paddingBottom={warningStatus.show ? 100 : 50}
footer={
<>
<CompatibilityAlert
@@ -313,6 +297,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
warningStatus={warningStatus}
contentStyle={{ paddingInline: 0 }}
></CompatibilityAlert>
<ModalFooter
style={ModalFooterStyle}
onCancel={onCancel}
onOk={handleSumit}
showOkBtn={!showExtraButton}
extra={
showExtraButton && (
<Button type="primary" onClick={handleSubmitAnyway}>
{intl.formatMessage({
id: 'models.form.submit.anyway'
})}
</Button>
)
}
></ModalFooter>
</>
}
>
@@ -329,7 +328,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
onValuesChange={handleManulOnValuesChange}
></DataForm>
</ColumnWrapper>
</Modal>
</GSDrawer>
);
};
src/pages/llmodels/forms/basic.tsx
+135
View File
@@ -0,0 +1,135 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { sourceOptions } from '../config';
import { FormData } from '../config/types';
import CatalogFrom from './catalog';
import LocalPathSource from './local-path-source';
import OnlineSource from './online-source';
interface BasicFormProps {
fields?: string[];
sourceDisable?: boolean;
sourceList?: Global.BaseOption<string>[];
clusterList: Global.BaseOption<number>[];
handleClusterChange: (value: number) => void;
onSourceChange?: (value: string) => void;
}
const BasicForm: React.FC<BasicFormProps> = (props) => {
const {
fields = [],
sourceList,
clusterList,
sourceDisable,
handleClusterChange,
onSourceChange
} = props;
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const handleOnSourceChange = (val: string) => {
onSourceChange?.(val);
};
return (
<>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
{fields.includes('source') && (
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{
<SealSelect
onChange={handleOnSourceChange}
disabled={sourceDisable}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceList ?? sourceOptions}
required
></SealSelect>
}
</Form.Item>
)}
<OnlineSource></OnlineSource>
<LocalPathSource></LocalPathSource>
<Form.Item<FormData>
name="cluster_id"
rules={[
{
required: true,
message: getRuleMessage('select', 'clusters.title')
}
]}
>
{
<SealSelect
onChange={handleClusterChange}
label={intl.formatMessage({ id: 'clusters.title' })}
options={clusterList}
required
></SealSelect>
}
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
description={intl.formatMessage(
{ id: 'models.form.replicas.tips' },
{ api: `${window.location.origin}/v1` }
)}
min={0}
></SealInput.Number>
</Form.Item>
<CatalogFrom></CatalogFrom>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</>
);
};
export default BasicForm;
src/pages/llmodels/forms/index.tsx
+59 -112
View File
@@ -1,13 +1,11 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useImperativeHandle } from 'react';
import { excludeFields, ScheduleValueMap, sourceOptions } from '../config';
import { excludeFields, ScheduleValueMap } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { FormContext } from '../config/form-context';
import {
@@ -18,13 +16,9 @@ import {
} from '../config/types';
import { generateGPUIds } from '../config/utils';
import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
import CatalogFrom from './catalog';
import LocalPathSource from './local-path-source';
import OnlineSource from './online-source';
// import AdvanceConfig from './advance-config';
import useQueryBackends from '../hooks/use-query-backends';
import AdvanceConfig from './advance-config';
import Performance from './performance';
import BasicForm from './basic';
interface DataFormProps {
initialValues?: any;
@@ -57,13 +51,16 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onValuesChange,
onOk
} = props;
const { scrollToTarget, scrollToBottom } = useWrapperContext();
const { backendOptions, getBackendOptions } = useQueryBackends();
const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const intl = useIntl();
const [activeKey, setActiveKey] = React.useState<string[]>([]);
const scheduleType = Form.useWatch('scheduleType', form);
const [target, setTarget] = React.useState<string>('basic');
const performanceRef = React.useRef<HTMLDivElement>(null);
const advanceRef = React.useRef<HTMLDivElement>(null);
const handleSumit = () => {
form.submit();
@@ -106,10 +103,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onOk(allValues);
};
const handleOnSourceChange = (val: string) => {
onSourceChange?.(val);
};
const handleClusterChange = (value: number) => {
getGPUOptionList({ clusterId: value });
getBackendOptions({ cluster_id: value });
@@ -133,6 +126,20 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
setActiveKey(Array.isArray(keys) ? keys : [keys]);
};
const handleTargetChange = (val: string) => {
console.log('val', val);
// if (val === 'performance' && performanceRef.current) {
// scrollToTarget?.(performanceRef.current);
// }
// if (val === 'advanced' && advanceRef.current) {
// scrollToTarget?.(advanceRef.current);
// }
// scrollToBottom?.();
// setTimeout(() => {
// setTarget(val);
// }, 100);
};
useImperativeHandle(ref, () => {
return {
form: form,
@@ -174,6 +181,27 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onBackendChange: handleBackendChange
}}
>
{/* <div className="m-b-8">
<Segmented
value={target}
defaultValue="Basic"
onChange={handleTargetChange}
options={[
{
value: 'basic',
label: 'Basic'
},
{
value: 'performance',
label: 'Performance'
},
{
value: 'advanced',
label: 'Advanced'
}
]}
/>
</div> */}
<Form
name="deployModel"
form={form}
@@ -200,112 +228,31 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
...initialValues
}}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
{fields.includes('source') && (
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{
<SealSelect
onChange={handleOnSourceChange}
disabled={sourceDisable}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceList ?? sourceOptions}
required
></SealSelect>
}
</Form.Item>
)}
<OnlineSource></OnlineSource>
<LocalPathSource></LocalPathSource>
<Form.Item<FormData>
name="cluster_id"
rules={[
{
required: true,
message: getRuleMessage('select', 'clusters.title')
}
]}
>
{
<SealSelect
onChange={handleClusterChange}
label={intl.formatMessage({ id: 'clusters.title' })}
options={clusterList}
required
></SealSelect>
}
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
description={intl.formatMessage(
{ id: 'models.form.replicas.tips' },
{ api: `${window.location.origin}/v1` }
)}
min={0}
></SealInput.Number>
</Form.Item>
<CatalogFrom></CatalogFrom>
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<BasicForm
fields={fields}
sourceList={sourceList}
clusterList={clusterList}
sourceDisable={sourceDisable}
handleClusterChange={handleClusterChange}
onSourceChange={onSourceChange}
></BasicForm>
<CollapsePanel
activeKey={activeKey}
accordion={false}
onChange={handleOnCollapseChange}
items={[
// {
// key: 'performance',
// label: intl.formatMessage({ id: 'models.form.performance' }),
// forceRender: true,
// extra: <div ref={performanceRef}></div>,
// children: <Performance></Performance>
// },
{
key: 'performance',
label: intl.formatMessage({ id: 'models.form.performance' }),
forceRender: true,
children: <Performance></Performance>
},
{
key: 'advance_config',
key: 'advanced',
label: intl.formatMessage({ id: 'resources.form.advanced' }),
forceRender: true,
extra: <div ref={advanceRef}></div>,
children: <AdvanceConfig></AdvanceConfig>
}
]}