[Feature-1074][web] Add file upload in flinkjar task (#1077)

Co-authored-by: wenmo <32723967+wenmo@users.noreply.github.com>

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

@@ -20,24 +20,39 @@
 
 import {connect} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, InputNumber, Input, Select, Tag, Row, Col, Badge, Tooltip, Button, Space} from "antd";
-import {InfoCircleOutlined, PlusOutlined, MinusSquareOutlined, MinusCircleOutlined,PaperClipOutlined} from "@ant-design/icons";
+import {Form, InputNumber, Input, Select, Tag, Row, Col, Badge, Tooltip, Button, Space, Upload, message} from "antd";
+import {
+  InfoCircleOutlined,
+  PlusOutlined,
+  MinusSquareOutlined,
+  MinusCircleOutlined,
+  PaperClipOutlined,
+  UploadOutlined
+} from "@ant-design/icons";
 import styles from "./index.less";
-import {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {JarStateType} from "@/pages/Jar/model";
 import {Scrollbars} from "react-custom-scrollbars";
 import {RUN_MODE} from "@/components/Studio/conf";
+import {CODE} from "@/components/Common/crud";
+import {
+  getConfigFormValues,
+  getHadoopConfigPathFromClusterConfigurationsById
+} from "@/pages/ClusterConfiguration/function";
 
 const {Option} = Select;
 
 const StudioJarSetting = (props: any) => {
 
-  const {clusterConfiguration, current, form, dispatch, tabs, jars,env, toolHeight} = props;
+  const {clusterConfiguration, current, form, dispatch, tabs, jars, toolHeight} = props;
+  const [hadoopConfigPath, setHadoopConfigPath] = useState<string | undefined>(undefined);
+  const [jarPath, setJarPath] = useState<string | undefined>(undefined);
 
   const getClusterConfigurationOptions = () => {
     const itemList = [];
     for (const item of clusterConfiguration) {
-      const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      const tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option key={item.id} value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -48,7 +63,8 @@ const StudioJarSetting = (props: any) => {
   const getJarOptions = () => {
     const itemList = [];
     for (const item of jars) {
-      const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      const tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option key={item.id} value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -58,9 +74,15 @@ const StudioJarSetting = (props: any) => {
 
   useEffect(() => {
     form.setFieldsValue(current.task);
+    setHadoopConfigPath(getHadoopConfigPathFromClusterConfigurationsById(current.task.clusterConfigurationId, clusterConfiguration));
+    for (let i in jars) {
+      if (jars[i].id == current.task.jarId) {
+        setJarPath(jars[i].path);
+        break;
+      }
+    }
   }, [current.task]);
 
-
   const onValuesChange = (change: any, all: any) => {
     const newTabs = tabs;
     for (let i = 0; i < newTabs.panes.length; i++) {
@@ -75,6 +97,49 @@ const StudioJarSetting = (props: any) => {
       type: "Studio/saveTabs",
       payload: newTabs,
     });
+    let clusterConfigurationId = all['clusterConfigurationId'];
+    let jarId = all['jarId'];
+    setHadoopConfigPath(getHadoopConfigPathFromClusterConfigurationsById(clusterConfigurationId, clusterConfiguration));
+    for (let i in jars) {
+      if (jars[i].id == jarId) {
+        setJarPath(jars[i].path);
+        break;
+      }
+    }
+  };
+
+  const getUploadHdfsProps = () => {
+    let dir = '';
+    if (jarPath) {
+      if (jarPath.indexOf('.jar') > -1) {
+        dir = jarPath.substring(0, jarPath.lastIndexOf('/'));
+      } else {
+        dir = jarPath;
+      }
+    }
+    return {
+      name: 'files',
+      action: '/api/fileUpload/hdfs',
+      headers: {
+        authorization: 'authorization-text',
+      },
+      data: {
+        dir,
+        hadoopConfigPath
+      },
+      showUploadList: true,
+      onChange(info) {
+        if (info.file.status === 'done') {
+          if (info.file.response.code == CODE.SUCCESS) {
+            message.success(info.file.response.msg);
+          } else {
+            message.warn(info.file.response.msg);
+          }
+        } else if (info.file.status === 'error') {
+          message.error(`${info.file.name} 上传失败`);
+        }
+      },
+    }
   };
 
   return (
@@ -121,18 +186,22 @@ const StudioJarSetting = (props: any) => {
               </Form.Item>
             </Col>
           </Row>
-          <Form.Item label="可执行 Jar"
+          <Form.Item label={<>可执行 Jar </>}
                      tooltip={`选择可执行 Jar 进行 ${current.task.type} 模式的远程提交 Jar 任务。当该参数项存在值时，将只提交可执行 Jar.`}
-                     name="jarId"
                      className={styles.form_item}>
-            <Select
-              style={{width: '100%'}}
-              placeholder="选择可执行Jar，非必填"
-              allowClear
-              optionLabelProp="label"
-            >
-              {getJarOptions()}
-            </Select>
+            <Form.Item name="jarId" noStyle>
+              <Select
+                style={{width: '80%'}}
+                placeholder="选择可执行Jar，非必填"
+                allowClear
+                optionLabelProp="label"
+              >
+                {getJarOptions()}
+              </Select>
+            </Form.Item>
+            <Upload {...getUploadHdfsProps()} multiple>
+              <UploadOutlined/>
+            </Upload>
           </Form.Item>
           <Row>
             <Col span={12}>

dlink-web/src/pages/ClusterConfiguration/function.ts

@@ -23,6 +23,7 @@ import {
   HADOOP_CONFIG_NAME_LIST,
   KUBERNETES_CONFIG_NAME_LIST
 } from "@/pages/ClusterConfiguration/conf";
+import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
 
 export function getConfig(values:any) {
   let flinkConfig = addValueToMap(values,FLINK_CONFIG_NAME_LIST());
@@ -120,3 +121,12 @@ function addMapToList(map:{},keys:string[]){
   }
   return list;
 }
+
+export function getHadoopConfigPathFromClusterConfigurationsById(id: number, clusterConfigurations: ClusterConfigurationTableListItem[]){
+  for(let i in clusterConfigurations){
+    if(clusterConfigurations[i].id == id){
+      return getConfigFormValues(clusterConfigurations[i])['hadoopConfigPath']
+    }
+  }
+  return undefined;
+}