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

style: allowed models ux

Browse Source
This commit is contained in:
jialin
2025-10-13 15:21:17 +08:00
parent 1fa2124efd
commit 663b6c7b4e
16 changed files with 218 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+1 -2
View File
@@ -70,7 +70,6 @@ export default [
name: 'models',
path: '/models',
key: 'models',
access: 'canSeeAdmin',
routes: [
{
path: '/models',
@@ -103,7 +102,7 @@ export default [
icon: 'icon-models',
selectedIcon: 'icon-models-filled',
defaultIcon: 'icon-models',
access: 'canSeeAdmin',
access: 'canSeeUser',
component: './llmodels/user-models'
},
{
src/access.ts
+7
View File
@@ -4,8 +4,15 @@ export default (initialState: { currentUser?: Global.UserInfo }) => {
initialState.currentUser &&
initialState.currentUser.is_admin
);
const canSeeUser = !!(
initialState &&
initialState.currentUser &&
!initialState.currentUser.is_admin
);
return {
canSeeAdmin,
canSeeUser,
canDelete: true,
canLogin: true
};
src/locales/en-US/apikeys.ts
+2 -1
View File
@@ -11,5 +11,6 @@ export default {
'apikeys.form.expiration.7days': '7 days',
'apikeys.form.expiration.1month': '1 month',
'apikeys.form.expiration.6months': '6 months',
'apikeys.form.expiration.never': 'No expiration'
'apikeys.form.expiration.never': 'No expiration',
'apikeys.table.bindModels': 'Allowed Models'
};
src/locales/ja-JP/apikeys.ts
+2 -1
View File
@@ -11,5 +11,6 @@ export default {
'apikeys.form.expiration.7days': '7日間',
'apikeys.form.expiration.1month': '1ヶ月',
'apikeys.form.expiration.6months': '6ヶ月',
'apikeys.form.expiration.never': '無期限'
'apikeys.form.expiration.never': '無期限',
'apikeys.table.bindModels': '許可されたモデル'
};
src/locales/ru-RU/apikeys.ts
+2 -1
View File
@@ -11,5 +11,6 @@ export default {
'apikeys.form.expiration.7days': '7 дней',
'apikeys.form.expiration.1month': '1 месяц',
'apikeys.form.expiration.6months': '6 месяцев',
'apikeys.form.expiration.never': 'Без срока действия'
'apikeys.form.expiration.never': 'Без срока действия',
'apikeys.table.bindModels': 'Разрешенные модели'
};
src/locales/zh-CN/apikeys.ts
+2 -1
View File
@@ -10,5 +10,6 @@ export default {
'apikeys.form.expiration.7days': '7天',
'apikeys.form.expiration.1month': '1个月',
'apikeys.form.expiration.6months': '6个月',
'apikeys.form.expiration.never': '永不过期'
'apikeys.form.expiration.never': '永不过期',
'apikeys.table.bindModels': '绑定模型'
};
src/pages/_components/transfer.tsx
+44 -3
View File
@@ -1,12 +1,18 @@
import { Transfer, TransferProps } from 'antd';
import { MoreOutlined } from '@ant-design/icons';
import { Pagination, Transfer, TransferProps } from 'antd';
import { useState } from 'react';
import styled from 'styled-components';
type TransferKey = string | number | bigint;
const PaginationWrapper = styled.div`
padding: 4px 16px;
`;
const TransferWrap = styled.div`
.ant-transfer-list {
width: 100%;
height: 300px;
height: 360px;
}
.ant-transfer-list-content {
.ant-transfer-list-content-item {
@@ -27,13 +33,48 @@ const TransferWrap = styled.div`
`;
interface TransferInnerProps extends TransferProps {
total?: number;
perPage?: number;
onPageChange?: (page: number, perPage?: number) => void;
dataSource?: Array<{ key: TransferKey; title: string }>;
targetKeys?: TransferKey[];
}
const TransferInner: React.FC<TransferInnerProps> = (props) => {
const [page, setPage] = useState(1);
const { onPageChange, total, perPage = 30 } = props;
const handleOnPageChange = (page: number, perPage?: number) => {
setPage(page);
onPageChange?.(page, perPage);
};
const renderFooter = (TransferProps: any, { direction }: any) => {
if (direction === 'left' && total && total > perPage!) {
return (
<PaginationWrapper>
<Pagination
simple={{ readOnly: true }}
size="small"
total={total}
onChange={handleOnPageChange}
pageSize={perPage}
current={page}
showSizeChanger={false}
/>
</PaginationWrapper>
);
}
return null;
};
return (
<TransferWrap>
<Transfer {...props}></Transfer>
<Transfer
{...props}
selectionsIcon={
<MoreOutlined style={{ fontSize: 14, marginBottom: 3 }} />
}
></Transfer>
</TransferWrap>
);
};
src/pages/api-keys/apis/index.ts
+7
View File
@@ -17,6 +17,13 @@ export async function createApisKey(params: { data: FormData }) {
});
}
export async function updateApisKey(id: number, params: { data: FormData }) {
return request<ListItem>(`${APIS_KEYS_API}/${id}`, {
method: 'PUT',
data: params.data
});
}
export async function deleteApisKey(id: number) {
return request(`${APIS_KEYS_API}/${id}`, {
method: 'DELETE'
src/pages/api-keys/components/add-apikey-modal/allow-models.tsx
+3 -1
View File
@@ -39,7 +39,9 @@ const AllowModelsForm: React.FC = () => {
}}
render={(item) => item.title}
titles={['Available Models', 'Allowed Models']}
showSearch
showSearch={{
placeholder: 'Filter by model name'
}}
filterOption={(inputValue, item) =>
item.title.toLowerCase().includes(inputValue.toLowerCase())
}
src/pages/api-keys/components/add-apikey-modal/form.tsx
+67
View File
@@ -0,0 +1,67 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { expirationOptions } from '../../config';
import { FormData } from '../../config/types';
import AllowModelsForm from './allow-models';
const APIKeyForm: React.FC = () => {
const intl = useIntl();
return (
<>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({ id: 'common.table.name' })
}
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="expires_in"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.select' },
{
name: intl.formatMessage({
id: 'apikeys.form.expiretime'
})
}
)
}
]}
>
<SealSelect
options={expirationOptions}
label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
required
></SealSelect>
</Form.Item>
<AllowModelsForm></AllowModelsForm>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
</Form.Item>
</>
);
};
export default APIKeyForm;
src/pages/api-keys/components/add-apikey-modal/index.tsx
+33 -64
View File
@@ -2,17 +2,17 @@ import CopyButton from '@/components/copy-button';
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
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 { useIntl } from '@umijs/max';
import { Button, Form, Tag } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { createApisKey } from '../../apis';
import { createApisKey, updateApisKey } from '../../apis';
import { expirationOptions } from '../../config';
import { FormData, ListItem } from '../../config/types';
import AllowModelsForm from './allow-models';
import APIKeyForm from './form';
type AddModalProps = {
title: string;
@@ -43,6 +43,13 @@ const AddModal: React.FC<AddModalProps> = ({
expires_in: 1
});
}
if (action === PageAction.EDIT && currentData && open) {
form.setFieldsValue({
name: currentData.name,
description: currentData.description,
allowed_model_names: currentData.allowed_model_names || []
});
}
};
useEffect(() => {
@@ -67,16 +74,29 @@ const AddModal: React.FC<AddModalProps> = ({
return res;
};
const createAPIKey = async (data: FormData) => {
const params = {
...data,
expires_in: getExpireValue(data.expires_in)
};
const res = await createApisKey({ data: params });
setAPIKeyValue(res.value);
setShowKey(true);
};
const updateAPIKey = async (data: FormData) => {
await updateApisKey(currentData?.id as number, { data });
onOk();
};
const handleOnOk = async (data: FormData) => {
try {
setLoading(true);
const params = {
...data,
expires_in: getExpireValue(data.expires_in)
};
const res = await createApisKey({ data: params });
setAPIKeyValue(res.value);
setShowKey(true);
if (action === PageAction.CREATE) {
await createAPIKey(data);
} else if (action === PageAction.EDIT && currentData?.id) {
await updateAPIKey(data);
}
setLoading(false);
} catch (error) {
setLoading(false);
@@ -109,7 +129,7 @@ const AddModal: React.FC<AddModalProps> = ({
closeIcon={false}
maskClosable={false}
keyboard={false}
width={600}
width={700}
styles={{}}
footer={
!showKey ? (
@@ -126,60 +146,9 @@ const AddModal: React.FC<AddModalProps> = ({
}
>
<Form name="addAPIKey" form={form} onFinish={handleOnOk} preserve={false}>
{!showKey ? (
<>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({ id: 'common.table.name' })
}
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="expires_in"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.select' },
{
name: intl.formatMessage({
id: 'apikeys.form.expiretime'
})
}
)
}
]}
>
<SealSelect
options={expirationOptions}
label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
required
></SealSelect>
</Form.Item>
<AllowModelsForm></AllowModelsForm>
<Form.Item<FormData>
name="description"
rules={[{ required: false }]}
>
<SealInput.TextArea
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
</Form.Item>
</>
) : (
{action === PageAction.EDIT && <AllowModelsForm></AllowModelsForm>}
{!showKey && action === PageAction.CREATE && <APIKeyForm></APIKeyForm>}
{showKey && action === PageAction.CREATE && (
<Form.Item>
<div>
<Tag
src/pages/api-keys/config/types.ts
+1
View File
@@ -6,6 +6,7 @@ export interface ListItem {
created_at: string;
updated_at: string;
expires_at: string;
allowed_model_names: string[];
}
export interface FormData {
src/pages/api-keys/hooks/use-keys-columns.tsx
+12 -1
View File
@@ -16,7 +16,7 @@ interface ColumnsHookProps {
const actionList: Global.ActionItem[] = [
{
label: 'common.button.edit',
label: 'Edit Allowed Models',
key: 'edit',
icon: icons.EditOutlined
},
@@ -60,6 +60,17 @@ const useModelsColumns = ({
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'apikeys.table.bindModels' }),
dataIndex: 'allowed_model_names',
key: 'allowed_model_names',
ellipsis: {
showTitle: false
},
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text?.join(', ')}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.description' }),
dataIndex: 'description',
src/pages/api-keys/index.tsx
+1 -2
View File
@@ -58,7 +58,7 @@ const APIKeys: React.FC = () => {
const handleEditKey = (record: ListItem) => {
setOpenAddModal({
open: true,
title: 'Edit API Key',
title: 'Edit Allowed Models',
action: PageAction.EDIT,
currentData: record
});
@@ -79,7 +79,6 @@ const APIKeys: React.FC = () => {
};
const handleModalCancel = () => {
console.log('handleModalCancel');
setOpenAddModal({
open: false,
title: '',
src/pages/llmodels/components/access-control-modal/form.tsx
+33 -24
View File
@@ -1,4 +1,3 @@
import IconFont from '@/components/icon-font';
import CheckboxField from '@/components/seal-form/checkbox-field';
import TransferInner from '@/pages/_components/transfer';
import { queryUsersList } from '@/pages/users/apis';
@@ -33,7 +32,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
);
const [queryParams, setQueryParams] = useState<Global.SearchParams>({
page: 1,
perPage: 30
perPage: 100
});
const getUserList = async (query: Global.SearchParams) => {
@@ -62,6 +61,10 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
form.setFieldsValue({ users });
};
const onSearch = (dir: 'left' | 'right', value: string) => {
console.log('search:', dir, value);
};
useImperativeHandle(ref, () => ({
submit: () => {
form.submit();
@@ -116,28 +119,34 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
></CheckboxField>
</Form.Item>
{setPublic && (
<Form.Item<AccessControlFormData>
name="users"
rules={[
{
required: true,
message: 'Please select at least one user'
}
]}
>
<TransferInner
dataSource={userList}
targetKeys={targetKeys}
showSelectAll
showSearch
pagination={totalPages > 1}
titles={['Available Users', 'Users with Access']}
render={(item) => item.title}
selectAllLabels={[]}
selectionsIcon={<IconFont type="icon-down"></IconFont>}
onChange={handleOnChange}
/>
</Form.Item>
<>
<Label>User Select</Label>
<Form.Item<AccessControlFormData>
name="users"
rules={[
{
required: true,
message: 'Please select at least one user'
}
]}
>
<TransferInner
total={100}
dataSource={userList}
targetKeys={targetKeys}
showSelectAll
pagination={false}
titles={['Available Users', 'Users with Access']}
showSearch={{
placeholder: 'Filter by username'
}}
render={(item) => item.title}
selectAllLabels={[]}
onSearch={onSearch}
onChange={handleOnChange}
/>
</Form.Item>
</>
)}
</Form>
);
src/pages/llmodels/components/access-control-modal/index.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const AccessControlModal: React.FC<
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
width={700}
footer={
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}