feat: add access list
This commit is contained in:
jialin
@@ -115,6 +115,16 @@ export default [
|
||||
access: 'canSeeAdmin',
|
||||
component: './maas-provider/index'
|
||||
},
|
||||
{
|
||||
name: 'accesses',
|
||||
path: '/models/accesses',
|
||||
key: 'accesses',
|
||||
icon: 'icon-extension-outline',
|
||||
selectedIcon: 'icon-extension-filled',
|
||||
defaultIcon: 'icon-extension-outline',
|
||||
access: 'canSeeAdmin',
|
||||
component: './model-access/index'
|
||||
},
|
||||
{
|
||||
name: 'userModels',
|
||||
path: '/models/user-models',
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
'accesses.title': 'Accesses',
|
||||
'accesses.button.add': 'Add Access',
|
||||
'accesses.table.accessPoints': 'Access Points',
|
||||
'accesses.table.traffic': 'Traffic Share'
|
||||
};
|
||||
@@ -16,8 +16,8 @@ export default {
|
||||
'menu.models.userModels': 'My Models',
|
||||
'menu.models.benchmark': 'Benchmarks',
|
||||
'menu.models.benchmarkDetail': 'Benchmark Details',
|
||||
'menu.models.provider': 'Provider',
|
||||
'menu.models.providers': 'Provider',
|
||||
'menu.models.providers': 'Providers',
|
||||
'menu.models.accesses': 'Accesses',
|
||||
'menu.modelCatalog': 'Catalog',
|
||||
'menu.resources': 'Resources',
|
||||
'menu.apikeys': 'API Keys',
|
||||
|
||||
@@ -45,5 +45,8 @@ export default {
|
||||
'noresult.benchmark.nofound': 'No matching benchmarks found.',
|
||||
'noresult.provider.title': 'No Providers',
|
||||
'noresult.provider.subTitle': 'No providers have been added yet.',
|
||||
'noresult.provider.nofound': 'No matching providers found.'
|
||||
'noresult.provider.nofound': 'No matching providers found.',
|
||||
'noresult.accesses.title': 'No Accesses',
|
||||
'noresult.accesses.subTitle': 'No accesses have been added yet.',
|
||||
'noresult.accesses.nofound': 'No matching accesses found.'
|
||||
};
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
'accesses.title': 'Accesses',
|
||||
'accesses.button.add': 'Add Access',
|
||||
'accesses.table.accessPoints': 'Access Points',
|
||||
'accesses.table.traffic': 'Traffic Share'
|
||||
};
|
||||
@@ -16,7 +16,8 @@ export default {
|
||||
'menu.models.benchmark': 'Benchmarks',
|
||||
'menu.models.benchmarkDetail': 'Benchmark Details',
|
||||
'menu.modelCatalog': 'カタログ',
|
||||
'menu.models.providers': 'Provider',
|
||||
'menu.models.providers': 'Providers',
|
||||
'menu.models.accesses': 'Accesses',
|
||||
'menu.resources': 'リソース',
|
||||
'menu.apikeys': 'APIキー',
|
||||
'menu.users': 'ユーザー',
|
||||
|
||||
@@ -45,5 +45,8 @@ export default {
|
||||
'noresult.benchmark.nofound': 'No matching benchmarks found.',
|
||||
'noresult.provider.title': 'No Providers',
|
||||
'noresult.provider.subTitle': 'No providers have been added yet.',
|
||||
'noresult.provider.nofound': 'No matching providers found.'
|
||||
'noresult.provider.nofound': 'No matching providers found.',
|
||||
'noresult.accesses.title': 'No Accesses',
|
||||
'noresult.accesses.subTitle': 'No accesses have been added yet.',
|
||||
'noresult.accesses.nofound': 'No matching accesses found.'
|
||||
};
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
'accesses.title': 'Accesses',
|
||||
'accesses.button.add': 'Add Access',
|
||||
'accesses.table.accessPoints': 'Access Points',
|
||||
'accesses.table.traffic': 'Traffic Share'
|
||||
};
|
||||
@@ -16,7 +16,8 @@ export default {
|
||||
'menu.models.benchmark': 'Benchmarks',
|
||||
'menu.models.benchmarkDetail': 'Benchmark Details',
|
||||
'menu.models.provider': 'Provider',
|
||||
'menu.models.providers': 'Provider',
|
||||
'menu.models.providers': 'Providers',
|
||||
'menu.models.accesses': 'Accesses',
|
||||
'menu.modelCatalog': 'Каталог',
|
||||
'menu.resources': 'Ресурсы',
|
||||
'menu.apikeys': 'API-ключи',
|
||||
@@ -42,10 +43,15 @@ export default {
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
// 1. 'menu.models.benchmark': 'Benchmarks',
|
||||
// 2. 'menu.models.benchmarkDetail': 'Benchmark Details',
|
||||
// 1. 'menu.models.provider': 'Provider',
|
||||
=======
|
||||
// 1. 'menu.models.providers': 'Provider',
|
||||
>>>>>>> ddf1a270 (feat: provider lsit)
|
||||
=======
|
||||
// 1. 'menu.models.providers': 'Providers',
|
||||
// 2. 'menu.models.accesses': 'Accesses',
|
||||
>>>>>>> 11d2c02d (feat: add access list)
|
||||
// ========== End of To-Do List ==========
|
||||
|
||||
@@ -46,7 +46,10 @@ export default {
|
||||
'noresult.benchmark.nofound': 'No matching benchmarks found.',
|
||||
'noresult.provider.title': 'No Providers',
|
||||
'noresult.provider.subTitle': 'No providers have been added yet.',
|
||||
'noresult.provider.nofound': 'No matching providers found.'
|
||||
'noresult.provider.nofound': 'No matching providers found.',
|
||||
'noresult.accesses.title': 'No Accesses',
|
||||
'noresult.accesses.subTitle': 'No accesses have been added yet.',
|
||||
'noresult.accesses.nofound': 'No matching accesses found.'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
@@ -59,5 +62,8 @@ export default {
|
||||
// 7. 'noresult.benchmark.nofound': 'No matching benchmarks found.'
|
||||
// 5. 'noresult.provider.title': 'No Providers',
|
||||
// 6. 'noresult.provider.subTitle': 'No providers have been added yet.',
|
||||
// 7. 'noresult.provider.nofound': 'No matching providers found.'
|
||||
// 7. 'noresult.provider.nofound': 'No matching providers found.',
|
||||
// 8. 'noresult.accesses.title': 'No Accesses',
|
||||
// 9. 'noresult.accesses.subTitle': 'No accesses have been added yet.',
|
||||
// 10. 'noresult.accesses.nofound': 'No matching accesses found.'
|
||||
// ========================================================================
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
'accesses.title': '接入',
|
||||
'accesses.button.add': '添加接入',
|
||||
'accesses.table.accessPoints': '接入点',
|
||||
'accesses.table.traffic': '流量'
|
||||
};
|
||||
@@ -17,6 +17,7 @@ export default {
|
||||
'menu.models.benchmarkDetail': '基准测试详情',
|
||||
'menu.models.provider': '渠道',
|
||||
'menu.models.providers': '渠道',
|
||||
'menu.models.accesses': '接入',
|
||||
'menu.modelCatalog': '模型库',
|
||||
'menu.models.catalog': '模型库',
|
||||
'menu.resources': '资源',
|
||||
|
||||
@@ -43,5 +43,8 @@ export default {
|
||||
'noresult.benchmark.nofound': '未找到匹配的基准测试',
|
||||
'noresult.provider.title': '暂无渠道',
|
||||
'noresult.provider.subTitle': '尚未添加任何渠道。',
|
||||
'noresult.provider.nofound': '未找到匹配的渠道'
|
||||
'noresult.provider.nofound': '未找到匹配的渠道',
|
||||
'noresult.accesses.title': '暂无接入',
|
||||
'noresult.accesses.subTitle': '尚未添加任何接入。',
|
||||
'noresult.accesses.nofound': '未找到匹配的接入'
|
||||
};
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { request } from '@umijs/max';
|
||||
import { AccessItem, FormData } from '../config/types';
|
||||
|
||||
export const ACCESS_API = '/accesses';
|
||||
|
||||
export const ACCESS_POINTS_API = '/models';
|
||||
|
||||
export async function queryModelAccesses(
|
||||
params: Global.SearchParams,
|
||||
options?: any
|
||||
) {
|
||||
return request<Global.PageResponse<AccessItem>>(ACCESS_API, {
|
||||
params,
|
||||
method: 'GET',
|
||||
cancelToken: options?.token
|
||||
});
|
||||
}
|
||||
|
||||
export async function createAccess(params: { data: FormData }) {
|
||||
return request(`${ACCESS_API}`, {
|
||||
method: 'POST',
|
||||
data: params.data
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateAccess(params: { id: number; data: FormData }) {
|
||||
return request(`${ACCESS_API}/${params.id}`, {
|
||||
method: 'PUT',
|
||||
data: params.data
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteAccess(id: number) {
|
||||
return request(`${ACCESS_API}/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryAccessPoints(params: { id: string }, options?: any) {
|
||||
return request<Global.BaseOption<string>[]>(
|
||||
`${ACCESS_API}/${params.id}/points`,
|
||||
{
|
||||
method: 'GET',
|
||||
cancelToken: options?.token
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import RowChildren from '@/components/seal-table/components/row-children';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
import { Col, Row } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const CellContent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
interface ProviderModelProps {
|
||||
dataList: any[];
|
||||
provider: string;
|
||||
providerId: number;
|
||||
}
|
||||
|
||||
interface AccessItemProps {
|
||||
onSelect: (val: any, record: any) => void;
|
||||
data: any;
|
||||
}
|
||||
|
||||
export const childActionList = [
|
||||
{
|
||||
key: 'viewlog',
|
||||
label: 'common.button.viewlog',
|
||||
icon: <IconFont type="icon-logs" />
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: 'common.button.delete',
|
||||
icon: <DeleteOutlined />,
|
||||
props: {
|
||||
danger: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
|
||||
return (
|
||||
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
||||
<RowChildren>
|
||||
<Row gutter={16} style={{ width: '100%' }}>
|
||||
<Col span={5}>
|
||||
<CellContent
|
||||
style={{
|
||||
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
||||
}}
|
||||
>
|
||||
<AutoTooltip ghost>qwen3-0.6b-zduxy</AutoTooltip>
|
||||
</CellContent>
|
||||
</Col>
|
||||
<Col span={5}>
|
||||
<CellContent style={{ paddingLeft: 44 }}>
|
||||
<AutoTooltip ghost>Traffic: 20%</AutoTooltip>
|
||||
</CellContent>
|
||||
</Col>
|
||||
<Col span={5}>
|
||||
<CellContent style={{ paddingLeft: 44 }}>
|
||||
<AutoTooltip ghost>
|
||||
<StatusTag
|
||||
statusValue={{
|
||||
status: 'success',
|
||||
text: 'Ready',
|
||||
message: ''
|
||||
}}
|
||||
/>
|
||||
</AutoTooltip>
|
||||
</CellContent>
|
||||
</Col>
|
||||
<Col span={5}>
|
||||
<CellContent style={{ paddingLeft: 44 }}>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs().format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
</CellContent>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<CellContent style={{ paddingLeft: 36 }}>
|
||||
<DropdownButtons
|
||||
items={childActionList}
|
||||
onSelect={onSelect}
|
||||
></DropdownButtons>
|
||||
</CellContent>
|
||||
</Col>
|
||||
</Row>
|
||||
</RowChildren>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AccessPoints: React.FC<ProviderModelProps> = ({ dataList }) => {
|
||||
console.log('AccessPoints dataList:', dataList);
|
||||
return (
|
||||
<div>
|
||||
{Array(2)
|
||||
.fill(1)
|
||||
.map((item, index) => (
|
||||
<AccessItem
|
||||
data={item}
|
||||
key={index}
|
||||
onSelect={(val, record) => {
|
||||
console.log('Selected action:', val, 'on record:', record);
|
||||
}}
|
||||
></AccessItem>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessPoints;
|
||||
@@ -0,0 +1,62 @@
|
||||
import { PageActionType } from '@/config/types';
|
||||
import FormDrawer from '@/pages/_components/form-drawer';
|
||||
import React, { useRef } from 'react';
|
||||
import { FormData, AccessItem as ListItem } from '../config/types';
|
||||
|
||||
import { maasProviderType } from '../config';
|
||||
import ProviderForm from '../forms';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
currentData?: ListItem; // Used when action is EDIT
|
||||
provider: maasProviderType | null;
|
||||
onOk: (values: FormData) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
const AddProvider: React.FC<AddModalProps> = ({
|
||||
title,
|
||||
action,
|
||||
open,
|
||||
provider,
|
||||
currentData,
|
||||
onOk,
|
||||
onCancel
|
||||
}) => {
|
||||
const form = useRef<any>(null);
|
||||
|
||||
const handleSubmit = () => {
|
||||
form.current?.submit();
|
||||
};
|
||||
|
||||
const handleOk = async (data: FormData) => {
|
||||
onOk({
|
||||
...data
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.current?.resetFields();
|
||||
onCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<FormDrawer
|
||||
title={title}
|
||||
open={open}
|
||||
onCancel={handleCancel}
|
||||
onSubmit={handleSubmit}
|
||||
width={600}
|
||||
>
|
||||
<ProviderForm
|
||||
ref={form}
|
||||
action={action}
|
||||
currentData={currentData}
|
||||
onFinish={handleOk}
|
||||
/>
|
||||
</FormDrawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProvider;
|
||||
@@ -0,0 +1,76 @@
|
||||
import icons from '@/components/icon-font/icons';
|
||||
import { StatusMaps } from '@/config';
|
||||
import { StatusType } from '@/config/types';
|
||||
|
||||
export type maasProviderType =
|
||||
| 'doubao'
|
||||
| 'qwen'
|
||||
| 'openai'
|
||||
| 'deepseek'
|
||||
| 'anthropic';
|
||||
|
||||
export const maasProviderValueMap = {
|
||||
Doubao: 'doubao',
|
||||
Qwen: 'qwen',
|
||||
OpenAI: 'openai',
|
||||
Deepseek: 'deepseek',
|
||||
Anthropic: 'anthropic'
|
||||
};
|
||||
|
||||
export const maasProviderLabelMap = {
|
||||
[maasProviderValueMap.Doubao]: 'Doubao',
|
||||
[maasProviderValueMap.Qwen]: 'Qwen',
|
||||
[maasProviderValueMap.OpenAI]: 'OpenAI',
|
||||
[maasProviderValueMap.Deepseek]: 'Deepseek',
|
||||
[maasProviderValueMap.Anthropic]: 'Anthropic'
|
||||
};
|
||||
|
||||
export const providerIconsMap = {
|
||||
[maasProviderValueMap.Doubao]: 'icon-doubao',
|
||||
[maasProviderValueMap.Qwen]: 'icon-qwen',
|
||||
[maasProviderValueMap.OpenAI]: 'icon-openai',
|
||||
[maasProviderValueMap.Deepseek]: 'icon-deepseek',
|
||||
[maasProviderValueMap.Anthropic]: 'icon-anthropic'
|
||||
};
|
||||
|
||||
export const maasProviderOptions = Object.entries(maasProviderValueMap).map(
|
||||
([key, value]) => ({
|
||||
label: maasProviderLabelMap[value],
|
||||
value: value,
|
||||
key: value,
|
||||
locale: false,
|
||||
icon: providerIconsMap[value]
|
||||
})
|
||||
);
|
||||
|
||||
export const ProviderStatusValueMap: Record<string, string> = {
|
||||
Ready: 'Ready',
|
||||
InActive: 'Inactive'
|
||||
};
|
||||
|
||||
export const ProviderStatusLabelMap = {
|
||||
[ProviderStatusValueMap.Ready]: 'Ready',
|
||||
[ProviderStatusValueMap.InActive]: 'Inactive'
|
||||
};
|
||||
|
||||
export const ProviderStatus: Record<string, StatusType> = {
|
||||
[ProviderStatusValueMap.Ready]: StatusMaps.success,
|
||||
[ProviderStatusValueMap.InActive]: StatusMaps.error
|
||||
};
|
||||
|
||||
// actions for each row
|
||||
export const rowActionList = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: icons.EditOutlined
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: 'common.button.delete',
|
||||
icon: icons.DeleteOutlined,
|
||||
props: {
|
||||
danger: true
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,35 @@
|
||||
import { AccessItem } from './types';
|
||||
|
||||
// mock data for AccessItem 5 items
|
||||
export const mockDataList: AccessItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Doubao Access',
|
||||
source: 'Doubao',
|
||||
accessPoints: 5
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Qwen Access',
|
||||
source: 'Qwen',
|
||||
accessPoints: 3
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'OpenAI Access',
|
||||
source: 'OpenAI',
|
||||
accessPoints: 8
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Deepseek Access',
|
||||
source: 'Deepseek',
|
||||
accessPoints: 2
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Anthropic Access',
|
||||
source: 'Anthropic',
|
||||
accessPoints: 4
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface AccessItem {
|
||||
id: number;
|
||||
name: string;
|
||||
source: string;
|
||||
accessPoints?: number;
|
||||
}
|
||||
|
||||
export interface FormData {
|
||||
name: string;
|
||||
category: string;
|
||||
description: string;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { Form } from 'antd';
|
||||
import { forwardRef, useImperativeHandle } from 'react';
|
||||
import { MaasProviderItem as ListItem } from '../config/types';
|
||||
|
||||
interface ProviderFormProps {
|
||||
ref?: any;
|
||||
action: PageActionType;
|
||||
currentData?: ListItem; // Used when action is EDIT
|
||||
onFinish: (values: FormData) => void;
|
||||
}
|
||||
|
||||
const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: () => {
|
||||
form.submit();
|
||||
},
|
||||
resetFields: () => {
|
||||
form.resetFields();
|
||||
}
|
||||
}));
|
||||
|
||||
return (
|
||||
<Form form={form} layout="vertical">
|
||||
{/* Form fields go here */}
|
||||
</Form>
|
||||
);
|
||||
});
|
||||
|
||||
export default ProviderForm;
|
||||
@@ -0,0 +1,92 @@
|
||||
// columns.ts
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { SealColumnProps } from '@/components/seal-table/types';
|
||||
import { tableSorter } from '@/config/settings';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
maasProviderLabelMap,
|
||||
providerIconsMap,
|
||||
rowActionList
|
||||
} from '../config';
|
||||
import { AccessItem } from '../config/types';
|
||||
|
||||
const useAccessColumns = (
|
||||
handleSelect: (val: string, record: AccessItem) => void,
|
||||
onCellClick?: (record: AccessItem, dataIndex: string) => void
|
||||
): SealColumnProps[] => {
|
||||
const intl = useIntl();
|
||||
|
||||
return useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.name' }),
|
||||
dataIndex: 'name',
|
||||
sorter: tableSorter(1),
|
||||
span: 5,
|
||||
render: (text: string, record: AccessItem) => (
|
||||
<>
|
||||
<AutoTooltip ghost title={text}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
{record.builtIn && (
|
||||
<Tag color="blue" style={{ marginLeft: 8 }}>
|
||||
BuiltIn
|
||||
</Tag>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'models.form.source' }),
|
||||
dataIndex: 'source',
|
||||
span: 5,
|
||||
render: (value: string) => (
|
||||
<>
|
||||
<IconFont
|
||||
type={providerIconsMap[value]}
|
||||
style={{ marginRight: 8, fontSize: 16 }}
|
||||
></IconFont>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{maasProviderLabelMap[value]}
|
||||
</AutoTooltip>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'accesses.table.accessPoints' }),
|
||||
dataIndex: 'accessPoints',
|
||||
span: 5,
|
||||
render: (value: number) => <span>{value}</span>
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
sorter: tableSorter(6),
|
||||
span: 5,
|
||||
render: (value: string) => (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operations',
|
||||
span: 4,
|
||||
render: (value: string, record: AccessItem) => (
|
||||
<DropdownButtons
|
||||
items={rowActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
)
|
||||
}
|
||||
];
|
||||
}, [handleSelect, onCellClick]);
|
||||
};
|
||||
|
||||
export default useAccessColumns;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { useState } from 'react';
|
||||
import { maasProviderType } from '../config';
|
||||
import { AccessItem as ListItem } from '../config/types';
|
||||
|
||||
const useCreateAccess = (options: { refresh: () => void }) => {
|
||||
const [openModalStatus, setOpenModalStatus] = useState<{
|
||||
open: boolean;
|
||||
action: PageActionType;
|
||||
currentData?: ListItem;
|
||||
title: string;
|
||||
provider: maasProviderType | null;
|
||||
}>({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: null
|
||||
});
|
||||
|
||||
const openModal = () => {
|
||||
setOpenModalStatus({ ...openModalStatus, open: true });
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setOpenModalStatus({ ...openModalStatus, open: false });
|
||||
options.refresh();
|
||||
};
|
||||
|
||||
return {
|
||||
openAccessModalStatus: openModalStatus,
|
||||
setOpenAccessModalStatus: setOpenModalStatus,
|
||||
openAccessModal: openModal,
|
||||
closeAccessModal: closeModal
|
||||
};
|
||||
};
|
||||
|
||||
export default useCreateAccess;
|
||||
@@ -0,0 +1,259 @@
|
||||
import { expandKeysAtom } from '@/atoms/clusters';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import SealTable from '@/components/seal-table';
|
||||
import TableContext from '@/components/seal-table/table-context';
|
||||
import { TableOrder } from '@/components/seal-table/types';
|
||||
import { PageAction } from '@/config';
|
||||
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
|
||||
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import useWatchList from '@/hooks/use-watch-list';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import {
|
||||
ACCESS_API,
|
||||
ACCESS_POINTS_API,
|
||||
deleteAccess,
|
||||
queryModelAccesses,
|
||||
updateAccess
|
||||
} from './apis';
|
||||
import AccessPoints from './components/access-points';
|
||||
import AddAccessModal from './components/add-access-modal';
|
||||
import { maasProviderOptions } from './config';
|
||||
import { mockDataList } from './config/mock';
|
||||
import { FormData, AccessItem as ListItem } from './config/types';
|
||||
import useAccessColumns from './hooks/use-access-columns';
|
||||
import useCreateAccess from './hooks/use-create-access';
|
||||
|
||||
const Accesses: React.FC = () => {
|
||||
const {
|
||||
dataSource,
|
||||
rowSelection,
|
||||
queryParams,
|
||||
modalRef,
|
||||
handleTableChange,
|
||||
handleDelete,
|
||||
handleDeleteBatch,
|
||||
fetchData,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
handleNameChange
|
||||
} = useTableFetch<ListItem>({
|
||||
fetchAPI: queryModelAccesses,
|
||||
deleteAPI: deleteAccess,
|
||||
watch: false,
|
||||
API: ACCESS_API,
|
||||
contentForDelete: 'menu.models.access'
|
||||
});
|
||||
const { watchDataList: allAccessPoints } = useWatchList(ACCESS_POINTS_API);
|
||||
const [expandAtom] = useAtom(expandKeysAtom);
|
||||
const { handleExpandChange, handleExpandAll, expandedRowKeys } =
|
||||
useExpandedRowKeys(expandAtom);
|
||||
const intl = useIntl();
|
||||
const {
|
||||
openAccessModalStatus,
|
||||
setOpenAccessModalStatus,
|
||||
openAccessModal,
|
||||
closeAccessModal
|
||||
} = useCreateAccess({
|
||||
refresh: handleSearch
|
||||
});
|
||||
|
||||
const handleClickDropdown = () => {
|
||||
openAccessModal();
|
||||
};
|
||||
|
||||
const handleModalOk = async (data: FormData) => {
|
||||
const params = {
|
||||
...data
|
||||
};
|
||||
try {
|
||||
if (openAccessModalStatus.action === PageAction.EDIT) {
|
||||
await updateAccess({
|
||||
data: params,
|
||||
id: openAccessModalStatus.currentData!.id
|
||||
});
|
||||
}
|
||||
fetchData();
|
||||
setOpenAccessModalStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: null
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAccessModalStatus({
|
||||
open: false,
|
||||
action: PageAction.CREATE,
|
||||
currentData: undefined,
|
||||
title: '',
|
||||
provider: null
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditProvider = (row: ListItem) => {
|
||||
setOpenAccessModalStatus({
|
||||
open: true,
|
||||
action: PageAction.EDIT,
|
||||
currentData: row,
|
||||
title: intl.formatMessage(
|
||||
{ id: 'clusters.edit.cluster' },
|
||||
{ cluster: row.name }
|
||||
),
|
||||
provider: row.provider
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
handleEditProvider(row);
|
||||
} else if (val === 'delete') {
|
||||
handleDelete({ ...row, name: row.name });
|
||||
}
|
||||
});
|
||||
|
||||
const handleOnToggleExpandAll = () => {
|
||||
// do nothing
|
||||
};
|
||||
|
||||
const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
|
||||
const keys = dataSource.dataList?.map((item) => item.id);
|
||||
handleExpandAll(expanded, keys);
|
||||
if (expanded) {
|
||||
handleOnToggleExpandAll();
|
||||
}
|
||||
});
|
||||
|
||||
const loadChildrenData = useMemoizedFn(
|
||||
async (row: ListItem, options?: any) => {
|
||||
const params = {
|
||||
cluster_id: row.id,
|
||||
page: -1
|
||||
};
|
||||
// const data = await queryAccessPoints(params, {
|
||||
// token: options?.token
|
||||
// });
|
||||
return [1];
|
||||
}
|
||||
);
|
||||
|
||||
const handleOnSortChange = (order: TableOrder | Array<TableOrder>) => {
|
||||
handleTableChange({}, {}, order, { action: 'sort' });
|
||||
};
|
||||
|
||||
const renderChildren = (
|
||||
list: any,
|
||||
options: { parent?: any; [key: string]: any }
|
||||
) => {
|
||||
return (
|
||||
<AccessPoints
|
||||
dataList={list}
|
||||
provider={options.parent?.provider}
|
||||
providerId={options.parent?.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const columns = useAccessColumns(handleSelect);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageBox>
|
||||
<FilterBar
|
||||
actionType="dropdown"
|
||||
showSelect={false}
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
widths={{ input: 300 }}
|
||||
buttonText={intl.formatMessage({ id: 'accesses.button.add' })}
|
||||
rowSelection={rowSelection}
|
||||
handleInputChange={handleNameChange}
|
||||
handleSearch={handleSearch}
|
||||
handleDeleteByBatch={handleDeleteBatch}
|
||||
handleClickPrimary={handleClickDropdown}
|
||||
actionItems={maasProviderOptions.map((option) => ({
|
||||
...option,
|
||||
icon: (
|
||||
<IconFont type={option.icon as string} style={{ fontSize: 14 }} />
|
||||
)
|
||||
}))}
|
||||
></FilterBar>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
allChildren: allAccessPoints
|
||||
}}
|
||||
>
|
||||
<SealTable
|
||||
rowKey="id"
|
||||
loadChildren={loadChildrenData}
|
||||
sortDirections={TABLE_SORT_DIRECTIONS}
|
||||
expandedRowKeys={expandedRowKeys}
|
||||
onExpand={handleExpandChange}
|
||||
onExpandAll={handleToggleExpandAll}
|
||||
renderChildren={renderChildren}
|
||||
onTableSort={handleOnSortChange}
|
||||
showSorterTooltip={false}
|
||||
dataSource={mockDataList}
|
||||
loading={dataSource.loading}
|
||||
loadend={dataSource.loadend}
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
childParentKey="access_id"
|
||||
expandable={true}
|
||||
empty={
|
||||
<NoResult
|
||||
loading={dataSource.loading}
|
||||
loadend={dataSource.loadend}
|
||||
dataSource={dataSource.dataList}
|
||||
image={<IconFont type="icon-extension-outline" />}
|
||||
filters={_.omit(queryParams, ['sort_by'])}
|
||||
noFoundText={intl.formatMessage({
|
||||
id: 'noresult.accesses.nofound'
|
||||
})}
|
||||
title={intl.formatMessage({ id: 'noresult.accesses.title' })}
|
||||
subTitle={intl.formatMessage({
|
||||
id: 'noresult.accesses.subTitle'
|
||||
})}
|
||||
onClick={handleClickDropdown}
|
||||
buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
|
||||
></NoResult>
|
||||
}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: queryParams.perPage,
|
||||
current: queryParams.page,
|
||||
total: dataSource.total,
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
></SealTable>
|
||||
</TableContext.Provider>
|
||||
</PageBox>
|
||||
<AddAccessModal
|
||||
provider={openAccessModalStatus.provider}
|
||||
open={openAccessModalStatus.open}
|
||||
action={openAccessModalStatus.action}
|
||||
title={openAccessModalStatus.title}
|
||||
currentData={openAccessModalStatus.currentData}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddAccessModal>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Accesses;
|
||||
Reference in New Issue
Block a user