Merge branch 'dev-3.5' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.5-topology

# Conflicts:
#	nezha-fronted/src/assets/css/common/checkbox.scss

nezha-fronted/src/assets/css/common.scss

@@ -312,7 +312,7 @@ td .nz-icon-gear:before {
     .el-button:hover {
       border: 1px solid $--color-primary;
     }
-    .el-button:nth-of-type(3) {
+    .el-button:nth-child(3) {
       margin-left: 10px;
     }
     .nz-btn.nz-btn-size-normal {
@@ -323,6 +323,14 @@ td .nz-icon-gear:before {
     .nz-btn.nz-btn-size-normal:hover {
       background-color: #fe9f37;
     }
+    .nz-btn.nz-btn-style-error {
+      background: $--color-danger;
+      color: $--button-primary-color;
+      border: 1px solid $--color-danger;
+    }
+    .nz-btn.nz-btn-style-error:hover {
+      background-color: #F38b73;
+    }
   }
 }
 .el-dialog {

nezha-fronted/src/assets/css/common/checkbox.scss

@@ -7,13 +7,15 @@
 .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: $--color-primary !important;
 }
-.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
+.el-table .el-table__header-wrapper{
-  //background-color: $--background-color-empty !important;
+  .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
-  //border-color: $--border-color-base !important;
-}
-.el-checkbox__input.is-disabled .el-checkbox__inner{
   background-color: $--background-color-empty !important;
   border-color: $--border-color-base !important;
+}
+  .el-checkbox__input.is-disabled .el-checkbox__inner{
+  background-color: $--background-color-empty !important;
+  border-color: $--border-color-base !important;
+}
 }
 .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner:hover{
   border-color: $--border-color-base !important;

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -1,4 +1,5 @@
 .temp-dropdown{
+  display: none;
   border: none;
 }
 .my-loading-parent--relative {

nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css

@@ -0,0 +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 .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

@@ -0,0 +1,39 @@
+.right-box-record-rule {
+    .metric-selector-input-box{
+        .input-box{
+            width: 100%;
+            height: 100%;
+            .not-fixed-height.no-resize.no-close{
+                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;
+        // }
+        .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{
+            height: 100%;
+        }
+        .cm-editor.ͼ1.ͼ2.ͼo{
+            height: 100%;
+        }
+        .cm-content.cm-lineWrapping{
+            display: flex;
+            align-items: center;
+        }
+    }
+    .silence-matchers-value{
+        width: 100%;
+    }
+    .param-box-row-symbol{
+        padding-left: 20px;
+    }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -41,6 +41,7 @@
 @import './common/rightBox/addEndpointBox.scss';
 @import './common/rightBox/alertRuleBox.scss';
 @import './common/rightBox/alertSilenceBox.scss';
+@import './common/rightBox/recordRuleBox.scss';
 @import './common/rightBox/assetStateBox.scss';
 @import './common/rightBox/batchAddEndpoint.scss';
 @import './common/rightBox/batchModifyEndpoint.scss';

nezha-fronted/src/assets/stylus/main.scss

@@ -1222,6 +1222,45 @@ li {
 .result-title{
   font-weight: bold;
 }
+.import-upload{
+  width: 96%;
+  margin: 0 auto;
+  .el-upload,.el-upload-dragger{
+    width: 100%;
+  }
+  .el-upload-list__item{
+    line-height: 2.4;
+    margin-top: 8px;
+    text-align: left;
+    .el-icon-close{
+      top: 0;
+      bottom: 0;
+      line-height: 2.4;
+    }
+  }
+}
+.import-select{
+  width: 96%;
+  margin: 10px auto;
+  .exists{
+    display: flex;
+    align-items: center;
+    padding-bottom: 4px;
+    &>span{
+      margin-right: 12px;
+    }
+  }
+  .import-select-list{
+    .import-select-item{
+      margin-top: 6px;
+    }
+  }
+}
+.exists-select{
+  z-index: 2100 !important;
+}
+
+
 /**dialog 在视图中居中显示start*/
 .el-dialog{
   display: flex;

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/bottomBox/bottomBox.vue

@@ -62,6 +62,8 @@
         <scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'agent'" :from="from" :obj="obj" :tabs="tabs.agent" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
         <!-- ipam -->
         <ip-details v-if="from === fromRoute.ipam && targetTab === 'ipam'" :from="from" :obj="obj" :tabs="tabs.ipam" @changeTab="changeTab" :targetTab.sync="targetTab"></ip-details>
+        <!-- recordRule  下滑-->
+        <record-rule-eval-log v-if="from === fromRoute.recordRule && targetTab === 'recordRule'" :from="from" :obj="obj" :tabs="tabs.recordRule" @changeTab="changeTab" :targetTab.sync="targetTab"></record-rule-eval-log>
         <!--alertRule Tab-->
         <alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
       </div>
@@ -89,6 +91,7 @@ import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
+import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
 
 export default {
   name: 'bottomBox',
@@ -110,7 +113,8 @@ export default {
     assetTab,
     assetSubTab,
     alertRuleEvalLog,
-    IpDetails
+    IpDetails,
+    recordRuleEvalLog
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -119,7 +123,7 @@ export default {
     from: String, // 来自哪个页面
     tabList: Array, // 动态页签列表
     targetTab: String, // 展示哪个页签
-    sign:[Number,String], //pickTime历史记录的唯一标识
+    sign: [Number, String] // pickTime历史记录的唯一标识
   },
   watch: {
     obj: {
@@ -257,6 +261,9 @@ export default {
         ipam: [
           { prop: 'ipam', name: this.$t('ipam.subnet.ipDetails'), active: true }
         ],
+        recordRule: [
+          { prop: 'recordRule', name: this.$t('overall.alertRuleEvalLog'), active: true }
+        ],
         alertSilence: [
           { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
         ]

nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue

@@ -0,0 +1,121 @@
+<template>
+  <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['elementSet']"
+    :search-msg="searchMsg"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @search="search"
+    @changeTab="changeTab"
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot>
+      <alertRuleEvalLogTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :now-time="nowTime"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        @del="del"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></alertRuleEvalLogTable>
+    </template>
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-bottom-data-list>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import alertRuleEvalLogTable from '@/components/common/table/alert/alertRuleEvalLogTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'recordRuleEvalLog',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    alertRuleEvalLogTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    obj (n) {
+      this.searchLabel = { id: n.id }
+      this.getTableData()
+    }
+  },
+  data () {
+    return {
+      url: 'record/rule/1/evalLog',
+      tableId: 'recordRuleEvalLogTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          {
+            id: 11,
+            name: this.$t('config.terminallog.loginHost'),
+            type: 'input',
+            label: 'host',
+            disabled: false
+          }
+        ]
+      },
+      nowTime: '',
+      searchLabel: { id: this.obj.id }
+    }
+  },
+  methods: {
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', -1)
+      this.tools.loading = true
+      if (this.obj) {
+        this.$set(this.searchLabel, 'id', this.obj.id)
+      }
+      this.$get('record/rule/' + this.obj.id + '/evalLog').then(response => {
+        this.tools.loading = false
+        this.nowTime = this.utcTimeToTimezoneStr(response.time)
+        if (response.code === 200) {
+          this.tableData = response.data
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/js/constants.js

@@ -360,6 +360,7 @@ export const fromRoute = {
   expressionTemplate: 'expressionTemplate',
   user: 'user',
   agent: 'agent',
+  recordRule: 'recordRule',
   dc: 'dc',
   role: 'role',
   project: 'project',

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/popBox/topToolMoreOptions.vue

@@ -24,7 +24,66 @@
       </el-dropdown-menu>
 
       <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
-        <div v-if="importBox.type == 1">
+        <!-- 新版导入 -->
+        <div v-if="importBox.type == 1&&importType">
+          <div class="upload-body">
+            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="import-upload" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+              <div class="el-upload__tip" >{{$t('overall.importSupport')}}</div>
+            </el-upload>
+          </div>
+          <div class="import-select">
+            <div v-if="showEexisted" class="exists">
+              <span>{{$t('overall.existed')}}</span>
+              <el-select v-model="importBox.existed" style="flex:1" size="medium" popper-class="exists-select">
+                <el-option
+                  v-for="item in existedArr"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <ul class="import-select-list">
+              <li v-if="showIgnoreError" class="import-select-item">
+                <el-checkbox v-model="importBox.ignoreError">{{$t('overall.ignoreError')}}</el-checkbox>
+              </li>
+              <li v-if="showSyncDashboard" class="import-select-item">
+                <el-checkbox v-model="importBox.syncDashboard">{{$t('overall.syncDashboard')}}</el-checkbox>
+              </li>
+              <li v-if="showSyncEndpoint" class="import-select-item">
+                <el-checkbox v-model="importBox.syncEndpoint">{{$t('overall.syncEndpoint')}}</el-checkbox>
+              </li>
+            </ul>
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns" style="text-align: right;">
+              <el-popover
+                placement="bottom-start"
+                trigger="click">
+                <div class="template-pop">
+                  <p style="margin-bottom:8px">{{$t('overall.selectTemplate')}}</p>
+                  <el-radio-group v-model="importBox.templateFormat" size="small">
+                    <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" @click.native="downloadTemplate(item.value)">{{item.name}}</el-radio-button>
+                  </el-radio-group>
+                </div>
+                <button slot="reference" :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small">
+                  <span>{{$t('upload.template')}}</span>
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </button>
+              </el-popover>
+              <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
+                <span>{{$t('overall.importExcel')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-esc'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.cancel')}}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- 导入 -->
+        <div v-else-if="importBox.type == 1">
           <div class="upload-body">
             <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
               <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
@@ -34,19 +93,21 @@
           </div>
           <div slot="footer" class="footer">
             <div class="el-message-box__btns" style="text-align: right;">
-              <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+              <button :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small" @click="downloadTemplate()">
                 <span>{{$t('upload.template')}}</span>
               </button>
               <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
                 <span>{{$t('overall.importExcel')}}</span>
               </button>
-              <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+              <button :id="id+'-xlsx-import-esc'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
                 <span>{{$t('overall.cancel')}}</span>
               </button>
             </div>
           </div>
         </div>
-        <div v-if="importBox.type == 2">
+
+        <!-- 导出 -->
+        <div v-else-if="importBox.type == 2">
           <div class="upload-body" style="height: 200px">
             <div class="export-box">
               <span class="export-title">{{$t('export.records')}}</span>
@@ -63,15 +124,17 @@
           </div>
           <div slot="footer" class="footer">
             <div class="el-message-box__btns">
-              <button :id="id+'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
+              <button :id="id+'-xlsx-import-export'"  class="nz-btn el-button--small nz-btn-style-normal" @click="exportData">
                 <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
               </button>
-              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
                 <span>{{$t('overall.close')}}</span>
               </button>
             </div>
           </div>
         </div>
+
+        <!-- 导入结果 -->
         <div v-if="importBox.type==3">
           <div class="upload-body result-body">
             <div v-if="importResult&&importResult.failNum">
@@ -114,10 +177,10 @@
           </div>
           <div slot="footer" class="footer">
             <div class="el-message-box__btns">
-              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
+              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn el-button el-button--small nz-btn-style-error" @click="rollbackImport">
                 <span>{{$t('overall.rollbackImport')}}</span>
               </button>
-              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
                 <span>{{$t('overall.close')}}</span>
               </button>
             </div>
@@ -134,6 +197,8 @@
 <script>
 import axios from 'axios'
 import panelBox from '@/components/common/rightBox/panelBox'
+import bus from '@/libs/bus'
+import { Number } from '@svgdotjs/svg.js'
 let timeout
 export default {
   name: 'topToolMoreOptions',
@@ -171,11 +236,48 @@ export default {
     }
   },
   computed: {
-    language () { return this.$store.getters.getLanguage }
+    language () { return this.$store.getters.getLanguage },
+    // 显示新版导入
+    importType () {
+      const name = this.exportFileName
+      return name === 'asset'
+    },
+    showEexisted () {
+      const name = this.exportFileName
+      return name === 'asset'
+    },
+    showIgnoreError () {
+      const name = this.exportFileName
+      return name === 'asset'
+    },
+    showSyncDashboard () {
+      const name = this.exportFileName
+      return name === 'asset'
+    },
+    showSyncEndpoint () {
+      const name = this.exportFileName
+      return name === 'asset'
+    }
   },
   data () {
     return {
-      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1, record: 'all', format: 1 },
+      importBox: {
+        show: false,
+        title: this.$t('overall.importExcel'),
+        type: 1,
+        record: 'all',
+        format: 1,
+        templateFormat: 1, // 模板格式
+        existed: 1, // 已存在的内容处理方式
+        ignoreError: Boolean(1), // 遇到错误是否继续导入
+        syncDashboard: Boolean(1), // 是否同步更新关联的dashboard
+        syncEndpoint: Boolean(1) // 是否同步更新关联的endpoint
+      },
+      existedArr: [
+        { name: this.$t('overall.error'), value: 0 },
+        { name: this.$t('overall.override'), value: 1 },
+        { name: this.$t('overall.ignore'), value: 2 }
+      ],
       importFile: null,
       importFileList: [],
       importResult: null,
@@ -253,7 +355,26 @@ export default {
       if (this.importFile && this.importFile.raw) {
         this.prevent_opt.import = true
         const form = new FormData()
-        form.append('excelFile', this.importFile.raw)
+        if (this.importType) {
+          form.append('file', this.importFile.raw)
+        } else {
+          form.append('excelFile', this.importFile.raw)
+        }
+        if (this.showEexisted) {
+          form.append('existed', this.importBox.existed)
+        }
+        if (this.showIgnoreError) {
+          const ignoreError = this.importBox.ignoreError ? 1 : 0
+          form.append('ignoreError', ignoreError)
+        }
+        if (this.showSyncDashboard) {
+          const syncDashboard = this.importBox.syncDashboard ? 1 : 0
+          form.append('syncDashboard', syncDashboard)
+        }
+        if (this.showSyncEndpoint) {
+          const syncEndpoint = this.importBox.syncEndpoint ? 1 : 0
+          form.append('syncEndpoint', syncEndpoint)
+        }
         if (this.paramsType) {
           form.append('type', this.paramsType)
           if (this.paramsType === 'asset' || this.paramsType === 'endpoint') {
@@ -271,6 +392,7 @@ export default {
             this.$emit('afterImport', linkId)
             this.importBox.type = 3
             this.importBox.width = '600px'
+            this.importBox.title = this.$t('overall.importResult')
           } else {
             this.$message.error(response.msg)
           }
@@ -300,15 +422,19 @@ export default {
           this.importBox.value = 1
           this.importBox.record = 'all'
           this.importBox.format = 1
+          this.importBox.templateFormat = 1 // 模板格式
+          this.importBox.existed = 1// 已存在的内容处理方式
+          this.importBox.ignoreError = Boolean(1) // 遇到错误是否继续导入
+          this.importBox.syncDashboard = Boolean(1) // 是否同步更新关联的dashboard
+          this.importBox.syncEndpoint = Boolean(1)// 是否同步更新关联的endpoint
         })
       }, 200)
     },
-    downloadTemplate () {
+    downloadTemplate: bus.debounce(function (templateFormat) {
       const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
       const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
-
       let url = null
-      const param = { language: language }
+      const param = { language: language, format: templateFormat }
       if (this.importUrl.indexOf('/asset/model') > -1) {
         url = '/asset/model/template'
       } else if (this.importUrl.indexOf('asset') > -1) {
@@ -335,12 +461,14 @@ export default {
         url = '/ipam/subnet/template'
       } else if (this.importUrl.indexOf('ipam/ip') > -1) {
         url = '/ipam/ip/template'
+      } else if (this.importUrl.indexOf('record/rule') > -1) {
+        url = '/record/rule/template'
       }
       if (!url) {
         console.error('no interface support')
       }
       this.exportExcel(url, param, fileName)
-    },
+    }, 50),
     formatJson (filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => v[j]))
     },
@@ -595,7 +723,7 @@ export default {
       if (refresh) {
         this.$emit('afterImport')
       }
-    },
+    }
   },
   watch: {
     panelLock: {
@@ -607,3 +735,6 @@ export default {
   }
 }
 </script>
+<style scoped>
+
+</style>

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -12,22 +12,23 @@
         v-if="chartConfig.elements"
         class="metrics-input-box"
       >
-        <draggable v-model="chartConfig.elements"
+        <draggable
-                   :move="move"
+          v-model="chartConfig.elements"
-                   @end="end"
+          :move="move"
-                   @start="start"
+          @end="end"
-                   :scroll-sensitivity="150"
+          @start="start"
-                   :options="{
+          :scroll-sensitivity="150"
-                 dragClass:'drag-chart-class',
+          :options="{
-                 fallbackClass:'fallback-class',
+            dragClass:'drag-chart-class',
-                 forceFallback:true,
+            fallbackClass:'fallback-class',
-                 ghostClass:'chart-ghost',
+            forceFallback:true,
-                 chosenClass:'choose-class',
+            ghostClass:'chart-ghost',
-                 scroll:true,
+            chosenClass:'choose-class',
-                 filter: '.drag-disabled',
+            scroll:true,
-                 animation: 150,
+            filter: '.drag-disabled',
-                 handle: '.chart-title-content'
+            animation: 150,
-               }"  >
+            handle: '.drag-sort'
+          }">
         <el-row
           :key="index"
           class="element-item form-row-item thresholds-from-item"
@@ -54,19 +55,22 @@
             <span>
               <!-- 显示隐藏 -->
               <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
-                  <i class="nz-icon nz-icon-mimakejian"></i>
+                <i class="nz-icon nz-icon-mimakejian"></i>
               </span>
               <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
-                  <i class="nz-icon nz-icon-mimabukejian"></i>
+                <i class="nz-icon nz-icon-mimabukejian"></i>
               </span>
               <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
-                  <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
               </span>
               <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
-                  <i  class="nz-icon nz-icon-override"></i>
+                <i class="nz-icon nz-icon-override"></i>
               </span>
               <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
-                  <i  class="nz-icon nz-icon-minus"></i>
+                <i class="nz-icon nz-icon-minus"></i>
+              </span>
+              <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
               </span>
             </span>
           </div>
@@ -150,15 +154,15 @@
           prop="unit"
         >
           <el-cascader id="chart-box-unit"
-                       v-model="chartConfig.unit"
+            v-model="chartConfig.unit"
-                       :options="unitOptions"
+            :options="unitOptions"
-                       :props="{ expandTrigger: 'hover',emitPath:false }"
+            :props="{ expandTrigger: 'hover',emitPath:false }"
-                       :show-all-levels="false" filterable
+            :show-all-levels="false" filterable
-                       placeholder=""
+            placeholder=""
-                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
-                       size="small"
+            size="small"
-                       style="width: 100%"
+            style="width: 100%"
-                       @change="unitSelected"
+            @change="unitSelected"
           >
           </el-cascader>
         </el-form-item>
@@ -1005,6 +1009,8 @@ export default {
       if (!this.chartConfig.elements.length) {
         this.addExpression()
       } else {
+        // 根据orderNum排序
+        this.chartConfig.elements = this.chartConfig.elements.sort((a, b) => a.orderNum - b.orderNum)
         this.chartConfig.elements.forEach(item => {
           this.addExpression(item)
         })
@@ -1198,9 +1204,22 @@ export default {
       if (!this.chartConfig.elements.length) {
         this.addExpression()
       } else {
-        this.chartConfig.elements.forEach(item => {
+        const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow)
+        this.chartConfig.elements.forEach((item, index) => {
           this.expressions.push(item.expression)
           this.expressionName.push(item.name)
+          // 更新promqlInput视图
+          this.$nextTick(() => {
+            this.$refs[`promql-${index}`][0].promqlInputChange(item)
+          })
+          // 设置orderNum排序
+          item.orderNum = index
+          // expressionsShow调整顺序
+          expressionsShow.forEach((subItem) => {
+            if (item.name == subItem.oldName) {
+              this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem))
+            }
+          })
         })
       }
       this.change()

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -370,7 +370,15 @@ export default {
       if (this.expressions.length) {
         this.chartConfig.elements = []
         this.expressions.forEach((expr, i) => {
-          this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i], state: this.expressionsShow[i].state })
+          this.chartConfig.elements.push({
+            id: this.expressionsShow[i].elementId,
+            expression: expr,
+            type: 'expert',
+            legend: this.expressionsShow[i].legend,
+            name: this.expressionName[i],
+            state: this.expressionsShow[i].state,
+            orderNum: i
+          })
         })
       } else {
         this.chartConfig.elements = []
@@ -421,6 +429,16 @@ export default {
       letter += self.letter[num % 26]
       return letter
     },
+    getExpressionName () {
+      let name = ''
+      for (let i = 0; i <= this.expressionName.length; i++) {
+        name = this.transformNumToLetter(i)
+        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+          break
+        }
+      }
+      return name
+    },
     addExpression (item) {
       if (!item) {
         this.expressions.push('')
@@ -452,16 +470,29 @@ export default {
         )
       }
     },
-
+    copyExpression (index) {
-    getExpressionName () {
+      this.expressions.push(this.expressions[index])
-      let name = ''
+      const expressionName = this.getExpressionName()
-      for (let i = 0; i <= this.expressionName.length; i++) {
+      this.expressionName.push(expressionName)
-        name = this.transformNumToLetter(i)
+      this.expressionsShow.push(
-        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+        {
-          break
+          ...this.expressionsShow[index],
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          elementId: ''
         }
-      }
+      )
-      return name
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+            this.$refs[`promql-${index}`][0].promqlInputChange(ex)
+          }
+        })
+      })
+      this.expressionChange()
     },
     removeExpression (index) {
       if (this.expressionsShow.length > 1) {
@@ -472,37 +503,13 @@ export default {
           this.expressions.forEach((ex, index) => {
             if (ex) {
               this.$refs[`promql-${index}`][0].metricChange(ex)
-              this.$refs[`promql-${index}`][0].promqlInputCahnge(ex)
+              this.$refs[`promql-${index}`][0].promqlInputChange(ex)
             }
           })
         })
         this.expressionChange()
       }
     },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      const expressionName = this.getExpressionName()
-      this.expressionName.push(expressionName)
-      this.expressionsShow.push(
-        {
-          ...this.expressionsShow[index],
-          show: true,
-          hideInput: true,
-          oldName: this.expressionName[index],
-          error: '',
-          elementId: ''
-        }
-      )
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            this.$refs[`promql-${index}`][0].metricChange(ex)
-            this.$refs[`promql-${index}`][0].promqlInputCahnge(ex)
-          }
-        })
-      })
-      this.expressionChange()
-    },
     showExpression (index) {
       this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
       this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])

