feat： 更换 alertmessage的 图表的组件

nezha-fronted/src/components/chart/defaultLineData.js

@@ -0,0 +1,111 @@
+const data = {
+  id: 'metrics',
+  loaded: true,
+  showHeader: true,
+  name: '',
+  panelId: 1244,
+  groupId: 0,
+  span: 4,
+  height: 4,
+  updateBy: 381,
+  updateAt: '2021-12-23 03:49:51',
+  type: 'line',
+  unit: 2,
+  weight: 0,
+  param: {
+    stack: 0,
+    showHeader: true,
+    thresholds: [
+      {
+        color: '#751bd6'
+      }
+    ],
+    thresholdShow: false,
+    legend: {
+      values: [
+
+      ],
+      show: true,
+      placement: 'bottom'
+    },
+    enable: {
+      thresholds: false,
+      legend: true,
+      valueMapping: false
+    },
+    nullType: 'null'
+  },
+  pid: null,
+  buildIn: 0,
+  remark: '',
+  seq: null,
+  x: 0,
+  y: 12,
+  elements: [
+    {
+      id: 85583,
+      chartId: 697389,
+      expression: '',
+      type: 'expert',
+      legend: '',
+      buildIn: 0,
+      seq: null,
+      name: 'A',
+      state: 1
+    }
+  ],
+  sync: null,
+  panel: {
+    id: 1244,
+    name: 'testnodata',
+    createBy: null,
+    type: null,
+    link: null,
+    pid: null,
+    weight: null,
+    buildIn: null,
+    seq: null,
+    children: null,
+    parent: null,
+    chartNum: null
+  },
+  group: {
+    id: 0,
+    name: null,
+    panelId: null,
+    groupId: null,
+    span: null,
+    height: null,
+    updateBy: null,
+    updateAt: null,
+    type: null,
+    unit: null,
+    weight: null,
+    param: null,
+    pid: null,
+    buildIn: null,
+    remark: null,
+    seq: null,
+    x: null,
+    y: null,
+    elements: null,
+    sync: null,
+    panel: null,
+    group: null,
+    children: null,
+    chartNums: null,
+    asset: null,
+    varType: null,
+    varId: null,
+    varName: null,
+    datasource: null
+  },
+  children: null,
+  chartNums: null,
+  asset: null,
+  varType: null,
+  varId: null,
+  varName: null,
+  datasource: 'metrics'
+}
+export default data

nezha-fronted/src/components/chart/defaultLogData.js

@@ -0,0 +1,110 @@
+const data = {
+  id: 'logs',
+  loaded: true,
+  showHeader: true,
+  name: '',
+  panelId: 1244,
+  groupId: 0,
+  span: 4,
+  height: 4,
+  updateBy: 381,
+  updateAt: '2021-12-23 03:49:51',
+  type: 'line',
+  unit: 2,
+  weight: 0,
+  param: {
+    stack: 0,
+    showHeader: true,
+    thresholds: [
+      {
+        color: '#ea2556'
+      }
+    ],
+    thresholdShow: false,
+    legend: {
+      values: [
+
+      ],
+      show: true,
+      placement: 'bottom'
+    },
+    enable: {
+      thresholds: false,
+      legend: true,
+      valueMapping: false
+    }
+  },
+  pid: null,
+  buildIn: 0,
+  remark: '',
+  seq: null,
+  x: 0,
+  y: 12,
+  elements: [
+    {
+      id: 85584,
+      chartId: 697389,
+      expression: '',
+      type: 'expert',
+      legend: '',
+      buildIn: 0,
+      seq: null,
+      name: 'A',
+      state: 1
+    }
+  ],
+  sync: null,
+  panel: {
+    id: 1244,
+    name: 'testnodata',
+    createBy: null,
+    type: null,
+    link: null,
+    pid: null,
+    weight: null,
+    buildIn: null,
+    seq: null,
+    children: null,
+    parent: null,
+    chartNum: null
+  },
+  group: {
+    id: 0,
+    name: null,
+    panelId: null,
+    groupId: null,
+    span: null,
+    height: null,
+    updateBy: null,
+    updateAt: null,
+    type: null,
+    unit: null,
+    weight: null,
+    param: null,
+    pid: null,
+    buildIn: null,
+    remark: null,
+    seq: null,
+    x: null,
+    y: null,
+    elements: null,
+    sync: null,
+    panel: null,
+    group: null,
+    children: null,
+    chartNums: null,
+    asset: null,
+    varType: null,
+    varId: null,
+    varName: null,
+    datasource: null
+  },
+  children: null,
+  chartNums: null,
+  asset: null,
+  varType: null,
+  varId: null,
+  varName: null,
+  datasource: 'logs'
+}
+export default data

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

