From e6f69aebf03a0399d6f66219531265a94e0a9b51 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Tue, 26 Jan 2021 16:59:49 +0800
Subject: [PATCH] [Improvement][ui] Front-end interface optimization

---
 .../home/pages/dag/_source/formModel/log.vue   |  2 +-
 .../pages/dag/_source/plugIn/jsPlumbHandle.js  |  2 +-
 .../pages/servers/_source/zookeeperList.vue    |  2 +-
 .../definition/pages/list/_source/list.vue     |  4 ++--
 .../pages/index/_source/taskStatusCount.vue    |  6 ------
 .../pages/instance/pages/list/_source/list.vue | 18 +++---------------
 .../pages/instance/pages/list/index.vue        |  7 ++++++-
 .../components/secondaryMenu/_source/menu.js   |  4 ++--
 dolphinscheduler-ui/src/sass/common/index.scss |  3 +++
 9 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
index 502adc767f..5eb0a109a2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
@@ -38,7 +38,7 @@
                 <em class="el-icon-full-screen"></em>
               </a>
               <a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
-                <em class="el-icon-minus"></em>
+                <em class="el-icon-aim"></em>
               </a>
             </div>
           </div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 1977a92409..226324d256 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -573,7 +573,7 @@ JSP.prototype.copyNodes = function ($id) {
 JSP.prototype.handleEventScreen = function ({ item, is }) {
   let screenOpen = true
   if (is) {
-    item.icon = 'el-icon-minus'
+    item.icon = 'el-icon-aim'
     screenOpen = true
   } else {
     item.icon = 'el-icon-full-screen'
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
index df987908f9..46cde99551 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
@@ -24,7 +24,7 @@
         <el-table-column prop="watches" :label="'watches'+$t('Number')"></el-table-column>
         <el-table-column prop="sent" :label="$t('Sent')"></el-table-column>
         <el-table-column prop="received" :label="$t('Received')"></el-table-column>
-        <el-table-column prop="mode" label="leader/follower"></el-table-column>
+        <el-table-column prop="mode" label="leader/follower" min-width="100"></el-table-column>
         <el-table-column prop="minLatency" :label="$t('Min latency')"></el-table-column>
         <el-table-column prop="avgLatency" :label="$t('Avg latency')"></el-table-column>
         <el-table-column prop="maxLatency" :label="$t('Max latency')"></el-table-column>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index b49fea2c2f..64c3f880b5 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -25,8 +25,8 @@
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.name }}</p>
               <div slot="reference" class="name-wrapper">
-                <router-link :to="{ path: '/projects/definition/list/' + scope.row.id}" tag="a" class="links" :title="scope.row.name">
-                  {{scope.row.name}}
+                <router-link :to="{ path: '/projects/definition/list/' + scope.row.id}" tag="a" class="links">
+                  <span class="ellipsis">{{scope.row.name}}</span>
                 </router-link>
               </div>
             </el-popover>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskStatusCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskStatusCount.vue
index 9fd45418f9..9ebfcc6288 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskStatusCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskStatusCount.vue
@@ -139,9 +139,3 @@
     components: { mNoData }
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-  .task-status-count-model {
-
-  }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index 30309415b2..01b7574689 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -25,7 +25,7 @@
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.name }}</p>
               <div slot="reference" class="name-wrapper">
-                <router-link :to="{ path: '/projects/instance/list/' + scope.row.id , query:{id: scope.row.processDefinitionId}}" tag="a" class="links" :title="scope.row.name">{{scope.row.name}}</router-link>
+                <router-link :to="{ path: '/projects/instance/list/' + scope.row.id , query:{id: scope.row.processDefinitionId}}" tag="a" class="links"><span class="ellipsis">{{ scope.row.name }}</span></router-link>
               </div>
             </el-popover>
           </template>
@@ -78,10 +78,10 @@
                 </span>
               </el-tooltip>
               <el-tooltip :content="scope.row.state === 'STOP' ? $t('Recovery Suspend') : $t('Stop')" placement="top" :enterable="false">
-                <span><el-button type="warning" size="mini" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'STOP'"  :icon="scope.row.state === 'STOP' ? 'el-icon-video-play' : 'el-icon-close'" @click="_stop(scope.row,scope.$index)" circle></el-button></span>
+                <span><el-button type="danger" size="mini" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'STOP'"  :icon="scope.row.state === 'STOP' ? 'el-icon-video-play' : 'el-icon-close'" @click="_stop(scope.row,scope.$index)" circle></el-button></span>
               </el-tooltip>
               <el-tooltip :content="scope.row.state === 'PAUSE' ? $t('Recovery Suspend') : $t('Pause')" placement="top" :enterable="false">
-                <span><el-button type="error" size="mini" :icon="scope.row.state === 'PAUSE' ? 'el-icon-video-play' : 'el-icon-video-pause'" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'PAUSE'" @click="_suspend(scope.row,scope.$index)" circle></el-button></span>
+                <span><el-button type="warning" size="mini" :icon="scope.row.state === 'PAUSE' ? 'el-icon-video-play' : 'el-icon-video-pause'" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'PAUSE'" @click="_suspend(scope.row,scope.$index)" circle></el-button></span>
               </el-tooltip>
               <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
                 <el-popconfirm
@@ -437,18 +437,6 @@
         })
         this._arrDelChange()
       },
-      // _arrDelChange (v) {
-      //   let arr = []
-      //   this.list.forEach((item)=>{
-      //     if (item.isCheck) {
-      //       arr.push(item.id)
-      //     }
-      //   })
-      //   this.strDelete = _.join(arr, ',')
-      //   if (v === false) {
-      //     this.checkAll = false
-      //   }
-      // },
       _arrDelChange (v) {
         let arr = []
         arr = _.map(v, 'id')
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index 05b905ac8b..c07eacbae9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -18,7 +18,7 @@
   <div class="wrap-table">
     <m-list-construction :title="$t('Process Instance')">
       <template slot="conditions">
-        <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
+        <m-instance-conditions class="searchNav" @on-query="_onQuery"></m-instance-conditions>
       </template>
       <template slot="content">
         <template v-if="processInstanceList.length || total>0">
@@ -223,4 +223,9 @@
       }
     }
   }
+  @media screen and (max-width: 1246px) {
+    .searchNav {
+      margin-bottom: 30px;
+    }
+  }
 </style>
diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
index daaf918665..249bf2e3e2 100644
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
@@ -115,7 +115,7 @@ const menu = {
       path: 'warning-instance-manage',
       isOpen: true,
       enabled: true,
-      icon: 'ri-spam-fill',
+      icon: 'el-icon-warning-outline',
       children: []
     },
     {
@@ -133,7 +133,7 @@ const menu = {
       path: 'queue-manage',
       isOpen: true,
       enabled: true,
-      icon: 'ri-group-line',
+      icon: 'el-icon-s-grid',
       children: []
     },
     {
diff --git a/dolphinscheduler-ui/src/sass/common/index.scss b/dolphinscheduler-ui/src/sass/common/index.scss
index 647be6121c..a80ae2c765 100644
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@@ -102,6 +102,9 @@ body{
   }
   .main-layout-model {
     &.dag-screen {
+      .m-top {
+        position: unset;
+      }
       .m-bottom {
         z-index: 2;
       }