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

2021-05-20 16:38:39 +08:00
parent e835dc6972
commit bfab789bef
5 changed files with 123 additions and 160 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/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"
-            ref="alertListScreenTable"
-            :showTopBtn="false"
+            @del="deleteMessage"
+            @messageDetail="messageDetail"
+            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) {
-      this.$put('alert/message', deleltebox).then(res => {
-        if (res.code === 200) {
+    deleteMessage (row) {
+      const self = this
+      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
-          this.deleteBox.ids = ''
-          this.getAlertList()
-          cb()
+            self.getAlertList()
          } 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 end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
-      this.searchTime = [start, end]
+      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] : bus.computeTimezoneTime(new Date().getTime())
+      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) {
-        return '(' + obj.alertRule.expr + ') and (' + (function () {
-          let q = '{'
+      let r = '(' + obj.alertRule.expr + ')'
+      let intoLabels = false
+      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') {
-              q += k
-              q += '='
-              q += ("'" + obj.labels[k] + "',")
+            if (k != 'alertname' && k != 'severity' && k != 'severity_id') {
+              intoLabels = true
+              group += 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 = {
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/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 ''
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/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]
    }
  }
--- a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
+++ b/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 = {
-        pageSize: -1
-      }
-      this.$get('endpoint', param).then(response => {
-        /*
-          * {
-          * project-1:{
-          * data:{},
-          * module-1:{
-          *   data:{},
-          *   endpoints:[]
-          * }
-          * }
-          * }
-          * */
+      this.$get('/monitor/endpoint/tree').then(response => {
        if (response.code == 200) {
-          const data = 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)
-          })
+          this.options = response.data.list
        } 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{
--- a/nezha-fronted/static/config.json
+++ b/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"}