集群下拉框优化

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

@@ -2,22 +2,22 @@ import {executeDDL} from "@/pages/FlinkSqlStudio/service";
 import FlinkSQL from "./FlinkSQL";
 import {TaskType} from "@/pages/FlinkSqlStudio/model";
 import {Modal} from "antd";
-import {handleRemove} from "@/components/Common/crud";
+import {getData, handleRemove} from "@/components/Common/crud";
 
-export function showTables(task:TaskType,dispatch:any) {
+export function showTables(task: TaskType, dispatch: any) {
   const res = executeDDL({
-    statement:FlinkSQL.SHOW_TABLES,
+    statement: FlinkSQL.SHOW_TABLES,
     clusterId: task.clusterId,
-    session:task.session,
-    useSession:task.useSession,
-    useResult:true,
+    session: task.session,
+    useSession: task.useSession,
+    useResult: true,
   });
-  res.then((result)=>{
+  res.then((result) => {
     let tableData = [];
-    if(result.datas.rowData.length>0){
+    if (result.datas.rowData.length > 0) {
       tableData = result.datas.rowData;
     }
-    dispatch&&dispatch({
+    dispatch && dispatch({
       type: "Studio/refreshCurrentSessionCluster",
       payload: {
         session: task.session,
@@ -29,39 +29,49 @@ export function showTables(task:TaskType,dispatch:any) {
   });
 }
 
-export function removeTable(tablename:string,task:TaskType,dispatch:any) {
+export function removeTable(tablename: string, task: TaskType, dispatch: any) {
   Modal.confirm({
-    title: '确定删除表【'+tablename+'】吗？',
+    title: '确定删除表【' + tablename + '】吗？',
     okText: '确认',
     cancelText: '取消',
-    onOk:async () => {
+    onOk: async () => {
       const res = executeDDL({
-        statement:"drop table "+tablename,
+        statement: "drop table " + tablename,
         clusterId: task.clusterId,
-        session:task.session,
-        useSession:task.useSession,
-        useResult:true,
+        session: task.session,
+        useSession: task.useSession,
+        useResult: true,
       });
-      res.then((result)=>{
-        showTables(task,dispatch);
+      res.then((result) => {
+        showTables(task, dispatch);
       });
     }
   });
 }
 
-export function clearSession(session:string,task:TaskType,dispatch:any) {
+export function clearSession(session: string, task: TaskType, dispatch: any) {
   Modal.confirm({
-    title: '确认清空会话【'+session+'】？',
+    title: '确认清空会话【' + session + '】？',
     okText: '确认',
     cancelText: '取消',
-    onOk:async () => {
+    onOk: async () => {
       let para = {
-        id:session,
+        id: session,
       };
-      const res = handleRemove('/api/studio/clearSession',[para]);
-      res.then((result)=>{
-        showTables(task,dispatch);
+      const res = handleRemove('/api/studio/clearSession', [para]);
+      res.then((result) => {
+        showTables(task, dispatch);
       });
     }
   });
 }
+
+export function showCluster(dispatch: any) {
+  const res = getData('api/cluster/listEnabledAll');
+  res.then((result) => {
+    result.datas && dispatch && dispatch({
+      type: "Studio/saveCluster",
+      payload: result.datas,
+    });
+  });
+}

dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/components/SessionForm.tsx

 import React, {useState} from 'react';
-import {Form, Button, Input, Modal,Select,Switch} from 'antd';
+import {Form, Button, Input, Modal,Select,Tag,Switch} from 'antd';
 
 import {SessionItem} from '../data.d';
 import {connect} from "umi";
@@ -32,6 +32,8 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
     createTime: props.values.createTime,
   });
 
+  const {cluster} = props;
+
   const [form] = Form.useForm();
 
   const {
@@ -47,6 +49,20 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
     handleUpdate({...formVals, ...fieldsValue});
   };
 
+  const getClusterOptions = ()=>{
+    let itemList = [(<Option value={0} label={(<><Tag color="default">Local</Tag>本地环境</>)}>
+      <Tag color="default">Local</Tag>
+      本地环境
+    </Option>)];
+    for(let item of cluster){
+      let tag =(<><Tag color={item.enabled?"processing":"error"}>{item.type}</Tag>{item.alias}</>);
+      itemList.push(<Option value={item.id} label={tag}>
+        {tag}
+      </Option>)
+    }
+    return itemList;
+  };
+
   const renderContent = () => {
     return (
       <>
@@ -82,7 +98,7 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
             defaultValue={0}
             optionLabelProp="label"
           >
-
+            {getClusterOptions()}
           </Select>
         </Item>
       </>

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

@@ -4,35 +4,30 @@ import {Form, InputNumber,Input,Switch,Select,Tag,Row,Col,Divider,Tooltip,Button
 import {InfoCircleOutlined,PlusOutlined,MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect, useState} from "react";
-import {showTables} from "@/components/Studio/StudioEvent/DDL";
+import {showCluster, showTables} from "@/components/Studio/StudioEvent/DDL";
 
 const { Option } = Select;
 
 const StudioSetting = (props: any) => {
 
   const {cluster,current,form,dispatch,tabs} = props;
-  const [clusterOption, setClusterOption] = useState<[]>();
 
-
-  const getCluster = ()=>{
-    cluster&&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);
-    });
+  const getClusterOptions = ()=>{
+    let itemList = [(<Option value={0} label={(<><Tag color="default">Local</Tag>本地环境</>)}>
+      <Tag color="default">Local</Tag>
+      本地环境
+    </Option>)];
+    for(let item of cluster){
+      let tag =(<><Tag color={item.enabled?"processing":"error"}>{item.type}</Tag>{item.alias}</>);
+      itemList.push(<Option value={item.id} label={tag}>
+        {tag}
+      </Option>)
+    }
+    return itemList;
   };
 
   form.setFieldsValue(current.task);
 
-  useEffect(() => {
-    getCluster();
-  }, []);
-
   const onValuesChange = (change:any,all:any)=>{
     let newTabs = tabs;
     for(let i=0;i<newTabs.panes.length;i++){
@@ -123,11 +118,7 @@ const StudioSetting = (props: any) => {
           optionLabelProp="label"
           onChange={onChangeClusterSession}
         >
-          <Option value={0} label={(<><Tag color="default">Local</Tag>本地环境</>)}>
-            <Tag color="default">Local</Tag>
-            本地环境
-          </Option>
-          {clusterOption}
+          {getClusterOptions()}
         </Select>
       </Form.Item>
         </Col>

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

@@ -11,6 +11,7 @@ import {StateType} from "@/pages/FlinkSqlStudio/model";
 import StudioConsole from "./StudioConsole";
 import StudioLeftTool from "./StudioLeftTool";
 import StudioRightTool from "./StudioRightTool";
+import {showCluster} from "@/components/Studio/StudioEvent/DDL";
 
 type StudioProps = {
   rightClickMenu:StateType['rightClickMenu'];
@@ -22,6 +23,8 @@ const Studio: React.FC<StudioProps> = (props) => {
   const {rightClickMenu,dispatch} = props;
   const [form] = Form.useForm();
 
+  showCluster(dispatch);
+
   const onClick=()=>{
     if(rightClickMenu){
       dispatch&&dispatch({

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

@@ -85,16 +85,16 @@ export type SessionType = {
 }
 export type StateType = {
   cluster?: ClusterType[];
-  currentSessionCluster: SessionType;
-  current: TabsItemType;
+  currentSessionCluster?: SessionType;
+  current?: TabsItemType;
   sql?: string;
   monaco?: any;
   currentPath?: string[];
-  tabs: TabsType;
-  session: SessionType[];
-  result:{};
+  tabs?: TabsType;
+  session?: SessionType[];
+  result?:{};
   rightClickMenu?: boolean;
-  refs:{
+  refs?:{
     history:any;
   };
 };
@@ -116,24 +116,14 @@ export type ModelType = {
     showRightClickMenu: Reducer<StateType>;
     refreshCurrentSessionCluster: Reducer<StateType>;
     saveResult: Reducer<StateType>;
+    saveCluster: Reducer<StateType>;
   };
 };
 
-const getClusters = async () => {
-  try {
-    const {datas} = await getData('api/cluster/listEnabledAll');
-    return datas;
-  } catch (error) {
-    console.error('获取Flink集群失败');
-    return [];
-  }
-};
-
-
 const Model: ModelType = {
   namespace: 'Studio',
   state: {
-    cluster: getClusters(),
+    cluster: [],
     currentSessionCluster: {
       connectors: [],
     },
@@ -322,17 +312,23 @@ const Model: ModelType = {
       };
     },
     saveSession(state, {payload}) {
-      let newSession = state.session;
-      for (let i = 0; i < newSession.length; i++) {
-        if (newSession[i].key == payload) {
-          return {};
+      let newSession = state?.session;
+      if(newSession) {
+        for (let i = 0; i < newSession.length; i++) {
+          if (newSession[i].key == payload) {
+            return {};
+          }
         }
+        newSession.push(payload);
+        return {
+          ...state,
+          session: newSession,
+        };
+      }else {
+        return {
+          ...state
+        };
       }
-      newSession.push(payload);
-      return {
-        ...state,
-        session: newSession,
-      };
     },
     showRightClickMenu(state, {payload}) {
       return {
@@ -356,6 +352,12 @@ const Model: ModelType = {
         },
       };
     },
+    saveCluster(state, {payload}) {
+      return {
+        ...state,
+        cluster: payload,
+      };
+    },
   },
 };