doris 数据源注册、元数据、查询、执行

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

 
-export function getDBImage(type:string) {
+export function getDBImage(type: string) {
   let imageUrl = 'database/';
   switch (type.toLowerCase()){
     case 'mysql':
@@ -17,6 +17,9 @@ export function getDBImage(type:string) {
     case 'sqlserver':
       imageUrl += 'sqlserver.jpg';
       break;
+    case 'doris':
+      imageUrl += 'doris.jpeg';
+      break;
     default:
       imageUrl += 'db.jpg';
   }

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

@@ -7,6 +7,7 @@ import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {getDBImage} from "@/pages/DataBase/DB";
 import MysqlForm from "@/pages/DataBase/components/MySqlForm";
 import SqlServerForm from "@/pages/DataBase/components/SqlServerForm";
+import DorisForm from "@/pages/DataBase/components/DorisForm";
 import ClickHouseForm from "@/pages/DataBase/components/ClickHouseForm";
 import {createOrModifyDatabase, testDatabaseConnect} from "@/pages/DataBase/service";
 
@@ -33,6 +34,9 @@ const data:any = [
   {
     type: 'SqlServer',
   },
+  {
+    type: 'Doris',
+  },
 ];
 
 const DBForm: React.FC<UpdateFormProps> = (props) => {
@@ -128,6 +132,17 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
           onTest(value);
         }}
       />
+      <DorisForm
+        onCancel={() => setDbType(undefined)}
+        modalVisible={dbType=='Doris'||values.type=='Doris'}
+        values={values}
+        onSubmit={(value) => {
+          onSubmit(value);
+        }}
+        onTest={(value) => {
+          onTest(value);
+        }}
+      />
       <ClickHouseForm
         onCancel={() => setDbType(undefined)}
         modalVisible={dbType=='ClickHouse'||values.type=='ClickHouse'}

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

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Space, Select} from 'antd';
+
+import Switch from "antd/es/switch";
+import TextArea from "antd/es/input/TextArea";
+import {DataBaseItem} from "@/pages/DataBase/data";
+
+
+export type DorisFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
+  onSubmit: (values: Partial<DataBaseItem>) => void;
+  onTest: (values: Partial<DataBaseItem>) => void;
+  modalVisible: boolean;
+  values: Partial<DataBaseItem>;
+};
+const Option = Select.Option;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const DorisForm: React.FC<DorisFormProps> = (props) => {
+  const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    alias: props.values.alias,
+    type: "Doris",
+    groupName: props.values.groupName,
+    url: props.values.url,
+    username: props.values.username,
+    password: props.values.password,
+    dbVersion: props.values.dbVersion,
+    note: props.values.note,
+    enabled: props.values.enabled,
+  });
+
+  const [form] = Form.useForm();
+  const {
+    onSubmit: handleUpdate,
+    onTest: handleTest,
+    onCancel: handleModalVisible,
+    modalVisible,
+    values,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleUpdate({...formVals, ...fieldsValue});
+  };
+
+  const testForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleTest({...formVals, ...fieldsValue});
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const renderContent = (formVals) => {
+    return (
+      <>
+        <Form.Item
+          name="name"
+          label="名称"
+          rules={[{required: true, message: '请输入名称！'}]}>
+          <Input placeholder="请输入唯一英文标识"/>
+        </Form.Item>
+        <Form.Item
+          name="alias"
+          label="别名"
+        >
+          <Input placeholder="请输入别名"/>
+        </Form.Item>
+        <Form.Item
+          name="groupName"
+          label="分组类型"
+        >
+          <Select >
+            <Option value="来源">来源</Option>
+            <Option value="数仓">数仓</Option>
+            <Option value="应用">应用</Option>
+            <Option value="备份">备份</Option>
+            <Option value="其他">其他</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="url"
+          label="url"
+        >
+          <TextArea placeholder="jdbc:mysql://{host}:{port}/{database}" allowClear
+                    autoSize={{minRows: 3, maxRows: 10}}/>
+        </Form.Item>
+        <Form.Item
+          name="username"
+          label="用户名"
+        >
+          <Input/>
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+        >
+          <Input.Password/>
+        </Form.Item>
+        <Form.Item
+          name="note"
+          label="注释"
+        >
+          <Input placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item
+          name="enabled"
+          label="是否启用"
+          >
+          <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                  defaultChecked={formVals.enabled}/>
+        </Form.Item>
+      </>
+    );
+  };
+
+  return (
+    <>{
+        modalVisible && (
+          <>
+            <Form
+              {...formLayout}
+              form={form}
+              initialValues={{
+                id: formVals.id,
+                name: formVals.name,
+                alias: formVals.alias,
+                type: formVals.type,
+                groupName: formVals.groupName,
+                url: formVals.url,
+                username: formVals.username,
+                password: formVals.password,
+                note: formVals.note,
+                enabled: formVals.enabled,
+              }}
+            >
+              {renderContent(formVals)}
+              <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                <Space>
+                  <Button htmlType="button" onClick={()=>{
+                    handleModalVisible(false)
+                  }}>
+                    返回
+                  </Button>
+                  <Button htmlType="button" onClick={onReset}>
+                    重置
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={testForm}>
+                    测试
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={submitForm}>
+                    保存
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </>
+        )
+      }</>
+  );
+};
+
+export default DorisForm;

dlink-web/src/pages/Welcome.tsx

@@ -625,6 +625,19 @@ export default (): React.ReactNode => {
               </ul>
             </Paragraph>
           </Timeline.Item>
+          <Timeline.Item><Text code>0.6.0</Text> <Text type="secondary">2022-03-??</Text>
+            <p> </p>
+            <Paragraph>
+              <ul>
+                <li>
+                  <Link>优化 sql美化</Link>
+                </li>
+                <li>
+                  <Link>扩展 Doris、SqlServer 数据源注册、元数据、查询和执行</Link>
+                </li>
+              </ul>
+            </Paragraph>
+          </Timeline.Item>
         </Timeline>
       </Card>
     </>