feat：修改 chart创建 alertList时的相关更改

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -53,20 +53,24 @@
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
           <alertMessageTable
+            class="nz-table2"
             :id="'tableContainer'+chartIndex"
             :tableData="storedTableData"
             :loading="loadingTable"
-            :tableHeight="tableHeight"
+            :height="'calc(100% - 0px)'"
+            :customTableTitle="tableTitle"
             :tableId="''"
             :projectAlertId="'tableContainer'+chartIndex"
             @tableDataSort="tableDataSort"
-            @deleteMessage="deleteMessage"
+            @del="deleteMessage"
+            @messageDetail="messageDetail"
             ref="alertListTable"
             :form="'chartList'"
             :fromPath="'/alertList'"
+            style="height: calc(100% - 50px)"
             :showTopBtn="false"
           ></alertMessageTable>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo'  @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix" style="margin-top: 15px;"></Pagination>
         </div>
         <!--全屏-->
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" :modal-append-to-body="false">
@@ -81,13 +85,18 @@
             :id="'tableContainer'+chartIndex"
             :tableData="storedScreanTableData"
             :loading="loadingTable"
-            :tableHeight="'95%'"
+            :height="'calc(100% - 0px)'"
+            :customTableTitle="tableTitle"
             :tableId="''"
             :projectAlertId="'tableContainer'+chartIndex"
             @tableDataSort="tableDataSort"
-            @deleteMessage="deleteMessage"
+            @del="deleteMessage"
-            ref="alertListScreenTable"
+            @messageDetail="messageDetail"
-            :showTopBtn="false"
+            ref="alertListTable"
+            :form="'chartList'"
+            :fromPath="'/alertList'"
+            style="height: calc(100% - 50px)"
+            :showOption="false"
           ></alertMessageTable>
           <Pagination :pageObj="screenPageObj"  @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -117,7 +126,7 @@
           <div slot="title">
             {{$t("project.endpoint.dialogTitle")}}
             <div class="float-right panel-calendar dialog-tool" style="display: flex">
-              <pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="alert-sub-chart"></pick-time>
+              <pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTimeDialog" style="height: 28px;" @unitChange="chartUnitChange" id="alert-sub-chart"></pick-time>
             </div>
           </div>
           <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
@@ -238,7 +247,7 @@ export default {
           label: this.$t('alert.list.labels'),
           prop: 'labels',
           show: true,
-          width: 200
+          width: 300
         }, {
           label: this.$t('alert.severity'),
           prop: 'severity',
@@ -265,15 +274,6 @@ export default {
           label: this.$t('alert.endAt'),
           prop: 'endAt',
           show: true
-        }, {
-          label: this.$t('alert.list.current'),
-          prop: 'current',
-          show: true
-        }, {
-          label: this.$t('overall.option'),
-          prop: 'option',
-          show: true,
-          width: 90
         }
       ],
       tablelable: [],
@@ -283,6 +283,7 @@ export default {
       showTopBtn: false,
       graphShow: false,
       chartDatas: [],
+      searchTimeDialog: [],
       chartUnit: 5,
       deleteBox: { show: false, ids: '', remark: '', state: 2 },
       isPreview: false,
@@ -394,18 +395,23 @@ export default {
       })
       this.deleteBox.ids = ids.join(',')
     },
-    deleteMessage (deleltebox, cb) {
+    deleteMessage (row) {
-      this.$put('alert/message', deleltebox).then(res => {
+      const self = this
-        if (res.code === 200) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/message' + '?ids=' + row.id + '&state=3').then(response => {
+          if (response.code === 200) {
+            self.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-          this.deleteBox.show = false
+            self.getAlertList()
-          this.deleteBox.ids = ''
-          this.getAlertList()
-          cb()
           } else {
-          this.$message.error(res.msg)
+            this.$message.error(response.msg)
           }
         })
+      })
     },
     chartUnitChange: function (unit) {
       this.chartUnit = unit
@@ -413,11 +419,20 @@ export default {
         this.queryChartDate()
       })
     },
