[1.3.5-prepare][Improvement][K8s] Update varchar length and adjust css style...

[1.3.5-prepare][Improvement][K8s] Update varchar length and adjust css style of long host under k8s (#4704)

* [1.3.5-prepare][Improvement][K8s] Update varchar length and feedback from #4703

* [1.3.5-prepare][Improvement][K8s] Adjust css style of long host under k8s

dolphinscheduler-server/src/test/java/org/apache/dolphinscheduler/server/master/registry/MasterRegistryTest.java

@@ -56,7 +56,7 @@ public class MasterRegistryTest {
         masterRegistry.registry();
         String masterPath = zookeeperRegistryCenter.getMasterPath();
         TimeUnit.SECONDS.sleep(masterConfig.getMasterHeartbeatInterval() + 2); //wait heartbeat info write into zk node
-        String masterNodePath = masterPath + "/" + (OSUtils.getAddr(Constants.LOCAL_ADDRESS, masterConfig.getListenPort()));
+        String masterNodePath = masterPath + Constants.SLASH + (OSUtils.getAddr(Constants.LOCAL_ADDRESS, masterConfig.getListenPort()));
         String heartbeat = zookeeperRegistryCenter.getZookeeperCachedOperator().get(masterNodePath);
         Assert.assertEquals(HEARTBEAT_FOR_ZOOKEEPER_INFO_LENGTH, heartbeat.split(",").length);
     }

dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue

@@ -21,8 +21,8 @@
         <div class="row-box" v-for="(item,$index) in masterList" :key="$index">
           <div class="row-title">
             <div class="left">
-              <span class="sp">IP: {{item.host}}</span>
-              <span class="sp">{{$t('Zk registration directory')}}: {{item.zkDirectory}}</span>
+              <span class="sp">Host: {{item.host}}</span>
+              <span>{{$t('Zk registration directory')}}: <a href="javascript:" @click="_showZkDirectories(item)" class="links">{{$t('Directory detail')}}</a></span>
             </div>
             <div class="right">
               <span class="sp">{{$t('Create Time')}}: {{item.createTime | formatDate}}</span>
@@ -73,6 +73,7 @@
   import mNoData from '@/module/components/noData/noData'
   import themeData from '@/module/echarts/themeData.json'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import zookeeperDirectoriesPopup from './_source/zookeeperDirectories'
 
   export default {
     name: 'servers-master',
@@ -85,7 +86,19 @@
     },
     props: {},
     methods: {
-      ...mapActions('monitor', ['getMasterData'])
+      ...mapActions('monitor', ['getMasterData']),
+      _showZkDirectories (item) {
+        this.$drawer({
+          direction: 'right',
+          render (h) {
+            return h(zookeeperDirectoriesPopup, {
+              props: {
+                zkDirectories: [{ zkDirectory: item.zkDirectory }]
+              }
+            })
+          }
+        })
+      }
     },
     watch: {},
     created () {
@@ -104,7 +117,7 @@
         this.isLoading = false
       })
     },
-    components: { mList, mListConstruction, mSpin, mNoData, mGauge }
+    components: { mList, mListConstruction, mSpin, mNoData, mGauge, zookeeperDirectoriesPopup }
   }
 </script>
 <style lang="scss" rel="stylesheet/scss">

dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue

@@ -21,7 +21,7 @@
         <div class="row-box" v-for="(item,$index) in workerList" :key="$index">
           <div class="row-title">
             <div class="left">
-              <span class="sp">IP: {{item.host}}</span>
+              <span class="sp">Host: {{item.host}}</span>
               <span>{{$t('Zk registration directory')}}: <a href="javascript:" @click="_showZkDirectories(item)" class="links">{{$t('Directory detail')}}</a></span>
             </div>
             <div class="right">

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -55,12 +55,10 @@
           <th scope="col" style="min-width: 135px">
             <span>{{$t('Executor')}}</span>
           </th>
-          <th scope="col" style="min-width: 100px">
-            <div style="width: 100px">
-              <span>{{$t('host')}}</span>
-            </div>
+          <th scope="col" :style="{'min-width': ((Math.max(list.length && list[0].host.length, 22) + 40) * 6) + 'px'}">
+            <span>{{$t('host')}}</span>
           </th>
-          <th scope="col" style="min-width: 210px">
+          <th scope="col" style="min-width: 230px">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
@@ -95,10 +93,7 @@
             <span v-if="item.executorName">{{item.executorName}}</span>
             <span v-else>-</span>
           </td>
-          <td>
-            <span v-if="item.host" style="word-break: break-all">{{item.host}}</span>
-            <span v-else>-</span>
-          </td>
+          <td><span>{{item.host || '-'}}</span></td>
           <td style="z-index: inherit;">
             <div v-show="item.disabled">
               <x-button type="info"

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue

@@ -220,8 +220,8 @@
           td:last-child {
             border-bottom:1px solid #ecf3ff;
           }
-          th:nth-last-child(2) {
-            padding-right: 260px;
+          th:nth-last-child(2),td:nth-last-child(2) {
+            padding-right: 240px;
           }
         }
       }

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue

@@ -46,7 +46,7 @@
           <th scope="col" style="min-width: 130px">
             <span>{{$t('End Time')}}</span>
           </th>
-          <th scope="col" style="min-width: 130px">
+          <th scope="col" :style="{'min-width': (Math.max(list.length && list[0].host.length, 22) * 6) + 'px'}">
             <span>{{$t('host')}}</span>
           </th>
           <th scope="col" style="min-width: 70px">

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@@ -182,8 +182,8 @@
           td:last-child {
             border-bottom:1px solid #ecf3ff;
           }
-          th:nth-last-child(2) {
-            padding-right: 90px;
+          th:nth-last-child(2),td:nth-last-child(2) {
+            padding-right: 50px;
           }
         }
       }

sql/dolphinscheduler-postgre.sql

@@ -329,7 +329,7 @@ CREATE TABLE t_ds_process_instance (
   start_time timestamp DEFAULT NULL ,
   end_time timestamp DEFAULT NULL ,
   run_times int DEFAULT NULL ,
-  host varchar(150) DEFAULT NULL ,
+  host varchar(135) DEFAULT NULL ,
   command_type int DEFAULT NULL ,
   command_param text ,
   task_depend_type int DEFAULT NULL ,