Merge pull request #4575 from break60/dev

[Improvement][ui] Front-end interface optimization

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>

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'

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>

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>

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>

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')

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>

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

@@ -25,7 +25,7 @@
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.processInstanceName }}</p>
               <div slot="reference" class="name-wrapper">
-                <a href="javascript:" class="links" @click="_go(scope.row)"><span class="ellipsis" :title="scope.row.processInstanceName">{{scope.row.processInstanceName}}</span></a>
+                <a href="javascript:" class="links" @click="_go(scope.row)"><span class="ellipsis">{{scope.row.processInstanceName}}</span></a>
               </div>
             </el-popover>
           </template>

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: []
     },
     {

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;
       }