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

fix: auto expand the fields group

Browse Source
This commit is contained in:
jialin
2025-11-07 11:56:12 +08:00
parent 39efca0d4c
commit 64e2cfa35a
18 changed files with 168 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/backends/components/add-modal.tsx
+7 -3
View File
@@ -9,7 +9,11 @@ import _ from 'lodash';
import React, { useEffect, useId, useRef, useState } from 'react';
import styled from 'styled-components';
import ColumnWrapper from '../../_components/column-wrapper';
import { backendFields, json2Yaml } from '../config';
import {
builtInBackendFields,
customBackendFields,
json2Yaml
} from '../config';
import { FormData, ListItem } from '../config/types';
import BackendForm from '../forms';
import ImportYAML from './import-yaml';
@@ -151,10 +155,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
);
if (currentData?.is_built_in) {
return json2Yaml(_.pick(copyValues, backendFields));
return json2Yaml(_.pick(copyValues, builtInBackendFields));
}
return json2Yaml(
_.pick(copyValues, [...backendFields, 'default_version'])
_.pick(copyValues, [...customBackendFields, 'default_version'])
);
};
src/pages/backends/config/index.ts
+14 -1
View File
@@ -109,13 +109,26 @@ export const customIcons = [
'≥'
];
export const backendFields = [
/**
* custom backend fields for config yaml
*/
export const customBackendFields = [
'description',
'health_check_path',
'default_run_command',
'version_configs',
'default_backend_param'
];
/**
* built-in backend fields for config yaml
*/
export const builtInBackendFields = [
'description',
'version_configs',
'default_backend_param'
];
export const frameworks = [
{
label: 'CUDA',
src/pages/backends/forms/basic.tsx
+34 -32
View File
@@ -37,38 +37,40 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="health_check_path"
rules={[{ required: false }]}
>
<SealInput.Input
trim
placeholder={intl.formatMessage(
{ id: 'common.help.default' },
{ content: '/v1/models' }
)}
label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
></SealInput.Input>
</Form.Item>
<Form.Item name="default_run_command">
<SealTextArea
scaleSize={true}
alwaysFocus={true}
description={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand.tips'
})}
placeholder={intl.formatMessage(
{ id: 'common.help.eg' },
{ content: 'vllm serve {{model_path}} --port {{port}}' }
)}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand'
})}
></SealTextArea>
</Form.Item>
{!currentData?.is_built_in && (
<>
<Form.Item<FormData>
name="health_check_path"
rules={[{ required: false }]}
>
<SealInput.Input
trim
placeholder={intl.formatMessage(
{ id: 'common.help.default' },
{ content: '/v1/models' }
)}
label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
></SealInput.Input>
</Form.Item>
<Form.Item name="default_run_command">
<SealTextArea
scaleSize={true}
alwaysFocus={true}
description={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand.tips'
})}
placeholder={intl.formatMessage(
{ id: 'common.help.eg' },
{ content: 'vllm serve {{model_path}} --port {{port}}' }
)}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand'
})}
></SealTextArea>
</Form.Item>
</>
)}
<Form.Item<FormData>
name="default_backend_param"
rules={[{ required: false }]}
src/pages/backends/forms/index.tsx
-1
View File
@@ -51,7 +51,6 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
}
return item;
});
onFinish(data);
};
src/pages/llmodels/forms/basic.tsx
+6
View File
@@ -1,5 +1,6 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { modelNameReg } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import {
ClusterStatusLabelMap,
@@ -65,10 +66,15 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
{
required: true,
message: getRuleMessage('input', 'common.table.name')
},
{
pattern: modelNameReg,
message: intl.formatMessage({ id: 'models.form.rules.name' })
}
]}
>
<SealInput.Input
description={intl.formatMessage({ id: 'models.form.rules.name' })}
label={intl.formatMessage({
id: 'common.table.name'
})}
src/pages/llmodels/forms/index.tsx
+12 -6
View File
@@ -30,12 +30,10 @@ import BasicForm from './basic';
import Performance from './performance';
import ScheduleTypeForm from './schedule-type';
const advancedRequiredFields = [
'gpu_selector',
'backend',
'image_name',
'run_command'
];
const advancedRequiredFields = ['backend', 'image_name', 'run_command'];
const scheduleRequiredFields = ['gpu_selector'];
const performanceRequiredFields = ['speculative_config'];
const SegmentedInner = styled(Segmented)`
@@ -281,6 +279,14 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
performanceRequiredFields.includes(name)
);
const isScheduleRequired = names.some((name: string) =>
scheduleRequiredFields.includes(name)
);
if (isScheduleRequired) {
collapseKeys.push('scheduling');
}
if (isPerformanceRequired) {
collapseKeys.push('performance');
}
src/pages/llmodels/forms/speculative-decode.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ const SpeculativeDecode = () => {
const onValuesChangeDebounced = _.debounce(() => {
const allValues = form.getFieldsValue();
onValuesChange?.({}, allValues);
}, 200);
}, 150);
const handleSpeculativeEnabledChange = (e: any) => {
if (e.target.checked) {
@@ -57,8 +57,8 @@ const SpeculativeDecode = () => {
});
} else {
speculativeConfigRef.current = form.getFieldValue('speculative_config');
onValuesChangeDebounced();
}
onValuesChangeDebounced();
};
const handleAlgorithemChange = (value: string) => {
src/pages/llmodels/index.tsx
+24 -29
View File
@@ -3,9 +3,10 @@ import useSetChunkRequest from '@/hooks/use-chunk-request';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { queryWorkersList } from '@/pages/resources/apis';
import { ListItem as WokerListItem } from '@/pages/resources/config/types';
import { useMemoizedFn } from 'ahooks';
import _ from 'lodash';
import qs from 'query-string';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import {
MODELS_API,
MODEL_INSTANCE_API,
@@ -73,7 +74,7 @@ const Models: React.FC = () => {
setDataList: setModelInstances
});
const getAllModelInstances = useCallback(async () => {
const getAllModelInstances = useMemoizedFn(async () => {
try {
instancesToken.current?.cancel?.();
instancesToken.current = createAxiosToken();
@@ -89,9 +90,9 @@ const Models: React.FC = () => {
} catch (error) {
// ignore
}
}, []);
});
const fetchData = useCallback(
const fetchData = useMemoizedFn(
async (params?: {
loadingVal?: boolean;
query?: {
@@ -156,8 +157,7 @@ const Models: React.FC = () => {
});
}
}
},
[queryParams]
}
);
const handleQueryChange = (params: any) => {
@@ -168,14 +168,13 @@ const Models: React.FC = () => {
fetchData({ query: { ...queryParams, ...params } });
};
const handlePageChange = useCallback(
const handlePageChange = useMemoizedFn(
(page: number, pageSize: number | undefined) => {
handleQueryChange({
page: page,
perPage: pageSize || 10
});
},
[queryParams]
}
);
const updateHandler = (list: any) => {
@@ -191,7 +190,7 @@ const Models: React.FC = () => {
});
};
const createModelsChunkRequest = useCallback(
const createModelsChunkRequest = useMemoizedFn(
async (params?: {
search: string;
categories: any[];
@@ -212,11 +211,10 @@ const Models: React.FC = () => {
} catch (error) {
// ignore
}
},
[queryParams.categories, queryParams.search]
}
);
const createModelsInstanceChunkRequest = useCallback(async () => {
const createModelsInstanceChunkRequest = useMemoizedFn(async () => {
chunkInstanceRequedtRef.current?.current?.cancel?.();
try {
chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({
@@ -227,18 +225,18 @@ const Models: React.FC = () => {
} catch (error) {
// ignore
}
}, [updateInstanceHandler]);
});
const handleOnViewLogs = useCallback(() => {
const handleOnViewLogs = useMemoizedFn(() => {
isPageHidden.current = true;
chunkRequedtRef.current?.current?.cancel?.();
cacheDataListRef.current = [];
cacheInsDataListRef.current = [];
chunkInstanceRequedtRef.current?.current?.cancel?.();
instancesToken.current?.cancel?.();
}, []);
});
const handleOnCancelViewLogs = useCallback(async () => {
const handleOnCancelViewLogs = useMemoizedFn(async () => {
isPageHidden.current = false;
await getAllModelInstances();
await createModelsInstanceChunkRequest();
@@ -246,23 +244,20 @@ const Models: React.FC = () => {
fetchData({
loadingVal: false
});
}, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
});
const handleSearchBySilent = useCallback(async () => {
const handleSearchBySilent = useMemoizedFn(async () => {
await new Promise((resolve) => {
setTimeout(resolve, 300);
});
fetchData({
loadingVal: false
});
}, [fetchData]);
});
const handleSearch = useCallback(
async (params?: any) => {
await fetchData(params);
},
[fetchData]
);
const handleSearch = useMemoizedFn(async (params?: any) => {
await fetchData(params);
});
const debounceUpdateFilter = _.debounce((e: any) => {
handleQueryChange({
@@ -276,7 +271,7 @@ const Models: React.FC = () => {
});
}, 350);
const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);
const handleNameChange = useMemoizedFn(debounceUpdateFilter);
const handleCategoryChange = async (value: any) => {
handleQueryChange({
@@ -369,9 +364,9 @@ const Models: React.FC = () => {
};
}, []);
const setDisableExpand = useCallback((record: any) => {
const setDisableExpand = useMemoizedFn((record: any) => {
return !record?.replicas;
}, []);
});
useEffect(() => {
const handleVisibilityChange = async () => {
src/pages/playground/components/ground-reranker.tsx
+5 -7
View File
@@ -259,11 +259,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
);
};
const handleStopConversation = () => {
requestToken.current?.cancel?.();
setLoading(false);
};
const submitMessage = async (query: string) => {
try {
setIsEmptyQuery(!queryValue);
@@ -507,9 +502,12 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
)}
</SearchInputWrapper>
</div>
<div className="center" ref={scroller}>
<div className="center" ref={scroller} style={{ marginTop: 16 }}>
<div className="documents">
<div className="flex-between m-b-8 doc-header">
<div
className="flex-between m-b-8 doc-header"
style={{ marginTop: 0 }}
>
<h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-0">
<span>
{intl.formatMessage({ id: 'playground.embedding.documents' })}