From 45b5473b72b509f1a8225d8881af09b636e79917 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Mon, 2 Dec 2019 20:03:28 +0800
Subject: [PATCH] Ans UI upgrade and component value modification (#1326)

---
 dolphinscheduler-ui/package.json              |  2 +-
 .../formModel/tasks/_source/commcon.js        |  4 +--
 .../formModel/tasks/_source/datasource.vue    | 14 ++++----
 .../formModel/tasks/_source/sqlType.vue       | 15 +++++----
 .../_source/formModel/tasks/_source/udfs.vue  |  2 +-
 .../pages/dag/_source/formModel/tasks/sql.vue | 14 ++++----
 .../definition/pages/list/_source/start.vue   | 22 ++++++-------
 .../definition/pages/list/_source/timing.vue  | 16 +++++-----
 .../udf/pages/function/_source/createUdf.vue  | 12 +++----
 .../security/pages/queue/_source/list.vue     |  2 +-
 .../pages/tenement/_source/createTenement.vue | 10 +++---
 .../pages/users/_source/createUser.vue        | 32 +++++++++----------
 .../module/components/transfer/resource.vue   |  4 +--
 .../src/js/module/i18n/locale/en_US.js        |  2 +-
 14 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index 2b08b9e7e6..c61e808956 100644
--- a/dolphinscheduler-ui/package.json
+++ b/dolphinscheduler-ui/package.json
@@ -14,7 +14,7 @@
     "build:combined": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.combined.js"
   },
   "dependencies": {
-    "ans-ui": "0.1.0",
+    "ans-ui": "1.1.3",
     "axios": "^0.16.2",
     "jquery": "1.12.4",
     "vue": "^2.5.17",
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/commcon.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/commcon.js
index 1d021572f7..fc8fe654d2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/commcon.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/commcon.js
@@ -209,11 +209,11 @@ const typeList = [
  */
 const sqlTypeList = [
   {
-    id: 0,
+    id: '0',
     code: `${i18n.$t('Query')}`
   },
   {
-    id: 1,
+    id: '1',
     code: `${i18n.$t('Non Query')}`
   }
 ]
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
index 2528068f49..8bf855b720 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
@@ -35,7 +35,7 @@
         <x-option
                 v-for="city in datasourceList"
                 :key="city.id"
-                :value="city"
+                :value="city.id"
                 :label="city.code">
         </x-option>
       </x-select>
@@ -56,7 +56,7 @@
         // Data source type(List)
         typeList: [],
         // data source
-        datasource: {},
+        datasource: '',
         // data source(List)
         datasourceList: []
       }
@@ -77,7 +77,7 @@
         }
         this.$emit('on-dsData', {
           type: this.type,
-          datasource: this.datasource.id
+          datasource: this.datasource
         })
         return true
       },
@@ -104,10 +104,10 @@
       _handleTypeChanged ({ value }) {
         this.type = value
         this._getDatasourceData().then(res => {
-          this.datasource = this.datasourceList.length && this.datasourceList[0] || {}
+          this.datasource = this.datasourceList.length && this.datasourceList[0].id || ''
           this.$emit('on-dsData', {
             type: this.type,
-            datasource: this.datasource.id
+            datasource: this.datasource
           })
         })
       }
