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

chore: user apikeys

Browse Source
This commit is contained in:
jialin
2024-06-23 15:15:12 +08:00
parent a03a95a3bc
commit ff1cf01edf
24 changed files with 481 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/proxy.ts
+1 -1
View File
@@ -1,4 +1,4 @@
const proxyTableList = ['cli', 'v1'];
const proxyTableList = ['cli', 'v1', 'auth'];
// @ts-ingore
export default function createProxyTable(target?: string) {
config/routes.ts
+2 -1
View File
@@ -4,7 +4,8 @@ export default [
key: 'dashboard',
layout: false,
icon: 'home',
redirect: '/dashboard'
redirect: '/dashboard',
access: 'canLogin'
},
{
name: 'Dashboard',
package.json
+1
View File
@@ -26,6 +26,7 @@
"dayjs": "^1.11.11",
"lodash": "^4.17.21",
"numeral": "^2.0.6",
"query-string": "^9.0.0",
"umi-presets-pro": "^2.0.3"
},
"devDependencies": {
pnpm-lock.yaml
Generated
+35 -32
View File
@@ -50,6 +50,9 @@ dependencies:
numeral:
specifier: ^2.0.6
version: 2.0.6
query-string:
specifier: ^9.0.0
version: 9.0.0
umi-presets-pro:
specifier: ^2.0.3
version: 2.0.3(@babel/core@7.24.5)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.17.0)(dva@2.5.0-beta.2)(rc-field-form@1.44.0)(react-dom@18.3.1)(react@18.3.1)(umi@4.2.1)
@@ -4246,7 +4249,7 @@ packages:
dependencies:
'@babel/core': 7.24.5
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
transitivePeerDependencies:
- supports-color
dev: false
@@ -4273,7 +4276,7 @@ packages:
postcss-syntax: '>=0.36.2'
dependencies:
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
remark: 13.0.0
unist-util-find-all-after: 3.0.2
transitivePeerDependencies:
@@ -7852,10 +7855,15 @@ packages:
dev: false
/decode-uri-component@0.2.2:
resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==, tarball: https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz}
engines: {node: '>=0.10'}
dev: false
/decode-uri-component@0.4.1:
resolution: {integrity: sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==, tarball: https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz}
engines: {node: '>=14.16'}
dev: false
/deep-equal@1.1.2:
resolution: {integrity: sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==}
engines: {node: '>= 0.4'}
@@ -9361,10 +9369,15 @@ packages:
to-regex-range: 5.0.1
/filter-obj@1.1.0:
resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==, tarball: https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz}
engines: {node: '>=0.10.0'}
dev: false
/filter-obj@5.1.0:
resolution: {integrity: sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==, tarball: https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz}
engines: {node: '>=14.16'}
dev: false
/finalhandler@1.2.0:
resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
engines: {node: '>= 0.8'}
@@ -12380,7 +12393,7 @@ packages:
dependencies:
htmlparser2: 3.10.1
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
dev: false
/postcss-image-set-function@4.0.7(postcss@8.4.38):
@@ -12670,30 +12683,6 @@ packages:
lodash: 4.17.21
postcss: 8.4.38
/postcss-syntax@0.36.2(postcss@7.0.39):
resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
peerDependencies:
postcss: '>=5.0.0'
postcss-html: '*'
postcss-jsx: '*'
postcss-less: '*'
postcss-markdown: '*'
postcss-scss: '*'
peerDependenciesMeta:
postcss-html:
optional: true
postcss-jsx:
optional: true
postcss-less:
optional: true
postcss-markdown:
optional: true
postcss-scss:
optional: true
dependencies:
postcss: 7.0.39
dev: false
/postcss-syntax@0.36.2(postcss@8.4.38):
resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
peerDependencies:
@@ -12955,7 +12944,7 @@ packages:
dev: false
/query-string@6.14.1:
resolution: {integrity: sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==}
resolution: {integrity: sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==, tarball: https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz}
engines: {node: '>=6'}
dependencies:
decode-uri-component: 0.2.2
@@ -12964,6 +12953,15 @@ packages:
strict-uri-encode: 2.0.0
dev: false
/query-string@9.0.0:
resolution: {integrity: sha512-4EWwcRGsO2H+yzq6ddHcVqkCQ2EFUSfDMEjF8ryp8ReymyZhIuaFRGLomeOQLkrzacMHoyky2HW0Qe30UbzkKw==, tarball: https://registry.npmjs.org/query-string/-/query-string-9.0.0.tgz}
engines: {node: '>=18'}
dependencies:
decode-uri-component: 0.4.1
filter-obj: 5.1.0
split-on-first: 3.0.0
dev: false
/querystring-es3@0.2.1:
resolution: {integrity: sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==}
engines: {node: '>=0.4.x'}
@@ -15408,10 +15406,15 @@ packages:
dev: false
/split-on-first@1.1.0:
resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==, tarball: https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz}
engines: {node: '>=6'}
dev: false
/split-on-first@3.0.0:
resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==, tarball: https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz}
engines: {node: '>=12'}
dev: false
/split2@4.2.0:
resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
engines: {node: '>= 10.x'}
@@ -15756,7 +15759,7 @@ packages:
postcss-sass: 0.4.4
postcss-scss: 2.1.1
postcss-selector-parser: 6.0.16
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
postcss-value-parser: 4.2.0
resolve-from: 5.0.0
slash: 3.0.0
src/access.ts
+2 -1
View File
@@ -6,6 +6,7 @@ export default (initialState: API.UserInfo) => {
);
return {
canSeeAdmin,
canDelete: true
canDelete: true,
canLogin: true
};
};
src/app.tsx
+8 -10
View File
@@ -23,17 +23,15 @@ export async function getInitialState() {
return undefined;
};
// if (![loginPath].includes(location.pathname)) {
// const currentUser = await fetchUserInfo();
// return {
// fetchUserInfo,
// name: 'admin',
// ...currentUser
// };
// }
if (![loginPath].includes(location.pathname)) {
const userInfo = await fetchUserInfo();
return {
fetchUserInfo,
currentUser: userInfo
};
}
return {
fetchUserInfo,
name: 'admin'
fetchUserInfo
};
}
src/assets/styles/common.less
+4
View File
@@ -6,6 +6,10 @@
margin-left: 10px;
}
.m-l-5 {
margin-left: 5px;
}
.flex {
display: flex;
}
src/layouts/index.tsx
+12 -10
View File
@@ -1,5 +1,6 @@
// @ts-nocheck
import { logout } from '@/pages/login/apis';
import { useAccessMarkedRoutes } from '@@/plugin-access';
import { useModel } from '@@/plugin-model';
import { ProLayout } from '@ant-design/pro-components';
@@ -106,18 +107,19 @@ export default (props: any) => {
// });
const runtimeConfig = {
...initialInfo,
logout: () => {
console.log('logout');
logout: async (userInfo) => {
console.log('logout', userInfo);
await logout();
navigate(loginPath);
},
notFound: <div>not found</div>
notFound: <span>404 not found</span>
};
console.log(
'clientRoute==========2=',
console.log('clientRoute==========2=', {
props,
clientRoutes,
runtimeConfig,
initialInfo
);
});
// 现在的 layout 及 wrapper 实现是通过父路由的形式实现的, 会导致路由数据多了冗余层级, proLayout 消费时, 无法正确展示菜单, 这里对冗余数据进行过滤操作
const newRoutes = filterRoutes(
@@ -153,12 +155,12 @@ export default (props: any) => {
navigate('/');
}}
onPageChange={(route) => {
console.log('onRouteChange', route);
console.log('onRouteChange', initialState, route);
const { location } = history;
// 如果没有登录，重定向到 login
// if (!initialState?.currentUser && location.pathname !== loginPath) {
// history.push(loginPath);
// }
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
}}
formatMessage={userConfig.formatMessage || formatMessage}
menu={{ locale: userConfig.locale }}
src/layouts/rightRender.tsx
+23 -25
View File
@@ -4,10 +4,9 @@ import avatarImg from '@/assets/images/avatar.png';
import {
GlobalOutlined,
LogoutOutlined,
SettingOutlined,
SunOutlined
SettingOutlined
} from '@ant-design/icons';
import { useNavigate } from '@umijs/max';
import { history } from '@umijs/max';
import { Avatar, Dropdown, Menu, Spin, version } from 'antd';
export function getRightRenderContent(opts: {
@@ -26,10 +25,10 @@ export function getRightRenderContent(opts: {
}
const showAvatar =
opts.initialState?.avatar ||
opts.initialState?.name ||
opts.initialState?.currentUser?.avatar ||
opts.initialState?.currentUser?.username ||
opts.runtimeConfig.logout;
const disableAvatarImg = opts.initialState?.avatar === false;
const disableAvatarImg = opts.initialState?.currentUser?.avatar === false;
const nameClassName = disableAvatarImg
? 'umi-plugin-layout-name umi-plugin-layout-hide-avatar-img'
: 'umi-plugin-layout-name';
@@ -39,11 +38,13 @@ export function getRightRenderContent(opts: {
<Avatar
size="small"
className="umi-plugin-layout-avatar"
src={opts.initialState?.avatar || avatarImg}
src={opts.initialState?.currentUser?.avatar || avatarImg}
alt="avatar"
/>
) : null}
<span className={nameClassName}>{opts.initialState?.name}</span>
<span className={nameClassName}>
{opts.initialState?.currentUser?.username}
</span>
</span>
) : null;
@@ -58,8 +59,6 @@ export function getRightRenderContent(opts: {
// 如果没有打开Locale，并且头像为空就取消掉这个返回的内容
if (!avatar) return null;
const navigate = useNavigate();
const langMenu = {
className: 'umi-plugin-layout-menu',
selectedKeys: [],
@@ -73,21 +72,21 @@ export function getRightRenderContent(opts: {
</>
),
onClick: () => {
navigate('/profile');
}
},
{
key: 'theme',
label: (
<>
<SunOutlined />
外观
</>
),
onClick: () => {
console.log('theme');
history.push('/profile');
}
},
// {
// key: 'theme',
// label: (
// <>
// <SunOutlined />
// 外观
// </>
// ),
// onClick: () => {
// console.log('theme');
// }
// },
{
key: 'lang',
label: (
@@ -109,14 +108,13 @@ export function getRightRenderContent(opts: {
</>
),
onClick: () => {
opts?.runtimeConfig?.logout?.(opts.initialState);
opts?.runtimeConfig?.logout?.(opts.initialState.currentUser);
}
}
]
};
// antd@5 和 4.24 之后推荐使用 menu，性能更好
console.log('version+++++++++=', opts.runtimeConfig, version);
let dropdownProps;
if (version.startsWith('5.') || version.startsWith('4.24.')) {
dropdownProps = { menu: langMenu };
src/models/global.ts
+6 -6
View File
@@ -1,13 +1,13 @@
// 全局共享数据示例
import { DEFAULT_NAME } from '@/constants';
// import { DEFAULT_NAME } from '@/constants';
import { useState } from 'react';
const useUser = () => {
const [name, setName] = useState<string>(DEFAULT_NAME);
const useGlobalState = () => {
const [globalState, setGlobalState] = useState<any>({});
return {
name,
setName,
globalState,
setGlobalState
};
};
export default useUser;
export default useGlobalState;
src/pages/api-keys/apis/index.ts
+26
View File
@@ -0,0 +1,26 @@
import { request } from '@umijs/max';
import { FormData, ListItem } from '../config/types';
export const APIS_KEYS_API = '/api_keys';
export async function queryApisKeysList(
params: Global.Pagination & { query?: string }
) {
return request<Global.PageResponse<ListItem>>(`${APIS_KEYS_API}`, {
method: 'GET',
params
});
}
export async function createApisKey(params: { data: FormData }) {
return request<ListItem>(`${APIS_KEYS_API}`, {
method: 'POST',
data: params.data
});
}
export async function deleteApisKey(id: number) {
return request(`${APIS_KEYS_API}/${id}`, {
method: 'DELETE'
});
}
src/pages/api-keys/components/add-apikey.tsx
+18 -21
View File
@@ -1,24 +1,20 @@
import CopyButton from '@/components/copy-button';
import ModalFooter from '@/components/modal-footer';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageActionType } from '@/config/types';
import { SyncOutlined } from '@ant-design/icons';
import { Form, Modal } from 'antd';
import { expirationOptions } from '../config';
import { FormData } from '../config/types';
type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
onOk: () => void;
onOk: (values: FormData) => void;
onCancel: () => void;
};
const expirationOptions = [
{ label: '1 Month', value: '1m' },
{ label: '6 Months', value: '6m' },
{ label: 'Never', value: 'never' }
];
const AddModal: React.FC<AddModalProps> = ({
title,
action,
@@ -36,11 +32,15 @@ const AddModal: React.FC<AddModalProps> = ({
/>
);
const handleSumit = () => {
form.submit();
};
return (
<Modal
title={title}
open={open}
onOk={onOk}
onOk={handleSumit}
onCancel={onCancel}
destroyOnClose={true}
closeIcon={false}
@@ -48,27 +48,24 @@ const AddModal: React.FC<AddModalProps> = ({
keyboard={false}
width={600}
styles={{}}
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
footer={
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
>
<Form name="addAPIKey" form={form} onFinish={onOk}>
<Form.Item name="name" rules={[{ required: true }]}>
<SealInput.Input label="Display Name" required></SealInput.Input>
<Form name="addAPIKey" form={form} onFinish={onOk} preserve={false}>
<Form.Item<FormData> name="name" rules={[{ required: true }]}>
<SealInput.Input label="Name" required></SealInput.Input>
</Form.Item>
<Form.Item name="secretkey" rules={[{ required: true }]}>
<SealInput.Input
label="Secret Key"
addonAfter={
<CopyButton text={form.getFieldValue('secretKey')}></CopyButton>
}
></SealInput.Input>
</Form.Item>
<Form.Item name="expiration" rules={[{ required: true }]}>
<Form.Item<FormData> name="expires_in" rules={[{ required: true }]}>
<SealSelect
label="Expiration"
required
options={expirationOptions}
></SealSelect>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea label="Description"></SealInput.TextArea>
</Form.Item>
</Form>
</Modal>
);
src/pages/api-keys/config/index.ts
+7
View File
@@ -0,0 +1,7 @@
export const expirationOptions = [
{ label: '7 days', type: 'day', value: 7 },
{ label: '1 month', type: 'month', value: 1 },
{ label: '6 months', type: 'month', value: 6 },
// { label: '1 year', type: 'year', value: 1 },
{ label: 'never', type: 'never', value: -1 }
];
src/pages/api-keys/config/types.ts
+15
View File
@@ -0,0 +1,15 @@
export interface ListItem {
name: string;
description: string;
id: number;
value: string;
created_at: string;
updated_at: string;
expires_at: string;
}
export interface FormData {
name: string;
description: string;
expires_in: number | null;
}
src/pages/api-keys/index.tsx
+159 -42
View File
@@ -1,21 +1,33 @@
import CopyButton from '@/components/copy-button';
import PageTools from '@/components/page-tools';
import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import {
DeleteOutlined,
EditOutlined,
PlusOutlined,
SyncOutlined
} from '@ant-design/icons';
import { handleBatchRequest } from '@/utils';
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
import { useState } from 'react';
import {
Button,
Input,
Modal,
Space,
Table,
Tag,
Tooltip,
message
} from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { createApisKey, deleteApisKey, queryApisKeysList } from './apis';
import AddAPIKeyModal from './components/add-apikey';
import { expirationOptions } from './config';
import { FormData, ListItem } from './config/types';
const { Column } = Table;
const dataSource = [
const list = [
{
key: '1',
name: 'local',
@@ -51,22 +63,32 @@ const Models: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [dataSource, setDataSource] = useState([]);
const [total, setTotal] = useState(0);
const [openAddModal, setOpenAddModal] = useState(false);
const [loading, setLoading] = useState(false);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
const [title, setTitle] = useState<string>('');
const [queryParams, setQueryParams] = useState({
current: 1,
pageSize: 10,
name: ''
page: 1,
perPage: 10,
query: ''
});
const handleShowSizeChange = (current: number, size: number) => {
console.log(current, size);
const handleShowSizeChange = (page: number, size: number) => {
console.log(page, size);
setQueryParams({
...queryParams,
perPage: size
});
};
const handlePageChange = (page: number, pageSize: number | undefined) => {
console.log(page, pageSize);
setQueryParams({
...queryParams,
page: page
});
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
@@ -74,8 +96,40 @@ const Models: React.FC = () => {
setSortOrder(sorter.order);
};
const getExpireValue = (val: number | null) => {
const expires_in = val;
if (expires_in === -1) {
return 0;
}
const selected = expirationOptions.find(
(item) => expires_in === item.value
);
const d1 = dayjs().add(
selected?.value as number,
`${selected?.type}` as never
);
const d2 = dayjs();
const res = d1.diff(d2, 'second');
return res;
};
const fetchData = async () => {
console.log('fetchData');
setLoading(true);
try {
const params = {
..._.pickBy(queryParams, (val: any) => !!val)
};
const res = await queryApisKeysList(params);
console.log('res=======', res);
setDataSource(res.items || []);
setTotal(res.pagination.total);
} catch (error) {
console.log('error', error);
setDataSource([]);
} finally {
setLoading(false);
}
};
const handleSearch = (e: any) => {
fetchData();
@@ -84,7 +138,7 @@ const Models: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
name: e.target.value
query: e.target.value
});
};
@@ -94,13 +148,22 @@ const Models: React.FC = () => {
setTitle('Add API Key');
};
const handleClickMenu = (e: any) => {
console.log('click', e);
};
const handleModalOk = () => {
const handleModalOk = async (data: FormData) => {
console.log('handleModalOk');
setOpenAddModal(false);
try {
const params = {
...data,
expires_in: getExpireValue(data.expires_in)
};
const res = await createApisKey({ data: params });
setOpenAddModal(false);
message.success('successfully!');
setDataSource([res, ...dataSource]);
setTotal(total + 1);
} catch (error) {
setOpenAddModal(false);
}
};
const handleModalCancel = () => {
@@ -108,13 +171,30 @@ const Models: React.FC = () => {
setOpenAddModal(false);
};
const handleDelete = () => {
const handleDelete = (row: ListItem) => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected keys?',
onOk() {
async onOk() {
console.log('OK');
await deleteApisKey(row.id);
message.success('successfully!');
fetchData();
},
onCancel() {
console.log('Cancel');
}
});
};
const handleDeleteBatch = () => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected keys?',
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
message.success('successfully!');
fetchData();
},
onCancel() {
console.log('Cancel');
@@ -127,6 +207,34 @@ const Models: React.FC = () => {
setAction(PageAction.EDIT);
setTitle('Edit User');
};
const renderSecrectKey = (text: string, record: ListItem) => {
const { value } = record;
return (
<Space direction="vertical">
<span>{text}</span>
{value && (
<span>
<Tag color="error" style={{ padding: '10px 12px' }}>
确保立即复制您的个人访问密钥。您将无法再次看到它！
</Tag>
<span className="flex-center">
<Tooltip
title={value}
>{`${value?.slice(0, 8)}...${value?.slice(-8, -1)}`}</Tooltip>
<CopyButton text={value}></CopyButton>
</span>
</span>
)}
</Space>
);
};
useEffect(() => {
fetchData();
}, [queryParams]);
return (
<>
<PageContainer
@@ -165,7 +273,7 @@ const Models: React.FC = () => {
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDelete}
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
Delete
@@ -177,49 +285,58 @@ const Models: React.FC = () => {
dataSource={dataSource}
rowSelection={rowSelection}
loading={loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: 10,
current: 2,
pageSize: queryParams.perPage,
current: queryParams.page,
total: total,
hideOnSinglePage: true,
onShowSizeChange: handleShowSizeChange,
onChange: handlePageChange
}}
>
<Column title="Name" dataIndex="name" key="name" width={400} />
<Column title="Secret Key" dataIndex="secretKey" key="secretKey" />
<Column
title="Name"
dataIndex="name"
key="name"
width={400}
ellipsis={{
showTitle: false
}}
render={renderSecrectKey}
/>
<Column
title="Create Time"
dataIndex="createTime"
dataIndex="created_at"
key="createTime"
defaultSortOrder="descend"
sortOrder={sortOrder}
showSorterTooltip={false}
sorter={true}
render={(text, record) => {
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
}}
/>
<Column
title="Last Used"
dataIndex="lastusedTime"
key="lastusedTime"
title="Expiration"
dataIndex="expires_at"
key="expiration"
render={(text, record) => {
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
render={(text, record: ListItem) => {
return (
<Space size={20}>
<Tooltip title="编辑">
<Button
size="small"
type="primary"
onClick={handleEditUser}
icon={<EditOutlined></EditOutlined>}
></Button>
</Tooltip>
<Tooltip title="删除">
<Button
onClick={() => handleDelete(record)}
size="small"
type="primary"
danger
src/pages/llmodels/index.tsx
+4 -2
View File
@@ -11,6 +11,7 @@ import useSetChunkRequest, {
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { handleBatchRequest } from '@/utils';
import {
DeleteOutlined,
FieldTimeOutlined,
@@ -217,9 +218,10 @@ const Models: React.FC = () => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected models?',
onOk() {
console.log('OK');
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
message.success('successfully!');
fetchData();
},
onCancel() {
console.log('Cancel');
src/pages/login/apis/index.ts
+29
View File
@@ -0,0 +1,29 @@
import { request } from '@umijs/max';
import qs from 'query-string';
export const AUTH_API = '/auth';
export const login = async (
params: { username: string; password: string },
options?: any
) => {
return request(`${AUTH_API}/login`, {
method: 'POST',
data: qs.stringify(params),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
};
export const logout = async (userInfo: any) => {
return request(`${AUTH_API}/logout`, {
method: 'POST'
});
};
export const accessToken = async () => {
return request(`${AUTH_API}/token`, {
method: 'POST'
});
};
src/pages/login/index.tsx
+40 -2
View File
@@ -1,7 +1,10 @@
import LogoIcon from '@/assets/images/logo.png';
import SealInput from '@/components/seal-form/seal-input';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { history, useModel } from '@umijs/max';
import { Button, Checkbox, Form } from 'antd';
import { flushSync } from 'react-dom';
import { login } from './apis';
const renderLogo = () => {
return (
@@ -20,8 +23,43 @@ const renderLogo = () => {
);
};
const Login = () => {
const { initialState, setInitialState } = useModel('@@initialState');
const [form] = Form.useForm();
const fetchUserInfo = async () => {
const userInfo = await initialState?.fetchUserInfo?.();
if (userInfo) {
flushSync(() => {
setInitialState((s: any) => ({
...s,
currentUser: userInfo
}));
});
}
};
const handleLogin = async (values: any) => {
console.log('values', values, form);
try {
await login({
username: values.username,
password: values.password
});
await fetchUserInfo();
history.push('/');
} catch (error) {
console.log('error====', error);
}
};
return (
<Form style={{ width: '400px', margin: '5% auto 0' }}>
<Form
form={form}
style={{ width: '400px', margin: '5% auto 0' }}
onFinish={handleLogin}
>
<div>{renderLogo()}</div>
<Form.Item
name="username"
@@ -48,7 +86,7 @@ const Login = () => {
</Form.Item>
<Form.Item name="autoLogin">
<div style={{ paddingLeft: 10 }}>
<Checkbox>Auto login</Checkbox>
<Checkbox>Remember me</Checkbox>
</div>
</Form.Item>
<Button htmlType="submit" type="primary" block>
src/pages/users/apis/index.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { request } from '@umijs/max';
import { ListItem } from '../config/types';
import { FormData, ListItem } from '../config/types';
export const USERS_API = '/users';
@@ -20,7 +20,7 @@ export async function createUser(params: { data: FormData }) {
}
export async function updateUser(params: { data: FormData }) {
return request(`${USERS_API}`, {
return request(`${USERS_API}/${params.data.id}`, {
method: 'PUT',
data: params.data
});
src/pages/users/components/add-modal.tsx
+23 -11
View File
@@ -1,17 +1,20 @@
import ModalFooter from '@/components/modal-footer';
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 { SyncOutlined } from '@ant-design/icons';
import { Form, Modal } from 'antd';
import { UserRolesOptions } from '../config';
import { FormData } from '../config/types';
import { useEffect } from 'react';
import { UserRoles, UserRolesOptions } from '../config';
import { FormData, ListItem } from '../config/types';
type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
onOk: (values: FormData) => void;
data?: ListItem;
onCancel: () => void;
};
const AddModal: React.FC<AddModalProps> = ({
@@ -19,12 +22,9 @@ const AddModal: React.FC<AddModalProps> = ({
action,
open,
onOk,
data,
onCancel
}) => {
if (!open) {
return null;
}
const [form] = Form.useForm();
const suffix = (
<SyncOutlined
@@ -34,11 +34,23 @@ const AddModal: React.FC<AddModalProps> = ({
}}
/>
);
const initFormValue = () => {
if (action === PageAction.EDIT && open) {
form.setFieldsValue({
...data,
is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
});
}
};
const handleSumit = () => {
form.submit();
};
useEffect(() => {
initFormValue();
}, [open]);
return (
<Modal
title={title}
@@ -56,18 +68,18 @@ const AddModal: React.FC<AddModalProps> = ({
}
>
<Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
<Form.Item<FormData> name="name" rules={[{ required: true }]}>
<SealInput.Input label="Name"></SealInput.Input>
<Form.Item<FormData> name="username" rules={[{ required: true }]}>
<SealInput.Input label="Name" required></SealInput.Input>
</Form.Item>
<Form.Item<FormData> name="full_name" rules={[{ required: true }]}>
<Form.Item<FormData> name="full_name" rules={[{ required: false }]}>
<SealInput.Input label="FullName"></SealInput.Input>
</Form.Item>
<Form.Item<FormData> name="is_admin" rules={[{ required: true }]}>
<Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
<SealSelect label="Role" options={UserRolesOptions}></SealSelect>
</Form.Item>
<Form.Item<FormData> name="password" rules={[{ required: true }]}>
<SealInput.Input label="Password"></SealInput.Input>
<SealInput.Password label="Password" required></SealInput.Password>
</Form.Item>
</Form>
</Modal>
src/pages/users/config/types.ts
+2 -1
View File
@@ -8,7 +8,8 @@ export interface ListItem {
}
export interface FormData {
name: string;
username: string;
id?: number;
is_admin: boolean;
full_name: string;
password: string;
src/pages/users/index.tsx
+49 -12
View File
@@ -3,6 +3,7 @@ import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { handleBatchRequest } from '@/utils';
import {
DeleteOutlined,
EditOutlined,
@@ -16,7 +17,7 @@ import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { createUser, deleteUser, queryUsersList } from './apis';
import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
import AddModal from './components/add-modal';
import { FormData, ListItem } from './config/types';
const { Column } = Table;
@@ -32,6 +33,9 @@ const Models: React.FC = () => {
const [dataSource, setDataSource] = useState<ListItem[]>([]);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
const [title, setTitle] = useState<string>('');
const [currentData, setCurrentData] = useState<ListItem | undefined>(
undefined
);
const [queryParams, setQueryParams] = useState({
page: 1,
perPage: 10,
@@ -102,9 +106,22 @@ const Models: React.FC = () => {
...data,
is_admin: data.is_admin === 'admin'
};
await createUser({ data: params });
setOpenAddModal(false);
message.success('successfully!');
try {
if (action === PageAction.EDIT) {
await updateUser({
data: {
...params,
id: currentData?.id
}
});
} else {
await createUser({ data: params });
}
setOpenAddModal(false);
message.success('successfully!');
} catch (error) {
setOpenAddModal(false);
}
};
const handleModalCancel = () => {
@@ -132,9 +149,10 @@ const Models: React.FC = () => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected users?',
onOk() {
console.log('OK');
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
message.success('successfully!');
fetchData();
},
onCancel() {
console.log('Cancel');
@@ -142,7 +160,8 @@ const Models: React.FC = () => {
});
};
const handleEditUser = () => {
const handleEditUser = (row: ListItem) => {
setCurrentData(row);
setOpenAddModal(true);
setAction(PageAction.EDIT);
setTitle('Edit User');
@@ -214,7 +233,7 @@ const Models: React.FC = () => {
onChange: handlePageChange
}}
>
<Column title="Name" dataIndex="name" key="name" width={200} />
<Column title="Name" dataIndex="username" key="name" width={200} />
<Column
title="Create Time"
dataIndex="created_at"
@@ -231,15 +250,32 @@ const Models: React.FC = () => {
title="Role"
dataIndex="role"
key="role"
width={400}
render={(text, record: ListItem) => {
return record.is_admin ? (
<UserSwitchOutlined className="size-16" />
<>
<UserSwitchOutlined className="size-16" />
<span className="m-l-5">管理员</span>
</>
) : (
<UserOutlined className="size-16" />
<>
<UserOutlined className="size-16" />
<span className="m-l-5">普通用户</span>
</>
);
}}
/>
<Column
title="Update Time"
dataIndex="updated_at"
key="updateTime"
defaultSortOrder="descend"
sortOrder={sortOrder}
showSorterTooltip={false}
sorter={true}
render={(text, record) => {
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
}}
/>
<Column
title="Operation"
key="operation"
@@ -251,7 +287,7 @@ const Models: React.FC = () => {
<Button
size="small"
type="primary"
onClick={handleEditUser}
onClick={() => handleEditUser(record)}
icon={<EditOutlined></EditOutlined>}
></Button>
</Tooltip>
@@ -274,6 +310,7 @@ const Models: React.FC = () => {
open={openAddModal}
action={action}
title={title}
data={currentData}
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>
src/request-config.ts
+6
View File
@@ -1,6 +1,8 @@
import { RequestConfig } from '@umijs/max';
import { message } from 'antd';
const NoBaseURLAPIs = ['/auth'];
export const requestConfig: RequestConfig = {
errorConfig: {
errorThrower: (res: any) => {
@@ -17,6 +19,10 @@ export const requestConfig: RequestConfig = {
requestInterceptors: [
(url, options) => {
console.log('requestInterceptors+++++++++++++++', url, options);
if (NoBaseURLAPIs.some((api) => url.startsWith(api))) {
options.baseURL = '';
return { url, options };
}
return { url, options };
}
],
src/utils/index.ts
+7 -1
View File
@@ -2,7 +2,13 @@ export const isNotEmptyValue = (value: any) => {
if (Array.isArray(value)) {
return value.length > 0;
}
return value !== null && value !== undefined && value !== '';
return (
value !== null &&
value !== undefined &&
value !== '' &&
value !== false &&
value !== 0
);
};
export const handleBatchRequest = async (