session

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

 import { Tabs,Empty } from "antd";
-import {CodeOutlined, TableOutlined,RadarChartOutlined,CalendarOutlined,FileSearchOutlined,DesktopOutlined} from "@ant-design/icons";
+import {CodeOutlined, TableOutlined,RadarChartOutlined,CalendarOutlined,FileSearchOutlined,DesktopOutlined
+  ,FunctionOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
 import styles from "./index.less";
@@ -74,6 +75,17 @@ const StudioConsole = (props:any) => {
       >
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </TabPane>
+      <TabPane
+        tab={
+          <span>
+          <FunctionOutlined />
+          函数
+        </span>
+        }
+        key="6"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
       <TabPane
         tab={
           <span>
@@ -81,7 +93,7 @@ const StudioConsole = (props:any) => {
           文档
         </span>
         }
-        key="6"
+        key="7"
       >
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </TabPane>

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

@@ -40,7 +40,6 @@ const StudioMenu = (props: any) => {
 
   const saveSqlAndSettingToTask = async() => {
     const fieldsValue = await form.validateFields();
-    console.log(fieldsValue);
     if(current.task){
       let task = {
         id:current.key,
@@ -57,7 +56,6 @@ const StudioMenu = (props: any) => {
     }else{
 
     }
-    console.log('获取' + current.value);
   };
 
   const runMenu = (

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 {Form, InputNumber,Input,Switch,Select,Tag,Row,Col,Divider} from "antd";
+import {InfoCircleOutlined,PlusOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect, useState} from "react";
 
@@ -9,8 +9,9 @@ const { Option } = Select;
 
 const StudioSetting = (props: any) => {
 
-  const {cluster,current,form,dispatch} = props;
+  const {cluster,current,form,dispatch,tabs,session} = props;
   const [clusterOption, setClusterOption] = useState<[]>();
+  const [newSesstion, setNewSesstion] = useState<string>('');
 
 
   const getCluster = ()=>{
@@ -26,44 +27,62 @@ const StudioSetting = (props: any) => {
     });
   };
 
+  form.setFieldsValue(current.task);
+
   useEffect(() => {
     getCluster();
   }, []);
 
+  const addSession = ()=>{
+    if(newSesstion!='') {
+      dispatch && dispatch({
+        type: "Studio/saveSession",
+        payload: newSesstion,
+      });
+      setNewSesstion('');
+    }
+  };
+
+  const onValuesChange = (change:any,all:any)=>{
+    let newTabs = tabs;
+    for(let i=0;i<newTabs.panes.length;i++){
+      if(newTabs.panes[i].key==newTabs.activeKey){
+        newTabs.panes[i].task={
+          ...all
+        };
+        break;
+      }
+    }
+    dispatch&&dispatch({
+      type: "Studio/saveTabs",
+      payload: newTabs,
+    });
+  };
   const localOption = (<><Tag color="default">Local</Tag>本地环境</>);
   return (
     <Form
       form={form}
       layout="vertical"
       className={styles.form_setting}
-      initialValues={current.task}
+      //initialValues={current.task}
+      onValuesChange={onValuesChange}
     >
-      <Form.Item label="Flink集群" tooltip="选择Flink集群进行远程提交任务" name="clusterId"
-      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>
+      <Row>
+        <Col span={12}>
       <Form.Item label="CheckPoint" tooltip="设置Flink任务的检查点步长，0 代表不启用" name="checkPoint"
       className={styles.form_item}>
         <InputNumber min={0} max={999999} defaultValue={0}/>
       </Form.Item>
+        </Col>
+          <Col span={12}>
       <Form.Item
         label="Parallelism" className={styles.form_item} name="parallelism"
         tooltip="设置Flink任务的并行度，最小为 1"
       >
-        <InputNumber min={1} max={9999} defaultValue={1}/>
+        <InputNumber min={1} max={9999} defaultValue={1} />
       </Form.Item>
+        </Col>
+      </Row>
       <Form.Item
         label="Fragment" className={styles.form_item} name="fragment"
         tooltip={{ title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined /> }}
@@ -78,6 +97,58 @@ const StudioSetting = (props: any) => {
       >
         <Input placeholder="hdfs://..." />
       </Form.Item>
+      <Row>
+        <Col span={11}>
+      <Form.Item label="Flink集群" tooltip="选择Flink集群进行远程提交任务" name="clusterId"
+                 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>
+        </Col>
+          <Col span={11} offset={1}>
+      <Form.Item
+        label="共享会话" tooltip="选择会话进行 Flink Catalog 的共享" name="session"
+        className={styles.form_item}>
+        <Select
+          placeholder="选择会话"
+          dropdownRender={menu => (
+            <div>
+              {menu}
+              <Divider style={{ margin: '4px 0' }} />
+              <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
+                <Input style={{ flex: 'auto' }}
+                  onChange={(e)=>{
+                    setNewSesstion(e.target.value);
+                  }}
+                />
+                <a
+                  style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
+                  onClick={addSession}
+                >
+                  <PlusOutlined />
+                </a>
+              </div>
+            </div>
+          )}
+        >
+          {session.map(item => (
+            <Option key={item}>{item}</Option>
+          ))}
+        </Select>
+      </Form.Item>
+        </Col>
+      </Row>
     </Form>
   );
 };
@@ -85,4 +156,6 @@ const StudioSetting = (props: any) => {
 export default connect(({Studio}: { Studio: StateType }) => ({
   cluster: Studio.cluster,
   current: Studio.current,
+  tabs: Studio.tabs,
+  session: Studio.session,
 }))(StudioSetting);

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

-import { Tabs } from 'antd';
+import {message, Tabs } from 'antd';
 import React, {useState} from 'react';
 import StudioEdit from "../StudioEdit";
 import {connect} from "umi";
@@ -13,8 +13,6 @@ const EditorTabs = (props: any) => {
   const [panes, setPanes] = useState<any>(tabs.panes);
 
   const onChange = (activeKey: any) => {
-    //setActiveKey(activeKey);
-    console.log(activeKey);
     dispatch({
       type: "Studio/changeActiveKey",
       payload: activeKey,
@@ -22,8 +20,6 @@ const EditorTabs = (props: any) => {
   };
 
   const onEdit = (targetKey: any, action: any) => {
-    console.log(targetKey)
-    console.log(action);
     if(action=='add'){
       add();
     }else if(action=='remove'){
@@ -31,22 +27,14 @@ const EditorTabs = (props: any) => {
     }
   };
 
-  const updateValue = (targetKey: any, val: string)=>{
-    panes.forEach((pane, i) => {
-      if (pane.key === targetKey) {
-        //pane.value = val;
-        return;
-      }
-    });
-  };
-
   const add = () => {
-    let index = newTabIndex + 1;
+    message.warn('敬请期待');
+    /*let index = newTabIndex + 1;
     const newPanes = [...panes];
     newPanes.push({ title: `未命名${index}`,value:'', key: -index });
     setPanes(newPanes);
     setActiveKey(-index);
-    setNewTabIndex(index);
+    setNewTabIndex(index);*/
   };
 
   const remove = (targetKey:any) => {

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

@@ -113,10 +113,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         newTabs.panes.push(newPane);
         dispatch&&dispatch({
           type: "Studio/saveTabs",
-          payload: {
-            current:newPane,
-            tabs:newTabs,
-          },
+          payload: newTabs,
         });
       })
     }

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

 import React, {useEffect, useState} from "react";
 import {connect} from "umi";
 import styles from './index.less';
-import {BarsOutlined,SettingOutlined} from "@ant-design/icons";
+import {BarsOutlined,SettingOutlined,AuditOutlined,ScheduleOutlined,AppstoreOutlined,GoldOutlined,DashboardOutlined,
+  FireOutlined} from "@ant-design/icons";
 
 import StudioMenu from "./StudioMenu";
 import {Row, Col, Card, Empty, Tabs, Form} from "antd";
@@ -37,6 +38,9 @@ const Studio: React.FC<StudioProps> = ({sql}) => {
               <TabPane tab={<span><BarsOutlined/>目录</span>} key="1" >
                 <StudioTree/>
               </TabPane>
+              <TabPane tab={<span><AppstoreOutlined />元数据</span>} key="2" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              </TabPane>
             </Tabs>
           </Col>
           <Col span={16}>
@@ -48,6 +52,24 @@ const Studio: React.FC<StudioProps> = ({sql}) => {
             <Tabs defaultActiveKey="1" size="small">
               <TabPane tab={<span><SettingOutlined />配置</span>} key="1" >
                 <StudioSetting form={form} />
+
+              </TabPane>
+              <TabPane tab={<span><ScheduleOutlined />详情</span>} key="2" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              </TabPane>
+              <TabPane tab={<span><AuditOutlined />审计</span>} key="3" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              </TabPane>
+            </Tabs>
+            <Tabs defaultActiveKey="1" size="small">
+              <TabPane tab={<span>&nbsp;<GoldOutlined />Catalogue</span>} key="1" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              </TabPane>
+              <TabPane tab={<span>&nbsp;<DashboardOutlined />Overview</span>} key="2" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              </TabPane>
+              <TabPane tab={<span>&nbsp;<FireOutlined />Jobs</span>} key="3" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
               </TabPane>
             </Tabs>
           </Col>

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

@@ -18,22 +18,23 @@ export type ClusterType = {
 }
 
 export type TaskType = {
-  id: number,
-  catalogueId: number,
-  name: string,
-  alias: string,
-  type: string,
-  checkPoint: number,
-  savePointPath: string,
-  parallelism: number,
-  fragment: boolean,
-  clusterId: number,
-  clusterName: string,
-  note: string,
-  enabled: boolean,
-  createTime: Date,
-  updateTime: Date,
-  statement: string,
+  id?: number,
+  catalogueId?: number,
+  name?: string,
+  alias?: string,
+  type?: string,
+  checkPoint?: number,
+  savePointPath?: string,
+  parallelism?: number,
+  fragment?: boolean,
+  clusterId?: any,
+  clusterName?: string,
+  note?: string,
+  enabled?: boolean,
+  createTime?: Date,
+  updateTime?: Date,
+  statement?: string,
+  session:string;
 };
 
 export type TabsItemType = {
@@ -55,6 +56,7 @@ export type StateType = {
   sql?: string;
   currentPath?: string[];
   tabs:TabsType;
+  session:string[];
 };
 
 export type ModelType = {
@@ -69,18 +71,14 @@ export type ModelType = {
     saveTabs: Reducer<StateType>;
     changeActiveKey: Reducer<StateType>;
     saveTaskData: Reducer<StateType>;
+    saveSession: Reducer<StateType>;
   };
 };
 
 const getClusters = async () => {
   try {
-    const msg = await postAll('api/cluster/listEnabledAll');
-    let data:any= [];
-    msg.then(value=>{
-      data = value.datas;
-    });
-    console.log(data);
-    return data;
+    const {datas} = await postAll('api/cluster/listEnabledAll');
+    return datas;
   } catch (error) {
     console.error('获取Flink集群失败');
     return [];
@@ -97,6 +95,14 @@ const Model: ModelType = {
       key: 0 ,
       value:'',
       closable: false,
+      task:{
+        checkPoint: 0,
+        savePointPath: '',
+        parallelism: 1,
+        fragment: true,
+        clusterId: '0',
+        session:'admin',
+      },
     },
     sql: '',
     currentPath: [],
@@ -107,8 +113,17 @@ const Model: ModelType = {
         key: 0 ,
         value:'',
         closable: false,
+        task:{
+          checkPoint: 0,
+          savePointPath: '',
+          parallelism: 1,
+          fragment: true,
+          clusterId: '0',
+          session:'admin',
+        },
       }],
     },
+    session:['admin'],
   },
 
   effects: {
@@ -149,19 +164,19 @@ const Model: ModelType = {
       };
     },
     saveTabs(state, { payload }) {
-      /*let newCurrent = state.current;
-      for(let i=0;i<payload.tabs.panes.length;i++){
-        if(payload.tabs.panes[i].key==payload.tabs.activeKey){
-          newCurrent=payload.tabs.panes[i];
+      let newCurrent = state.current;
+      for(let i=0;i<payload.panes.length;i++){
+        if(payload.panes[i].key==payload.activeKey){
+          newCurrent=payload.panes[i];
+        }
       }
-      }*/
       return {
         ...state,
         current:{
-          ...payload.current,
+          ...newCurrent,
         },
         tabs:{
-          ...payload.tabs,
+          ...payload,
         },
       };
     },
@@ -188,9 +203,7 @@ const Model: ModelType = {
       let newTabs = state.tabs;
       for(let i=0;i<newTabs.panes.length;i++){
         if(newTabs.panes[i].key==newTabs.activeKey){
-          newTabs.panes[i]={
-            ...payload
-          };
+          newTabs.panes[i].task=payload;
         }
       }
       return {
@@ -200,6 +213,20 @@ const Model: ModelType = {
         },
       };
     },
+    saveSession(state, { payload }) {
+      let newSession = state.session;
+      for(let i=0;i<newSession.length;i++){
+        if(newSession[i].key==payload){
+          return {};
+        }
+      }
+      newSession.push(payload);
+      console.log(newSession);
+      return {
+        ...state,
+        session:newSession,
+      };
+    },
   },
 };