集群配置表格

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

@@ -76,4 +76,13 @@ public class ClusterConfigurationController {
         clusterConfiguration = clusterConfigurationService.getById(clusterConfiguration.getId());
         return Result.succeed(clusterConfiguration,"获取成功");
     }
+
+    /**
+     * 获取可用的集群列表
+     */
+    @GetMapping("/listEnabledAll")
+    public Result listEnabledAll() {
+        List<ClusterConfiguration >clusters = clusterConfigurationService.listEnabledAll();
+        return Result.succeed(clusters,"获取成功");
+    }
 }

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

@@ -21,7 +21,7 @@ import java.util.Map;
  **/
 @Data
 @EqualsAndHashCode(callSuper = false)
-@TableName("dlink_cluster_config")
+@TableName("dlink_cluster_configuration")
 public class ClusterConfiguration extends SuperEntity {
 
     private static final long serialVersionUID = 5830130188542066241L;

dlink-admin/src/main/java/com/dlink/service/ClusterConfigurationService.java

@@ -3,6 +3,8 @@ package com.dlink.service;
 import com.dlink.db.service.ISuperService;
 import com.dlink.model.ClusterConfiguration;
 
+import java.util.List;
+
 /**
  * ClusterConfigService
  *
@@ -12,4 +14,7 @@ import com.dlink.model.ClusterConfiguration;
 public interface ClusterConfigurationService extends ISuperService<ClusterConfiguration> {
 
     ClusterConfiguration getClusterConfigById(Integer id);
+
+    List<ClusterConfiguration> listEnabledAll();
+
 }

dlink-admin/src/main/java/com/dlink/service/impl/ClusterConfigurationServiceImpl.java

 package com.dlink.service.impl;
 
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.dlink.db.service.impl.SuperServiceImpl;
 import com.dlink.mapper.ClusterConfigurationMapper;
 import com.dlink.model.ClusterConfiguration;
 import com.dlink.service.ClusterConfigurationService;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 /**
  * ClusterConfigServiceImpl
  *
@@ -20,4 +23,9 @@ public class ClusterConfigurationServiceImpl extends SuperServiceImpl<ClusterCon
         clusterConfiguration.parseConfig();
         return clusterConfiguration;
     }
+
+    @Override
+    public List<ClusterConfiguration> listEnabledAll() {
+        return this.list(new QueryWrapper<ClusterConfiguration>().eq("enabled",1));
+    }
 }

dlink-doc/sql/dlink.sql

@@ -368,4 +368,19 @@ update dlink_flink_document set fill_value=name;
 
 update dlink_flink_document set category='Function' where category='function' ;
 
+CREATE TABLE `dlink_cluster_configuration` (
+  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
+  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '名称',
+  `alias` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '别名',
+  `type` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '类型',
+  `config_json` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '配置JSON',
+  `is_available` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '是否可用',
+  `note` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '注释',
+  `enabled` tinyint(1) NOT NULL DEFAULT '1' COMMENT '是否启用',
+  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
+  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8
+
+
 SET FOREIGN_KEY_CHECKS = 1;

dlink-web/config/routes.ts

@@ -34,10 +34,22 @@ export default [
     component: './Task',
   },*/
   {
-    path: '/cluster',
-    name: 'cluster',
+    path: '/clusters',
+    name: 'clusters',
     icon: 'cluster',
-    component: './Cluster',
+    routes:[
+      {
+        path: '/clusters/cluster',
+        name: 'cluster',
+        icon: 'cluster',
+        component: './Cluster',
+      },{
+        path: '/clusters/clusterConfiguration',
+        name: 'clusterConfiguration',
+        icon: 'setting',
+        component: './ClusterConfiguration',
+      }
+    ]
   },
   {
     path: '/database',

dlink-web/src/components/Studio/StudioEvent/DDL.ts

@@ -141,3 +141,13 @@ export function getFillAllByVersion(version:string,dispatch: any) {
     });
   });
 }
