配置与path

dlink-web/src/components/Studio/StudioMenu/index.tsx

-import React from "react";
 import styles from "./index.less";
 import {Menu, Dropdown, Typography, Row, Col} from "antd";
 import {PauseCircleTwoTone, CopyTwoTone, DeleteTwoTone,PlayCircleTwoTone,DiffTwoTone,
@@ -9,6 +8,7 @@ import Button from "antd/es/button/button";
 import Breadcrumb from "antd/es/breadcrumb/Breadcrumb";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
+import {useEffect, useState} from "react";
 
 const {SubMenu} = Menu;
 //<Button shape="circle" icon={<CaretRightOutlined />} />
@@ -30,8 +30,9 @@ const menu = (
 
 const StudioMenu = (props: any) => {
 
-  const {sql} = props;
-  console.log(props);
+  const {sql,currentPath} = props;
+  const [pathItem, setPathItem] = useState<[]>();
+
   const executeSql = () => {
     console.log('获取' + sql);
   };
@@ -42,6 +43,25 @@ const StudioMenu = (props: any) => {
     </Menu>
   );
 
+  /*const getPath = ()=>{
+    let itemList = [];
+    for(let item of currentPath){
+      itemList.push(<Breadcrumb.Item>{item}</Breadcrumb.Item>)
+    }
+    setPathItem(itemList);
+  };
+
+  useEffect(() => {
+    getPath();
+  }, []);*/
+  const getPathItem = (paths)=>{
+    let itemList = [];
+    for(let item of paths){
+      itemList.push(<Breadcrumb.Item>{item}</Breadcrumb.Item>)
+    }
+    return itemList;
+  };
+
   return (
     <Row className={styles.container}>
       <Col span={24}>
@@ -77,9 +97,7 @@ const StudioMenu = (props: any) => {
             <Breadcrumb className={styles["dw-path"]}>
               <EnvironmentOutlined />
               <Divider type="vertical" />
-              <Breadcrumb.Item>数据仓库</Breadcrumb.Item>
-              <Breadcrumb.Item>维度</Breadcrumb.Item>
-              <Breadcrumb.Item>用户信息</Breadcrumb.Item>
+              {getPathItem(currentPath)}
             </Breadcrumb>
           </Col>
           <Col span={8} offset={8}>
@@ -137,4 +155,5 @@ const StudioMenu = (props: any) => {
 
 export default connect(({Studio}: { Studio: StateType }) => ({
   sql: Studio.sql,
+  currentPath: Studio.currentPath,
 }))(StudioMenu);

dlink-web/src/components/Studio/StudioSetting/index.less

+@import '~antd/es/style/themes/default.less';
+
+.form_setting{
+  padding-left: 10px;
+}
+
+.form_item{
+  margin-bottom: 5px;
+}

dlink-web/src/components/Studio/StudioSetting/index.tsx

+import {connect} from "umi";
+import {StateType} from "@/pages/FlinkSqlStudio/model";
+import {Form, InputNumber,Input,Switch,Select,Tag} from "antd";
+import {InfoCircleOutlined} from "@ant-design/icons";
+import styles from "./index.less";
+import {useEffect, useState} from "react";
+
+const { Option } = Select;
+
+const StudioSetting = (props: any) => {
+
+  const [form] = Form.useForm();
+  const {cluster} = props;
+  const [clusterOption, setClusterOption] = useState<[]>();
+
+
+  const getCluster = ()=>{
+    cluster.then(value=>{
+      let itemList = [];
+      for(let item of value){
+        let tag =(<><Tag color={item.enabled?"processing":"error"}>{item.type}</Tag>{item.alias}</>);
+        itemList.push(<Option value={item.id} label={tag}>
+          {tag}
+        </Option>)
+      }
+      setClusterOption(itemList);
+    });
+  };
+
+  useEffect(() => {
+    getCluster();
+  }, []);
+
+  const localOption = (<><Tag color="default">Local</Tag>本地环境</>);
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      className={styles.form_setting}
+      initialValues={{}}
+    >
+      <Form.Item label="Flink集群" tooltip="选择Flink集群进行远程提交任务"
+      className={styles.form_item}>
+        <Select
+          //mode="multiple"
+          style={{ width: '100%' }}
+          placeholder="选择Flink集群"
+          defaultValue={['0']}
+          optionLabelProp="label"
+        >
+          <Option value="0" label={localOption}>
+            <Tag color="default">Local</Tag>
+             本地环境
+          </Option>
+          {clusterOption}
+        </Select>
+      </Form.Item>
+      <Form.Item label="CheckPoint" tooltip="设置Flink任务的检查点步长，0 代表不启用"
+      className={styles.form_item}>
+        <InputNumber min={0} max={999999} defaultValue={0}/>
+      </Form.Item>
+      <Form.Item
+        label="Parallelism" className={styles.form_item}
+        tooltip="设置Flink任务的并行度，最小为 1"
+      >
+        <InputNumber min={1} max={9999} defaultValue={1}/>
+      </Form.Item>
+      <Form.Item
+        label="Fragment" className={styles.form_item}
+        tooltip={{ title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined /> }}
+      >
+        <Switch checkedChildren="启用" unCheckedChildren="禁用"
+               // defaultChecked={formVals.enabled}
+        />
+      </Form.Item>
+      <Form.Item
+        label="SavePointPath" className={styles.form_item}
+        tooltip='从SavePointPath恢复Flink任务'
+      >
+        <Input placeholder="hdfs://..." />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default connect(({Studio}: { Studio: StateType }) => ({
+  cluster: Studio.cluster,
+  sql: Studio.sql,
+}))(StudioSetting);

dlink-web/src/components/Studio/StudioTree/Function.ts

@@ -8,25 +8,29 @@ export type DataType = {
   children:DataType[];
 };
 export interface TreeDataNode extends DataNode {
-  name:String;
+  name:string;
   id:number;
   parentId:number;
   isDir:boolean;
+  path:string[];
 }
 
-export function convertToTreeData(data:TreeDataNode[], pid:number) {
+export function convertToTreeData(data:TreeDataNode[], pid:number,path?:string[]) {
+  !path&&(path=[]);
   const result:TreeDataNode[] = [];
   let temp:TreeDataNode[] = [];
   for (let i = 0; i < data.length; i++) {
     if (data[i].parentId === pid) {
       let obj = data[i];
-      temp = convertToTreeData(data, data[i].id);
-      if (temp.length > 0) {
-        obj.children = temp
-      }
       obj.isLeaf = !obj.isDir;
       obj.title = obj.name;
       obj.key = obj.id;
+      obj.path = path.slice();
+      obj.path.push(obj.name);
+      temp = convertToTreeData(data, data[i].id,obj.path);
+      if (temp.length > 0) {
+        obj.children = temp
+      }
       result.push(obj)
     }
   }

dlink-web/src/components/Studio/StudioTree/index.less

@@ -13,5 +13,5 @@
 }
 
 .tree_div{
-  padding-right: 20px;
+  padding-right: 10px;
 }

dlink-web/src/components/Studio/StudioTree/index.tsx

 import React, {useEffect, useState} from "react";
 import {connect} from "umi";
-import {StateType} from "@/pages/Demo/FormStepForm/model";
 import  {DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined} from "@ant-design/icons";
 import {Tree, Input, Menu, Empty,Button} from 'antd';
 import {getCatalogueTreeData} from "@/pages/FlinkSqlStudio/service";
 import {convertToTreeData, DataType, TreeDataNode} from "@/components/Studio/StudioTree/Function";
 import style from "./index.less";
+import {StateType} from "@/pages/FlinkSqlStudio/model";
 
 const { DirectoryTree } = Tree;
 
@@ -40,6 +40,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [dataList, setDataList] = useState<[]>();
   const [rightClickNodeTreeItem,setRightClickNodeTreeItem] = useState<RightClickMenu>();
+  const {currentPath,dispatch} = props;
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
@@ -93,6 +94,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     const empty = (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} ><Button type="primary">创建目录</Button></Empty>);
     return (treeData&&treeData.length==0)?empty:'';
   };
+
   const onRightClick = (e:any) => {
     setRightClickNodeTreeItem({
       pageX: e.event.pageX,
@@ -102,7 +104,12 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     });
   };
 
-  const onSelect = () => {
+  const onSelect = (selectedKeys:[], e:any) => {
+    console.log(e.node.path);
+    dispatch({
+      type: "Studio/saveCurrentPath",
+      payload: e.node.path,
+    });
     setRightClickNodeTreeItem(null);
   };
 
@@ -123,4 +130,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
 };
 
 
-export default connect(({studio}: { studio: StateType }) => ({}))(StudioTree);
+export default connect(({Studio}: { Studio: StateType }) => ({
+  currentPath:Studio.currentPath
+}))(StudioTree);

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

@@ -9,6 +9,7 @@ import StudioTree from "./StudioTree";
 import StudioTabs from "./StudioTabs";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import StudioConsole from "./StudioConsole";
+import StudioSetting from "./StudioSetting";
 
 const {TabPane} = Tabs;
 
@@ -44,7 +45,7 @@ const Studio: React.FC<StudioProps> = ({sql}) => {
           <Col span={4}>
             <Tabs defaultActiveKey="1" size="small">
               <TabPane tab={<span><SettingOutlined />配置</span>} key="1" >
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+                <StudioSetting />
               </TabPane>
             </Tabs>
           </Col>
@@ -72,6 +73,7 @@ export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   catalogue: Studio.catalogue,
   sql: Studio.sql,
+  cluster: Studio.cluster,
 }))(Studio);
 
 // export default Studio;

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

 export type ClusterTableListItem = {
-            id: number,
-            name: string,
-            alias: string,
-            type: string,
-            checkPoint: number,
-            savePointPath: string,
-            parallelism: number,
-            fragment: boolean,
-            clusterId: number,
-            note: string,
-            enabled: boolean,
-            createTime: Date,
-            updateTime: Date,
+  id: number,
+  name: string,
+  alias: string,
+  type: string,
+  hosts: string,
+  jobManagerHost: string,
+  status: number,
+  note: string,
+  enabled: boolean,
+  createTime: Date,
+  updateTime: Date,
 };

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

 import {Effect, Reducer} from "umi";
 import {executeSql} from "./service";
+import {message} from "antd";
+import {queryData, removeData} from "@/components/Common/crud";
 
 export type CatalogueType = {
   id?: number;
@@ -8,10 +10,26 @@ export type CatalogueType = {
   clusterId?: number;
 }
 
+export type ClusterType = {
+  id: number,
+  name: string,
+  alias: string,
+  type: string,
+  hosts: string,
+  jobManagerHost: string,
+  status: number,
+  note: string,
+  enabled: boolean,
+  createTime: Date,
+  updateTime: Date,
+}
+
 export type StateType = {
   current?: number;
+  cluster?:ClusterType[];
   catalogue: CatalogueType[];
   sql?: string;
+  currentPath?: string[];
 };
 
 export type ModelType = {
@@ -25,16 +43,27 @@ export type ModelType = {
   };
 };
 
+const getClusters = async () => {
+  try {
+    const msg = await queryData('api/cluster');
+    return msg.data;
+  } catch (error) {
+    console.error('获取Flink集群失败');
+    return [];
+  }
+};
 
 
 const Model: ModelType = {
   namespace: 'Studio',
   state: {
     current: 0,
+    cluster:getClusters(),
     catalogue: [{
       sql: '',
     }],
     sql: '',
+    currentPath: [],
   },
 
   effects: {
@@ -64,6 +93,12 @@ const Model: ModelType = {
         catalogue:catalogues,
       };
     },
+    saveCurrentPath(state, { payload }) {
+      return {
+        ...state,
+        currentPath:payload,
+      };
+    },
   },
 };