NEZ-2494 feat：处理chart rules 优化未生效的问题

2023-01-05 17:53:42 +08:00
parent 3661eb6584
commit b527f54500
8 changed files with 75 additions and 21 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -16,7 +16,7 @@
        <!-- asset -->
        <div v-if="from === fromRoute.asset" style="display: flex">
          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
-          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChart">
+          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
          <top-tool-more-options
@@ -244,16 +244,25 @@ export default {
          enable: {
            legend: true,
            valueMapping: false,
-            thresholds: false
+            thresholds: false,
+            visibility: false
          },
          thresholdShow: true,
-          thresholds: [{ value: undefined, color: randomcolor() }]
+          thresholds: [{ value: undefined, color: randomcolor() }],
+          showHeader: 1,
+          visibility: {
+            varName: '',
+            operator: 'equal',
+            varValue: '',
+            result: 'show'
+          }
        },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
        panel: '',
        sync: 0,
        remark: '',
-        groupId: ''
+        groupId: '',
+        varType: ''
      },
      pageObj: {
        pageNo: 1,
@@ -347,9 +356,11 @@ export default {
    /* 图表相关操作--start */
    addChart () {
      this.chart = this.newChart()
-      this.$store.dispatch('dispatchEditChart', {
-        chart: '',
-        type: 'add'
+      this.chart.param.thresholds = [{ value: undefined, color: randomcolor() }]
+      this.chart.panelId = this.showPanel.id
+      this.chart.panelName = this.showPanel.name
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
      })
    },
    addChartByTemp () {
@@ -441,6 +452,9 @@ export default {
                }
              })
            }
+            this.$nextTick(() => {
+              this.$refs.addChartModal.isStable = 'stable'
+            })
          } else {
            this.$message.error(res.msg)
          }
@@ -774,6 +788,12 @@ export default {
        }
      })
    },
+    addChartBefore () {
+      this.$store.dispatch('dispatchEditChart', {
+        chart: '',
+        type: 'add'
+      })
+    },
    disposeChart () {
      const chartInfo = this.$store.getters.getChart
      const groupId = this.$store.getters.getGroupId
@@ -882,6 +902,8 @@ export default {
      handler (n) {
        if (n) {
          this.disposeChart()
+        } else {
+          this.$refs.addChartModal.isStable = 'instability'
        }
      }
    },
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -13,8 +13,8 @@ export const clickoutside = {
      const unsavedChange = localStorage.getItem('nz-unsaved-change')
      let oldValue
      try {
-        oldValue = JSON.parse(JSON.stringify(binding.value.obj))
-        el.__newValue__ = oldValue
+        el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
+        el.__newValue__ =  el.__oldValue__
      } catch (e) {

      }
@@ -37,10 +37,9 @@ export const clickoutside = {
          if (!flag) {
            return false
          }
-          if (oldValue) {
-            console.log(oldValue, el.__newValue__)
+          if ( el.__oldValue__) {
            // const newValue = JSON.parse(JSON.stringify(binding.value.obj))
-            if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__) && !el.isShow) {
+            if (unsavedChange == 'on' && !isEqual( el.__oldValue__, el.__newValue__) && !el.isShow) {
              el.isShow = true
              MessageBox.confirm(i18n.t('tip.confirmCancel'), {
                confirmButtonText: i18n.t('tip.yes'),
@@ -75,6 +74,9 @@ export const clickoutside = {
    }, 100)
  },
  update (el, binding, vnode) {
+    if (binding.arg && binding.arg != 'stable') {
+      el.__oldValue__ = JSON.parse(JSON.stringify(binding.value.obj))
+    }
    el.__newValue__ = binding.value.obj
  },
  unbind (el, binding) {
--- a/nezha-fronted/src/components/common/mixin/editRigthBox.js
+++ b/nezha-fronted/src/components/common/mixin/editRigthBox.js
@@ -9,7 +9,9 @@ export default {
        emit: ''
      },
      closeMessage: null,
-      uuid: getUUID()
+      uuid: getUUID(),
+      isStable: 'instability',
+      stableTime: null
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-rule">
+  <div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-rule" ref="rightBox">
    <div class="right-box__header">
      <!-- begin--标题-->
      <div class="header__title">{{alertRule.id ? $t("alert.config.editAlertConfig") : $t("overall.createAlertRule")}}</div>
@@ -406,7 +406,7 @@ export default {
        }
      ],
      showMetrics: true,
-      showSnmpTrap: true,
+      showSnmpTrap: false,
      showTypeSelect: false,
      editAlertRule: {},
      rules: {
@@ -664,7 +664,13 @@ export default {
          this.showTypeSelect = !!this.editAlertRule.id // 当 edit 时禁用 type下拉框
          if (n.type === 1) {
            this.editAlertRule.type = 1
+            setTimeout(() => {
+              this.showSnmpTrap = true
+            }, 150)
          } else if (n.type === 2) {
+            setTimeout(() => {
+              this.showSnmpTrap = true
+            }, 150)
            this.showMetrics = false // showMetrics 为 false 时,展示 Logs label
            this.editAlertRule.type = 2
          } else if (n.type === 3) {
@@ -680,6 +686,10 @@ export default {
              }
            })
          })
+        } else {
+          setTimeout(() => {
+            this.showSnmpTrap = true
+          }, 150)
        }
      }
    }
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
+  <div v-clickoutside:[isStable]="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
    <transition v-if="from !== 'chartTemp'" name="right-box">
 <!--      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
    </transition>
@@ -607,6 +607,10 @@ export default {
          }
        }
        this.editChart = obj
