NEZ-2101 feat : Record rule 列表页面开发

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

@@ -335,6 +335,8 @@ 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')

nezha-fronted/src/components/common/table/settings/recordRuleTable.vue

@@ -0,0 +1,208 @@
+<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-if="scope.row[item.prop]">{{"-"}}</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, item.label, true, true, $event)"
+              @mouseleave="labelHover(scope.row, item.label, false, true,)">
+              <nz-alert-tag
+                :key="i"
+                :cursor-point="tagType(item1.name) !== 'info'"
+                :label="item1.name"
+                :type="tagType(item1.name)"
+                :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'">
+          <span v-if="scope.row.state === 0" class="silence-active">active</span>
+          <span v-if="scope.row.state === 1" class="silence-pending">pending</span>
+        </template> -->
+        <span v-else-if="scope.row[item.prop]">{{
+          scope.row[item.prop] || "-"
+        }}</span>
+        <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"
+      :alert-table-dialog="chartAlertList"
+      @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'
+// import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+// import { sameLabels } from '@/components/common/js/constants'
+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
+        },
+        {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true,
+          minWidth: 150
+        },
+        {
+          label: this.$t('config.exprTemp.expression'),
+          prop: 'expression',
+          show: true,
+          width: 300
+        },
+        {
+          label: this.$t('config.assetLabel.interval'),
+          prop: 'interval',
+          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
+        }
+      ]
+    }
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+</script>

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

@@ -0,0 +1,132 @@
+<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: 'alert/silence',
+      tableId: 'recordRuleTable',
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [
+          {
+            name: 'ID',
+            type: 'input',
+            label: 'ids',
+            disabled: false
+          }
+        ]
+      },
+      // 创建修改相关
+      blankObject: {
+        id: '',
+        name: '',
+        type: '',
+        expr: '',
+        inr: '',
+        labels: [],
+        remark: '',
+        state: ''
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  },
+  created () {
+  }
+}
+</script>

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)