NEZ-1071 feat:terminal log state 改为图标

nezha-fronted/src/assets/css/common.scss

@@ -87,6 +87,21 @@
 .orange-bg {
   background-color: var(--theme-color) !important;
 }
+.colorffa416{
+  color: #ffa416;
+}
+.colorec7f66{
+  color: #ec7f66;
+}
+.color535b64{
+  color: #535b64;
+}
+.color999999{
+  color: #999999;
+}
+.color23bf9a{
+  color: #23bf9a;
+}
 .timezone-area{
   display: inline-block;
   vertical-align: middle;

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1634288113261') format('woff2'),
-       url('iconfont.woff?t=1634288113261') format('woff'),
-       url('iconfont.ttf?t=1634288113261') format('truetype');
+  src: url('iconfont.woff2?t=1634809124279') format('woff2'),
+       url('iconfont.woff?t=1634809124279') format('woff'),
+       url('iconfont.ttf?t=1634809124279') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-Panelkong:before {
+  content: "\e748";
+}
+
+.nz-icon-Projectkong:before {
+  content: "\e74f";
+}
+
+.nz-icon-Assetkong:before {
+  content: "\e750";
+}
+
+.nz-icon-ZD:before {
+  content: "\e74e";
+}
+
+.nz-icon-failed:before {
+  content: "\e749";
+}
+
+.nz-icon-stop:before {
+  content: "\e74a";
+}
+
+.nz-icon-unknown-error:before {
+  content: "\e74c";
+}
+
+.nz-icon-over:before {
+  content: "\e74b";
+}
+
+.nz-icon-connecting:before {
+  content: "\e74d";
+}
+
 .nz-icon-label:before {
   content: "\e747";
 }
@@ -397,10 +433,6 @@
   content: "\e6f7";
 }
 
-.nz-icon-ZD:before {
-  content: "\e6f9";
-}
-
 .nz-icon-revoke1:before {
   content: "\e6ee";
 }

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1634288113261') format('woff2'),
-  url('./font/iconfont.woff?t=1634288113261') format('woff'),
-  url('./font/iconfont.ttf?t=1634288113261') format('truetype');
+  src: url('./font/iconfont.woff2?t=1634809124279') format('woff2'),
+  url('./font/iconfont.woff?t=1634809124279') format('woff'),
+  url('./font/iconfont.ttf?t=1634809124279') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-Panelkong:before {
+  content: "\e748";
+}
+
+.nz-icon-Projectkong:before {
+  content: "\e74f";
+}
+
+.nz-icon-Assetkong:before {
+  content: "\e750";
+}
+
+.nz-icon-ZD:before {
+  content: "\e74e";
+}
+
+.nz-icon-failed:before {
+  content: "\e749";
+}
+
+.nz-icon-stop:before {
+  content: "\e74a";
+}
+
+.nz-icon-unknown-error:before {
+  content: "\e74c";
+}
+
+.nz-icon-over:before {
+  content: "\e74b";
+}
+
+.nz-icon-connecting:before {
+  content: "\e74d";
+}
+
 .nz-icon-label:before {
   content: "\e747";
 }
@@ -397,10 +433,6 @@
   content: "\e6f7";
 }
 
-.nz-icon-ZD:before {
-  content: "\e6f9";
-}
-
 .nz-icon-revoke1:before {
   content: "\e6ee";
 }

nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue

@@ -26,8 +26,13 @@
       >
         <div class="detail-row-info">
           <div class="asset-manageIp">
-            <span :class="{'active-icon green-bg':item.status === 0,'active-icon red-bg':item.status !== 0}"></span>
-            <span>{{item.remoteAddr?item.remoteAddr:'-'}}</span>
+            <el-tooltip effect="light" placement="right">
+              <div slot="content">
+                {{getStatusText(item.status)}}
+              </div>
+              <span><i class="nz-icon" :class="statusClass(item.status)"/></span>
+            </el-tooltip>
+            <span>{{getRemoteText(item)}}</span>
           </div>
           <div class="asset-name">
             <span>{{item.username?item.username:'-'}}</span>
@@ -43,12 +48,41 @@
 import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
 import alertLabel from '@/components/common/alert/alertLabel'
 import { terminalLog } from '@/components/common/js/constants'
