flat:初始化
This commit is contained in:
史典卓
240
src/pages/Monitor/Cache/List.tsx
Normal file
240
src/pages/Monitor/Cache/List.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { clearCacheAll, clearCacheKey, clearCacheName, getCacheValue, listCacheKey, listCacheName } from '@/services/monitor/cachelist';
|
||||
import { Button, Card, Col, Form, FormInstance, Input, message, Row, Table } from 'antd';
|
||||
import styles from './index.less';
|
||||
import { FormattedMessage } from '@umijs/max';
|
||||
import { ReloadOutlined } from '@ant-design/icons';
|
||||
import { ProForm } from '@ant-design/pro-components';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
|
||||
/* *
|
||||
*
|
||||
* @author whiteshader@163.com
|
||||
* @datetime 2022/06/27
|
||||
*
|
||||
* */
|
||||
|
||||
|
||||
|
||||
const CacheList: React.FC = () => {
|
||||
const [cacheNames, setCacheNames] = useState<any>([]);
|
||||
const [currentCacheName, setCurrentCacheName] = useState<any>([]);
|
||||
const [cacheKeys, setCacheKeys] = useState<any>([]);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const getCacheNames = () => {
|
||||
listCacheName().then((res) => {
|
||||
if (res.code === 200) {
|
||||
setCacheNames(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getCacheNames();
|
||||
}, []);
|
||||
|
||||
const getCacheKeys = (cacheName: string) => {
|
||||
listCacheKey(cacheName).then(res => {
|
||||
if (res.code === 200) {
|
||||
let index = 0;
|
||||
const keysData = res.data.map((item: any) => {
|
||||
return {
|
||||
index: index++,
|
||||
cacheKey: item
|
||||
}
|
||||
})
|
||||
setCacheKeys(keysData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onClearAll = async () => {
|
||||
clearCacheAll().then(res => {
|
||||
if(res.code === 200) {
|
||||
message.success("清理全部缓存成功");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onClearAllFailed = (errorInfo: any) => {
|
||||
message.error('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
const refreshCacheNames = () => {
|
||||
getCacheNames();
|
||||
message.success("刷新缓存列表成功");
|
||||
};
|
||||
|
||||
const refreshCacheKeys = () => {
|
||||
getCacheKeys(currentCacheName);
|
||||
message.success("刷新键名列表成功");
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '缓存名称',
|
||||
dataIndex: 'cacheName',
|
||||
key: 'cacheName',
|
||||
render: (_: any, record: any) => {
|
||||
return record.cacheName.replace(":", "");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark',
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
||||
dataIndex: 'option',
|
||||
width: '40px',
|
||||
valueType: 'option',
|
||||
render: (_: any, record: API.Monitor.CacheContent) => [
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
key="remove"
|
||||
danger
|
||||
onClick={() => {
|
||||
clearCacheName(record.cacheName).then(res => {
|
||||
if(res.code === 200) {
|
||||
message.success("清理缓存名称[" + record.cacheName + "]成功");
|
||||
getCacheKeys(currentCacheName);
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const cacheKeysColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index'
|
||||
},
|
||||
{
|
||||
title: '缓存键名',
|
||||
dataIndex: 'cacheKey',
|
||||
key: 'cacheKey',
|
||||
render: (_: any, record: any) => {
|
||||
return record.cacheKey.replace(currentCacheName, "");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
||||
dataIndex: 'option',
|
||||
width: '40px',
|
||||
valueType: 'option',
|
||||
render: (_: any, record: API.Monitor.CacheContent) => [
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
key="remove"
|
||||
danger
|
||||
onClick={() => {
|
||||
console.log(record)
|
||||
clearCacheKey(record.cacheKey).then(res => {
|
||||
if(res.code === 200) {
|
||||
message.success("清理缓存键名[" + record.cacheKey + "]成功");
|
||||
getCacheKeys(currentCacheName);
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col span={8}>
|
||||
<Card title="缓存列表" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ refreshCacheNames()}} type="link" />} className={styles.card}>
|
||||
<Table
|
||||
rowKey="cacheName"
|
||||
dataSource={cacheNames}
|
||||
columns={columns}
|
||||
onRow={(record: API.Monitor.CacheContent) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
setCurrentCacheName(record.cacheName);
|
||||
getCacheKeys(record.cacheName);
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card title="键名列表" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ refreshCacheKeys()}} type="link" />} className={styles.card}>
|
||||
<Table
|
||||
rowKey="index"
|
||||
dataSource={cacheKeys}
|
||||
columns={cacheKeysColumns}
|
||||
onRow={(record: any) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
getCacheValue(currentCacheName, record.cacheKey).then(res => {
|
||||
if (res.code === 200) {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({
|
||||
cacheName: res.data.cacheName,
|
||||
cacheKey: res.data.cacheKey,
|
||||
cacheValue: res.data.cacheValue,
|
||||
remark: res.data.remark,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card title="缓存内容" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ onClearAll()}} type="link" >清理全部</Button>} className={styles.card}>
|
||||
<ProForm
|
||||
name="basic"
|
||||
form={form}
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
onFinish={onClearAll}
|
||||
onFinishFailed={onClearAllFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="缓存名称"
|
||||
name="cacheName"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="缓存键名"
|
||||
name="cacheKey"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="缓存内容"
|
||||
name="cacheValue"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 2 }} />
|
||||
</Form.Item>
|
||||
</ProForm>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CacheList;
|
||||
Reference in New Issue
Block a user