From 5f40fce1f5544baffe34356e4244aaf0b364fd83 Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Sun, 14 Feb 2021 21:37:25 +0800
Subject: [PATCH] [Improvement][UI] Improve long host display in K8s (#4756)

---
 .../pages/monitor/pages/servers/master.vue    | 22 ++++++++++++++-----
 .../pages/monitor/pages/servers/worker.vue    |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
index 40ff14b53d..3f257e5fe8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
+++ b/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>
@@ -57,6 +57,11 @@
           </div>
         </div>
       </div>
+      <el-drawer
+        :visible.sync="drawer"
+        :with-header="false">
+        <zookeeper-directories-popup :zkDirectories = zkDirectories></zookeeper-directories-popup>
+      </el-drawer>
       <div v-if="!masterList.length">
         <m-no-data></m-no-data>
       </div>
@@ -72,6 +77,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',
@@ -79,12 +85,18 @@
       return {
         isLoading: false,
         masterList: [],
-        color: themeData.color
+        color: themeData.color,
+        drawer: false,
+        zkDirectories: []
       }
     },
     props: {},
     methods: {
-      ...mapActions('monitor', ['getMasterData'])
+      ...mapActions('monitor', ['getMasterData']),
+      _showZkDirectories (item) {
+        this.zkDirectories = [{ zkDirectory: item.zkDirectory }]
+        this.drawer = true
+      }
     },
     watch: {},
     created () {
@@ -103,7 +115,7 @@
         this.isLoading = false
       })
     },
-    components: { mListConstruction, mSpin, mNoData, mGauge }
+    components: { mListConstruction, mSpin, mNoData, mGauge, zookeeperDirectoriesPopup }
   }
 </script>
 <style lang="scss" rel="stylesheet/scss">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
index 91bae2b41f..2d853ae701 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
+++ b/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">