nezha-fronted/src/components/common/rightBox/recordRuleBox.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="right-box right-box-record-rule" v-clickoutside="{obj:editRecordRule,func:clickOutside}">
+    <!-- begin--标题-->
+    <div class="right-box__header">
+      <div class="header__title">{{editRecordRule.id ? $t("overall.recordRule.edit") : $t("overall.createRecordRule")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editRecordRule, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
+      </div>
+    </div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="recordRuleForm" :model="editRecordRule"
+                 :rules="rules" label-position="top" label-width="120px">
+            <!-- name -->
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input
+              v-model="editRecordRule.name" :placeholder="''"
+              maxlength="64"
+              show-word-limit
+              size="small">
+            </el-input>
+          </el-form-item>
+           <!--type-->
+          <el-form-item :label="$t('overall.type')" prop="type" >
+            <el-select v-model="editRecordRule.type" class="right-box__select" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
+              <el-option :label="$t('overall.metrics')" value="1">{{$t('overall.metrics')}}</el-option>
+              <el-option :label="$t('overall.logs')" value="2">{{$t('overall.logs')}}</el-option>
+            </el-select>
+          </el-form-item>
+           <!--expr-->
+          <el-form-item :label='$t("config.exprTemp.expression")' prop="expr">
+              <template v-if="showMetrics">
+                <el-row style="line-height: 32px;">
+                  <promql-input
+                    :from-father-data="true"
+                    :metricOptionsParent="metricOptions"
+                    id="alert-box-input-promql"
+                    ref="promql"
+                    :expression-list.sync="expressions"
+                    :index="0"
+                    :plugins="['metric-selector','metric-input']"
+                    :required="true"
+                    type="metric"
+                    :styleType="3"
+                    @change="metricChange"
+                  ></promql-input>
+                </el-row>
+              </template>
+              <template v-else>
+                <el-row style="line-height: 32px;">
+                  <promql-input
+                    :from-father-data="true"
+                    :metricOptionsParent="metricOptions"
+                    id="record-box-input-promql"
+                    ref="promql"
+                    :expression-list.sync="expressions"
+                    :index="0"
+                    :plugins="['metric-selector','metric-input']"
+                    :required="true"
+                    type="log"
+                    :styleType="3"
+                    @change="metricChange"
+                  ></promql-input>
+                </el-row>
+              </template>
+            </el-form-item>
+          <!-- inr -->
+          <el-form-item :label='$t("config.assetLabel.interval")' prop="inr">
+            <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" >
+            <el-select v-model="editRecordRule.state" class="right-box__select" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
+              <el-option :label="$t('overall.disabled')" value="0">{{$t('overall.disabled')}}</el-option>
+              <el-option :label="$t('overall.enabled')" value="1">{{$t('overall.enabled')}}</el-option>
+            </el-select>
+          </el-form-item>
+          <!-- labels -->
+           <el-form-item :label='$t("project.endpoint.labels2")' class="matchers" prop="labels">
+            <div v-for="(item, index) in editRecordRule.labels" :key="index" class="param-box-row">
+              <el-form-item :prop="'labels.' + index + '.label'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" class="param-box-row-key">
+                <el-input v-model="item.label" class="silence-matchers-name" placeholder=""  size="mini"></el-input>
+              </el-form-item>
+              <span class="param-box-row-eq" @click="li(item)">=</span>
+              <el-form-item :prop="'labels.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" class="param-box-row-value" >
+                <el-input v-model="item.value" class="silence-matchers-value" placeholder=""  size="mini"></el-input>
+              </el-form-item>
+              <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeLabels(index)" :title="$t('overall.delete')"><i class="nz-icon nz-icon-shanchu1"></i></span>
+            </div>
+            <div class="" style="text-align: center;">
+               <span id="module-add-label" type="button" @click="addLabels" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style=""  :title="$t('tip.add')">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+            </div>
+          </el-form-item>
+          <!-- remark -->
+          <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
+            <el-input
+              v-model="editRecordRule.remark"
+              maxlength="256"
+              size="small" :rows="2"
+              show-word-limit
+              type="textarea">
+
+            </el-input>
+          </el-form-item>
+
+        </el-form>
+      </div>
+
+    </div>
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box__footer">
+      <button v-cancel="{obj:editRecordRule,func:esc}" id="alert-box-esc"
+              class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save"
+              class="footer__btn" id="alert-box-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import lodash from 'lodash'
+import editRigthBox from '../mixin/editRigthBox'
+import { arrLength } from '@/components/common/js/validate'
+import promqlInput from '../../page/dashboard/explore/promqlInput'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
+export default {
+  name: 'recordRuleBox',
+  components: {
+    'promql-input': promqlInput
+  },
+  mixins: [editRigthBox, promqlInputMixin],
+  props: {
+    recordRule: Object
+  },
+  data () {
+    return {
+      showMetrics: true,
+      expressions: [''],
+      editRecordRule: {
+        id: '',
+        name: '',
+        type: '',
+        expr: '',
+        inr: '',
+        labels: [{ label: '', value: '' }],
+        remark: '',
+        state: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        expr: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        labels: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          { validator: arrLength, trigger: 'change' }
+        ],
+        state: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.editRecordRule.expr = this.expressions[0]
+      this.$refs.recordRuleForm.validate((valid) => {
+        // 处理labels数据
+        const obj = {}
+        this.editRecordRule.labels.forEach(item => {
+          obj[item.label] = item.value
+        })
+
+        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
+          this.$message.error(this.$t('config.exprTemp.expressionError'))
+          return
+        }
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editRecordRule.id) {
+            this.$put('/record/rule', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('record/rule', params).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+        }
+      })
+    },
+    // 新增label
+    addLabels () {
+      this.editRecordRule.labels.push({ label: '', value: '' })
+    },
+    // 移除单个Label
+    removeLabels (index) {
+      if (this.editRecordRule.labels.length === 1) {
+        this.editRecordRule.labels = [{ label: '', value: '' }]
+      }
+      this.editRecordRule.labels.splice(index, 1)
+    },
+    metricChange (val) {
+      this.editRecordRule.expr = val
+    },
+    labelsSort (obj) {
+      if (typeof obj != 'object') {
+        const labels = JSON.parse(lodash.cloneDeep(obj))
+        const result = []
+        for (const key in labels) {
+          result.push({ label: key, value: labels[key] })
+        }
+        return result
+      }
+      return obj
+    }
+  },
+  watch: {
+    recordRule: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        this.isEdit = true
+        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]
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs.promql.metricChange(ex)
+              }
+            })
+          })
+        }
+      }
+    },
+    'editRecordRule.type': {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        if (n == 2) { this.showMetrics = false } else { this.showMetrics = true }
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,230 @@
+<template>
+<div>
+  <el-table
+    id="recordRuleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    :default-sort="orderBy"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55"
+    >
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{ item.label }}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+           <div class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <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-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-else>{{"-"}}</template>
+        </template>
+        <template v-else-if="item.prop === 'expr'">
+          <div class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+              <i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop])" :title="$t('overall.copyText')"></i>
+            </div>
+        </template>
+        <template v-else-if="item.prop === 'inr'">
+          <template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
+        </template>
+        <template v-else-if="item.prop === 'labels'">
+          <span v-for="(item1, i) in labelsSort(scope.row.labels)" :key="i">
+            <span
+             @mouseenter="labelHover(scope.row, 'recordRule', true, false, $event)"
+             @mouseleave="labelHover(scope.row, 'recordRule', false, false,)">
+              <nz-alert-tag
+                :key="i"
+                :cursor-point="tagType(item1.label) !== 'info'"
+                :label="item1.label"
+                :type="tagType(item1.label)"
+                :regex="item1.regex"
+                style="margin: 5px 0 5px 5px">
+                {{ item1.value }}
+              </nz-alert-tag>
+            </span>
+          </span>
+        </template>
+        <template v-else-if="item.prop === 'remark'">
+          <template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
+        </template>
+        <template v-else-if="item.prop === 'state'">
+           <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>
+    <el-table-column :resizable="false" :width="operationWidth" fixed="right">
+      <div slot="header" class="table-operation-title">
+        {{ $t("overall.option") }}
+      </div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="showBottomBox('recordRule', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" v-has="['record_rule_edit','record_rule_delete']" trigger="click" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
+            <i class="nz-icon nz-icon-more3"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+  <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+      @tipHover='tipHover'
+    ></alertLabel>
+
+  </div>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import nzAlertTag from '../../../page/alert/nzAlertTag'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+export default {
+  name: 'recordRuleTable',
+  components: {
+    nzAlertTag
+  },
+  mixins: [table, alertLabelMixin],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      /* 表格相关 */
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 150,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true,
+          minWidth: 150,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('config.exprTemp.expression'),
+          prop: 'expr',
+          show: true,
+          width: 300
+        },
+        {
+          label: this.$t('config.assetLabel.interval'),
+          prop: 'inr',
+          show: true,
+          width: 300
+        },
+        {
+          label: this.$t('project.endpoint.labels2'),
+          prop: 'labels',
+          show: false,
+          minWidth: 300,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          width: 300
+        },
+        {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          show: true,
+          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/asset/asset.vue

@@ -28,9 +28,9 @@
           :params="searchLabel"
           :params2="searchCheckBox"
           :permissions="{
-                  import: 'asset_add',
+            import: 'asset_add',
-                  export: 'asset_edit'
+            export: 'asset_edit'
-                }"
+          }"
           class="top-tool-export margin-l-10 margin-r-10"
           export-file-name="asset"
           export-url="/asset/asset/export"