+/*--- 刷新 集群 ---*/
+export function showClusterConfiguration(dispatch: any) {
+  const res = getData('api/clusterConfiguration/listEnabledAll');
+  res.then((result) => {
+    result.datas && dispatch && dispatch({
+      type: "Studio/saveClusterConfiguration",
+      payload: result.datas,
+    });
+  });
+}

dlink-web/src/locales/zh-CN/menu.ts

@@ -50,7 +50,9 @@ export default {
   'menu.editor.mind': '脑图编辑器',
   'menu.editor.koni': '拓扑编辑器',
   'menu.demo': 'Demo 开发模板',
-  'menu.cluster': '集群中心',
+  'menu.clusters': '集群中心',
+  'menu.clusters.cluster': '集群实例',
+  'menu.clusters.clusterConfiguration': '集群配置',
   'menu.database': '数据源中心',
   'menu.studio': 'FlinkSql IDE',
   'menu.flinksqlstudio': 'FlinkSql Studio',

dlink-web/src/pages/ClusterConfiguration/components/ClusterConfigurationForm.tsx

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Modal, Select} from 'antd';
+
+import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
+
+export type ClusterConfigurationFormProps = {
+  onCancel: (flag?: boolean) => void;
+  onSubmit: (values: Partial<ClusterConfigurationTableListItem>) => void;
+  modalVisible: boolean;
+};
+const Option = Select.Option;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props) => {
+
+  const [form] = Form.useForm();
+
+  const {
+    onSubmit: handleSubmit,
+    onCancel: handleModalVisible,
+    modalVisible,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    handleSubmit(fieldsValue);
+  };
+
+  const renderContent = () => {
+    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="type"
+          label="类型"
+        >
+          <Select defaultValue="Yarn" allowClear>
+            <Option value="Standalone">Flink Standalone</Option>
+            <Option value="Yarn">Flink On Yarn</Option>
+            <Option value="Others">Others</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="note"
+          label="注释"
+        >
+          <Input.TextArea placeholder="请输入文本注释" allowClear
+                          autoSize={{minRows: 3, maxRows: 10}}/>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button type="primary" onClick={() => submitForm()}>
+          完成
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      width={640}
+      bodyStyle={{padding: '32px 40px 48px'}}
+      destroyOnClose
+      title="创建集群配置"
+      visible={modalVisible}
+      footer={renderFooter()}
+      onCancel={() => handleModalVisible()}
+    >
+      <Form
+        {...formLayout}
+        form={form}
+      >
+        {renderContent()}
+      </Form>
+    </Modal>
+  );
+};
+
+export default ClusterConfigurationForm;

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

