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