jialin
2 years ago
parent
7ff9b44644
commit
3120f5ee3a
@ -1,3 +1,7 @@
|
||||
module.exports = {
|
||||
extends: require.resolve('@umijs/max/eslint')
|
||||
extends: require.resolve('@umijs/max/eslint'),
|
||||
// react/no-unstable-nested-components config
|
||||
rules: {
|
||||
'react/no-unstable-nested-components': 'on'
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
.label-text {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.note-info {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.star {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import { InfoCircleOutlined } from '@ant-design/icons';
|
||||
import { Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
import './label-info.less';
|
||||
|
||||
interface NoteInfoProps {
|
||||
required?: boolean;
|
||||
label: string;
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
|
||||
console.log('props+++++++++', props);
|
||||
const { required, description, label } = props || {};
|
||||
return (
|
||||
<span className="label-text">
|
||||
<span>{label}</span>
|
||||
<span className="note-info">
|
||||
{required && (
|
||||
<span style={{ color: 'red' }} className="star">
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
{description && (
|
||||
<span style={{ marginLeft: 5, color: 'gray' }} className="desc">
|
||||
<Tooltip title={description}>
|
||||
<InfoCircleOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoteInfo;
|
||||
@ -0,0 +1,57 @@
|
||||
import classNames from 'classnames';
|
||||
import LabelInfo from './components/label-info';
|
||||
import wrapperStyle from './components/wrapper.less';
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
label: string;
|
||||
status?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
description?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Wrapper: React.FC<WrapperProps> = ({
|
||||
children,
|
||||
label,
|
||||
status,
|
||||
className,
|
||||
disabled,
|
||||
required,
|
||||
description
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
wrapperStyle.wrapper,
|
||||
wrapperStyle[`validate-status-${status}`],
|
||||
disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
|
||||
className ? wrapperStyle[className] : ''
|
||||
)}
|
||||
>
|
||||
<label
|
||||
className={classNames(
|
||||
wrapperStyle['label'],
|
||||
wrapperStyle['isfoucs-has-value']
|
||||
)}
|
||||
>
|
||||
<LabelInfo
|
||||
label={label}
|
||||
required={required}
|
||||
description={description}
|
||||
></LabelInfo>
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
padding: '0 calc(var(--ant-padding-sm) - 5px)',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@ -1,3 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface SealFormItemProps {
|
||||
label?: string;
|
||||
}
|
||||
required?: boolean;
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Access, useAccess } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const access = useAccess();
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
}}
|
||||
>
|
||||
<Access accessible={access.canSeeAdmin}>
|
||||
<Button type="primary">==================</Button>
|
||||
</Access>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@ -0,0 +1,63 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { CopyOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { Form, Modal } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
const AddModal: React.FC<AddModalProps> = ({
|
||||
title,
|
||||
action,
|
||||
open,
|
||||
onOk,
|
||||
onCancel
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const Suffix = (
|
||||
<SyncOutlined
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: '#1677ff'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const RenderCopyButton = () => {
|
||||
return <CopyOutlined></CopyOutlined>;
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
open={open}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={<ModalFooter onOk={onOk} 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.Item>
|
||||
<Form.Item name="secretkey" rules={[{ required: true }]}>
|
||||
<SealInput.Input
|
||||
label="Secret Key"
|
||||
addonAfter={<RenderCopyButton></RenderCopyButton>}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddModal;
|
||||
@ -0,0 +1,246 @@
|
||||
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 { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import AddAPIKeyModal from './components/add-apikey';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'local',
|
||||
secretKey: `auk_uzem...owsa`,
|
||||
lastusedTime: '2024-05-22 12:20:10',
|
||||
createTime: '2024-05-20 12:13:25'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'dev',
|
||||
secretKey: `auk_uzem...okwa`,
|
||||
lastusedTime: '2024-05-19 13:30:22',
|
||||
createTime: '2024-05-18 10:28:32'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'prod',
|
||||
secretKey: `auk_uzem...uuds`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-17 08:21:09'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'test',
|
||||
secretKey: `auk_uzem...uksa`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-16 13:33:23'
|
||||
}
|
||||
];
|
||||
|
||||
const Models: React.FC = () => {
|
||||
const rowSelection = useTableRowSelection();
|
||||
const { sortOrder, setSortOrder } = useTableSort({
|
||||
defaultSortOrder: 'descend'
|
||||
});
|
||||
const [total, setTotal] = useState(100);
|
||||
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: ''
|
||||
});
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
console.log(current, size);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
};
|
||||
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
console.log('handleTableChange=======', pagination, filters, sorter);
|
||||
setSortOrder(sorter.order);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
console.log('fetchData');
|
||||
};
|
||||
const handleSearch = (e: any) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleNameChange = (e: any) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
name: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Add User');
|
||||
};
|
||||
|
||||
const handleClickMenu = (e: any) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const handleModalOk = () => {
|
||||
console.log('handleModalOk');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '',
|
||||
content: 'Are you sure you want to delete the selected keys?',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
message.success('successfully!');
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle('Edit User');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'API Keys'
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="按名称查询"
|
||||
style={{ width: 300 }}
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-primary)' }}
|
||||
onClick={handleSearch}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<Button
|
||||
icon={<PlusOutlined></PlusOutlined>}
|
||||
type="primary"
|
||||
onClick={handleAddUser}
|
||||
>
|
||||
Add API-key
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDelete}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
rowSelection={rowSelection}
|
||||
loading={loading}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
current: 2,
|
||||
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="Create Time"
|
||||
dataIndex="createTime"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={true}
|
||||
/>
|
||||
<Column
|
||||
title="Last Used"
|
||||
dataIndex="lastusedTime"
|
||||
key="lastusedTime"
|
||||
/>
|
||||
<Column
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<Tooltip title="编辑">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={handleEditUser}
|
||||
icon={<EditOutlined></EditOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</PageContainer>
|
||||
<AddAPIKeyModal
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddAPIKeyModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Models;
|
||||
@ -0,0 +1,53 @@
|
||||
import { Progress } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import { NodeItem } from '../config/types';
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default RenderProgress;
|
||||
Loading…
Reference in new issue