@@ -129,11 +129,11 @@
       this._getDatasourceData().then(res => {
         if (_.isEmpty(this.data)) {
           this.$nextTick(() => {
-            this.datasource = this.datasourceList[0]
+            this.datasource = this.datasourceList[0].id
           })
         } else {
           this.$nextTick(() => {
-            this.datasource = _.filter(this.datasourceList, v => v.id === this.data.datasource)[0]
+            this.datasource = this.data.datasource
           })
         }
         this.$emit('on-dsData', {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
index 118ead3f6f..6cad8f1292 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
@@ -24,7 +24,7 @@
       <x-option
               v-for="city in sqlTypeList"
               :key="city.id"
-              :value="city"
+              :value="city.id"
               :label="city.code">
       </x-option>
     </x-select>
@@ -41,29 +41,30 @@
         // sql(List)
         sqlTypeList: sqlTypeList,
         // sql
-        sqlTypeId: {}
+        sqlTypeId: '0'
       }
     },
     mixins: [disabledState],
     props: {
-      sqlType: Number
+      sqlType: String
     },
     methods: {
       /**
        * return sqlType
        */
       _handleSqlTypeChanged (val) {
-        this.$emit('on-sqlType', val.value.id)
+        this.$emit('on-sqlType', val.value)
       }
     },
     watch: {
     },
     created () {
       this.$nextTick(() => {
-        if (this.sqlType !== null) {
-          this.sqlTypeId = _.filter(this.sqlTypeList, v => v.id === this.sqlType)[0]
+        console.log(this.sqlType)
+        if (this.sqlType != 0) {
+          this.sqlTypeId = this.sqlType
         } else {
-          this.sqlTypeId = this.sqlTypeList[0]
+          this.sqlTypeId = this.sqlTypeList[0].id
         }
       })
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
index ec8aac193d..cc81593538 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
@@ -23,7 +23,7 @@
       <x-option
               v-for="city in udfsList"
               :key="city.id"
-              :value="city"
+              :value="city.id"
               :label="city.code">
       </x-option>
     </x-select>
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 42f09ebc00..9cef7bb801 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
@@ -35,7 +35,7 @@
                   :sql-type="sqlType">
           </m-sql-type>
         </div>
-        <div v-if="!sqlType" style="display: inline-block;padding-left: 10px;margin-top: 2px;">
+        <div v-if="sqlType==0" style="display: inline-block;padding-left: 10px;margin-top: 2px;">
           <x-checkbox-group v-model="showType">
             <x-checkbox :label="'TABLE'" :disabled="isDetails">{{$t('Table')}}</x-checkbox>
             <x-checkbox :label="'ATTACHMENT'" :disabled="isDetails">{{$t('Attachment')}}</x-checkbox>
@@ -43,7 +43,7 @@
         </div>
       </div>
     </m-list-box>
-    <template v-if="!sqlType">
+    <template v-if="sqlType==0">
       <m-list-box>
         <div slot="text"><b class='requiredIcon'>*</b>{{$t('Title')}}</div>
         <div slot="content">
@@ -167,7 +167,7 @@
         // UDF function
         udfs: '',
         // Sql type
-        sqlType: 0,
+        sqlType: '0',
         // Email title
         title: '',
         // Form/attachment
@@ -256,11 +256,11 @@
           return false
         }
         // receivers Subcomponent verification
-        if (!this.sqlType && !this.$refs.refEmail._manualEmail()) {
+        if (this.sqlType==0 && !this.$refs.refEmail._manualEmail()) {
           return false
         }
         // receiversCc Subcomponent verification
-        if (!this.sqlType && !this.$refs.refCc._manualEmail()) {
+        if (this.sqlType==0 && !this.$refs.refCc._manualEmail()) {
           return false
         }
         // udfs Subcomponent verification Verification only if the data type is HIVE
@@ -356,10 +356,10 @@
     watch: {
       // Listening to sqlType
       sqlType (val) {
-        if (val) {
+        if (val==0) {
           this.showType = []
         }
-        if (val !== 0) {
+        if (val != 0) {
           this.title = ''
           this.receivers = []
           this.receiversCc = []
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
index d79ce28cbb..8dcaaea161 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
@@ -51,7 +51,7 @@
           <x-option
                   v-for="city in warningTypeList"
                   :key="city.id"
-                  :value="city"
+                  :value="city.id"
                   :label="city.code">
           </x-option>
         </x-select>
@@ -82,14 +82,14 @@
                 style="width: 200px;"
                 v-model="warningGroupId"
                 :disabled="!notifyGroupList.length">
-          <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
-            <i slot="suffix" class="fa fa-times-circle" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></i>
-            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></i>
+          <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
+            <i slot="suffix" class="fa fa-times-circle" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></i>
+            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></i>
           </x-input>
           <x-option
                   v-for="city in notifyGroupList"
                   :key="city.id"
-                  :value="city"
+                  :value="city.id"
                   :label="city.code">
           </x-option>
         </x-select>
@@ -174,9 +174,9 @@
         processDefinitionId: 0,
         failureStrategy: 'CONTINUE',
         warningTypeList: warningTypeList,
-        warningType: {},
+        warningType: '',
         notifyGroupList: [],
-        warningGroupId: {},
+        warningGroupId: '',
         scheduleTime: '',
         spinnerLoading: false,
         execType: false,
@@ -206,8 +206,8 @@
           processDefinitionId: this.item.id,
           scheduleTime: this.scheduleTime.length && this.scheduleTime.join(',') || '',
           failureStrategy: this.failureStrategy,
-          warningType: this.warningType.id,
-          warningGroupId: _.isEmpty(this.warningGroupId) ? 0 : this.warningGroupId.id,
+          warningType: this.warningType,
+          warningGroupId: this.warningGroupId=='' ? 0 : this.warningGroupId,
           execType: this.execType ? 'COMPLEMENT_DATA' : null,
           startNodeList: this.startNodeList,
           taskDependType: this.taskDependType,
@@ -266,14 +266,14 @@
       }
     },
     created () {
-      this.warningType = this.warningTypeList[0]
+      this.warningType = this.warningTypeList[0].id
 
       this._getReceiver()
     },
     mounted () {
       this._getNotifyGroupList().then(() => {
         this.$nextTick(() => {
-          this.warningGroupId = { id: 0 }
+          this.warningGroupId = ''
         })
       })
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
index e05116fa74..96df15d531 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
@@ -128,7 +128,7 @@
           <x-option
                   v-for="city in notifyGroupList"
                   :key="city.id"
-                  :value="city"
+                  :value="city.id"
                   :label="city.code">
           </x-option>
         </x-select>
@@ -177,7 +177,7 @@
         warningTypeList: warningTypeList,
         warningType: 'NONE',
         notifyGroupList: [],
-        warningGroupId: {},
+        warningGroupId: '',
         spinnerLoading: false,
         scheduleTime: '',
         crontab: '0 0 * * * ? *',
@@ -229,7 +229,7 @@
             failureStrategy: this.failureStrategy,
             warningType: this.warningType,
             processInstancePriority: this.processInstancePriority,
-            warningGroupId: _.isEmpty(this.warningGroupId) ? 0 : this.warningGroupId.id,
+            warningGroupId: this.warningGroupId =='' ? 0 : this.warningGroupId,
             receivers: this.receivers.join(',') || '',
             receiversCc: this.receiversCc.join(',') || '',
             workerGroupId: this.workerGroupId
@@ -331,16 +331,16 @@
         this.workerGroupId = item.workerGroupId || -1
         this._getNotifyGroupList().then(() => {
           this.$nextTick(() => {
-            let list = _.filter(this.notifyGroupList, v => v.id === item.warningGroupId)
-            this.warningGroupId = list.length && list[0] || { id: 0 }
+            // let list = _.filter(this.notifyGroupList, v => v.id === item.warningGroupId)
+            this.warningGroupId = item.warningGroupId
           })
-        }).catch(() => this.warningGroupId = { id: 0 })
+        }).catch(() => this.warningGroupId = '')
       } else {
         this._getNotifyGroupList().then(() => {
           this.$nextTick(() => {
-            this.warningGroupId = { id: 0 }
+            this.warningGroupId = ''
           })
-        }).catch(() => this.warningGroupId = { id: 0 })
+        }).catch(() => this.warningGroupId = '')
       }
     },
     components: { vCrontab, mEmail, mPriority, mWorkerGroups }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
index 058977b03a..709e712e6c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
@@ -80,7 +80,7 @@
               <x-option
                       v-for="city in udfResourceList"
                       :key="city.id"
-                      :value="city"
+                      :value="city.id"
                       :label="city.alias">
               </x-option>
             </x-select>
@@ -129,7 +129,7 @@
         argTypes: '',
         database: '',
         description: '',
-        resourceId: {},
+        resourceId: '',
         udfResourceList: [],
         isUpdate: false,
         upDisabled: false
@@ -165,7 +165,7 @@
             argTypes: this.argTypes, // Can not pass this parameter
             database: this.database, // Can not pass this parameter
             description: this.description,
-            resourceId: this.resourceId.id
+            resourceId: this.resourceId
           }
 
           let id = this.item && this.item.id || null
@@ -210,7 +210,7 @@
         this.udfResourceList.push(o)
         this.isUpdate = false
         this.$nextTick(() => {
-          this.resourceId = _.filter(this.udfResourceList, v => v.id === o.id)[0]
+          this.resourceId = o.id
         })
         this.$refs.popup.apDisabled = false
       },
@@ -268,9 +268,9 @@
           this.argTypes = this.item.argTypes || ''
           this.database = this.item.database || ''
           this.description = this.item.description || ''
-          this.resourceId = _.filter(this.udfResourceList, v => v.id === this.item.resourceId)[0]
+          this.resourceId = this.item.resourceId
         } else {
-          this.resourceId = this.udfResourceList.length && this.udfResourceList[0] || []
+          this.resourceId = this.udfResourceList.length && this.udfResourceList[0].id || ''
         }
       })
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
index 54d6dc8c91..bdd83a6878 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
@@ -26,7 +26,7 @@
             <span>{{$t('Name')}}</span>
           </th>
           <th>