@@ -100,9 +100,9 @@
           :params="searchLabel"
           :params2="searchCheckBox"
           :permissions="{
-                  import: 'asset_add',
+            import: 'asset_add',
-                  export: 'asset_edit'
+            export: 'asset_edit'
-                }"
+          }"
           class="top-tool-export margin-l-10 margin-r-10"
           export-file-name="asset"
           export-url="/asset/asset/export"
@@ -152,24 +152,27 @@
     </nz-data-list>
     <transition name="right-box">
       <asset-box v-if="rightBox.show"
-                 ref="assetBox"
+        ref="assetBox"
-                 :dc-data="dcData"
+        :dc-data="dcData"
-                 :field-group-data="fieldGroupData"
+        :field-group-data="fieldGroupData"
-                 :from="fromRoute.asset"
+        :from="fromRoute.asset"
-                 :obj="object"
+        :obj="object"
-                 :snmp-credential-data="snmpCredentialData"
+        :snmp-credential-data="snmpCredentialData"
-                 :state-data="stateData"
+        :state-data="stateData"
-                 :type-data="typeData"
+        :type-data="typeData"
-                 @close="closeRightBox"
+        @close="closeRightBox"
-                 @refresh="getTableData"></asset-box>
+        @refresh="getTableData">
+      </asset-box>
     </transition>
     <transition name="right-box">
