创建集群

dlink-web/src/components/Studio/StudioConsole/StudioCA/index.tsx

@@ -182,7 +182,7 @@ const StudioCA = (props:any) => {
           {oneColumnCAData!=null?<IndentedTreeGraph {...columnConfig} />:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
         </div>
       </TabPane>
-      <TabPane
+      {/*<TabPane
         tab={
           <span>
           全局表级血缘
@@ -201,7 +201,7 @@ const StudioCA = (props:any) => {
         key="AllColumnCA"
       >
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-      </TabPane>
+      </TabPane>*/}
     </Tabs>
   );
 };

dlink-web/src/components/Studio/StudioLeftTool/StudioCluster/index.tsx

@@ -12,10 +12,13 @@ import {
 } from '@ant-design/icons';
 import React from "react";
 import {showCluster} from "../../StudioEvent/DDL";
+import {handleAddOrUpdate} from "@/components/Common/crud";
+import ClusterForm from "@/pages/Cluster/components/ClusterForm";
 
 const StudioCluster = (props: any) => {
 
   const {cluster, dispatch} = props;
+  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
 
   const getColumns = () => {
     let columns: any = [{
@@ -51,7 +54,7 @@ const StudioCluster = (props: any) => {
   };
 
   const onCreateCluster = () => {
-
+    handleCreateModalVisible(true);
   };
 
   return (
@@ -75,6 +78,19 @@ const StudioCluster = (props: any) => {
       {cluster.length > 0 ? (
         <Table dataSource={cluster} columns={getColumns()} size="small"/>) : (
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
+      <ClusterForm
+        onSubmit={async (value) => {
+          const success = await handleAddOrUpdate("api/cluster", value);
+          if (success) {
+            handleCreateModalVisible(false);
+            showCluster(dispatch);
+          }
+        }}
+        onCancel={() => {
+          handleCreateModalVisible(false);
+        }}
+        modalVisible={createModalVisible}
+      />
     </>
   );
 };

dlink-web/src/pages/Cluster/components/ClusterForm.tsx

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Modal, Select,Switch} from 'antd';
+
+import {ClusterTableListItem} from "@/pages/Cluster/data";
+
+export type ClusterFormProps = {
+  onCancel: (flag?: boolean) => void;
+  onSubmit: (values: Partial<ClusterTableListItem>) => void;
+  modalVisible: boolean;
+};
+const Option = Select.Option;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const ClusterForm: React.FC<ClusterFormProps> = (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">Standalone</Option>
+            <Option value="Yarn">Yarn</Option>
+            <Option value="Others">Others</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="hosts"
+          label="Hosts"
+        >
+          <Input.TextArea placeholder="添加 Flink Hosts...例如：127.0.0.1:8081,127.0.0.1:8091" allowClear
+                    autoSize={{minRows: 3, maxRows: 10}}/>
+        </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 ClusterForm;

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

@@ -19,6 +19,7 @@ import {
 } from "@/components/Common/crud";
 import {showCluster} from "@/components/Studio/StudioEvent/DDL";
 
+const TextArea = Input.TextArea;
 const url = '/api/cluster';
 
 const ClusterTableList: React.FC<{}> = (props: any) => {
@@ -137,6 +138,9 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       hideInForm: false,
       hideInSearch: true,
       hideInTable: true,
+      renderFormItem: (item, {defaultRender, ...rest}, form) => {
+        return <TextArea placeholder="添加 Flink Hosts...例如：127.0.0.1:8081,127.0.0.1:8091" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>;
+      },
     },
     {
       title: 'JMHost',