+    messageDetail (row) {
+      this.$get('/alert/rule/' + row.alertRule.id).then(res => {
+        this.currentMsg = { ...row, alertRule: { ...res.data } }
+        this.graphShow = true
+        this.$nextTick(() => {
+          this.queryChartDate()
+        })
+      })
+    },
     queryChartDate () {
       const $temp = this
-      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const start = this.searchTime[0] ? this.searchTime[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 30 * 60 * 1000)
-      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : bus.computeTimezoneTime(new Date().getTime())
-      this.searchTime = [start, end]
+      this.searchTimeDialog = [start, end]
       const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
       let step = '15s'
       if (timeDiff < 1) {
@@ -568,37 +583,6 @@ export default {
         if (response.code == 200) {
           this.storedTableData = response.data.list
           this.storedScreanTableData = response.data.list
-          const axiosAll = []
-          this.$nextTick(() => {
-            this.storedTableData.forEach((item) => {
-              item.labels = JSON.parse(item.labels)
-              if (item.alertRule.buildIn != 1) {
-                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
-                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
-              } else {
-                axiosAll.push('')
-              }
-            })
-            axios.all(axiosAll).then(res => {
-              res.forEach((item, index) => {
-                let current = []
-                const response2 = item.data
-                if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                  current = response2.data.result[0].value.map((item, i) => {
-                    if (i == 0) {
-                      return bus.computeTimezone(item)
-                    } else {
-                      return parseFloat(item).toFixed(2)
-                    }
-                  })
-                } else {
-                  current = [null, null]
-                }
-                this.storedTableData[index].current = current
-              })
-              this.$set(this.storedTableData, [...this.storedTableData])
-            })
-          })
           this.pageObj.total = response.data.total
           this.isError = false
           this.errorContent = ''
@@ -708,24 +692,36 @@ export default {
       this.getAlerScreetList()
     },
     promQueryParamConvert (obj) {
-      if (obj) {
+      let r = '(' + obj.alertRule.expr + ')'
-        return '(' + obj.alertRule.expr + ') and (' + (function () {
+      let intoLabels = false
-          let q = '{'
+      obj.labels = JSON.parse(obj.labels)
+      if (Object.keys(obj.labels).length > 0) {
+        r += (function () {
+          let group = ' and ' + '(group({'
+          let by = ' by ('
+
           for (const k in obj.labels) {
-            if (k != 'alertname' && k != 'severity') {
+            if (k != 'alertname' && k != 'severity' && k != 'severity_id') {
-              q += k
+              intoLabels = true
-              q += '='
+              group += k
-              q += ("'" + obj.labels[k] + "',")
+              group += '='
+              group += ("'" + obj.labels[k] + "',")
+              by += k
+              by += ','
             }
-          };
-          if (q.length > 1) {
-            q = q.substring(0, q.length - 1)
-          }
-          q += '}'
-          return q
-        }()) + ')'
           }
+          if (intoLabels) {
+            group = group.substring(0, group.length - 1)
+            by = by.substring(0, by.length - 1)
+            group += '})'
+            by += ')'
+            return group + by + ')'
+          } else {
             return ''
+          }
+        }())
+      }
+      return r
     },
     elementsetShow (s, e) {
       const eventfixed = {

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -101,6 +101,7 @@
         </template>
       </el-table-column>
       <el-table-column
+        v-if="showOption"
         :resizable="false"
         :width="operationWidth"
         fixed="right">
@@ -140,6 +141,10 @@ export default {
   props: {
     nowTime: {
       type: String
+    },
+    showOption: {
+      type: Boolean,
+      default: true
     }
   },
   mixins: [table, bus],
@@ -520,9 +525,9 @@ export default {
         return 'alert-message-list-labels'
       } else if (row.column.label == this.$t('alert.list.state')) {
         if (row.row.state == 1) {
-          return 'danger'
+          return ''
         } else if (row.row.state == 2) {
-          return 'success'
+          return ''
         }
       } else {
         return ''

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -57,7 +57,7 @@
           <span v-for="(item1, i) in labelsSort(scope.row.matchers)" :key="i">
               <span >
                 <nz-alert-tag
-                  v-if="item1.name !== 'alertname' && item1.name !== 'severity'" :key="i" :cursor-point="tagType(item1.name) !== 'info'"
+                  :key="i" :cursor-point="tagType(item1.name) !== 'info'"
                   :label="item1.name"
                   :type="tagType(item1.name)"
                   :regex="item1.regex"
@@ -205,6 +205,7 @@ export default {
           result2.push(item)
         }
       })
+      console.log([...result, ...result2])
       return [...result, ...result2]
     }
   }

nezha-fronted/src/components/page/dashboard/alertChartParam.vue

@@ -12,13 +12,18 @@
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
-          <el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.alertName" :value="rule.id"></el-option>
+          <el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.name" :value="rule.id"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')">
+      <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')" prop="level" class="severity-box">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.level" clearable id="alert-param-level">
-          <el-option v-for="(item, index) in levels" :key="index" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="item in alertPriority" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
+              <span>
+                 <i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}
+              </span>
+          </el-option>
         </el-select>
+        <i class="nz-icon nz-icon-circle severity-circle" v-if="parameters.level" :style="{color:alertPriority.find(severity => severity.id ===  parameters.level).color,'font-size':'12px'}"></i>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.state')">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.state" clearable id="alert-param-state">
@@ -36,15 +41,18 @@ export default {
   },
   data () {
     return {
+      alertPriority: [],
       parameters: {
         select: [],
         alertRule: '',
         level: '',
-        state: ''
+        state: '1'
       },
       options: [],
       props: {
-        checkStrictly: true
+        checkStrictly: true,
+        label: 'name',
+        value: 'id'
         // lazy:true,
         // lazyLoad:$temp.lazyLoadFunc,
       },
@@ -56,6 +64,7 @@ export default {
   created () {
     this.queryAlertRules()
     this.queryOptionsData()
+    this.queryPriority()
   },
   methods: {
     saveParam: function (opType = 'save') {
@@ -118,81 +127,9 @@ export default {
       }
     },
     queryOptionsData: function () {
-      const param = {
+      this.$get('/monitor/endpoint/tree').then(response => {
-        pageSize: -1
-      }
-      this.$get('endpoint', param).then(response => {
-        /*
-          * {
-          * project-1:{
-          * data:{},
-          * module-1:{
-          *   data:{},
-          *   endpoints:[]
-          * }
-          * }
-          * }
-          * */
         if (response.code == 200) {
-          const data = response.data.list
+          this.options = response.data.list
-          const result = new Map()
-          data.forEach(item => {
-            let project = result.get('project-' + item.project.id)
-            if (!project) {
-              project = new Map()
-              project.set('data', item.project)
-              const module = new Map()
-              module.set('data', item.module)
-              module.set('endpoints', [item])
-              project.set('module-' + item.module.id, module)
-              result.set('project-' + item.project.id, project)
-            } else {
-              let module = project.get('module-' + item.module.id)
-              if (!module) {
-                module = new Map()
-                module.set('data', item.module)
-                module.set('endpoints', [item])
-                project.set('module-' + item.module.id, module)
-                result.set('project-' + item.project.id, project)
-              } else {
-                const endpoints = module.get('endpoints')
-                endpoints.push(item)
-                module.set('endpoints', endpoints)
-                project.set('module-' + item.module.id, module)
-                result.set('project-' + item.project.id, project)
-              }
-            }
-          })
-
-          result.forEach((project, projectKey) => {
-            const option = {}
-            project.forEach((value, moduleKey) => {
-              if (moduleKey == 'data') {
-                option.label = value.name
-                option.value = value.id
-              } else {
-                const module = value
-                const moduleData = module.get('data')
-                let endpoints = module.get('endpoints')
-                endpoints = endpoints.map(item => {
-                  return { label: item.asset.host, value: item.id }
-                })
-                /* //测试代码
-                  for (let i = 1; i < 16; i++) {
-                    endpoints.push({label: '114.51.41.' + i, value: i+8887});
-                  } */
-                if (!option.children) {
-                  option.children = []
-                }
-                option.children.push({
-                  label: moduleData.name,
-                  value: moduleData.id,
-                  children: endpoints
-                })
-              }
-            })
-            this.options.push(option)
-          })
         } else {
           console.error(response.msg)
           this.$message.error(response.msg)
@@ -211,6 +148,19 @@ export default {
           this.$message.error(response.msg)
         }
       })
+    },
+    queryPriority: function () {
+      const param = {
+        pageSize: -1
+      }
+      this.$get('alert/severity', param).then(response => {
+        if (response.code == 200) {
+          this.alertPriority = response.data.list
+        } else {
+          console.error(response.msg)
+          this.$message.error(response.msg)
+        }
+      })
     }
   },
   mounted () {
@@ -234,6 +184,17 @@ export default {
 .alert-chart-param-form .form-item{
   width: 100%;
 }
+.severity-circle{
+  position: absolute;
+  left: 10px;
+  top: 0;
+}
+.severity-box{
+  position: relative;
+}
+.severity-box /deep/ .el-select .el-input__inner{
+  padding-left: 25px;
+}
 </style>
 <style>
   .alert-form-pop{

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"/", "version": "2.0.2021.05.11.19.43"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "2.0.2021.05.11.19.43"}