-export type ClusterConfigerationTableListItem = {
+export type ClusterConfigurationTableListItem = {
   id: number,
   name: string,
   alias: string,
   type: string,
   config: any,
-  isAvailable: boolean,
+  available: boolean,
   note: string,
   enabled: boolean,
   createTime: Date,

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

 import React, {useRef, useState} from "react";
 import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
-import {ClusterConfigerationTableListItem} from "@/pages/Cluster/data";
 import {ActionType, ProColumns} from "@ant-design/pro-table";
 import {Button, message, Input, Drawer, Modal, Dropdown, Menu} from 'antd';
 import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
-import type {ProColumns, ActionType} from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
 import ProDescriptions from '@ant-design/pro-descriptions';
-import {ClusterConfigerationTableListItem} from "@/pages/ClusterConfiguration/data";
+import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
 import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
-import {showCluster} from "@/components/Studio/StudioEvent/DDL";
+import {showClusterConfiguration} from "@/components/Studio/StudioEvent/DDL";
+import ClusterConfigurationForm from "@/pages/ClusterConfiguration/components/ClusterConfigurationForm";
 
-const url = '/api/clusterConfigeration';
+const url = '/api/clusterConfiguration';
 const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
-  const [row, setRow] = useState<ClusterConfigerationTableListItem>();
-  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
+  const [row, setRow] = useState<ClusterConfigurationTableListItem>();
+  const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
   const [formValues, setFormValues] = useState({});
   const actionRef = useRef<ActionType>();
-  const [selectedRowsState, setSelectedRows] = useState<ClusterConfigerationTableListItem[]>([]);
+  const [selectedRowsState, setSelectedRows] = useState<ClusterConfigurationTableListItem[]>([]);
 
-  const editAndDelete = (key: string | number, currentItem: ClusterConfigerationTableListItem) => {
+  const editAndDelete = (key: string | number, currentItem: ClusterConfigurationTableListItem) => {
     if (key === 'edit') {
       handleUpdateModalVisible(true);
       setFormValues(currentItem);
@@ -40,7 +39,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
   };
 
   const MoreBtn: React.FC<{
-    item: ClusterConfigerationTableListItem;
+    item: ClusterConfigurationTableListItem;
   }> = ({item}) => (
     <Dropdown
       overlay={
@@ -56,7 +55,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
     </Dropdown>
   );
 
-  const columns: ProColumns<ClusterConfigerationTableListItem>[] = [
+  const columns: ProColumns<ClusterConfigurationTableListItem>[] = [
     {
       title: '名称',
       dataIndex: 'name',
@@ -117,7 +116,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
     },
     {
       title: '是否可用',
-      dataIndex: 'enabled',
+      dataIndex: 'available',
       hideInForm: true,
       hideInSearch: true,
       hideInTable: false,
@@ -223,7 +222,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
 
   return (
     <PageContainer>
-      <ProTable<ClusterConfigerationTableListItem>
+      <ProTable<ClusterConfigurationTableListItem>
         headerTitle="集群配置管理"
         actionRef={actionRef}
         rowKey="id"
@@ -301,7 +300,19 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
             >批量禁用</Button>
           </FooterToolbar>
         )}
-
+        <ClusterConfigurationForm
+          onSubmit={async (value) => {
+            const success = await handleAddOrUpdate("api/clusterConfiguration", value);
+            if (success) {
+              handleModalVisible(false);
+              showClusterConfiguration(dispatch);
+            }
+          }}
+          onCancel={() => {
+            handleModalVisible(false);
+          }}
+          modalVisible={modalVisible}
+        />
         <Drawer
           width={600}
           visible={!!row}
@@ -311,7 +322,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
           closable={false}
         >
           {row?.name && (
-            <ProDescriptions<ClusterConfigerationTableListItem>
+            <ProDescriptions<ClusterConfigurationTableListItem>
               column={2}
               title={row?.name}
               request={async () => ({
@@ -328,4 +339,4 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
 );
 };
 
-export default ClusterConfigerationTableList;
+export default ClusterConfigurationTableList;

dlink-web/src/pages/FlinkSqlStudio/model.ts

@@ -18,6 +18,19 @@ export type ClusterType = {
   updateTime: Date,
 }
 
+export type ClusterConfigurationType = {
+  id: number,
+  name: string,
+  alias: string,
+  type: string,
+  config: any,
+  available: boolean,
+  note: string,
+  enabled: boolean,
+  createTime: Date,
+  updateTime: Date,
+}
+
 export type DataBaseType = {
   id: number,
   name: string,
@@ -104,6 +117,7 @@ export type SessionType = {
 
 export type StateType = {
   cluster?: ClusterType[];
+  clusterConfiguration?: ClusterConfigurationType[];
   database?: DataBaseType[];
   currentSession?: SessionType;
   current?: TabsItemType;
@@ -139,6 +153,7 @@ export type ModelType = {
     quitCurrentSession: Reducer<StateType>;
     saveResult: Reducer<StateType>;
     saveCluster: Reducer<StateType>;
+    saveClusterConfiguration: Reducer<StateType>;
     saveDataBase: Reducer<StateType>;
   };
 };
@@ -147,6 +162,7 @@ const Model: ModelType = {
   namespace: 'Studio',
   state: {
     cluster: [],
+    clusterConfiguration: [],
     database: [],
     currentSession: {
       connectors: [],
@@ -399,6 +415,11 @@ const Model: ModelType = {
         ...state,
         cluster: payload,
       };
+    },saveClusterConfiguration(state, {payload}) {
+      return {
+        ...state,
+        clusterConfiguration: payload,
+      };
     },saveDataBase(state, {payload}) {
       return {
         ...state,