NEZ-2103 feat : Record rule 编辑页面开发

2022-08-09 17:30:29 +08:00
parent 7b4ad59e4e
commit 958c02e743
10 changed files with 337 additions and 61 deletions
--- a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css
@@ -1 +1 @@
-.right-box-record-rule .metric-selector-input-box .input-box{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .not-fixed-height.no-resize.no-close{width:100%;height:100%}.right-box-record-rule .promqlInput .metric-selector-title{width:80px}.right-box-record-rule .promqlInput .metric-selector-input-box{width:calc(100% - 92px) !important}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{height:100%}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo{height:100%}.right-box-record-rule .promqlInput .cm-content.cm-lineWrapping{display:flex;align-items:center}.right-box-record-rule .silence-matchers-value{width:100%}.right-box-record-rule .param-box-row-symbol{padding-left:20px}
+.right-box-record-rule .metric-selector-input-box .input-box{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .not-fixed-height.no-resize.no-close{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .el-textarea .el-input__count{right:5px !important}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{height:100%}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo{height:100%}.right-box-record-rule .promqlInput .cm-content.cm-lineWrapping{display:flex;align-items:center}.right-box-record-rule .silence-matchers-value{width:100%}.right-box-record-rule .param-box-row-symbol{padding-left:20px}
--- a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss
@@ -7,15 +7,18 @@
                width: 100%;
                height: 100%;
            }
+            .el-textarea .el-input__count{
+                right: 5px !important;
+            }
        }
    }
    .promqlInput{
-        .metric-selector-title{
-            width: 80px;
-        }
-        .metric-selector-input-box{
-            width: calc(100% - 92px) !important;
-        }
+        // .metric-selector-title{
+        //     width: 80px;
+        // }
+        // .metric-selector-input-box{
+        //     width: calc(100% - 92px) !important;
+        // }
        .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{
            height: 100%;
        }
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -712,6 +712,56 @@
        </div>
      </div>
    </div>
+
+     <!-- type === 'recordRule' -->
+    <div class="alert-label-info" v-if="type === 'recordRule'" v-my-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="document-copy-block">
+          <div class="alert-label-title">{{$t('overall.name')}}</div>
+          <div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+          <i  class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
+       </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.type") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.type == "1" ? $t('overall.metric') : $t("overall.logs")}}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("config.exprTemp.expression") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.expr ? alertLabelData.expr : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("config.assetLabel.interval") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.inr ? alertLabelData.inr : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.remark ? alertLabelData.remark : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          <div
+            v-if="alertLabelData"
+            :style="alertLabelData.state == '1' ? `background: ${userColor}` : `background: ${unUserColor}`"
+            class="active-icon"
+          ></div>
+         {{ alertLabelData && alertLabelData.state == "1" ? $t("overall.enabled") : $t("overall.disabled")}}
+        </div>
+      </div>
+    </div>
  </div>
 </template>

@@ -892,6 +942,10 @@ export default {
        this.loading = false
        this.alertLabelData = this.that
      }
+      if (this.type === 'recordRule') {
+        this.loading = false
+        this.alertLabelData = this.that
+      }
      const weekDays = this.getWeeksTime()
      if (this.trendTimer) {
        clearTimeout(this.trendTimer)
@@ -954,6 +1008,8 @@ export default {
          return 'nz-icon-Alertrule'
        case 'user':
          return 'nz-icon-user1'
+        case 'recordRule':
+          return 'nz-icon-Alertrule'
      }
      return 'nz-icon-module5'
    },
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -39,7 +39,7 @@ export default {
          this.alertLabelObj = item
          this.alertLabelType = type
        }
-        this.$set(item[type], 'loading', loading)
+        this.$set(item, 'loading', loading)
      }
      this.timer = setTimeout(() => {
        this.alertLabelShow = loading
@@ -61,6 +61,7 @@ export default {
        case 'project':
        case 'dc':
        case 'user':
+        case 'recordRule':
          return false
        default: return true
      }
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -1002,6 +1002,115 @@ export default {
          jsonKey: 'valnum'
        }
      }
+    } else if (path === 'recordRule') {
+      searchKeys = {
+        // key: path 键
+        // value: vue set 参数
+        pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
+        pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
+        orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+        ids: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'ids',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'ids',
+            name: 'ID',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        state: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'state',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'recordState',
+            name: 'State',
+            readonly: true,
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        name: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'name',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            id: 'name',
+            label: 'name',
+            name: 'Name',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        type: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'type',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'recordType',
+            name: 'Type',
+            readonly: true,
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        expr: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'expr',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'expr',
+            name: 'Expression',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        starrd: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'starrd',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'starrd',
+            name: 'Starrd',
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        buildIn: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'buildIn',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'buildIn',
+            name: 'buildIn',
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        }
+      }
    }
    this.initQueryFromPath(searchKeys)
  },
--- a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
@@ -69,7 +69,7 @@
            </el-form-item>
          <!-- inr -->
          <el-form-item :label='$t("config.assetLabel.interval")' prop="inr">
