Commit a0d8113c authored by wenmo's avatar wenmo

编辑数据源

parent dce6c815
......@@ -82,6 +82,7 @@
<groupId>com.dlink</groupId>
<artifactId>dlink-common</artifactId>
</dependency>
<dependency>
<groupId>com.dlink</groupId>
<artifactId>dlink-metadata-base</artifactId>
......@@ -89,7 +90,7 @@
<dependency>
<groupId>com.dlink</groupId>
<artifactId>dlink-metadata-mysql</artifactId>
<scope>provided</scope>
<!--<scope>provided</scope>-->
</dependency>
</dependencies>
<build>
......
......@@ -77,4 +77,11 @@ public class DataBaseController {
return Result.succeed(database,"获取成功");
}
/**
* 全部心跳监测
*/
@PostMapping("/testConnect")
public Result testConnect(@RequestBody DataBase database) {
return Result.succeed(databaseService.checkHeartBeat(database),"获取成功");
}
}
\ No newline at end of file
......@@ -6,7 +6,8 @@ import {connect} from "umi";
import {StateType} from "@/pages/FlinkSqlStudio/model";
import {getDBImage} from "@/pages/DataBase/DB";
import MysqlForm from "@/pages/DataBase/components/MySqlForm";
import {handleAddOrUpdate} from "@/components/Common/crud";
import {handleAddOrUpdate, handleOption, postAll} from "@/components/Common/crud";
import {createOrModifyDatabase, testDatabaseConnect} from "@/pages/DataBase/service";
export type UpdateFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
......@@ -40,18 +41,13 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
} = props;
const [dbType, setDbType] = useState<string>();
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
const chooseOne = (item:DataBaseItem)=>{
setDbType(item.type);
handleModalVisible(true);
// handleChooseDBModalVisible();
};
const onSubmit = async (value:any)=>{
console.log(value);
const success = await handleAddOrUpdate('/api/database', value);
const success = await createOrModifyDatabase(value);
if (success) {
handleChooseDBModalVisible();
setDbType(undefined);
......@@ -59,17 +55,25 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
}
};
const onTest = async (value:any)=>{
await testDatabaseConnect(value);
};
return (
<Modal
width={800}
bodyStyle={{padding: '32px 40px 48px'}}
title={'创建数据源'}
title={values.id?'编辑数据源':'创建数据源'}
visible={modalVisible}
onCancel={() => handleChooseDBModalVisible()}
onCancel={() => {
setDbType(undefined);
handleChooseDBModalVisible();
}}
maskClosable = {false}
destroyOnClose = {true}
footer={null}
>{
!dbType&&(<List
(!dbType&&!values.id)&&(<List
grid={{
gutter: 16,
xs: 1,
......@@ -96,11 +100,14 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
}
<MysqlForm
onCancel={() => setDbType(undefined)}
modalVisible={dbType=='MySql'}
values={{}}
modalVisible={dbType=='MySql'||values.type=='MySql'}
values={values}
onSubmit={(value) => {
onSubmit(value);
}}
onTest={(value) => {
onTest(value);
}}
/>
</Modal>
);
......
......@@ -9,6 +9,7 @@ import {DataBaseItem} from "@/pages/DataBase/data";
export type MysqlFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
onSubmit: (values: Partial<DataBaseItem>) => void;
onTest: (values: Partial<DataBaseItem>) => void;
modalVisible: boolean;
values: Partial<DataBaseItem>;
};
......@@ -37,6 +38,7 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
const [form] = Form.useForm();
const {
onSubmit: handleUpdate,
onTest: handleTest,
onCancel: handleModalVisible,
modalVisible,
values,
......@@ -48,6 +50,12 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
handleUpdate({...formVals, ...fieldsValue});
};
const testForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals({...formVals, ...fieldsValue});
handleTest({...formVals, ...fieldsValue});
};
const onReset = () => {
form.resetFields();
};
......@@ -146,10 +154,10 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
<Button htmlType="button" onClick={onReset}>
重置
</Button>
<Button htmlType="button">
<Button type="primary" htmlType="button" onClick={testForm}>
测试
</Button>
<Button type="primary" htmlType="button" onClick={() => submitForm()}>
<Button type="primary" htmlType="button" onClick={submitForm}>
保存
</Button>
</Space>
......
.cardImage{
height: 120px;
}
import React, {useRef, useState} from "react";
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
import {Progress, Tag, Button, Space, Badge, Typography, Image, Row, Col} from 'antd';
import {
DownOutlined,
HeartOutlined,
PlusOutlined,
UserOutlined,
SettingOutlined,
EditOutlined,
EllipsisOutlined,
CheckCircleOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons';
import {Progress, Tag, Button, Space, Badge, Typography, Image, Row, Col, Card, Avatar} from 'antd';
import ProList from '@ant-design/pro-list';
import {queryData} from "@/components/Common/crud";
import {getDBImage} from "@/pages/DataBase/DB";
import DBForm from "./components/DBForm";
import {ActionType} from "@ant-design/pro-table";
import styles from './index.less';
import {DataBaseItem} from "@/pages/DataBase/data";
const {Text} = Typography;
const url = '/api/database';
const cardBodyStyle = {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
position: 'relative',
zIndex: 999
};
const DataBaseTableList: React.FC<{}> = (props: any) => {
const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
const [values, setValues] = useState<any>({});
const actionRef = useRef<ActionType>();
const onEdit = (row: DataBaseItem) => {
setValues(row);
handleDBFormModalVisible(true);
};
return (
<PageContainer>
<ProList
actionRef={actionRef}
toolBarRender={() => {
return [
<Button type="primary" onClick={() => handleDBFormModalVisible(true)}>
<Button type="primary" onClick={() => {
setValues({});
handleDBFormModalVisible(true);}}>
<PlusOutlined/> 新建
</Button>,
];
......@@ -33,52 +61,65 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
}}
grid={{gutter: 16, column: 4}}
request={(params, sorter, filter) => queryData(url, {...params, sorter: {id: 'descend'}, filter})}
metas={{
title: {
dataIndex: 'alias',
title: 'alias',
},
subTitle: {
render: (_, row) => {
renderItem={(row) => {
return (
<Card
style={{width: 300}}
hoverable={true}
bodyStyle={cardBodyStyle}
cover={
<div className={styles.cardImage}>
<Image
preview={false}
style={{padding: '20px'}}
src={getDBImage(row.type)}
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
/>
</div>
}
actions={[
<SettingOutlined key="setting"/>,
<EditOutlined key="edit" onClick={() => {
onEdit(row)
}}/>,
<EllipsisOutlined key="ellipsis"/>,
]}
>
<Card.Meta
title={<Tag color="gray" key={row.alias}>
{row.alias}
</Tag>}
description={(
<Space size={0}>
<Tag color="blue" key={row.name}>
<Tag key={row.name}>
{row.name}
</Tag>
<Tag color="gray" key={row.groupName}>
<Tag color="blue" key={row.groupName}>
{row.groupName}
</Tag>
{(row.status) ?
(<><Badge status="success"/><Text type="success">正常</Text></>) :
<><Badge status="error"/><Text type="danger">异常</Text></>}
(<Tag icon={<CheckCircleOutlined/>} color="success">
正常
</Tag>) :
<Tag icon={<ExclamationCircleOutlined/>} color="warning">
异常
</Tag>}
</Space>
);
},
},
type: {},
avatar: {},
content: {
render: (_, row) => {
return (
<Row justify="space-around" align="middle">
<Col span={16}>
<Image
height={120}
preview={false}
src={getDBImage(row.type)}
fallback="data:image/png;base64,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"
)}
/>
</Col>
</Row>
)
},
},
actions: {},
</Card>)
}}
headerTitle="数据源"
/>
<DBForm onCancel={() => handleDBFormModalVisible(false)} modalVisible={chooseDBModalVisible}
onSubmit={()=>{actionRef.current?.reloadAndRest?.();}}
<DBForm onCancel={() => {
handleDBFormModalVisible(false);
setValues({});
}}
modalVisible={chooseDBModalVisible}
onSubmit={() => {
actionRef.current?.reloadAndRest?.();
}}
values={values}
/>
</PageContainer>
);
......
import request from "umi-request";
import {handleAddOrUpdate, handleOption, postAll} from "@/components/Common/crud";
import {DataBaseItem} from "@/pages/DataBase/data";
import {message} from "antd";
export async function createOrModifyDatabase(databse: DataBaseItem) {
return handleAddOrUpdate('/api/database', databse);
}
export async function testDatabaseConnect(databse: DataBaseItem) {
const hide = message.loading('正在测试连接');
try {
const {datas} = await postAll('/api/database/testConnect',databse);
hide();
datas?message.success("数据源连接测试成功!"):message.error("数据源连接测试失败,请检查连接配置。");
} catch (error) {
hide();
message.error('请求失败,请重试');
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment