Merge branch 'dev-3.7' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.7

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

@@ -37,7 +37,6 @@
                 }
                 .dialog-header-item{
                     display: flex;
-                    text-transform: uppercase;
                     color: $--color-text-secondary;
                     &>div{
                         display: flex;
@@ -75,6 +74,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/bottomBox/tabs/panelTabNew.vue

@@ -439,7 +439,21 @@ export default {
             this.chart = JSON.parse(JSON.stringify(chartData))
             this.chart.panelId = this.showPanel.id
             this.chart.panelName = this.showPanel.name
-            this.chart.param = JSON.parse(this.chart.param)
+            if (this.chart.param) {
+              this.chart.param = JSON.parse(this.chart.param)
+            } else {
+              this.chart.param = {}
+            }
+            if (!this.chart.param.rightYAxis) {
+              this.chart.param.rightYAxis = {
+                elementNames: [],
+                style: 'line',
+                unit: 2,
+                label: '',
+                min: undefined,
+                max: undefined
+              }
+            }
             if (!this.chart.groupId || this.chart.groupId == -1) {
               this.chart.groupId = ''
             }

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,14 @@ export default {
           label: 'name',
           prop: 'item',
           minWidth: 200
-        }]
+        }],
+      diagnoseUrl: '',
+      fragment: '', // 头部提示部分
+      agentState: {
+        UP: 'green-bg',
+        DOWN: 'red-bg',
+        UNAVAILABLE: 'gray-bg'
+      }
     }
   },
   props: {
@@ -145,7 +152,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 +189,66 @@ export default {
       }
       return time
     },
-    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
-      if (!status || status === 1 || status == 0) { return '' }
-      const arr = status.toString(2).split('')
-      while (arr.length < 4) {
-        arr.unshift('0')
-      }
-      arr.pop()
+    // 头部提示
+    suspendedStr (status, from) {
       let str = ''
-      arr.forEach((item, index) => {
-        if (index === 0) {
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</div>`
+      if (from === 'endpoint') { // 10进制转为2进制 分别给对应的状态
+        let arr = []
+        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) {
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</div>`
+        arr.forEach((item, index) => {
+          if (index === 0) {
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> DC</div>`
+          }
+          if (index === 1) {
+            str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ASSET</div>`
+          }
+          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 if (from === 'agent') {
+        console.log(status, 'status')
+        if (status.auth) {
+          str += `<div><i class="active-icon inline-block ${status.auth ? 'green-bg' : 'red-bg'}"></i> Auth</div>`
         }
-        if (index === 2) {
-          str += `<div><i class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></i> ENDPOINT</div>`
+        if (status.prometheus) {
+          str += `<div><i class="active-icon inline-block ${this.agentState[status.prometheus]}"></i> Prometheus</div>`
         }
-      })
-      return str
+        if (status.cortex) {
+          str += `<div><i class="active-icon inline-block ${this.agentState[status.cortex]}"></i> Cortex</div>`
+        }
+        if (status.loki) {
+          str += `<div><i class="active-icon inline-block ${this.agentState[status.loki]}"></i> Loki</div>`
+        }
+        if (status.snmp_exporter) {
+          str += `<div><i class="active-icon inline-block ${this.agentState[status.snmp_exporter]}"></i> SNMP exporter</div>`
+        }
+        if (status.blackbox_exporter) {
+          str += `<div><i class="active-icon inline-block ${this.agentState[status.blackbox_exporter]}"></i> Blackbox exporter</div>`
+        }
+      } else {
+        str = ''
+      }
+      this.fragment = str
     }
   },
   computed: {
@@ -212,6 +259,30 @@ 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
+          case 'agent':
+            console.log(n, 'diagnosisTabData')
+            this.diagnoseUrl = n.url
+            this.suspendedStr(JSON.parse(n.row.statusInfo), 'agent')
+            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/agentTable.vue

@@ -86,6 +86,7 @@
             <el-dropdown-item v-has="'agent_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'agent_edit'" :command="['copy', scope.row]"><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="'agent_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="'agent_add'" :command="['diagnosis', scope.row,{from:'agent'}]"><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/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="'monitor_endpoint_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>