-            <span>队列值</span>
+            <span>{{$t('Queue value')}}</span>
           </th>
           <th>
             <span>{{$t('Create Time')}}</span>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
index 4847af8827..9dc4dd6adc 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
@@ -51,7 +51,7 @@
               <x-option
                       v-for="city in queueList"
                       :key="city.id"
-                      :value="city"
+                      :value="city.id"
                       :label="city.code">
               </x-option>
             </x-select>
@@ -85,10 +85,10 @@
       return {
         store,
         queueList: [],
-        queueId: {},
+        queueId: '',
         tenantCode: '',
         tenantName: '',
-        description: ''
+        description: '',
       }
     },
     props: {
@@ -151,7 +151,7 @@
         let param = {
           tenantCode: this.tenantCode,
           tenantName: this.tenantName,
-          queueId: this.queueId.id,
+          queueId: this.queueId,
           description: this.description
         }
         if (this.item) {
@@ -177,7 +177,7 @@
       this._getQueueList().then(res => {
         if (this.item) {
           this.$nextTick(() => {
-            this.queueId = _.find(this.queueList, ['id', this.item.queueId])
+            this.queueId = this.item.queueId
           })
           this.tenantCode = this.item.tenantCode
           this.tenantName = this.item.tenantName
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
index 43e8319216..fb56c32683 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
@@ -50,7 +50,7 @@
               <x-option
                       v-for="city in tenantList"
                       :key="city.id"
-                      :value="city"
+                      :value="city.id"
                       :label="city.code">
               </x-option>
             </x-select>
@@ -60,14 +60,14 @@
           <template slot="name">{{$t('Queue')}}</template>
           <template slot="content">
             <x-select v-model="queueName">
-              <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a queue')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="queueName = {}">
-                <i slot="suffix" class="fa fa-times-circle" style="font-size: 15px;cursor: pointer;" v-show="queueName.id"></i>
-                <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!queueName.id"></i>
+              <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a queue')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="queueName = ''">
+                <i slot="suffix" class="fa fa-times-circle" style="font-size: 15px;cursor: pointer;" v-show="queueName ==''"></i>
+                <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="queueName!=''"></i>
               </x-input>
               <x-option
                       v-for="city in queueList"
                       :key="city.id"
-                      :value="city"
+                      :value="city.id"
                       :label="city.code">
               </x-option>
             </x-select>
@@ -114,10 +114,8 @@
         queueList: [],
         userName: '',
         userPassword: '',
-        tenantId: {},
-        queueName: {
-          id:''
-        },
+        tenantId: '',
+        queueName: '',
         email: '',
         phone: '',
         tenantList: [],
@@ -193,7 +191,7 @@
               }
             })
             this.$nextTick(() => {
-              this.queueName = this.queueList[0]
+              this.queueName = this.queueList[0].id
             })
             resolve()
           })