@@ -166,6 +166,9 @@ export default {
               if (isTimeSeries(this.chartInfo.type)) {
                 query += `&nullType=${this.chartInfo.param.nullType || 'null'}`
               }
+              if (element.filter) {
+                query += `&filter=${element.filter}`
+              }
               // if (isChartPie(this.chartInfo.type)) {
               //   query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
               // }

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -101,37 +101,56 @@
         </div>
       </el-dialog>
     </div>
-    <el-dialog id="viewGraphDialog"
+    <el-dialog
-               :modal-append-to-body='false'
+      v-if="graphShow"
-               destroy-on-close
-               :title="$t('overall.detail')"
       :visible.sync="graphShow"
-               class="line-chart-block-modal nz-dialog endpoint-dialog"
+      :show-close="false"
-               width="90%"
+      class="nz-dialog chart-fullscreen"
-               @close="dialogClose">
+      destroy-on-close
-      <el-popover
+      fullscreen
-        v-if="isError"
+      :modal-append-to-body="false"
-        placement="top-start"
+    >
-        :close-delay=10
+      <panel-chart
-        trigger="hover"
+        :ref="'chart-fullscreen' + chartInfo.id"
-        popper-class="chart-error-popper">
+        :chart-info="chartInfo"
-        <div >{{errorContent}}</div>
+        :from="fromRoute.alertMessage"
-        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+        :filter="{}"
-                <i class="nz-icon nz-icon-warning fa-model" ></i>
+        :is-fullscreen="true"
-                <span class="panel-info-corner-inner"></span>
+        :time-range="searchTimeDialog"
-            </span>
+        @showFullscreen="showFullscreen"
-      </el-popover>
+      ></panel-chart>
-      <div slot="title">
-        {{$t("project.endpoint.dialogTitle")}}
-        <div class="float-right panel-calendar dialog-tool" style="display: flex">
-          <pick-time v-model="searchTimeDialog" :refresh-data-func="queryDate" :use-chart-unit="false" :use-refresh="false" style="height: 28px;"></pick-time>
-        </div>
-      </div>
-      <div style="width: 100%;height: 100%" v-loading="chartLoading">
-        <chart v-if="resultType === 'matrix'" ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>
-        <log-tab v-if="resultType === 'streamsFormat'" ref="logDetailScreen" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-      </div>
     </el-dialog>
+<!--    <el-dialog id="viewGraphDialog"-->
+<!--               :modal-append-to-body='false'-->
+<!--               destroy-on-close-->
+<!--               :title="$t('overall.detail')"-->
+<!--               :visible.sync="graphShow"-->
+<!--               class="line-chart-block-modal nz-dialog endpoint-dialog"-->
+<!--               width="90%"-->
+<!--               @close="dialogClose">-->
+<!--      <el-popover-->
+<!--        v-if="isError"-->
+<!--        placement="top-start"-->
+<!--        :close-delay=10-->
+<!--        trigger="hover"-->
+<!--        popper-class="chart-error-popper">-->
+<!--        <div >{{errorContent}}</div>-->
+<!--        <span slot="reference"  class="panel-info-corner panel-info-corner&#45;&#45;error">-->
+<!--                <i class="nz-icon nz-icon-warning fa-model" ></i>-->
+<!--                <span class="panel-info-corner-inner"></span>-->
+<!--            </span>-->
+<!--      </el-popover>-->
+<!--      <div slot="title">-->
+<!--        {{$t("project.endpoint.dialogTitle")}}-->
+<!--        <div class="float-right panel-calendar dialog-tool" style="display: flex">-->
+<!--          <pick-time v-model="searchTimeDialog" :refresh-data-func="queryDate" :use-chart-unit="false" :use-refresh="false" style="height: 28px;"></pick-time>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div style="width: 100%;height: 100%" v-loading="chartLoading">-->
+<!--        <chart v-if="resultType === 'matrix'" ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>-->
+<!--        <log-tab v-if="resultType === 'streamsFormat'" ref="logDetailScreen" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>-->
+<!--      </div>-->
+<!--    </el-dialog>-->
     <!--全屏-->
     <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
                :visible.sync="dialogShowText"
@@ -166,6 +185,10 @@ import { alertMessage as alertMessageConstant, fromRoute } from '@/components/co
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
+import panelChart from '@/components/chart/panelChart'
+import lineData from '@/components/chart/defaultLineData'
+import logData from '@/components/chart/defaultLogData'
+import lodash from 'lodash'
 
 export default {
   name: 'alertMessage',
@@ -176,12 +199,14 @@ export default {
     nzDataList,
     deleteButton,
     alertSilenceBox,
-    clickSearch
+    clickSearch,
+    panelChart
   },
   mixins: [dataListMixin, routerPathParams],
   data () {
     return {
       chartLoading: false,
+      chartInfo: {},
       stateOptions: alertMessageConstant.states,
       dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
       state: '1',
@@ -562,7 +587,7 @@ export default {
       }
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
-        this.graphShow = true
+        console.log(this.currentMsg )
         this.$nextTick(() => {
           this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
           this.queryDate()
@@ -578,12 +603,15 @@ export default {
     queryDate () {
       this.chartLoading = true
       if (this.currentMsg.alertRule.type === 1) {
-        this.resultType = 'matrix'
+        const chartInfo = lodash.cloneDeep(lineData)
-        this.$nextTick(() => {
+        chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
-          this.queryChartDate()
+        chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
-        })
+        this.showFullscreen(true, chartInfo)
       } else if (this.currentMsg.alertRule.type === 2) {
-        this.queryLogData(100)
+        const chartInfo = lodash.cloneDeep(logData)
+        chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
+        chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
+        this.showFullscreen(true, chartInfo)
       }
     },
     queryChartDate () {
@@ -1251,6 +1279,10 @@ export default {
       params.ids = this.batchDeleteObjs.map(item => item.id).join(',')
       this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
       this.closeDialog()
+    },
+    showFullscreen (show, chartInfo) {
+      this.chartInfo = chartInfo
+      this.graphShow = show
     }
   },
   destroyed () {