编辑数据源

dlink-admin/pom.xml

@@ -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>

dlink-admin/src/main/java/com/dlink/controller/DataBaseController.java

@@ -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

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -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>
   );

dlink-web/src/pages/DataBase/components/MySqlForm.tsx

@@ -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>

dlink-web/src/pages/DataBase/index.less

+
+.cardImage{
+  height: 120px;
+}

dlink-web/src/pages/DataBase/index.tsx

 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) => {
-              return (
-                <Space size={0}>
-                  <Tag color="blue" key={row.name}>
-                    {row.name}
-                  </Tag>
-                  <Tag color="gray" key={row.groupName}>
-                    {row.groupName}
-                  </Tag>
-                  {(row.status) ?
-                    (<><Badge status="success"/><Text type="success">正常</Text></>) :
-                    <><Badge status="error"/><Text type="danger">异常</Text></>}
-                </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: {},
+        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,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"
+                  />
+                </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 key={row.name}>
+                      {row.name}
+                    </Tag>
+                    <Tag color="blue" key={row.groupName}>
+                      {row.groupName}
+                    </Tag>
+                    {(row.status) ?
+                      (<Tag icon={<CheckCircleOutlined/>} color="success">
+                        正常
+                      </Tag>) :
+                      <Tag icon={<ExclamationCircleOutlined/>} color="warning">
+                        异常
+                      </Tag>}
+                  </Space>
+                )}
+              />
+            </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>
   );

dlink-web/src/pages/DataBase/service.ts

+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('请求失败，请重试');
+  }
+}