NEZ-2570 feat: asset 故障诊断页面开发

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

@@ -75,6 +75,9 @@
                     padding: 15px 0 15px 34px;
                     background-color: $--background-color-base !important;
                   }
+                .el-table__body-wrapper{
+                    overflow-x: hidden;
+                }
                 .el-table__body {
                     tr{
                         background: $--background-color-empty;

nezha-fronted/src/components/common/diagnosisTab.vue

@@ -19,7 +19,7 @@
             <i class="nz-icon nz-icon-Diagnosis1"></i>
             <div>
               <div class="dialog-header-name">{{diagnosisTabData.row.name}}</div>
-              <div v-html="suspendedStr(diagnosisTabData.row.configs[0].state)" class="dialog-header-item">
+              <div v-html="fragment" class="dialog-header-item">
               </div>
             </div>
         </div>
@@ -134,7 +134,9 @@ export default {
           label: 'name',
           prop: 'item',
           minWidth: 200
-        }]
+        }],
+      diagnoseUrl: '',
+      fragment: '' // 头部提示部分
     }
   },
   props: {
@@ -145,7 +147,7 @@ export default {
       this.dialogVisible = false
     },
     getTableData () {
-      this.$get('monitor/endpoint/diagnose/' + this.diagnosisTabData.row.id).then(response => {
+      this.$get(this.diagnoseUrl + '/diagnose/' + this.diagnosisTabData.row.id).then(response => {
         if (response.code == 200) {
           this.tableData = response.data.list
           // 关闭定时器 取消任务
@@ -182,26 +184,46 @@ export default {
       }
       return time
     },
-    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+    // 头部提示
-      if (!status || status === 1 || status == 0) { return '' }
+    suspendedStr (status, from) {
-      const arr = status.toString(2).split('')
-      while (arr.length < 4) {
-        arr.unshift('0')
-      }
-      arr.pop()
       let str = ''
-      arr.forEach((item, index) => {
+      if (from === 'endpoint') { // 10进制转为2进制 分别给对应的状态
-        if (index === 0) {
+        let arr = []
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</div>`
+        if (!status || status === 1 || status == 0) {
+          while (arr.length < 3) {
+            arr.push('1')
+          }
+        } else {
+          arr = status.toString(2).split('')
+          while (arr.length < 4) {
+            arr.unshift('0')
+          }
+          arr.pop()
         }
-        if (index === 1) {
+        arr.forEach((item, index) => {
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</div>`
+          if (index === 0) {
-        }
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</div>`
-        if (index === 2) {
+          }
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ENDPOINT</div>`
+          if (index === 1) {
-        }
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</div>`
-      })
+          }
-      return str
+          if (index === 2) {
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ENDPOINT</div>`
+          }
+        })
+      } else if (from === 'asset') {
+        status.forEach((item, index) => {
+          if (index === 0) {
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></i> PING</div>`
+          }
+          if (index === 1) {
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : (item == '1' ? 'green-bg' : 'red-bg')}"></i> TALON</div>`
+          }
+        })
+      } else {
+        str = ''
+      }
+      this.fragment = str
     }
   },
   computed: {
@@ -212,6 +234,25 @@ export default {
   mounted () {
   },
   watch: {
+    diagnosisTabData: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        switch (n.from) {
+          case 'asset':
+            this.diagnoseUrl = '/asset'
+            this.suspendedStr([n.row.pingInfo.status, n.row.clientState], 'asset')
+            break
+          case 'endpoint':
+            this.diagnoseUrl = n.url
+            this.suspendedStr(n.row.configs[0].state, 'endpoint')
+            break
+          default:
+            this.diagnoseUrl = n.url
+            break
+        }
+      }
+    },
     // 展示弹窗
     showDiagnosisTab (n) {
       if (n) {

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -168,6 +168,7 @@
               <el-dropdown-item v-has="'asset_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'asset']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_add'" :command="['diagnosis', scope.row,{from:'asset'}]"><i class="nz-icon nz-icon-diagnosis"></i><span class="operation-dropdown-text">{{$t('overall.diagnosis')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -114,7 +114,6 @@
     ></delete-button>
     <diagnosis-tab
       ref="diagnosisTab"
-      :api="diagnosisTabData.url"
       :diagnosisTabData ="diagnosisTabData"
     ></diagnosis-tab>
   </div>

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

@@ -181,7 +181,7 @@
               <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'endpoint']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'asset_add'" :command="['diagnosis', scope.row]"><i class="nz-icon nz-icon-diagnosis"></i><span class="operation-dropdown-text">{{$t('overall.diagnosis')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_add'" :command="['diagnosis', scope.row,{from:'endpoint'}]"><i class="nz-icon nz-icon-diagnosis"></i><span class="operation-dropdown-text">{{$t('overall.diagnosis')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_add'" :command="['metricTarget', scope.row, 'endpoint']" :disabled="scope.row.configs[0].config.protocol !== ('http'||'https')"><i class="nz-icon nz-icon-Metrics"></i><span class="operation-dropdown-text">{{$t('endpoints.metricTarget')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>