chooseDB

dlink-admin/src/main/java/com/dlink/model/DataBase.java

@@ -5,6 +5,8 @@ import com.dlink.db.model.SuperEntity;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 
+import java.time.LocalDateTime;
+
 /**
  * DataBase
  *
@@ -39,4 +41,8 @@ public class DataBase extends SuperEntity {
     private String dbVersion;
 
     private boolean status;
+
+    private LocalDateTime healthTime;
+
+    private LocalDateTime heartbeatTime;
 }

dlink-admin/src/main/resources/mapper/DataBaseMapper.xml

@@ -17,6 +17,8 @@
         <result column="db_version" property="dbVersion" />
         <result column="note" property="note" />
         <result column="status" property="status" />
+        <result column="health_time" property="healthTime" />
+        <result column="heartbeat_time" property="heartbeatTime" />
         <result column="enabled" property="enabled" />
         <result column="create_time" property="createTime" />
         <result column="update_time" property="updateTime" />
@@ -24,7 +26,7 @@
 
     <!-- 通用查询结果列 -->
     <sql id="Base_Column_List">
-        id, name, alias,group_name, type,ip,port, url,username,password,db_version,note,status, enabled, create_time, update_time
+        id, name, alias,group_name, type,ip,port, url,username,password,db_version,note,status,health_time,heartbeat_time, enabled, create_time, update_time
     </sql>
 
 

dlink-doc/sql/dlink.sql

@@ -349,6 +349,8 @@ CREATE TABLE `dlink_database`  (
   `note` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '注释',
   `db_version` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '版本，如oracle的11g，hbase的2.2.3',
   `status` tinyint(1) NULL COMMENT '状态',
+  `health_time` datetime(0) NULL DEFAULT NULL COMMENT '最近健康时间',
+  `heartbeat_time` datetime(0) NULL DEFAULT NULL COMMENT '最近心跳检测时间',
   `enabled` tinyint(1) NOT NULL DEFAULT 1 COMMENT '启用',
   `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
   `update_time` datetime(0) NULL DEFAULT NULL COMMENT '最近修改时间',

dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/components/SessionForm.tsx

@@ -26,10 +26,6 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
     type: props.values.type,
     useRemote: props.values.useRemote,
     clusterId: props.values.clusterId,
-    clusterName: props.values.clusterName,
-    address: props.values.address,
-    createUser: props.values.createUser,
-    createTime: props.values.createTime,
   });
 
   const {cluster} = props;

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

+
+export function getDBImage(type:string) {
+  let imageUrl = '/database/';
+  switch (type.toLowerCase()){
+    case 'mysql':
+      imageUrl += 'mysql.jpg';
+      break;
+    case 'oracle':
+      imageUrl += 'oracle.jpg';
+      break;
+    case 'postgresql':
+      imageUrl += 'postgresql.jpg';
+      break;
+    case 'clickhouse':
+      imageUrl += 'clickhouse.png';
+      break;
+    default:
+      imageUrl += 'db.png';
+  }
+  return imageUrl;
+}

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

+import React, {useState} from 'react';
+import {Modal,Image,message,List,Card} from 'antd';
+
+import {DataBaseItem} from '../data.d';
+import {connect} from "umi";
+import {StateType} from "@/pages/FlinkSqlStudio/model";
+import {getDBImage} from "@/pages/DataBase/DB";
+import MysqlForm from "@/pages/DataBase/components/MySqlForm";
+
+export type UpdateFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
+  onSubmit: (values: Partial<DataBaseItem>) => void;
+  modalVisible: boolean;
+  values: Partial<DataBaseItem>;
+};
+
+const data = [
+  {
+    type: 'MySql',
+  },
+  {
+    type: 'Oracle',
+  },
+  {
+    type: 'PostgreSql',
+  },
+  {
+    type: 'ClickHouse',
+  },
+];
+
+const ChooseDB: React.FC<UpdateFormProps> = (props) => {
+
+  const {
+    // onSubmit: handleUpdate,
+    onCancel: handleChooseDBModalVisible,
+    modalVisible,
+  } = props;
+
+  const [dbType, setDbType] = useState<string>();
+  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
+
+  const chooseOne = (item:DataBaseItem)=>{
+    setDbType(item.type);
+    handleModalVisible(true);
+    // handleChooseDBModalVisible();
+
+  };
+
+  return (
+    <Modal
+      width={800}
+      bodyStyle={{padding: '32px 40px 48px'}}
+      title={'选择数据源类型'}
+      visible={modalVisible}
+      onCancel={() => handleChooseDBModalVisible()}
+      footer={null}
+    >
+      <List
+        grid={{
+          gutter: 16,
+          xs: 1,
+          sm: 2,
+          md: 4,
+          lg: 4,
+          xl: 4,
+          xxl: 4,
+        }}
+        dataSource={data}
+        renderItem={item => (
+          <List.Item onClick={()=>{chooseOne(item)}}>
+            <Card>
+              <Image
+                height={60}
+                preview={false}
+                src={getDBImage(item.type)}
+                fallback="data:image/png;base64,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"
+              />
+            </Card>
+          </List.Item>
+        )}
+      />
+      <MysqlForm
+        onCancel={() => setDbType(undefined)}
+        modalVisible={dbType=='MySql'}
+        values={{}}
+        onSubmit={()=>{
+          setDbType(undefined)
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default connect(({Studio}: { Studio: StateType }) => ({
+  cluster: Studio.cluster,
+}))(ChooseDB);

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

+import React, {useEffect, useState} from 'react';
+import { Form, Button, Input, Modal,Select } from 'antd';
+
+import Switch from "antd/es/switch";
+import TextArea from "antd/es/input/TextArea";
+import {DataBaseItem} from "@/pages/DataBase/data";
+
+export type MysqlFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
+  onSubmit: (values: Partial<DataBaseItem>) => void;
+  modalVisible: boolean;
+  values: Partial<DataBaseItem>;
+};
+const FormItem = Form.Item;
+
+const formLayout = {
+  labelCol: { span: 7 },
+  wrapperCol: { span: 13 },
+};
+
+const MysqlForm: React.FC<MysqlFormProps> = (props) => {
+  const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    alias: props.values.alias,
+    type: props.values.type,
+    note: props.values.note,
+    enabled: props.values.enabled,
+  });
+
+  const [form] = Form.useForm();
+
+  const {
+    onSubmit: handleUpdate,
+    onCancel: handleUpdateModalVisible,
+    modalVisible,
+    values,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({ ...formVals, ...fieldsValue });
+    handleUpdate({ ...formVals, ...fieldsValue });
+  };
+
+  const renderContent = (formVals) => {
+    return (
+      <>
+        <FormItem
+          name="name"
+          label="名称"
+          rules={[{ required: true, message: '请输入名称！' }]}                     >
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem
+          name="alias"
+          label="别名"
+        >
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem
+          name="type"
+          label="类型"
+        >
+          <Select defaultValue="Yarn" allowClear>
+            <Option value="Standalone">Standalone</Option>
+            <Option value="Yarn">Yarn</Option>
+            <Option value="Others">Others</Option>
+          </Select>
+        </FormItem>
+        <FormItem
+          name="hosts"
+          label="Hosts"
+        >
+          <TextArea placeholder="添加 Flink Hosts...例如：127.0.0.1:8081,127.0.0.1:8091" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>
+        </FormItem>
+        <FormItem
+          name="note"
+          label="注释"
+        >
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem
+          name="enabled"
+          label="是否启用"
+          rules={[{ required: true, message: '请输入是否启用！' }]}                     >
+          <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                  defaultChecked={formVals.enabled}/>
+        </FormItem>
+      </>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
+        <Button type="primary" onClick={() => submitForm()}>
+          完成
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      width={640}
+      bodyStyle={{ padding: '32px 40px 48px' }}
+      destroyOnClose
+      title={formVals.id?'编辑':'创建 MySql 数据源'}
+      visible={modalVisible}
+      footer={renderFooter()}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+      <Form
+        {...formLayout}
+        form={form}
+        initialValues={{
+          id: formVals.id,
+          name: formVals.name,
+          alias: formVals.alias,
+          type: formVals.type,
+          note: formVals.note,
+          enabled: formVals.enabled,
+        }}
+      >
+        {renderContent(formVals)}
+      </Form>
+    </Modal>
+  );
+};
+
+export default MysqlForm;

dlink-web/src/pages/DataBase/data.d.ts

-export type DataBaseTableListItem = {
+export type DataBaseItem = {
   id: number,
   name: string,
   alias: string,
@@ -12,7 +12,25 @@ export type DataBaseTableListItem = {
   note: string,
   dbVersion: string,
   status: boolean,
+  healthTime: Date,
+  heartbeatTime: Date,
   enabled: boolean,
   createTime: Date,
   updateTime: Date,
 };
+
+
+export type DataBaseFormProps = {
+  name: string,
+  alias: string,
+  groupName: string,
+  type: string,
+  ip: string,
+  port: number,
+  url: string,
+  username: string,
+  password: string,
+  note: string,
+  dbVersion: string,
+  enabled: boolean,
+}

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

-import React from "react";
+import React, {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 } from 'antd';
+import {Progress, Tag, Button, Space, Badge, Typography, Image, Row, Col} from 'antd';
 import ProList from '@ant-design/pro-list';
 import {queryData} from "@/components/Common/crud";
+import {getDBImage} from "@/pages/DataBase/DB";
+import ChooseDB from "./components/ChooseDB";
 
-const { Text } = Typography;
+const {Text} = Typography;
 
 const url = '/api/database';
 
 const DataBaseTableList: React.FC<{}> = (props: any) => {
 
+  const [chooseDBModalVisible, handleChooseDBModalVisible] = useState<boolean>(false);
+
+  const chooseDB = () =>{
+
+  };
+
   return (
     <PageContainer>
       <ProList
         toolBarRender={() => {
           return [
-            <Button key="3" type="primary">
+            <Button type="primary" onClick={() => handleChooseDBModalVisible(true)}>
               <PlusOutlined/> 新建
             </Button>,
           ];
         }}
         pagination={{
-        defaultPageSize: 8,
-        showSizeChanger: false,
-      }}
-        grid={{ gutter: 16, column: 4 }}
-        request={(params, sorter, filter) => queryData(url,{...params, sorter:{id:'descend'}, filter})}
+          defaultPageSize: 8,
+          showSizeChanger: false,
+        }}
+        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>
-            );
+          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: {},
-        actions: {},
-      }}
+          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: {},
+        }}
         headerTitle="数据源"
-        // dataSource={data}
-        />
-
+      />
+      <ChooseDB onCancel={() => handleChooseDBModalVisible(false)} modalVisible={chooseDBModalVisible}/>
     </PageContainer>
   );
 };