-      <asset-batch-edit-box v-if="rightBox.batchShow"
+      <asset-batch-edit-box
-                            :field-group-data="fieldGroupData"
+        v-if="rightBox.batchShow"
-                            :snmp-credential-data="snmpCredentialData"
+        :field-group-data="fieldGroupData"
-                            :state-data="stateData"
+        :snmp-credential-data="snmpCredentialData"
-                            @close="closeRightBox"
+        :state-data="stateData"
-                            @refresh="getTableData"></asset-batch-edit-box>
+        @close="closeRightBox"
+        @refresh="getTableData">
+      </asset-batch-edit-box>
     </transition>
     <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
     </transition>

nezha-fronted/src/components/page/config/recordRule.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.recordRule"
+      :layout="['searchInput', 'elementSet', 'pagination']"
+      :search-msg="searchMsg"
+      @search="search"
+      @getTableData="getTableData"
+    >
+      <template v-slot:top-tool-right>
+        <button id="record-add" v-has="'record_rule_add'" :title="$t('overall.createRecordRule')" class="top-tool-btn" @click.stop="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          :delete-objs="batchDeleteObjs"
+          ref="export"
+          id="record-rule"
+          :params="searchLabel"
+          :permissions="{
+                  import: 'record_rule_add',
+                  export: 'record_rule_edit'
+                }"
+          class="top-tool-export margin-l-10 margin-r-10"
+          export-file-name="record-rule"
+          export-url="/record/rule/export"
+          import-url="/record/rule/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
+      </template>
+      <template v-slot:default="slotProps">
+        <record-rule-table
+          ref="dataTable"
+          :orderByFa="orderBy"
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @copy="copy"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="
+            (targetTab, object) => {
+              $refs.dataList.showBottomBox(targetTab, object);
+            }
+          "
+        ></record-rule-table>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination
+          ref="Pagination"
+          :pageObj="pageObj"
+          :tableId="tableId"
+          @pageNo="pageNo"
+          @pageSize="pageSize"
+        ></Pagination>
+      </template>
+    </nz-data-list>
+     <transition name="right-box">
+      <record-rule-box
+        v-if="rightBox.show"
+        :record-rule="object"
+        @close="closeRightBox"
+      ></record-rule-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
+import recordRuleTable from '@/components/common/table/settings/recordRuleTable'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import recordRuleBox from '@/components/common/rightBox/recordRuleBox'
+// import deleteButton from '@/components/common/deleteButton'
+
+export default {
+  name: 'recordRule',
+  components: {
+    recordRuleTable,
+    // deleteButton,
+    nzDataList,
+    topToolMoreOptions,
+    recordRuleBox
+  },
+  mixins: [dataListMixin, routerPathParams],
+  data () {
+    return {
+      url: 'record/rule',
+      tableId: 'recordRuleTable',
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [
+          {
+            name: 'ID',
+            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
+          }
+        ]
+      },
+      // 创建修改相关
+      blankObject: {
+        id: '',
+        name: '',
+        type: '',
+        expr: '',
+        inr: '',
+        labels: [{ label: '', value: '' }],
+        remark: '',
+        state: ''
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  },
+  created () {
+  }
+}
+</script>

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -425,7 +425,13 @@ export default {
       chartData: {},
       collapseValue: ['1', '2'],
       showTab: ['1', '2'],
-      logData: []
+      logData: [],
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G',
+        'H', 'I', 'J', 'K', 'L', 'M', 'N',
+        'O', 'P', 'Q', 'R', 'S', 'T',
+        'U', 'V', 'W', 'X', 'Y', 'Z'
+      ]
     }
   },
   created () {
@@ -1016,7 +1022,7 @@ export default {
         groupId: -1
       }
       this.expressions.forEach((exp, index) => {
-        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' })
+        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) })
       })
       this.chartData = chart
       this.rightBox.show = true