+        if (this.stableTime) {
+          clearTimeout(this.stableTime)
+          this.stableTime = null
+        }
      }
    },
    'editChart.type': {
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -194,12 +194,13 @@ export default {
        alertName: '',
        linkObject: { id: '', name: '' },
        expr: '',
+        inr: 15,
        state: 1,
        type: 1,
        unit: 2,
        operator: '>',
        last: 60,
-        severityId: '',
+        severityId: 1,
        summary: '',
        description: '',
        method: [],
@@ -359,6 +360,7 @@ export default {
        if (response.code === 200) {
          this.object = {
            ...response.data,
+            expr: response.data.expression,
            method: response.data.method ? response.data.method.split(',').map(item => Number(item)) : [],
            schedDays: response.data.schedDays ? response.data.schedDays.split(',').map(item => Number(item)) : [],
            receiverShow: response.data.receiver ? response.data.receiver.split(',').map(item => Number(item)) : []
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -260,11 +260,12 @@ export default {
            result: 'show'
          }
        },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
        panel: '',
        sync: 0,
        remark: '',
-        groupId: ''
+        groupId: '',
+        varType: ''
      },
      pageObj: {
        pageNo: 1,
@@ -532,6 +533,9 @@ export default {
      this.chart.param.thresholds = [{ value: undefined, color: randomcolor() }]
      this.chart.panelId = this.showPanel.id
      this.chart.panelName = this.showPanel.name
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
+      })
    },
    addChartByTemp () {
      this.chart = JSON.parse(JSON.stringify(this.blankChartTemp))
@@ -556,6 +560,9 @@ export default {
      this.chart.panelId = this.showPanel.id
      this.chart.panelName = this.showPanel.name
      this.chart.isGroup = true
+      this.$nextTick(() => {
+        this.$refs.addChartModal.isStable = 'stable'
+      })
    },
    newChart () {
      return JSON.parse(JSON.stringify(this.blankChart))
@@ -607,6 +614,9 @@ export default {
                }
              })
            }
+            this.$nextTick(() => {
+              this.$refs.addChartModal.isStable = 'stable'
+            })
          } else {
            this.$message.error(res.msg)
          }
@@ -1184,6 +1194,8 @@ export default {
      handler (n) {
        if (n) {
          this.disposeChart()
+        } else {
+          this.$refs.addChartModal.isStable = 'instability'
        }
      }
    },
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -179,9 +179,9 @@ const panel = {
      store.commit('setPanelNowTimeType', playload.nowTimeType)
    },
    dispatchEditChart (store, playload) {
-      store.commit('setShowRightBox', true)
      store.commit('setChart', playload.chart)
      store.commit('setType', playload.type)
+      store.commit('setShowRightBox', true)
    },
    dispatchHeaderH (store, playload) {
      store.commit('setHeaderH', playload.headerH)