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

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}

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{
+        // .metric-selector-title{
-            width: 80px;
+        //     width: 80px;
-        }
+        // }
-        .metric-selector-input-box{
+        // .metric-selector-input-box{
-            width: calc(100% - 92px) !important;
+        //     width: calc(100% - 92px) !important;
-        }
+        // }
         .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{
             height: 100%;
         }

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -36,7 +36,7 @@
         {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
       </div>
     </div>
-    </template>
+   </template>
     <div
       class="alert-label-info"
       v-if="type === 'asset'"
@@ -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'
     },

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
       }

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)
   },

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 }
       }
     }
   }

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) {

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',

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)"
+             @mouseenter="labelHover(scope.row, 'recordRule', true, false, $event)"
-              @mouseleave="labelHover(scope.row, item.label, false, true,)">
+             @mouseleave="labelHover(scope.row, 'recordRule', false, false,)">
               <nz-alert-tag
                 :key="i"
-                :cursor-point="tagType(item1.name) !== 'info'"
+                :cursor-point="tagType(item1.label) !== 'info'"
-                :label="item1.name"
+                :label="item1.label"
-                :type="tagType(item1.name)"
+                :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>
+           <div v-if="scope.row[item.prop] == '1'">
-          <span v-if="scope.row.state === 1" class="silence-pending">pending</span>
+            <div class="active-icon green-bg inline-block"></div>
-        </template> -->
+            {{ $t('overall.enabled') }}
-        <span v-else-if="scope.row[item.prop]">{{
+          </div>
-          scope.row[item.prop] || "-"
+          <div v-else-if="scope.row[item.prop] == '0'">
-        }}</span>
+            <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>

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 () {
   }