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
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>