NEZ-2350 feat：新增 record rule 二级页面（metric）

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

@@ -449,7 +449,7 @@
     }
   }
 }
-.endpoint-query-metrics.chart-fullscreen.nz-dialog {
+.endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog {
   .chart-screen-header .chart-header__tools #browser-go {
     margin-left: 5px;
   }
@@ -634,6 +634,9 @@
 .chart-label{
   color: $--color-text-primary;
 }
+.chart-label-text{
+  fill: $--color-text-primary;
+}
 .tickTest{
   font-size: 12px;
   color: $--color-text-primary;

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

@@ -97,21 +97,21 @@
         }
       }
       .nz-btn-group {
-        #endpoint-query-changetime:hover {
+        #endpoint-query-changetime,#recordRules-query-changetime:hover {
           border: 1px solid $--asset-label-btn-border-color;
         }
         .nz-btn.nz-btn-size-normal.nz-btn-style-light.control-icon-unchecked:hover {
           border: 1px solid $--asset-label-btn-border-color;
           z-index: 2;
         }
-        .nz-btn.nz-btn-size-normal.nz-btn-style-light.control-icon-unchecked {
+        .nz-btn.nz-btn-size-normal.nz-btn-style-light.control-icon-unchecked,.nz-btn.nz-btn-size-normal.nz-btn-style-light.control-icon-checked {
           margin-right: -1px;
         }
         .project-calendar.nz-input-group-middle {
           border-left: 0;
           border-right: 0;
-          border-top: 1px solid $--border-color-base;
+          border-top: 1px solid $--border-color-light;
-          border-bottom: 1px solid $--border-color-base;
+          border-bottom: 1px solid $--border-color-light;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -240,6 +240,16 @@
   border: 0 !important;
   box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
 }
+.recordRules-query .sub-container .nz-table-list {
+  height: 100%;
+}
+.recordRules-query .bottom-data-list .nz-btn-group .nz-input-group-middle input {
+  border-right: 0 !important;
+}
+.recordRules-query .bottom-data-list .nz-btn-group.nz-btn-group-size-normal.nz-btn-group-light {
+  border: 0 !important;
+  box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
+}
 /* end--二级顶部工具栏*/
 
 .log-no-data {

nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss

@@ -1,4 +1,4 @@
-.endpoint-query-tab {
+.endpoint-query-tab,.recordRules-query-tab {
   .el-dialog__body {
     height: calc(100% - 48px) !important;
     padding-bottom: 0 !important;

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

@@ -1,4 +1,5 @@
 .rich-text-editor {
+  color: $--color-text-regular;
   .ql-toolbar {
     border: 1px solid $--border-color-light;
   }
@@ -11,4 +12,11 @@
       color: $--color-text-regular;
     }
   }
+  .ql-tooltip{
+    line-height: normal;
+  }
+  .ql-editing input{
+    color: $--color-text-regular;
+  }
+
 }

nezha-fronted/src/assets/css/components/page/monitor/project/project.scss

@@ -97,6 +97,7 @@
   height: 23px;
 }
 
+
 .date-pick-group {
   display: flex;
   align-items: center;

nezha-fronted/src/components/chart/ChartScreenHeader.vue

@@ -7,12 +7,12 @@
        :close-delay=10
        trigger="hover"
        popper-class="chart-error-popper">
-            <div >{{errorText}}</div>
+      <div >{{errorText}}</div>
-            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+      <span slot="reference" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
+        <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
+        <span class="panel-info-corner-inner"></span>
-           </span>
+      </span>
-          </el-popover>
+    </el-popover>
     </span>
     <span v-if="!isError&&!showAllData&&allDataLength>20" class="chart-header-error moreTitle">
      <el-popover
@@ -20,11 +20,11 @@
        :close-delay=10
        trigger="hover"
        popper-class="chart-warring-popper">
-          <div class="moreTitle" @click="loadMore">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
+        <div class="moreTitle" @click="loadMore">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
-          <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+        <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
-            <i class="nz-icon nz-icon-warning fa"></i>
+          <i class="nz-icon nz-icon-warning fa"></i>
-            <span class="panel-info-corner-inner"></span>
+          <span class="panel-info-corner-inner"></span>
-          </span>
+        </span>
      </el-popover>
     </span>
     <div class="chart-header__title" :title="chartInfo.name">
@@ -51,7 +51,7 @@
         ></pick-time>
       </span>
       <span class="chart-header__tool" v-if="showSaveBtn(from)">
-            <button id="endpoint-query-full-chart-save" v-has="'main_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
+        <button id="endpoint-query-full-chart-save" v-has="'main_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
       </span>
       <span class="chart-header__tool" @click="closeDialog"  :title="$t('overall.close')">
         <i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
@@ -159,6 +159,7 @@ export default {
     showUnit (type) {
       switch (type) {
         case 'endpointQuery' :
+        case 'recordRulesQuery' :
           return true
         default: return false
       }
@@ -166,6 +167,7 @@ export default {
     showSaveBtn (type) {
       switch (type) {
         case 'endpointQuery' :
+        case 'recordRulesQuery' :
           return true
         default: return false
       }

nezha-fronted/src/components/chart/chart/chartRank.vue

@@ -209,6 +209,7 @@ export default {
           .data(rankData)
           .enter()
           .append('text')
+          .attr('class', 'chart-label-text')
           .attr('x', 4)
           .attr('y', d => {
             return (d.rank * barHeight) + (d.rank + 1) * margin - 12

nezha-fronted/src/components/chart/richTextEditor.vue

@@ -123,7 +123,9 @@ export default {
           // 获取光标所在位置
           const currentIndex = this.quill.getSelection().index
           // 插入图片
-          const uploadUrl = this.$axios.defaults.baseURL + 'file/download/'
+          let baseURL = this.$axios.defaults.baseURL
+          baseURL = baseURL.startsWith('/') ? window.location.host + baseURL : baseURL
+          const uploadUrl = baseURL + 'file/download/'
           this.quill.insertEmbed(currentIndex, 'image', `${uploadUrl}${res.data.uuid}`)
           // 调整光标到最后
           this.quill.setSelection(currentIndex + 1)

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

@@ -67,7 +67,8 @@
         <!-- 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>
+        <record-rule-eval-log v-if="from === fromRoute.recordRule && targetTab === 'recordRule'" :from="from" :obj="obj" :tabs="tabs.recordRule.evalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></record-rule-eval-log>
+        <recordRulesQuery v-if="from === fromRoute.recordRule && targetTab === 'Metrics'" :from="from" :obj="obj" :tabs="tabs.recordRule.Metrics" @changeTab="changeTab" :targetTab.sync="targetTab"></recordRulesQuery>
         <!--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>
         <!--issue Tab-->
@@ -87,6 +88,7 @@ import assetSubTab from './tabs/assetSubTab'
 import commentsBottomTab from './tabs/commentsBottomTab'
 import vsysBottomTab from './tabs/vsysBottomTab'
 import endpointQuery from './tabs/endpointQuery'
+import recordRulesQuery from './tabs/recordRulesQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
 import panelTabNew from './tabs/panelTabNew'
@@ -130,6 +132,7 @@ export default {
     alertRuleEvalLog,
     IpDetails,
     recordRuleEvalLog,
+    recordRulesQuery,
     issueTab,
     commentsBottomTab,
     vsysBottomTab
@@ -238,9 +241,16 @@ export default {
         ipam: [
           { prop: 'ipam', name: this.$t('ipam.subnet.ipDetails'), active: true }
         ],
-        recordRule: [
+        recordRule: {
-          { prop: 'recordRule', name: this.$t('overall.alertRuleEvalLog'), active: true }
+          evalLog: [
-        ],
+            { prop: 'recordRule', name: this.$t('overall.alertRuleEvalLog'), active: true },
+            { prop: 'Metrics', name: this.$t('overall.metric'), active: false }
+          ],
+          Metrics: [
+            { prop: 'recordRule', name: this.$t('overall.alertRuleEvalLog'), active: false },
+            { prop: 'Metrics', name: this.$t('overall.metric'), active: true }
+          ]
+        },
         alertSilence: [
           { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
         ],

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

@@ -23,7 +23,7 @@
             </el-input>
           </div>
           <div class="margin-r-20 nz-btn-group">
-            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime" :title="$t('overall.decreaseTime')"><i class="el-icon-d-arrow-left"></i></button>
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" style="height:32px" id="endpoint-query-changetime" :title="$t('overall.decreaseTime')"><i class="el-icon-d-arrow-left"></i></button>
             <my-date-picker
               v-model="formatTime"
               type="datetime"
@@ -36,7 +36,7 @@
               :format="timeFormatStrToDatePickFormat(timeFormatMain)"
           >
           </my-date-picker>
-            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append" :title="$t('overall.increaseTime')"><i class="el-icon-d-arrow-right"></i></button>
+            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append" style="height:32px" :title="$t('overall.increaseTime')"><i class="el-icon-d-arrow-right"></i></button>
           </div>
           <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
             <button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph" :title="$t('overall.showLineChart')">
@@ -81,7 +81,7 @@ import endpointQueryTab from '@/components/common/table/special/endpointQueryTab
 import bus from '@/libs/bus'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 export default {
-  name: 'endpointTab',
+  name: 'endpointQuery',
   mixins: [subDataListMixin, detailViewRightMixin],
   props: {
     from: {}
@@ -151,6 +151,7 @@ export default {
       }
     },
     clearInput () {
+      console.log(666)
       this.$refs.elementQuery.focus()
     },
     changeTime (size, unit) {

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

@@ -0,0 +1,207 @@
+<template>
+  <div class="full-width-height recordRules-query">
+    <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+      :layout="[]"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      :showPagination="false"
+      @changeTab="changeTab"
+      :customTool="true"
+      class="full-width-height"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot:top-tool-right>
+        <div class="top-tool-right">
+          <div class="top-tool-search margin-r-20">
+            <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
+              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
+            </el-input>
+          </div>
+          <div class="margin-r-20 nz-btn-group">
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" style="height:32px" id="recordRules-query-changetime" :title="$t('overall.decreaseTime')"><i class="el-icon-d-arrow-left"></i></button>
+            <my-date-picker
+              v-model="formatTime"
+              type="datetime"
+              size="mini"
+              class="project-calendar nz-input-group-middle"
+              clearable
+              :time-arrow-control="true"
+              placeholder="Moment"
+              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
+          >
+          </my-date-picker>
+            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append" style="height:32px" :title="$t('overall.increaseTime')"><i class="el-icon-d-arrow-right"></i></button>
+          </div>
+          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
+            <button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedrecordRules.length<1,'control-icon-checked':selectedrecordRules.length>0}" @click="viewGraph" :title="$t('overall.showLineChart')">
+              <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedrecordRules.length<1,'control-icon-checked':selectedrecordRules.length>0}"></i>
+            </button>
+            <button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
+            <i class="nz-icon nz-icon-arrow-down"></i>
+            <transition name="el-zoom-in-top">
+              <div v-if="dropdownShow" class="recordRules-query-dropdown el-popover" style="right: 11px;top: 33px;">
+                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
+                <el-switch v-model="hideSameLabels" size="small"></el-switch>
+              </div>
+            </transition>
+          </button>
+          </div>
+        </div>
+      </template>
+      <template v-slot>
+        <recordRulesQueryTab
+          ref="recordRulesQueryTab"
+          :orderByFa="'id'"
+          :from="from"
+          :obj="obj"
+          :formatTime="formatTime"
+          :hideSameLabels="hideSameLabels"
+          :queryExpression="queryExpression"
+          @changSelection="changSelectionF"
+          @selectedrecordRulesChange="selectedrecordRulesChange"
+        />
+      </template>
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import recordRulesQueryTab from '@/components/common/table/special/recordRulesQueryTab'
+import bus from '@/libs/bus'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+export default {
+  name: 'recordRulesQuery',
+  mixins: [subDataListMixin, detailViewRightMixin],
+  props: {
+    from: {}
+  },
+  components: {
+    nzBottomDataList,
+    recordRulesQueryTab
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      handler (n) {
+        this.searchLabel = {}
+        this.formatTime = bus.timeFormate(new Date(bus.computeTimezoneTime(new Date())))
+      }
+    }
+  },
+  data () {
+    return {
+      nowTime: '',
+      rightBox: {
+        editShow: false,
+        show: false
+      },
+      fromBottom: true,
+      selectedrecordRules: [],
+      queryExpression: '',
+      dropdownShow: false,
+      timeout: null,
+      formatTime: '',
+      hideSameLabels: true
+    }
+  },
+  methods: {
+    focusInput () {
+      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+      this.$refs.elementQuery.focus()
+    },
+    blurInput () {
+      if (!this.queryExpression || this.queryExpression == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput () {
+      console.log(666)
+      this.$refs.elementQuery.focus()
+    },
+    changeTime (size, unit) {
+      this.formatTime = this.getTime(size, unit)
+    },
+    getTime (size, unit) { // 计算时间
+      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(bus.formateTimeToTime(this.formatTime))
+      if (unit) {
+        switch (unit) {
+          case 'y':
+            now.setFullYear(now.getFullYear() + size)
+            break
+          case 'M':
+            now.setMonth(now.getMonth() + size)
+            break
+          case 'd':
+            now.setDate(now.getDate() + size)
+            break
+          case 'h':
+            now.setHours(now.getHours() + size)
+            break
+          case 'm':
+            now.setMinutes(now.getMinutes() + size)
+            break
+          case 's':
+            now.setSeconds(now.getSeconds() + size)
+            break
+          default:
+            console.error('unit error')
+        }
+      } else {
+        now.setSeconds(now.getSeconds() + size)
+      }
+      const year = now.getFullYear()
+      let month = now.getMonth() + 1
+      month = month < 10 ? '0' + month : month
+      let day = now.getDate()
+      day = day < 10 ? '0' + day : day
+      let hour = now.getHours()
+      hour = hour < 10 ? '0' + hour : hour
+      let minute = now.getMinutes()
+      minute = minute < 10 ? '0' + minute : minute
+      let second = now.getSeconds()
+      second = second < 10 ? '0' + second : second
+      const str = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+      return bus.timeFormate(new Date(str))
+    },
+    viewGraph () {
+      this.$refs.recordRulesQueryTab.viewGraph()
+    },
+    dropdownHandler (show) {
+      if (!show) {
+        this.dropdownShow = true
+      } else {
+        this.dropdownShow = false
+      }
+    },
+    changSelectionF (arr) {
+      this.changSelection = arr
+    },
+    selectedrecordRulesChange (n) {
+      this.selectedrecordRules = n
+    },
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
+        } else {
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
+        }
+      }, 20)
+    }
+  }
+}
+</script>

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

@@ -361,6 +361,7 @@ export const fromRoute = {
   user: 'user',
   agent: 'agent',
   recordRule: 'recordRule',
+  recordRulesQuery: 'recordRulesQuery',
   issue: 'issue',
   dc: 'dc',
   role: 'role',

nezha-fronted/src/components/common/table/special/recordRulesQueryTab.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="full-width-height recordRules-query-tab">
+    <el-table
+      id="recordRulesQueryTable"
+      ref="dataTable"
+      :data="currentTableData"
+      v-my-loading="loading"
+      :height="'calc(100% - 48px)'"
+      border
+      @header-dragend="dragend"
+      @selection-change="selectChange"
+    >
+      <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        prop="element"
+        :resizable="true"
+        :min-width="1000"
+        column-key="element"
+        :show-overflow-tooltip="true"
+        :label="$t('dashboard.panel.chartForm.element')">
+        <template v-slot="scope">
+          <el-popover trigger="hover" placement="right">
+            <meta-data :metaDataList="metaDataList" :metaName="scope.row.metricTip.metric" />
+            <span slot="reference"><i @mouseover="metricMetaData(scope.row)" class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
+          </el-popover>
+          <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :resizable="false"
+        prop="value"
+        column-key="value"
+        :label="$t('overall.value')"
+        min-width="180">
+      </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>
+    <div class="query-page-option">
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </div>
+    <el-dialog
+      v-if="graphShow"
+      :visible.sync="graphShow"
+      :show-close="false"
+      class="nz-dialog chart-fullscreen recordRules-query-metrics"
+      destroy-on-close
+      fullscreen
+      :modal-append-to-body="false"
+    >
+      <panel-chart
+        :ref="'chart-fullscreen' + chartInfo.id"
+        :chart-info="chartInfo"
+        :from="fromRoute.recordRulesQuery"
+        :filter="{}"
+        :is-fullscreen="true"
+        @saveChart="saveChart"
+        :time-range="searchTime"
+        @showFullscreen="showFullscreen"
+      ></panel-chart>
+    </el-dialog>
+    <transition name="right-box">
+      <chart-right-box
+        v-if="chartRightBoxShow"
+        v-my-loading="rightBox.loading"
+        ref="addChartModal"
+        :chart="chart"
+        :showPanel="{}"
+        :from="fromRoute.panel"
+        :panel-data="panelData"
+        @close="closeChartBox"
+        @on-create-success="createSuccess"
+      ></chart-right-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
+import bus from '../../../../libs/bus'
+import { sameLabels, fromRoute } from '@/components/common/js/constants'
+import metaData from '@/components/common/metaData'
+import panelChart from '@/components/chart/panelChart'
+import lodash from 'lodash'
+import lineData from '@/components/chart/defaultLineData'
+export default {
+  name: 'recordRulesQueryTab',
+  components: {
+    metaData,
+    panelChart,
+    chartRightBox
+  },
+  props: {
+    from: {},
+    obj: {},
+    formatTime: {},
+    hideSameLabels: {},
+    queryExpression: {}
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.currentRecordRules = JSON.parse(JSON.stringify(n))
+          this.queryRecordRules()
+        }
+      }
+    },
+    queryExpression (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    },
+    formatTime (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.queryRecordRules()
+      }, 100)
+    },
+    batchDeleteObjs: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.$emit('selectedrecordRulesChange', n)
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      fromRoute,
+      tableData: [],
+      currentTableData: [],
+      batchDeleteObjs: [],
+      currentRecordRules: {},
+      sameLabels: sameLabels,
+      loading: false,
+      panelData: {},
+      graphShow: false,
+      chartUnit: 5,
+      rightBox: { show: false },
+      minusTime: 0,
+      searchTime: bus.getTimezontDateRange(),
+      tableId: 'recordRulesQueryTable',
+      pageObj: {
+        pageSize: 20,
+        pageNo: 1,
+        total: 0
+      },
+      metaDataList: []
+    }
+  },
+  methods: {
+    selectChange (selection) { // selection 选中的row的数组
+      this.batchDeleteObjs = selection
+      this.$emit('changSelection', selection)
+    },
+    queryRecordRules () {
+      this.loading = true
+      this.queryElementTips()
+      this.queryData = []
+      this.tableData = []
+      this.tableDataCopy = ''
+      setTimeout(() => {
+        this.$get('/prom/api/v1/query?query=' + encodeURIComponent("{__name__='" + this.currentRecordRules.name + "'}") + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.formatTime))).then(response => {
+          this.loading = false
+          if (response.status === 'success') {
+            const results = response.data.result
+            this.queryData = JSON.parse(JSON.stringify(results))
+            this.tableData = this.handlerTableData(results)
+            this.tableDataCopy = JSON.stringify(this.tableData)
+            this.pageObj.total = this.tableData.length
+            this.$nextTick(this.$refs.dataTable.doLayout())
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.handleCurrentChange()
+                // this.scrollbarWrap = this.$refs.dataTable.$refs.singleTable.bodyWrapper
+                // this.toTopBtnHandler(this.scrollbarWrap)
+              })
+            }
+          }
+        })
+      }, 450)
+    },
+    queryElementTips: async function () {
+      this.elementMetricDatas = []
+      // const response = await axios.get('/metric/metadata?endpointId=' + this.currentRecordRules.id)
+      // const response = JSON.parse(localStorage.getItem('endpointQueryData'))
+      // if (response && response.status === 200) {
+      //   if (response.data.msg === 'success') {
+      //     this.elementMetricDatas = response.data.data.list
+      //   }
+      // }
+    },
+    getPanelData () { // 获取panel数据
+      return new Promise((resolve, reject) => {
+        this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list
+            resolve()
+          }
+        })
+      })
+    },
+    handlerTableData (results) {
+      const tableData = []
+      for (const result of results) {
+        const metricName = result.metric.__name__
+        let temp = metricName
+        let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
+        const metricColor = ''
+        const bracketsColor = '#eb7b18'// #eb7b18
+        const labelColor = '#65bbd1'// #66d9ef
+        const valueColor = '#61c261'// #74e680
+        let colorTemp = `<span style="${metricColor}">${metricName}</span>`
+        let colorSimpleTemp = `<span>${metricName}</span>`
+        let metricTip = {}
+        const queryInfos = (this.elementMetricDatas.filter((item) => {
+          return item.metric === temp
+        }))
+        if (queryInfos && queryInfos.length > 0) {
+          metricTip = queryInfos[0]
+        } else {
+          metricTip.metric = temp
+        }
+        delete result.metric.__name__
+        temp += '{'
+        simpleTemp += '{'
+        colorTemp += `<span style="color: ${bracketsColor}">{</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
+        const keys = Object.keys(result.metric)
+        for (const index in keys) {
+          const key = keys[index]
+          temp += key + "='" + result.metric[key] + "',"
+          colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
+          if (!this.sameLabels.some((i) => { return i == key })) {
+            simpleTemp += key + "='" + result.metric[key] + "',"
+            colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
+          }
+        }
+        if (temp.indexOf(',') !== -1) {
+          temp = temp.substr(0, temp.length - 1)
+        }
+        if (simpleTemp.indexOf(',') !== -1) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
+        }
+        if (colorTemp.indexOf(',') !== -1) {
+          colorTemp = colorTemp.substr(0, colorTemp.length - 1)
+        }
+        if (colorSimpleTemp.indexOf(',') !== -1) {
+          colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
+        }
+
+        temp += '}'
+        simpleTemp += '}'
+        colorTemp += `<span style="color: ${bracketsColor}">}</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
+        if (!/.+\{.+\}/.test(simpleTemp)) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
+        }
+
+        if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
+          const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
+          colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
+        }
+
+        const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
+        // this.tableData.push(edpQueryData);
+        tableData.push(edpQueryData)
+      }
+      this.loading = false
+      return tableData
+    },
+    tableFilter () {
+      const temp = this
+      const tableDatas = JSON.parse(this.tableDataCopy)
+      this.tableData = tableDatas.filter((item) => {
+        const element = temp.hideSameLabels ? item.simpleElement : item.element
+        return element.indexOf(this.queryExpression) !== -1
+      })
+      this.pageObj.pageNo = 1
+      this.handleCurrentChange()
+    },
+    dragend () {
+      this.$nextTick(() => {
+        this.$refs.dataTable.doLayout()
+      })
+    },
+    getTime (size, unit) { // 计算时间
+      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
+      if (unit) {
+        switch (unit) {
+          case 'y':
+            now.setFullYear(now.getFullYear() + size)
+            break
+          case 'M':
+            now.setMonth(now.getMonth() + size)
+            break
+          case 'd':
+            now.setDate(now.getDate() + size)
+            break
+          case 'h':
+            now.setHours(now.getHours() + size)
+            break
+          case 'm':
+            now.setMinutes(now.getMinutes() + size)
+            break
+          case 's':
+            now.setSeconds(now.getSeconds() + size)
+            break
+          default:
+            console.error('unit error')
+        }
+      } else {
+        now.setSeconds(now.getSeconds() + size)
+      }
+      const year = now.getFullYear()
+      let month = now.getMonth() + 1
+      month = month < 10 ? '0' + month : month
+      let day = now.getDate()
+      day = day < 10 ? '0' + day : day
+      let hour = now.getHours()
+      hour = hour < 10 ? '0' + hour : hour
+      let minute = now.getMinutes()
+      minute = minute < 10 ? '0' + minute : minute
+      let second = now.getSeconds()
+      second = second < 10 ? '0' + second : second
+      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    },
+    viewGraph () {
+      if (this.batchDeleteObjs.length < 1) {
+        return
+      }
+      this.$nextTick(() => {
+        const chartInfo = lodash.cloneDeep(lineData)
+        const elements = lodash.cloneDeep(chartInfo.elements[0])
+        chartInfo.elements = []
+        chartInfo.name = this.$t('project.endpoint.dialogTitle')
+        for (const item of this.batchDeleteObjs) {
+          const element = lodash.cloneDeep(elements)
+          element.expression = item.element
+          chartInfo.elements.push(element)
+        }
+        this.showFullscreen(true, chartInfo)
+      })
+    },
+    saveChart (chart) { // 新增chart
+      this.getPanelData().then(() => {
+        chart.id = ''
+        chart.name = ''
+        chart.panelName = ''
+        this.chart = chart
+        this.graphShow = false
+        this.$store.dispatch('dispatchEditChart', {
+          chart: this.chart,
+          type: 'add'
+        })
+      })
+    },
+    createSuccess (panel) {
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'success'
+      }).then(() => {
+        bus.$emit('menu-change', 'panel')
+        this.$store.state.showPanel.id = panel.id
+        this.$store.state.showPanel.name = panel.name
+        this.$router.push({
+          path: '/panel',
+          query: {
+            t: +new Date()
+          }
+        })
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.handleCurrentChange()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.handleCurrentChange()
+    },
+    handleCurrentChange () {
+      this.pageObj.total = this.tableData.length
+      this.currentTableData = this.tableData.slice(
+        (this.pageObj.pageNo - 1) * this.pageObj.pageSize,
+        this.pageObj.pageNo * this.pageObj.pageSize
+      )
+    },
+    metricMetaData (data) {
+      this.$get('/prom/api/v1/metadata?' + 'metric=' + data.metricTip.metric + '&limit=' + 1).then(res => {
+        if (res.code === 200) {
+          this.metaDataList = res.data[data.metricTip.metric]
+        }
+      })
+    },
+    showFullscreen (show, chartInfo) {
+      this.chartInfo = chartInfo
+      this.graphShow = show
+    },
+    closeChartBox (refresh) {
+      // this.rightBox.chart.show = false
+      this.chart = {}
+      this.$store.dispatch('clearPanel')
+      /* if (refresh) {
+         this.getData(this.filter)
+      } */
+    }
+  },
+  computed: {
+    chartRightBoxShow () {
+      return this.$store.getters.getShowRightBox
+    }
+  },
+  created () {
+    // this.getPanelData()
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    this.pageObj.pageSize = pageSize || 20
+  }
+}
+</script>