@@ -1053,7 +1059,7 @@ export default {
         remark: ''
       }
       this.expressions.forEach((exp, index) => {
-        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' })
+        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) })
       })
       this.chartData = chart
       this.rightBox.show = true
@@ -1106,6 +1112,16 @@ export default {
     updateCustomTableTitle (custom) {
       this.tools.customTableTitle = custom
       this.$refs.exploreTable.doLayout()
+    },
+    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
+      const self = this
+      let letter = ''
+      const loopNum = parseInt(num / 26)
+      if (loopNum > 0) {
+        letter += this.transformNumToLetter(loopNum - 1)
+      }
+      letter += self.letter[num % 26]
+      return letter
     }
   },
   watch: {

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -713,13 +713,17 @@ export default {
     newDoc (val) {
       // console.log('doc', val)
     },
-    promqlInputCahnge (val) {
+    promqlInputChange (val) {
-      const text = this.newView.state.doc.toString()
+      if (this.type === 'metrics') {
-      this.newView.dispatch(
+        try {
-        this.newView.state.update({
+          const text = this.newView.state.doc.toString()
-          changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
+          this.newView.dispatch(
-        })
+            this.newView.state.update({
-      )
+              changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
+            })
+          )
+        } catch (error) {}
+      }
     },
     fetchFn (a, b) {
       const params = {}

nezha-fronted/src/router/index.js

@@ -64,6 +64,10 @@ export default new Router({
           path: '/agent',
           component: resolve => require(['@/components/page/config/agent'], resolve)
         },
+        {
+          path: '/recordRule',
+          component: resolve => require(['@/components/page/config/recordRule'], resolve)
+        },
         {
           path: '/assetType',
           component: resolve => require(['@/components/page/config/assetType'], resolve)