+import {calcDurationByStringTimeB} from "@/components/common/js/tools";
 export default {
   name: 'terminalLogDetail',
   mixins: [detailViewLeftMixin],
   components: {
     alertLabel
   },
+  computed: {
+    getStatusText () {
+      return function (status) {
+        return terminalLog.status[status]
+      }
+    },
+    getRemoteText () {
+      return function (record) {
+        return `${record.loginUser}@${record.host}:${record.port}`
+      }
+    },
+    statusClass () {
+      return function (status) {
+        switch (status) {
+          case 0:
+            return 'nz-icon-connecting color23bf9a'
+          case 1:
+            return 'nz-icon-failed colorffa416'
+          case 2:
+            return 'nz-icon-over color999999'
+          case 3:
+            return 'nz-icon-stop colorec7f66'
+          case 4:
+            return 'nz-icon-unknown-error color535b64'
+        }
+      }
+    }
+  },
   data () {
     return {
       tableTitle: [
@@ -124,11 +158,6 @@ export default {
       this.$set(item, 'loading', loading)
       // this.$set(this.tableData,index,item);// 调用父组件
     },
-    getStatusText () {
-      return function (status) {
-        return terminalLog.status[status]
-      }
-    }
   }
 }
 </script>

nezha-fronted/src/components/common/language/cn.js

@@ -835,9 +835,9 @@ const cn = {
       authtype: '认证方式',
       statusItem: {
         connecting: '连接中',
-        connectionFailed: '连接失败',
+        connectionFailed: '发送失败',
         over: '已结束',
-        kickedOut: '被踢出',
+        kickedOut: '强制退出',
         unknownError: '未知错误'
       },
       option: '操作',
@@ -892,7 +892,8 @@ const cn = {
       loginUser: '登陆用户',
       sourceIp: '源 IP',
       sourceUser: '源用户',
-      SessionId: '会话 ID'
+      SessionId: '会话 ID',
+      stop: '停止'
     },
     dc: {
       dc: '数据中心',

nezha-fronted/src/components/common/language/en.js

@@ -876,9 +876,9 @@ const en = {
       authtype: 'AuthType',
       statusItem: {
         connecting: 'Connecting',
-        connectionFailed: 'Connection failed',
-        over: 'Over',
-        kickedOut: 'Kicked out',
+        connectionFailed: 'Failed',
+        over: 'Close',
+        kickedOut: 'Stopped',
         unknownError: 'Unknown error'
       },
       option: 'Operation', // "操作",
@@ -932,7 +932,8 @@ const en = {
       loginUser: 'Login user',
       sourceIp: 'Source IP',
       sourceUser: 'Source user',
-      SessionId: 'Session ID'
+      SessionId: 'Session ID',
+      stop: 'Stop'
     },
     operationlog: {
       operationlog: 'Operation log',

nezha-fronted/src/components/common/table/settings/terminalLogTable.vue

@@ -37,7 +37,12 @@
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop === 'time'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <template v-else-if="item.prop === 'state'">
-          <span>{{getStatusText(scope.row.status)}}</span>
+          <el-tooltip :disabled="!scope.row.status" effect="light" placement="right">
+            <div slot="content">
+              {{getStatusText(scope.row.status)}}
+            </div>
+            <span><i class="nz-icon" :class="statusClass(scope.row.status)"/></span>
+          </el-tooltip>
         </template>
         <template  v-else-if="item.prop === 'uuid'">
           <el-popover
@@ -56,7 +61,7 @@
           <span> {{utcTimeToTimezoneStr(scope.row.startTime)}}</span>
         </template>
         <template v-else-if="item.prop === 'duration'">
-          <el-tooltip :disabled="!scope.row.status" effect="light" placement="right">
+          <el-tooltip effect="light" placement="right">
             <div slot="content">
               {{$t('config.terminallog.endTime')}}<br/>
               {{utcTimeToTimezoneStr(scope.row.endTime)}}
@@ -86,7 +91,7 @@
               <i class="nz-icon nz-icon-more3"></i>
             </div>
             <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
-              <el-dropdown-item :command="['shutdown', scope.row]"><i class="nz-icon nz-icon-ZD"></i><span class="operation-dropdown-text">Kill</span></el-dropdown-item>
+              <el-dropdown-item :command="['shutdown', scope.row]"><i class="nz-icon nz-icon-ZD"></i><span class="operation-dropdown-text">{{$t('config.terminallog.stop')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -200,6 +205,22 @@ export default {
         }
         return ''
       }
+    },
+    statusClass () {
+      return function (status) {
+        switch (status) {
+          case 0:
+            return 'nz-icon-connecting color23bf9a'
+          case 1:
+            return 'nz-icon-failed colorffa416'
+          case 2:
+            return 'nz-icon-over color999999'
+          case 3:
+            return 'nz-icon-stop colorec7f66'
+          case 4:
+            return 'nz-icon-unknown-error color535b64'
+        }
+      }
     }
   }
 }