@@ -212,7 +210,7 @@
               }
             })
             this.$nextTick(() => {
-              this.tenantId = this.tenantList[0]
+              this.tenantId = this.tenantList[0].id
             })
             resolve()
           })
@@ -223,9 +221,9 @@
         let param = {
           userName: this.userName,
           userPassword: this.userPassword,
-          tenantId: this.tenantId.id,
+          tenantId: this.tenantId,
           email: this.email,
-          queue: this.queueName.code,
+          queue: this.queueList[this.queueName].code,
           phone: this.phone
         }
 
@@ -255,9 +253,9 @@
             this.userPassword = ''
             this.email = this.item.email
             this.phone = this.item.phone
-            this.tenantId = _.find(this.tenantList, ['id', this.item.tenantId])
+            this.tenantId = this.item.tenantId
             this.$nextTick(() => {
-              this.queueName = _.find(this.queueList, ['code', this.item.queue])||{id:''}
+              this.queueName = _.find(this.queueList, ['code', this.item.queue]).id||''
             })
           }
         })
@@ -267,8 +265,8 @@
           this.userPassword = ''
           this.email = this.item.email
           this.phone = this.item.phone
-          this.tenantId.id = this.item.tenantId
-          this.queueName = { queue: this.item.queue}
+          this.tenantId = this.item.tenantId
+          this.queueName = _.find(this.queueList, ['code', this.item.queue]).id
         }
       }
     },
diff --git a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
index 0ab0d97510..c9f85374ad 100644
--- a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
@@ -43,7 +43,7 @@
           <div class="scrollbar tf-content">
             <ul>
               <li v-for="(item,$index) in sourceList" :key="item.id" @click="_ckSource(item)">
-                <span>{{item.name}}</span>
+                <span :title="item.name">{{item.name}}</span>
                 <a href="javascript:"></a>
               </li>
             </ul>
@@ -68,7 +68,7 @@
           </div>-->
           <div class="scrollbar tf-content">
             <ul>
-              <li v-for="(item,$index) in targetList" :key="item.id" @click="_ckTarget(item)"><span>{{item.name}}</span></li>
+              <li v-for="(item,$index) in targetList" :key="item.id" @click="_ckTarget(item)"><span :title="item.name">{{item.name}}</span></li>
             </ul>
           </div>
         </div>
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 53f695f967..868e835135 100644
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -148,7 +148,7 @@ export default {
   'Click to view': 'Click to view',
   'Delete?': 'Delete?',
   'Confirm': 'Confirm',
-  'Task status statistics': 'Task status statistics',
+  'Task status statistics': 'Task Status Statistics',
   'Number': 'Number',
   'State': 'State',
   'Process Status Statistics': 'Process Status Statistics',