-            <el-input v-model="editRecordRule.inr" :placeholder="''" size="small"></el-input>
+            <el-input v-model="editRecordRule.inr" maxlength="10" show-word-limit :placeholder="''" size="small"></el-input>
          </el-form-item>
          <!--state-->
          <el-form-item :label="$t('overall.state')" prop="state" >
@@ -195,8 +195,15 @@ export default {
        this.editRecordRule.labels.forEach(item => {
          obj[item.label] = item.value
        })
-        this.editRecordRule.labels = JSON.stringify(obj)
-        const params = { ...this.editRecordRule }
+
+        const params = {
+          ...this.editRecordRule,
+          state: Number(this.editRecordRule.state),
+          type: Number(this.editRecordRule.type),
+          inr: Number(this.editRecordRule.inr),
+          labels: this.editRecordRule.labels[0].label != '' ? JSON.stringify(obj) : {}
+        }
+
        // 处理exp
        if (!this.expressions[0]) {
          this.prevent_opt.save = false
@@ -205,7 +212,6 @@ export default {
        }
        if (valid) {
          this.prevent_opt.save = true
-          console.log(params)
          if (this.editRecordRule.id) {
            this.$put('/record/rule', params).then(response => {
              this.prevent_opt.save = false
@@ -246,15 +252,15 @@ export default {
    },
    metricChange (val) {
      this.editRecordRule.expr = val
+    },
+    labelsSort (obj) {
+      const labels = JSON.parse(JSON.parse(JSON.stringify(obj)))
+      const result = []
+      for (const key in labels) {
+        result.push({ label: key, value: labels[key] })
+      }
+      return result
    }
-    // labelsSort (obj) {
-    //   const labels = this.$lodash.cloneDeep(obj)
-    //   const result = []
-    //   for (const key in labels) {
-    //     result.push({ label: key, value: labels[key] })
-    //   }
-    //   return result
-    // }
  },
  watch: {
    recordRule: {
@@ -262,7 +268,13 @@ export default {
      immediate: true,
      handler (n, o) {
        this.isEdit = true
-        const obj = this.$lodash.cloneDeep(n)
+        this.editRecordRule = {
+          ...n,
+          type: n.type + '',
+          inr: n.inr + '',
+          labels: this.labelsSort(n.labels),
+          state: n.state + ''
+        }
        // expression
        if (this.editRecordRule.id || this.editRecordRule.name) {
          this.expressions = [this.editRecordRule.expr]
@@ -274,7 +286,13 @@ export default {
            })
          })
        }
-        this.editRecordRule = Object.assign(this.editRecordRule, obj)
+      }
+    },
+    'editRecordRule.type': {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        if (n == 2) { this.showMetrics = false } else { this.showMetrics = true }
      }
    }
  }
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -902,6 +902,14 @@ export default {
              objectInfo.statuses = val.valnum
            } else if (val.label === 'ipamState') {
              objectInfo.state = val.valnum
+            } else if (val.label === 'recordState') {
+              objectInfo.state = val.valnum
+            } else if (val.label === 'starrd') {
+              objectInfo.starrd = val.valnum
+            } else if (val.label === 'recordType') {
+              objectInfo.type = val.valnum
+            } else if (val.label === 'buildIn') {
+              objectInfo.buildIn = val.valnum
            } else if (typeof (val.valnum) === 'undefined' || val.valnum == '') {
              this.selectInfoList[val.label].forEach(item => {
                if (item.label === val.val) {
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -186,6 +186,46 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      label: i18n.t('overall.disabled')
    }
  ],
+  recordState: [
+    {
+      value: 1,
+      label: i18n.t('overall.enabled')
+    },
+    {
+      value: 0,
+      label: i18n.t('overall.disabled')
+    }
+  ],
+  starrd: [
+    {
+      value: 1,
+      label: i18n.t('overall.starred')
+    },
+    {
+      value: 0,
+      label: i18n.t('overall.unstarred')
+    }
+  ],
+  recordType: [
+    {
+      value: 1,
+      label: i18n.t('overall.metric')
+    },
+    {
+      value: 2,
+      label: i18n.t('overall.logs')
+    }
+  ],
+  buildIn: [
+    {
+      value: 1,
+      label: i18n.t('overall.buildIn')
+    },
+    {
+      value: 0,
+      label: i18n.t('overall.unbuildIn')
+    }
+  ],
  ack: [
    {
      value: '1',
--- a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
@@ -43,12 +43,12 @@
              <i v-if="scope.row.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
            </div>
        </template>
-        <!-- <template v-else-if="item.prop === 'type'">
+        <template v-else-if="item.prop === 'type'">
          <template v-if="scope.row[item.prop]">
            <template v-if="scope.row[item.prop] === 1">{{$t('overall.metrics')}}</template>
            <template v-if="scope.row[item.prop] === 2">{{$t('overall.logs')}}</template>
          </template>
-          <template v-if="scope.row[item.prop]">{{"-"}}</template>
+          <template v-else>{{"-"}}</template>
        </template>
        <template v-else-if="item.prop === 'expr'">
          <div class="document-copy-block">
@@ -62,13 +62,13 @@
        <template v-else-if="item.prop === 'labels'">
          <span v-for="(item1, i) in labelsSort(scope.row.labels)" :key="i">
            <span
-            @mouseenter="labelHover(scope.row, item.label, true, true, $event)"
-              @mouseleave="labelHover(scope.row, item.label, false, true,)">
+             @mouseenter="labelHover(scope.row, 'recordRule', true, false, $event)"
+             @mouseleave="labelHover(scope.row, 'recordRule', false, false,)">
              <nz-alert-tag
                :key="i"
-                :cursor-point="tagType(item1.name) !== 'info'"
-                :label="item1.name"
-                :type="tagType(item1.name)"
+                :cursor-point="tagType(item1.label) !== 'info'"
+                :label="item1.label"
+                :type="tagType(item1.label)"
                :regex="item1.regex"
                style="margin: 5px 0 5px 5px">
                {{ item1.value }}
@@ -80,12 +80,16 @@
          <template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
        </template>
        <template v-else-if="item.prop === 'state'">
-          <span v-if="scope.row.state === 0" class="silence-active">active</span>
-          <span v-if="scope.row.state === 1" class="silence-pending">pending</span>
-        </template> -->
-        <span v-else-if="scope.row[item.prop]">{{
-          scope.row[item.prop] || "-"
-        }}</span>
+           <div v-if="scope.row[item.prop] == '1'">
+            <div class="active-icon green-bg inline-block"></div>
+            {{ $t('overall.enabled') }}
+          </div>
+          <div v-else-if="scope.row[item.prop] == '0'">
+            <div class="active-icon gray-bg inline-block"></div>
+            {{ $t('overall.disabled') }}
+          </div>
+        </template>
+        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
        <template v-else>-</template>
      </template>
    </el-table-column>
@@ -122,9 +126,9 @@
      :id="alertLabelId"
      :that="alertLabelObj"
      :type="alertLabelType"
-      :alert-table-dialog="chartAlertList"
      @tipHover='tipHover'
    ></alertLabel>
+
  </div>
 </template>

@@ -132,8 +136,6 @@
 import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
-// import { calcDurationByStringTimeB } from '@/components/common/js/tools'
-// import { sameLabels } from '@/components/common/js/constants'
 export default {
  name: 'recordRuleTable',
  components: {
@@ -158,23 +160,25 @@ export default {
          label: this.$t('overall.name'),
          prop: 'name',
          show: true,
-          minWidth: 150
+          minWidth: 150,
+          sortable: 'custom'
        },
        {
          label: this.$t('overall.type'),
          prop: 'type',
          show: true,
-          minWidth: 150
+          minWidth: 150,
+          sortable: 'custom'
        },
        {
          label: this.$t('config.exprTemp.expression'),
-          prop: 'expression',
+          prop: 'expr',
          show: true,
          width: 300
        },
        {
          label: this.$t('config.assetLabel.interval'),
-          prop: 'interval',
+          prop: 'inr',
          show: true,
          width: 300
        },
@@ -195,14 +199,32 @@ export default {
          label: this.$t('overall.state'),
          prop: 'state',
          show: true,
-          width: 150
+          width: 150,
+          sortable: 'custom'
        }
      ]
    }
  },
  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
+      }
+    }
  },
  methods: {
+    labelsSort (obj) {
+      const labels = JSON.parse(JSON.parse(JSON.stringify(obj)))
+      const result = []
+      for (const key in labels) {
+        result.push({ label: key, value: labels[key] })
+      }
+      return result
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/page/config/recordRule.vue
+++ b/nezha-fronted/src/components/page/config/recordRule.vue
@@ -106,6 +106,42 @@ export default {
            type: 'input',
            label: 'ids',
            disabled: false
+          },
+          {
+            name: 'Name',
+            type: 'input',
+            label: 'name',
+            disabled: false
+          },
+          {
+            name: 'Type',
+            type: 'select',
+            label: 'recordType',
+            disabled: false
+          },
+          {
+            name: 'Expression',
+            type: 'input',
+            label: 'expr',
+            disabled: false
+          },
+          {
+            name: 'State',
+            type: 'select',
+            label: 'recordState',
+            disabled: false
+          },
+          {
+            name: 'Starrd',
+            type: 'select',
+            label: 'starrd',
+            disabled: false
+          },
+          {
+            name: 'Build_in',
+            type: 'select',
+            label: 'buildIn',
+            disabled: false
          }
        ]
      },
@@ -125,23 +161,6 @@ export default {
  mounted () {
  },
  methods: {
-    edit (u) {
-      this.$get(`${this.url}/${u.id}`).then(response => {
-        if (response.code === 200) {
-          this.object = response.data
-          this.object.labels = this.labelsSort(response.data.labels)
-          this.rightBox.show = true
-        }
-      })
-    },
-    labelsSort (obj) {
-      const labels = this.$lodash.cloneDeep(obj)
-      const result = []
-      for (const key in labels) {
-        result.push({ label: key, value: labels[key] })
-      }
-      return result
-    }
  },
  created () {
  }