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

fix: update open playground btn

Browse Source
This commit is contained in:
jialin
2026-02-05 11:55:05 +08:00
parent 4e8b5e26ae
commit a1a7979fb3
18 changed files with 302 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/instance-item.tsx
+21 -32
View File
@@ -12,7 +12,6 @@ import { HandlerOptions } from '@/hooks/use-chunk-fetch';
import useDownloadStream from '@/hooks/use-download-stream';
import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import useGranfanaLink from '@/pages/resources/hooks/use-grafana-link';
import { convertFileSize } from '@/utils';
import {
DeleteOutlined,
@@ -330,12 +329,6 @@ const childActionList = [
],
icon: <IconFont type="icon-logs" />
},
{
label: 'resources.metrics.details',
key: 'metrics',
status: [InstanceStatusMap.Running],
icon: <IconFont type="icon-metrics" />
},
{
label: 'common.button.downloadLog',
key: 'download',
@@ -438,7 +431,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
handleChildSelect
}) => {
const systemConfig = useAtomValue(systemConfigAtom);
const { goToGrafana } = useGranfanaLink({ type: 'instance' });
const { runBenchmarkOnInstance } = useBenchmarkTargetInstance();
const [api, contextHolder] = notification.useNotification({
stack: { threshold: 1 }
@@ -456,9 +448,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
if (action.status && action.status.length > 0) {
return action.status.includes(instanceData.state);
}
if (action.key === 'metrics') {
return systemConfig.showMonitoring;
}
return true;
});
}, [instanceData.state, modelData, systemConfig.showMonitoring]);
@@ -668,25 +657,27 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
<InfoColumn fieldList={fieldList} data={offloadData}></InfoColumn>
}
>
<ThemeTag
opacity={0.75}
color="cyan"
style={{
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
minWidth: 50,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
borderRadius: 12
}}
>
<InfoCircleOutlined className="m-r-5" />
{intl.formatMessage({
id: 'models.table.cpuoffload'
})}
</ThemeTag>
<span>
<ThemeTag
opacity={0.75}
color="cyan"
style={{
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
minWidth: 50,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
borderRadius: 12
}}
>
<InfoCircleOutlined className="m-r-5" />
{intl.formatMessage({
id: 'models.table.cpuoffload'
})}
</ThemeTag>
</span>
</Tooltip>
);
}, [
@@ -703,8 +694,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
filename: createFileName(instanceData.name),
downloadNotification
});
} else if (val === 'metrics') {
goToGrafana(instanceData);
} else {
handleChildSelect(val, instanceData);
}
src/pages/llmodels/components/table-list.tsx
+4 -6
View File
@@ -13,11 +13,12 @@ import { PageActionType } from '@/config/types';
import useBodyScroll from '@/hooks/use-body-scroll';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useWatchList from '@/hooks/use-watch-list';
import PageBox from '@/pages/_components/page-box';
import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
import { MODEL_ROUTE_TARGETS } from '@/pages/model-routes/apis';
import { TargetStatusValueMap } from '@/pages/model-routes/config';
import useOpenPlayground from '@/pages/model-routes/hooks/use-open-playground';
import useQueryTargets from '@/pages/model-routes/services/use-query-targets';
import useGranfanaLink from '@/pages/resources/hooks/use-grafana-link';
import { handleBatchRequest } from '@/utils';
import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
@@ -166,11 +167,8 @@ const Models: React.FC<ModelsProps> = ({
useFilterStatus({
onStatusChange: onStatusChange
});
const { fetchData: fetchTargets, dataList: targetList } = useQueryTargets();
const { watchDataList: targetList } = useWatchList(MODEL_ROUTE_TARGETS);
useEffect(() => {
fetchTargets({});
}, []);
const { goToGrafana, ActionButton } = useGranfanaLink({
type: 'model',
dataList: dataSource || []
@@ -554,7 +552,7 @@ const Models: React.FC<ModelsProps> = ({
sortOrder,
targetList: targetList
};
}, [handleSelect, clusterList, sortOrder]);
}, [handleSelect, clusterList, sortOrder, targetList]);
const columns = useModelsColumns(options);
src/pages/llmodels/components/update-modal.tsx
+1
View File
@@ -275,6 +275,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
initialValues={formData}
source={formData.source || ''}
action={action}
realAction={realAction}
clusterList={clusterList}
onOk={handleOk}
ref={formRef}
src/pages/llmodels/config/button-actions.ts
-41
View File
@@ -33,47 +33,6 @@ interface ActionItem {
};
}
export const ActionList: ActionItem[] = [
{
label: 'common.button.edit',
key: 'edit',
icon: icons.EditOutlined
},
{
label: 'models.openinplayground',
key: 'chat',
icon: icons.ExperimentOutlined
},
{
key: 'copy',
label: 'common.button.clone',
icon: icons.CopyOutlined
},
{
label: 'common.button.start',
key: 'start',
icon: icons.Play
},
{
label: 'common.button.stop',
key: 'stop',
icon: icons.Stop
},
{
label: 'resources.metrics.details',
key: 'metrics',
icon: icons.Metrics
},
{
label: 'common.button.delete',
key: 'delete',
props: {
danger: true
},
icon: icons.DeleteOutlined
}
];
export const ButtonList = [
{
label: 'common.button.start',
src/pages/llmodels/config/form-context.ts
+1
View File
@@ -18,6 +18,7 @@ interface FormContextProps {
formKey: DeployFormKey;
source: string;
action: PageActionType;
realAction?: PageActionType;
gpuOptions: CascaderOption[];
workerLabelOptions: CascaderOption[];
backendOptions: {
src/pages/llmodels/forms/advance-config.tsx
+34 -27
View File
@@ -1,6 +1,7 @@
import LabelSelector from '@/components/label-selector';
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
@@ -19,6 +20,8 @@ const AdvanceConfig = () => {
const modelRouteEnable = Form.useWatch('enable_model_route', form);
const {
onValuesChange,
realAction,
action,
backendOptions,
flatBackendOptions,
isGGUF,
@@ -133,33 +136,37 @@ const AdvanceConfig = () => {
})}
></CheckboxField>
</Form.Item>
<Form.Item<FormData>
name="enable_model_route"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField
label={intl.formatMessage({
id: 'models.form.enableModelRoute'
})}
></CheckboxField>
</Form.Item>
{modelRouteEnable && (
<Form.Item<FormData>
name="generic_proxy"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField
description={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
label={intl.formatMessage({
id: 'models.form.generic_proxy'
})}
></CheckboxField>
</Form.Item>
)}
{realAction === PageAction.COPY || action === PageAction.CREATE ? (
<>
<Form.Item<FormData>
name="enable_model_route"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField
label={intl.formatMessage({
id: 'models.form.enableModelRoute'
})}
></CheckboxField>
</Form.Item>
{modelRouteEnable && (
<Form.Item<FormData>
name="generic_proxy"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField
description={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
label={intl.formatMessage({
id: 'models.form.generic_proxy'
})}
></CheckboxField>
</Form.Item>
)}
</>
) : null}
</>
);
};
src/pages/llmodels/forms/index.tsx
+3
View File
@@ -50,6 +50,7 @@ interface DataFormProps {
ref?: any;
source: SourceType;
action: PageActionType;
realAction?: PageActionType;
isGGUF: boolean;
formKey: DeployFormKey;
sourceDisable?: boolean;
@@ -77,6 +78,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
isGGUF,
formKey,
source,
realAction,
initialValues,
sourceDisable = true,
sourceList,
@@ -392,6 +394,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
formKey: formKey,
source: props.source,
action: action,
realAction: realAction,
gpuOptions: gpuOptions,
backendOptions: backendOptions,
flatBackendOptions: flatBackendOptions,
src/pages/llmodels/hooks/index.ts
-6
View File
@@ -271,12 +271,6 @@ export const useCheckCompatibility = () => {
let compatibilityMessage = compatibility_messages.join(' ');
compatibilityMessage = compatibilityMessage.startsWith(
'The model file path you specified does not exist on the GPUStack server'
)
? intl.formatMessage({ id: 'models.form.modelfile.notfound' })
: compatibilityMessage;
let msgData = {
title: scheduling_messages?.length > 0 ? compatibilityMessage : '',
message:
src/pages/llmodels/hooks/use-models-columns.tsx
+57 -1
View File
@@ -2,8 +2,10 @@
import { systemConfigAtom } from '@/atoms/system';
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import icons from '@/components/icon-font/icons';
import { SealColumnProps } from '@/components/seal-table/types';
import { OPENAI_COMPATIBLE, tableSorter } from '@/config/settings';
import GrafanaIcon from '@/pages/_components/grafana-icon';
import { TargetStatusValueMap } from '@/pages/model-routes/config';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -14,9 +16,63 @@ import { useAtomValue } from 'jotai';
import _ from 'lodash';
import { useMemo } from 'react';
import ModelTag from '../../_components/model-tag';
import { ActionList, generateSource } from '../config/button-actions';
import { generateSource } from '../config/button-actions';
import { ListItem } from '../config/types';
interface ActionItem {
label: string;
key: string;
icon: React.ReactNode;
props?: {
danger?: boolean;
};
}
const ActionList: ActionItem[] = [
{
label: 'common.button.edit',
key: 'edit',
icon: icons.EditOutlined
},
{
label: 'models.openinplayground',
key: 'chat',
icon: icons.ExperimentOutlined
},
{
label: 'common.button.start',
key: 'start',
icon: icons.Play
},
{
label: 'common.button.stop',
key: 'stop',
icon: icons.Stop
},
{
label: 'resources.metrics.details',
key: 'metrics',
icon: (
<span className="flex-center">
<GrafanaIcon style={{ width: 14, height: 14 }}></GrafanaIcon>
</span>
)
},
{
key: 'copy',
label: 'common.button.clone',
icon: icons.CopyOutlined
},
{
label: 'common.button.delete',
key: 'delete',
props: {
danger: true
},
icon: icons.DeleteOutlined
}
];
interface ModelsColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: string[];