From e68e994d46a3cc246375aa7b4d262a29161de354 Mon Sep 17 00:00:00 2001
From: zhuangchong <37063904+zhuangchong@users.noreply.github.com>
Date: Mon, 8 Mar 2021 08:54:03 +0800
Subject: [PATCH 1/2] when Kerberos authentication is enabled,cannot get
 application status. (#4980)

---
 .../common/utils/HadoopUtils.java             |  12 +-
 .../common/utils/KerberosHttpClient.java      | 169 +++++++++---------
 2 files changed, 89 insertions(+), 92 deletions(-)

diff --git a/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/HadoopUtils.java b/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/HadoopUtils.java
index d8484c2a7a..ef89a30e59 100644
--- a/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/HadoopUtils.java
+++ b/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/HadoopUtils.java
@@ -428,12 +428,7 @@ public class HadoopUtils implements Closeable {
         String applicationUrl = getApplicationUrl(applicationId);
         logger.info("applicationUrl={}", applicationUrl);
 
-        String responseContent;
-        if (PropertyUtils.getBoolean(Constants.HADOOP_SECURITY_AUTHENTICATION_STARTUP_STATE, false)) {
-            responseContent = KerberosHttpClient.get(applicationUrl);
-        } else {
-            responseContent = HttpUtils.get(applicationUrl);
-        }
+        String responseContent = PropertyUtils.getBoolean(Constants.HADOOP_SECURITY_AUTHENTICATION_STARTUP_STATE, false) ? KerberosHttpClient.get(applicationUrl) : HttpUtils.get(applicationUrl);
         if (responseContent != null) {
             ObjectNode jsonObject = JSONUtils.parseObject(responseContent);
             if (!jsonObject.has("app")) {
@@ -445,7 +440,8 @@ public class HadoopUtils implements Closeable {
             //may be in job history
             String jobHistoryUrl = getJobHistoryUrl(applicationId);
             logger.info("jobHistoryUrl={}", jobHistoryUrl);
-            responseContent = HttpUtils.get(jobHistoryUrl);
+            responseContent = PropertyUtils.getBoolean(Constants.HADOOP_SECURITY_AUTHENTICATION_STARTUP_STATE, false) ? KerberosHttpClient.get(jobHistoryUrl) : HttpUtils.get(jobHistoryUrl);
+
             if (null != responseContent) {
                 ObjectNode jsonObject = JSONUtils.parseObject(responseContent);
                 if (!jsonObject.has("job")) {
@@ -682,7 +678,7 @@ public class HadoopUtils implements Closeable {
          */
         public static String getRMState(String url) {
 
-            String retStr = HttpUtils.get(url);
+            String retStr = PropertyUtils.getBoolean(Constants.HADOOP_SECURITY_AUTHENTICATION_STARTUP_STATE, false) ? KerberosHttpClient.get(url) : HttpUtils.get(url);
 
             if (StringUtils.isEmpty(retStr)) {
                 return null;
diff --git a/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/KerberosHttpClient.java b/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/KerberosHttpClient.java
index 5c1fd41900..d1977ed3f1 100644
--- a/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/KerberosHttpClient.java
+++ b/dolphinscheduler-common/src/main/java/org/apache/dolphinscheduler/common/utils/KerberosHttpClient.java
@@ -14,9 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 package org.apache.dolphinscheduler.common.utils;
 
 import org.apache.dolphinscheduler.common.Constants;
+
 import org.apache.http.auth.AuthSchemeProvider;
 import org.apache.http.auth.AuthScope;
 import org.apache.http.auth.Credentials;
@@ -28,15 +30,7 @@ import org.apache.http.impl.auth.SPNegoSchemeFactory;
 import org.apache.http.impl.client.BasicCredentialsProvider;
 import org.apache.http.impl.client.CloseableHttpClient;
 import org.apache.http.impl.client.HttpClientBuilder;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
 
-import javax.security.auth.Subject;
-import javax.security.auth.kerberos.KerberosPrincipal;
-import javax.security.auth.login.AppConfigurationEntry;
-import javax.security.auth.login.Configuration;
-import javax.security.auth.login.LoginContext;
-import javax.security.auth.login.LoginException;
 import java.security.Principal;
 import java.security.PrivilegedAction;
 import java.util.HashMap;
@@ -44,95 +38,103 @@ import java.util.HashSet;
 import java.util.Map;
 import java.util.Set;
 
+import javax.security.auth.Subject;
+import javax.security.auth.kerberos.KerberosPrincipal;
+import javax.security.auth.login.AppConfigurationEntry;
+import javax.security.auth.login.Configuration;
+import javax.security.auth.login.LoginContext;
+import javax.security.auth.login.LoginException;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
 /**
  * kerberos http client
  */
 public class KerberosHttpClient {
-
     public static final Logger logger = LoggerFactory.getLogger(KerberosHttpClient.class);
 
     private String principal;
     private String keyTabLocation;
-
     public KerberosHttpClient(String principal, String keyTabLocation) {
-	super();
-	this.principal = principal;
-	this.keyTabLocation = keyTabLocation;
+        super();
+        this.principal = principal;
+        this.keyTabLocation = keyTabLocation;
     }
 
     public KerberosHttpClient(String principal, String keyTabLocation, boolean isDebug) {
-	this(principal, keyTabLocation);
-	if (isDebug) {
-	    System.setProperty("sun.security.spnego.debug", "true");
-	    System.setProperty("sun.security.krb5.debug", "true");
-	}
+        this(principal, keyTabLocation);
+        if (isDebug) {
+            System.setProperty("sun.security.spnego.debug", "true");
+            System.setProperty("sun.security.krb5.debug", "true");
+        }
     }
 
     public KerberosHttpClient(String principal, String keyTabLocation, String krb5Location, boolean isDebug) {
-	this(principal, keyTabLocation, isDebug);
-	System.setProperty("java.security.krb5.conf", krb5Location);
+        this(principal, keyTabLocation, isDebug);
+        System.setProperty("java.security.krb5.conf", krb5Location);
     }
 
     private static CloseableHttpClient buildSpengoHttpClient() {
-	HttpClientBuilder builder = HttpClientBuilder.create();
-	Lookup<AuthSchemeProvider> authSchemeRegistry = RegistryBuilder.<AuthSchemeProvider>create()
-		.register(AuthSchemes.SPNEGO, new SPNegoSchemeFactory(true)).build();
-	builder.setDefaultAuthSchemeRegistry(authSchemeRegistry);
-	BasicCredentialsProvider credentialsProvider = new BasicCredentialsProvider();
-	credentialsProvider.setCredentials(new AuthScope(null, -1, null), new Credentials() {
-	    @Override
-	    public Principal getUserPrincipal() {
-		return null;
-	    }
-
-	    @Override
-	    public String getPassword() {
-		return null;
-	    }
-	});
-	builder.setDefaultCredentialsProvider(credentialsProvider);
-	return builder.build();
+        HttpClientBuilder builder = HttpClientBuilder.create();
+        Lookup<AuthSchemeProvider> authSchemeRegistry = RegistryBuilder.<AuthSchemeProvider>create()
+                .register(AuthSchemes.SPNEGO, new SPNegoSchemeFactory(true)).build();
+        builder.setDefaultAuthSchemeRegistry(authSchemeRegistry);
+        BasicCredentialsProvider credentialsProvider = new BasicCredentialsProvider();
+        credentialsProvider.setCredentials(new AuthScope(null, -1, null), new Credentials() {
+            @Override
+            public Principal getUserPrincipal() {
+                return null;
+            }
+
+            @Override
+            public String getPassword() {
+                return null;
+            }
+        });
+        builder.setDefaultCredentialsProvider(credentialsProvider);
+        return builder.build();
     }
 
     public String get(final String url, final String userId) {
-	logger.info("Calling KerberosHttpClient {} {} {}", this.principal, this.keyTabLocation, url);
-	Configuration config = new Configuration() {
-	    @SuppressWarnings("serial")
-	    @Override
-	    public AppConfigurationEntry[] getAppConfigurationEntry(String name) {
-		Map<String, Object> options = new HashMap<>(9);
-		options.put("useTicketCache", "false");
-		options.put("useKeyTab", "true");
-		options.put("keyTab", keyTabLocation);
-		options.put("refreshKrb5Config", "true");
-		options.put("principal", principal);
-		options.put("storeKey", "true");
-		options.put("doNotPrompt", "true");
-		options.put("isInitiator", "true");
-		options.put("debug", "true");
-		return new AppConfigurationEntry[] {
-			new AppConfigurationEntry("com.sun.security.auth.module.Krb5LoginModule",
-				AppConfigurationEntry.LoginModuleControlFlag.REQUIRED, options) };
-	    }
-	};
-	Set<Principal> princ = new HashSet<>(1);
-	princ.add(new KerberosPrincipal(userId));
-	Subject sub = new Subject(false, princ, new HashSet<>(), new HashSet<>());
-
-	LoginContext lc;
-	try {
-	    lc = new LoginContext("", sub, null, config);
-	    lc.login();
-	    Subject serviceSubject = lc.getSubject();
-	    return Subject.doAs(serviceSubject, (PrivilegedAction<String>) () -> {
-		CloseableHttpClient httpClient = buildSpengoHttpClient();
-		HttpGet httpget = new HttpGet(url);
-		return HttpUtils.getResponseContentString(httpget, httpClient);
-	    });
-	} catch (LoginException le) {
-	    logger.error("Kerberos authentication failed ", le);
-	}
-	return null;
+        logger.info("Calling KerberosHttpClient {} {} {}", this.principal, this.keyTabLocation, url);
+        Configuration config = new Configuration() {
+            @SuppressWarnings("serial")
+            @Override
+            public AppConfigurationEntry[] getAppConfigurationEntry(String name) {
+                Map<String, Object> options = new HashMap<>(9);
+                options.put("useTicketCache", "false");
+                options.put("useKeyTab", "true");
+                options.put("keyTab", keyTabLocation);
+                options.put("refreshKrb5Config", "true");
+                options.put("principal", principal);
+                options.put("storeKey", "true");
+                options.put("doNotPrompt", "true");
+                options.put("isInitiator", "true");
+                options.put("debug", "true");
+                return new AppConfigurationEntry[] {
+                    new AppConfigurationEntry("com.sun.security.auth.module.Krb5LoginModule",
+                    AppConfigurationEntry.LoginModuleControlFlag.REQUIRED, options) };
+                }
+            };
+        Set<Principal> princ = new HashSet<>(1);
+        princ.add(new KerberosPrincipal(userId));
+        Subject sub = new Subject(false, princ, new HashSet<>(), new HashSet<>());
+
+        LoginContext lc;
+        try {
+            lc = new LoginContext("", sub, null, config);
+            lc.login();
+            Subject serviceSubject = lc.getSubject();
+            return Subject.doAs(serviceSubject, (PrivilegedAction<String>) () -> {
+                CloseableHttpClient httpClient = buildSpengoHttpClient();
+                HttpGet httpget = new HttpGet(url);
+                return HttpUtils.getResponseContentString(httpget, httpClient);
+            });
+        } catch (LoginException le) {
+            logger.error("Kerberos authentication failed ", le);
+        }
+        return null;
     }
 
     /**
@@ -143,14 +145,13 @@ public class KerberosHttpClient {
      */
     public static String get(String url) {
 
-	String responseContent;
-	KerberosHttpClient kerberosHttpClient = new KerberosHttpClient(
-		PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_USERNAME),
-		PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_PATH),
-		PropertyUtils.getString(Constants.JAVA_SECURITY_KRB5_CONF_PATH), true);
-	responseContent = kerberosHttpClient.get(url, PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_USERNAME));
-	return responseContent;
+        String responseContent;
+        KerberosHttpClient kerberosHttpClient = new KerberosHttpClient(
+            PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_USERNAME),
+            PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_PATH),
+            PropertyUtils.getString(Constants.JAVA_SECURITY_KRB5_CONF_PATH), true);
+        responseContent = kerberosHttpClient.get(url, PropertyUtils.getString(Constants.LOGIN_USER_KEY_TAB_USERNAME));
+        return responseContent;
 
     }
-
 }

From 71bd231c9564837afe6f9ea380b42e7f057a610a Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Mon, 8 Mar 2021 08:58:38 +0800
Subject: [PATCH 2/2] [Improvement][UI] Unify form model by m-list-box (#4982)

---
 .../pages/dag/_source/formModel/formModel.vue | 124 +++++------
 .../tasks/_source/dependItemList.vue          |   1 +
 .../_source/formModel/tasks/conditions.vue    |   4 +-
 .../dag/_source/formModel/tasks/datax.vue     |  18 +-
 .../dag/_source/formModel/tasks/dependent.vue |  10 +-
 .../dag/_source/formModel/tasks/flink.vue     |   1 -
 .../dag/_source/formModel/tasks/http.vue      |  19 +-
 .../pages/dag/_source/formModel/tasks/mr.vue  |   2 +-
 .../dag/_source/formModel/tasks/pre_tasks.vue |  49 +++--
 .../dag/_source/formModel/tasks/python.vue    |   3 +-
 .../pages/dag/_source/formModel/tasks/sql.vue |   4 +-
 .../dag/_source/formModel/tasks/sqoop.vue     | 200 ++++++++----------
 .../_source/formModel/tasks/sub_process.vue   |  44 ++--
 .../dag/_source/formModel/tasks/waterdrop.vue |   2 +-
 .../src/sass/common/index.scss                |   8 +-
 15 files changed, 223 insertions(+), 266 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 744c041e97..fe95e7af85 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -30,99 +30,83 @@
     <div class="content-box" v-if="isContentBox">
       <div class="form-model">
         <!-- Node name -->
-        <div class="clearfix list">
-          <div class="text-box"><span>{{$t('Node name')}}</span></div>
-          <div class="cont-box">
-            <label class="label-box">
-              <el-input
-                type="text"
-                v-model="name"
-                size="small"
-                :disabled="isDetails"
-                :placeholder="$t('Please enter name (required)')"
-                maxlength="100"
-                @blur="_verifName()">
-              </el-input>
-            </label>
+        <m-list-box>
+          <div slot="text">{{$t('Node name')}}</div>
+          <div slot="content">
+            <el-input
+              type="text"
+              v-model="name"
+              size="small"
+              :disabled="isDetails"
+              :placeholder="$t('Please enter name (required)')"
+              maxlength="100"
+              @blur="_verifName()">
+            </el-input>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Running sign -->
-        <div class="clearfix list">
-          <div class="text-box"><span>{{$t('Run flag')}}</span></div>
-          <div class="cont-box">
-            <label class="label-box">
-              <el-radio-group v-model="runFlag" size="small">
-                <el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
-                <el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
-              </el-radio-group>
-            </label>
+        <m-list-box>
+          <div slot="text">{{$t('Run flag')}}</div>
+          <div slot="content">
+            <el-radio-group v-model="runFlag" size="small">
+              <el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
+              <el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
+            </el-radio-group>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- description -->
-        <div class="clearfix list">
-          <div class="text-box">
-            <span>{{$t('Description')}}</span>
+        <m-list-box>
+          <div slot="text">{{$t('Description')}}</div>
+          <div slot="content">
+            <el-input
+              :rows="2"
+              type="textarea"
+              :disabled="isDetails"
+              v-model="description"
+              :placeholder="$t('Please enter description')">
+            </el-input>
           </div>
-          <div class="cont-box">
-            <label class="label-box">
-              <el-input
-                :rows="2"
-                type="textarea"
-                :disabled="isDetails"
-                v-model="description"
-                :placeholder="$t('Please enter description')">
-              </el-input>
-            </label>
-          </div>
-        </div>
+        </m-list-box>
 
         <!-- Task priority -->
-        <div class="clearfix list">
-          <div class="text-box">
-            <span>{{$t('Task priority')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box>
+          <div slot="text">{{$t('Task priority')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <m-priority v-model="taskInstancePriority"></m-priority>
             </span>
             <span class="text-b">{{$t('Worker group')}}</span>
             <m-worker-groups v-model="workerGroup"></m-worker-groups>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Number of failed retries -->
-        <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS'">
-          <div class="text-box">
-            <span>{{$t('Number of failed retries')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS'">
+          <div slot="text">{{$t('Number of failed retries')}}</div>
+          <div slot="content">
             <m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]"></m-select-input>
             <span>({{$t('Times')}})</span>
             <span class="text-b">{{$t('Failed retry interval')}}</span>
             <m-select-input v-model="retryInterval" :list="[1,10,30,60,120]"></m-select-input>
             <span>({{$t('Minute')}})</span>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Delay execution time -->
-        <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
-          <div class="text-box">
-            <span>{{$t('Delay execution time')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
+          <div slot="text">{{$t('Delay execution time')}}</div>
+          <div slot="content">
             <m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
             <span>({{$t('Minute')}})</span>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Branch flow -->
-        <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
-          <div class="text-box">
-            <span>{{$t('State')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType === 'CONDITIONS'">
+          <div slot="text">{{$t('State')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <el-select style="width: 157px;" size="small" v-model="successNode" :disabled="true">
                 <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
@@ -133,12 +117,10 @@
               <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </div>
-        </div>
-        <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
-          <div class="text-box">
-            <span>{{$t('State')}}</span>
-          </div>
-          <div class="cont-box">
+        </m-list-box>
+        <m-list-box v-if="nodeData.taskType === 'CONDITIONS'">
+          <div slot="text">{{$t('State')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <el-select style="width: 157px;" size="small" v-model="failedNode" :disabled="true">
                 <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
@@ -149,7 +131,7 @@
               <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Task timeout alarm -->
         <m-timeout-alarm
@@ -299,6 +281,7 @@
   import mMr from './tasks/mr'
   import mSql from './tasks/sql'
   import i18n from '@/module/i18n'
+  import mListBox from './tasks/_source/listBox'
   import mShell from './tasks/shell'
   import mWaterdrop from './tasks/waterdrop'
   import mSpark from './tasks/spark'
@@ -796,6 +779,7 @@
       }
     },
     components: {
+      mListBox,
       mMr,
       mShell,
       mWaterdrop,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
index b664904de7..5b4a7d9919 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@@ -257,6 +257,7 @@
       // get processlist
       this._getProjectList().then(() => {
         if (!this.dependItemList.length) {
+          if (!this.projectList.length) return
           let projectId = this.projectList[0].value
           this._getProcessByProjectId(projectId).then(definitionList => {
             let value = definitionList[0].value
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
index 3cfb1625be..60a6806c62 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="dependence-model">
+  <div class="conditions-model">
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">
@@ -178,7 +178,7 @@
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
-  .dependence-model {
+  .conditions-model {
     margin-top: -10px;
     .dep-opt {
       margin-bottom: 10px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
index fb9f2fa392..59647fd34b 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
@@ -26,7 +26,7 @@
         </label>
       </div>
     </m-list-box>
-    <div v-if="!enable">
+    <template v-if="!enable">
       <m-list-box>
         <div slot="text">{{$t('Datasource')}}</div>
         <div slot="content">
@@ -115,8 +115,8 @@
           <span>({{$t('0 means unlimited by count')}})</span>
         </div>
       </m-list-box>
-    </div>
-    <div v-else>
+    </template>
+    <template v-else>
       <m-list-box>
         <div slot="text">json</div>
         <div slot="content">
@@ -140,12 +140,10 @@
           </m-local-params>
         </div>
       </m-list-box>
-    </div>
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Running Memory')}}</span>
-      </div>
-      <div class="cont-box">
+    </template>
+    <m-list-box>
+      <div slot="text">{{$t('Running Memory')}}</div>
+      <div slot="content">
         <span >{{$t('Min Memory')}}</span>
         <m-select-input v-model="xms" :list="[1,2,3,4]">
         </m-select-input>
@@ -155,7 +153,7 @@
         </m-select-input>
         <span>&nbsp;&nbsp;&nbsp;G</span>
       </div>
-    </div>
+    </m-list-box>
     <el-dialog
       :visible.sync="scriptBoxDialog"
       append-to-body="true"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
index 220ec99f46..90575d2873 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="dependence-model">
+  <div class="dependent-model">
     <m-list-box>
       <div slot="text">{{$t('Add dependency')}}</div>
       <div slot="content">
@@ -67,7 +67,7 @@
   import disabledState from '@/module/mixin/disabledState'
 
   export default {
-    name: 'dependence',
+    name: 'dependent',
     data () {
       return {
         relation: 'AND',
@@ -132,7 +132,7 @@
           this.isLoading = false
         }, 600)
       },
-      cacheDependence (val) {
+      cacheDependent (val) {
         this.$emit('on-cache-dependent', val)
       }
     },
@@ -157,7 +157,7 @@
     destroyed () {
     },
     computed: {
-      cacheDependence () {
+      cacheDependent () {
         return {
           relation: this.relation,
           dependTaskList: _.map(this.dependTaskList, v => {
@@ -174,7 +174,7 @@
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
-  .dependence-model {
+  .dependent-model {
     margin-top: -10px;
     .dep-opt {
       margin-bottom: 10px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
index d328c5f8b2..518e324d46 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
@@ -33,7 +33,6 @@
         </el-select>
       </div>
     </m-list-box>
-
     <m-list-box v-if="programType !== 'PYTHON'">
       <div slot="text">{{$t('Main Class')}}</div>
       <div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
index bbd5e535ea..e3122347d2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
@@ -88,8 +88,7 @@
         </el-input>
       </div>
     </m-list-box>
-
-    <m-list-box  >
+    <m-list-box>
       <div slot="text">{{$t('Timeout Settings')}}</div>
       <div slot="content">
         <label class="label-box">
@@ -99,24 +98,20 @@
         </label>
       </div>
     </m-list-box>
-
-    <div class="clearfix list" v-if = "timeoutSettings" >
-      <div class="text-box">
-        <span>{{$t('Connect Timeout')}}</span>
-      </div>
-      <div class="cont-box">
-        <span  class="label-box"  style="width: 193px;display: inline-block;" >
+    <m-list-box v-if="timeoutSettings">
+      <div slot="text">{{$t('Connect Timeout')}}</div>
+      <div slot="content">
+        <span  class="label-box" style="width: 193px;display: inline-block;">
           <el-input size="small" v-model='connectTimeout' maxlength="7"></el-input>
         </span>
         <span>{{$t('ms')}}</span>
         <span class="text-b">{{$t('Socket Timeout')}}</span>
-        <span  class="label-box" style="width: 193px;display: inline-block;" >
+        <span  class="label-box" style="width: 193px;display: inline-block;">
           <el-input size="small" v-model='socketTimeout' maxlength="7"></el-input>
         </span>
         <span>{{$t('ms')}}</span>
       </div>
-    </div>
-
+    </m-list-box>
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
index adef5989e0..4581553989 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="spark-model">
+  <div class="mr-model">
     <m-list-box>
       <div slot="text">{{$t('Program Type')}}</div>
       <div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
index c922f98943..f2973fbc1a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
@@ -16,35 +16,33 @@
  */
 <template>
   <div class="pre_tasks-model">
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Pre tasks')}}</span>
+    <m-list-box>
+      <div slot="text">{{$t('Pre tasks')}}</div>
+      <div slot="content">
+        <el-select
+            ref="preTasksSelector"
+            style="width: 100%;"
+            filterable
+            multiple
+            size="small"
+            v-model="preTasks"
+            :disabled="isDetails"
+            :id="preTasksSelectorId">
+          <el-option
+              v-for="task in preTaskList"
+              :key="task.id"
+              :value="task.id"
+              :label="task.name">
+          </el-option>
+        </el-select>
       </div>
-      <div class="cont-box">
-        <div class="label-box">
-          <el-select
-              ref="preTasksSelector"
-              style="width: 100%;"
-              filterable
-              multiple
-              size="small"
-              v-model="preTasks"
-              :disabled="isDetails"
-              :id="preTasksSelectorId">
-            <el-option
-                v-for="task in preTaskList"
-                :key="task.id"
-                :value="task.id"
-                :label="task.name">
-            </el-option>
-          </el-select>
-        </div>
-      </div>
-    </div>
+    </m-list-box>
   </div>
 </template>
 <script>
   import disabledState from '@/module/mixin/disabledState'
+  import mListBox from './_source/listBox'
+
   export default {
     name: 'pre_tasks',
     mixins: [disabledState],
@@ -104,6 +102,7 @@
         })
         return true
       }
-    }
+    },
+    components: { mListBox }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
index 8c1eee0608..97336316dd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="shell-model">
+  <div class="python-model">
     <m-list-box>
       <div slot="text">{{$t('Script')}}</div>
       <div slot="content">
@@ -36,7 +36,6 @@
         </treeselect>
       </div>
     </m-list-box>
-
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index 5f58d29021..a709031632 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -34,7 +34,7 @@
         </div>
       </div>
     </m-list-box>
-    <template v-if="sqlType==0">
+    <template v-if="sqlType === 0">
       <m-list-box>
         <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
         <div slot="content">
@@ -54,7 +54,7 @@
         </div>
       </m-list-box>
     </template>
-    <m-list-box v-show="type === 'HIVE'">
+    <m-list-box v-if="type === 'HIVE'">
       <div slot="text">{{$t('SQL Parameter')}}</div>
       <div slot="content">
         <el-input
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
index 7819b23fc1..12a6ce88c8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
@@ -15,8 +15,7 @@
 * limitations under the License.
 */
 <template>
-  <div class="sql-model">
-
+  <div class="sqoop-model">
     <m-list-box>
       <div slot="text">{{$t('Custom Job')}}</div>
       <div slot="content">
@@ -78,99 +77,88 @@
           </m-local-params>
         </div>
       </m-list-box>
-
-      <template>
+      <m-list-box>
+        <div slot="text" style="font-weight:bold">{{$t('Data Source')}}</div>
+      </m-list-box>
+      <hr style="margin-left: 60px;">
+      <m-list-box>
+        <div slot="text">{{$t('Type')}}</div>
+        <div slot="content">
+          <el-select
+            style="width: 130px;"
+            size="small"
+            v-model="sourceType"
+            :disabled="isDetails"
+            @change="_handleSourceTypeChange">
+            <el-option
+              v-for="city in sourceTypeList"
+              :key="city.code"
+              :value="city.code"
+              :label="city.code">
+            </el-option>
+          </el-select>
+        </div>
+      </m-list-box>
+      <template v-if="sourceType === 'MYSQL'">
         <m-list-box>
-          <div slot="text" style="font-weight:bold">{{$t('Data Source')}}</div>
+          <div slot="text">{{$t('Datasource')}}</div>
+          <div slot="content">
+            <m-datasource
+              ref="refSourceDs"
+              @on-dsData="_onSourceDsData"
+              :data="{type:sourceMysqlParams.srcType,
+                    typeList: [{id: 0, code: 'MYSQL', disabled: false}],
+                    datasource:sourceMysqlParams.srcDatasource }"
+            >
+            </m-datasource>
+          </div>
         </m-list-box>
-        <hr style="margin-left: 60px;">
         <m-list-box>
-          <div slot="text">{{$t('Type')}}</div>
+          <div slot="text">{{$t('ModelType')}}</div>
           <div slot="content">
-            <el-select
-              style="width: 130px;"
-              size="small"
-              v-model="sourceType"
-              :disabled="isDetails"
-              @change="_handleSourceTypeChange">
-              <el-option
-                v-for="city in sourceTypeList"
-                :key="city.code"
-                :value="city.code"
-                :label="city.code">
-              </el-option>
-            </el-select>
+            <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType">
+              <el-radio label="0">{{$t('Form')}}</el-radio>
+              <el-radio label="1">SQL</el-radio>
+            </el-radio-group>
           </div>
         </m-list-box>
-
-        <template v-if="sourceType ==='MYSQL'">
-
+        <template v-if="sourceMysqlParams.srcQueryType === '0'">
           <m-list-box>
-            <div slot="text">{{$t('Datasource')}}</div>
+            <div slot="text">{{$t('Table')}}</div>
             <div slot="content">
-              <m-datasource
-                ref="refSourceDs"
-                @on-dsData="_onSourceDsData"
-                :data="{type:sourceMysqlParams.srcType,
-                      typeList: [{id: 0, code: 'MYSQL', disabled: false}],
-                      datasource:sourceMysqlParams.srcDatasource }"
-              >
-              </m-datasource>
+              <el-input
+                :disabled="isDetails"
+                type="text"
+                size="small"
+                v-model="sourceMysqlParams.srcTable"
+                :placeholder="$t('Please enter Mysql Table(required)')">
+              </el-input>
             </div>
           </m-list-box>
-
           <m-list-box>
-            <div slot="text">{{$t('ModelType')}}</div>
+            <div slot="text">{{$t('ColumnType')}}</div>
             <div slot="content">
-              <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType">
-                <el-radio label="0">{{$t('Form')}}</el-radio>
-                <el-radio label="1">SQL</el-radio>
+              <el-radio-group v-model="sourceMysqlParams.srcColumnType" size="small" style="vertical-align: sub;">
+                <el-radio label="0">{{$t('All Columns')}}</el-radio>
+                <el-radio label="1">{{$t('Some Columns')}}</el-radio>
               </el-radio-group>
             </div>
           </m-list-box>
-
-          <template v-if="sourceMysqlParams.srcQueryType=='0'">
-
-            <m-list-box>
-              <div slot="text">{{$t('Table')}}</div>
-              <div slot="content">
-                <el-input
-                  :disabled="isDetails"
-                  type="text"
-                  size="small"
-                  v-model="sourceMysqlParams.srcTable"
-                  :placeholder="$t('Please enter Mysql Table(required)')">
-                </el-input>
-              </div>
-            </m-list-box>
-
-            <m-list-box>
-              <div slot="text">{{$t('ColumnType')}}</div>
-              <div slot="content">
-                <el-radio-group v-model="sourceMysqlParams.srcColumnType" size="small" style="vertical-align: sub;">
-                  <el-radio label="0">{{$t('All Columns')}}</el-radio>
-                  <el-radio label="1">{{$t('Some Columns')}}</el-radio>
-                </el-radio-group>
-              </div>
-            </m-list-box>
-
-            <m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
-              <div slot="text">{{$t('Column')}}</div>
-              <div slot="content">
-                <el-input
-                  :disabled="isDetails"
-                  type="text"
-                  size="small"
-                  v-model="sourceMysqlParams.srcColumns"
-                  :placeholder="$t('Please enter Columns (Comma separated)')">
-                </el-input>
-              </div>
-            </m-list-box>
-          </template>
+          <m-list-box v-if="sourceMysqlParams.srcColumnType === '1'">
+            <div slot="text">{{$t('Column')}}</div>
+            <div slot="content">
+              <el-input
+                :disabled="isDetails"
+                type="text"
+                size="small"
+                v-model="sourceMysqlParams.srcColumns"
+                :placeholder="$t('Please enter Columns (Comma separated)')">
+              </el-input>
+            </div>
+          </m-list-box>
         </template>
       </template>
-
-      <template v-if="sourceType=='HIVE'">
+      <template v-if="sourceType === 'HIVE'">
         <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
@@ -220,8 +208,7 @@
           </div>
         </m-list-box>
       </template>
-
-      <template v-if="sourceType=='HDFS'">
+      <template v-if="sourceType === 'HDFS'">
         <m-list-box>
           <div slot="text">{{$t('Export Dir')}}</div>
           <div slot="content">
@@ -235,25 +222,23 @@
           </div>
         </m-list-box>
       </template>
-
-    <m-list-box v-show="srcQueryType === '1' && sourceType ==='MYSQL'">
-      <div slot="text">{{$t('SQL Statement')}}</div>
-      <div slot="content">
-        <div class="from-mirror">
-          <textarea
-                  id="code-sqoop-mirror"
-                  name="code-sqoop-mirror"
-                  style="opacity: 0;">
-          </textarea>
-          <a class="ans-modal-box-max">
-            <em class="el-icon-full-screen" @click="setEditorVal"></em>
-          </a>
-        </div>
-      </div>
-    </m-list-box>
-
-      <template>
-        <m-list-box v-show="sourceType === 'MYSQL'">
+      <template v-if="sourceType === 'MYSQL'">
+        <m-list-box v-if="srcQueryType === '1'">
+          <div slot="text">{{$t('SQL Statement')}}</div>
+          <div slot="content">
+            <div class="from-mirror">
+              <textarea
+                      id="code-sqoop-mirror"
+                      name="code-sqoop-mirror"
+                      style="opacity: 0;">
+              </textarea>
+              <a class="ans-modal-box-max">
+                <em class="el-icon-full-screen" @click="setEditorVal"></em>
+              </a>
+            </div>
+          </div>
+        </m-list-box>
+        <m-list-box>
           <div slot="text">{{$t('Map Column Hive')}}</div>
           <div slot="content">
             <m-local-params
@@ -264,7 +249,7 @@
             </m-local-params>
           </div>
         </m-list-box>
-        <m-list-box v-show="sourceType === 'MYSQL'">
+        <m-list-box>
           <div slot="text">{{$t('Map Column Java')}}</div>
           <div slot="content">
             <m-local-params
@@ -276,12 +261,10 @@
           </div>
         </m-list-box>
       </template>
-
       <m-list-box>
         <div slot="text" style="font-weight:bold">{{$t('Data Target')}}</div>
       </m-list-box>
       <hr style="margin-left: 60px;">
-
       <m-list-box>
         <div slot="text">{{$t('Type')}}</div>
         <div slot="content">
@@ -299,7 +282,7 @@
           </el-select>
         </div>
       </m-list-box>
-      <div v-show="targetType==='HIVE'">
+      <template v-if="targetType === 'HIVE'">
         <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
@@ -378,8 +361,8 @@
             </el-input>
           </div>
         </m-list-box>
-      </div>
-      <div v-show="targetType==='HDFS'">
+      </template>
+      <template v-if="targetType === 'HDFS'">
         <m-list-box>
           <div slot="text">{{$t('Target Dir')}}</div>
           <div slot="content">
@@ -444,8 +427,8 @@
             </el-input>
           </div>
         </m-list-box>
-      </div>
-      <div v-show="targetType==='MYSQL'">
+      </template>
+      <template v-if="targetType === 'MYSQL'">
         <m-list-box>
           <div slot="text">{{$t('Datasource')}}</div>
           <div slot="content">
@@ -534,8 +517,7 @@
             </el-radio-group>
           </div>
         </m-list-box>
-
-      </div>
+      </template>
       <m-list-box>
         <div slot="text">{{$t('Concurrency')}}</div>
         <div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
index 23fe4ceb42..71fce10813 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
@@ -16,35 +16,32 @@
  */
 <template>
   <div class="sub_process-model">
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Child Node')}}</span>
+    <m-list-box>
+      <div slot="text">{{$t('Child Node')}}</div>
+      <div slot="content">
+        <el-select
+                style="width: 100%;"
+                size="small"
+                filterable
+                v-model="wdiCurr"
+                :disabled="isDetails"
+                @change="_handleWdiChanged">
+          <el-option
+                v-for="city in processDefinitionList"
+                :key="city.code"
+                :value="city.id"
+                :label="city.code">
+          </el-option>
+        </el-select>
       </div>
-      <div class="cont-box">
-        <div class="label-box">
-          <el-select
-                  style="width: 100%;"
-                  size="small"
-                  filterable
-                  v-model="wdiCurr"
-                  :disabled="isDetails"
-                  @change="_handleWdiChanged">
-            <el-option
-                  v-for="city in processDefinitionList"
-                  :key="city.code"
-                  :value="city.id"
-                  :label="city.code">
-            </el-option>
-          </el-select>
-        </div>
-      </div>
-    </div>
+    </m-list-box>
   </div>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import disabledState from '@/module/mixin/disabledState'
+  import mListBox from './_source/listBox'
 
   export default {
     name: 'sub_process',
@@ -125,6 +122,7 @@
       }
     },
     mounted () {
-    }
+    },
+    components: { mListBox }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
index bdf2e337e7..ad4ff5737d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
@@ -15,7 +15,7 @@
 * limitations under the License.
 */
 <template>
-  <div class="shell-model">
+  <div class="waterdrop-model">
     <!--deploy mode-->
     <m-list-box>
       <div slot="text">{{$t('Deploy Mode')}}</div>
diff --git a/dolphinscheduler-ui/src/sass/common/index.scss b/dolphinscheduler-ui/src/sass/common/index.scss
index a80ae2c765..66b786a6b1 100644
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@@ -365,6 +365,8 @@ body::-webkit-scrollbar-thumb {
 .el-dialog__body {
   padding: 10px;
 }
-
-
-
+.el-dialog__header {
+  .el-dialog__headerbtn {
+    right: 10px;
+  }
+}