feta：endpoint 添加下拉弹出层

2021-04-20 19:27:49 +08:00
parent d65c0ed30b
commit 0935caf14c
10 changed files with 728 additions and 28 deletions
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -10,15 +10,15 @@
  }
  .list-width{
    width: 100%;
-    height: 100%;
+    /*height: 100%;*/
    padding: 0 10px 5px 20px;
    box-sizing: border-box;
    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/

-    &>div {
-      height: 100%;
-      overflow-y: auto;
-    }
+    /*&>div {*/
+    /*  height: 100%;*/
+    /*  overflow-y: auto;*/
+    /*}*/
  }
 </style>
 <style lang="scss">
@@ -737,6 +737,7 @@ export default {
      })
    },
    loadChartData (scrollTop) {
+      console.log(scrollTop);
      if (this.dataList.length > 0) {
        this.dataList.forEach((item, index) => {
          if (!item.isLoaded) {
@@ -1722,6 +1723,7 @@ export default {
    },
    // 懒加载，判断网页区域，加载可见区的prom数据
    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
+      console.log(ele, scrollTop, item, index)
      /*
        网页被卷去的高：document.body.scrollTop
        网页正文全文高：document.body.scrollHeight
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -25,7 +25,7 @@
        <!--asset页的endpoint列表-->
        <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
        <!--endpoint-query-->
-        <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
+<!--        <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>-->

        <!-- model-panel/asset-detail/project-overview的panel-->
        <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"
@@ -46,8 +46,8 @@
        <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>

        <!--endpoint列表的tab-->
-        <endpointTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointTabNew>
-        <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
+        <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
+        <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
      </div>
    </div>
  </div>
@@ -57,7 +57,7 @@
 import cabinetTab from './tabs/cabinetTab'
 import alertMessageTab from './tabs/alertMessageTab'
 import alertMessageTabNew from './tabs/alertMessageTabNew'
-import endpointQueryTab from './tabs/endpointQueryTab'
+import endpointQuery from './tabs/endpointQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
 import panelTab from './tabs/panelTab'
@@ -73,7 +73,6 @@ export default {
  components: {
    cabinetTab,
    alertMessageTab,
-    endpointQueryTab,
    endpointTab,
    panelTab,
    terminalLogRecordTab,
@@ -82,7 +81,8 @@ export default {
    terminalLogTab,
    'terminal-log-cmd-tab': terminalLogCMDTab,
    endpointTabNew,
-    alertMessageTabNew
+    alertMessageTabNew,
+    endpointQuery
  },
  props: {
    isFullScreen: Boolean, // 是否全屏
@@ -114,13 +114,13 @@ export default {
        module: {
          moduleTabTitle: [
            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
-            { prop: 'moduleAlertMessage', name: 'alertMessage' }
+            { prop: 'moduleAlertMessage', name: 'AlertMessage' }
          ]
        },
        endpoint: {
          endpointTabTitle: [
-            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
-            { prop: 'moduleAlertMessage', name: 'alertMessage' }
+            { prop: 'endpointQuery', name: 'EndpointQuery' },
+            { prop: 'endpointAlertMessage', name: 'AlertMessage' }
          ]
        }
      }
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -7,7 +7,7 @@
          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
        </div>
      </div>
-      <div class="top-tool-right">
+      <div class="top-tool-right" v-if="!customTool">
        <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
          <search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
        </div>
@@ -17,9 +17,12 @@
          <i class="nz-icon-gear nz-icon"></i>
        </button>
      </div>
+      <div  class="top-tool-right" v-else>
+        <slot name="top-tool-right"></slot>
+      </div>
    </div>
    <!-- 自定义table列 -->
-    <transition name="el-zoom-in-top">
+    <transition name="el-zoom-in-top" v-if="targetTab!=='endpointQuery'">
      <element-set
        v-if="tools.showCustomTableTitle"
        ref="customTableTitle"
@@ -69,7 +72,11 @@ export default {
    tabs: {
      type: Array
    },
-    targetTab: String
+    targetTab: String,
+    customTool: {
+      type: Boolean,
+      default: false
+    }
  },
  data () {
    return {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -25,7 +25,7 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+          @showBottomBox="(target, item) => { $refs.dataList.showBottomBox(target, item) }"
          @toDelete="toDeleteMessage"
        ></alertMessageTable>
      </template>
@@ -33,9 +33,6 @@
        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
      </template>
    </nz-bottom-data-list>
-    <transition name="right-box">
-      <edit-endpoint-box-new v-if="rightBox.editShow" :module="object" @close="closeRightEditBox" :disabled="true" :type="'edit'"></edit-endpoint-box-new>
-    </transition>
  </div>
 </template>

@@ -43,7 +40,6 @@
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
-import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
@@ -55,7 +51,6 @@ export default {
  mixins: [dataListMixin, subDataListMixin],
  components: {
    nzBottomDataList,
-    EditEndpointBoxNew,
    alertMessageTable
  },
  props: {
@@ -298,7 +293,11 @@ export default {
        delete this.searchLabel.endAt
      }
      this.tools.loading = true
-      this.searchLabel.moduleIds = this.obj.id
+      if (this.targetTab === 'moduleAlertMessage') {
+        this.searchLabel.moduleIds = this.obj.id
+      } else {
+        this.searchLabel.endpointIds = this.obj.id
+      }
      this.$get(this.url, this.searchLabel).then(response => {
        this.tools.loading = false
        if (response.code == 200) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="full-width-height">
+    <nz-bottom-data-list
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      @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 nz-btn-group-size-small nz-btn-group-light">
+            <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"><i class="el-icon-d-arrow-left"></i></button><el-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="yyyy-MM-dd HH:mm:ss"
+          >
+          </el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><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: 24px;">
+            <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
+              <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
+            </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" 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="endpoint-query-dropdown el-popover">
+                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
+                <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
+              </div>
+            </transition>
+          </button>
+          </div>
+        </div>
+      </template>
+      <template v-slot>
+        <endpointQueryTab
+          ref="endpointQueryTab"
+          :from="from"
+          :obj="obj"
+          :formatTime="formatTime"
+          :hideSameLabels="hideSameLabels"
+          :queryExpression="queryExpression"
+          @changSelection="changSelection"
+        />
+      </template>
+<!--      <template v-slot:pagination>-->
+<!--        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>-->
+<!--      </template>-->
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import endpointQueryTab from '@/components/common/table/special/endpointQueryTab'
+
+export default {
+  name: 'endpointTab',
+  mixins: [subDataListMixin],
+  props: {
+    from: {}
+  },
+  components: {
+    nzBottomDataList,
+    endpointQueryTab
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+      }
+    }
+  },
+  data () {
+    return {
+      url: 'monitor/endpoint',
+      tableId: 'endpointTab', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [/* {
+          id: 12,
+          name: 'endpoint name',
+          type: 'input',
+          label: 'name',
+          disabled: false
+        },
+        {
+          id: 13,
+          name: 'endpoint id',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        } */]
+      },
+      nowTime: '',
+      rightBox: {
+        editShow: false,
+        show: false
+      },
+      fromBottom: true,
+      selectedEndpoints: [],
+      queryExpression: '',
+      dropdownShow: '',
+      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 () {
+      this.$refs.elementQuery.focus()
+    },
+    changeTime (size, unit) {
+      this.formatTime = this.getTime(size, unit)
+    },
+    viewGraph () {
+      this.$refs.endpointQueryTab.viewGraph()
+    },
+    dropdownHandler (show) {
+      if (show) {
+        clearTimeout(this.timeout)
+        this.dropdownShow = true
+      } else {
+        this.timeout = setTimeout(() => {
+          this.dropdownShow = false
+        }, 700)
+      }
+    },
+    changSelection (arr) {
+      this.changSelection = arr
+    }
+  }
+}
+</script>
+<style scoped>
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+</style>
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -129,6 +129,7 @@ export default {
      bottomBoxWindow.listResize(vm, e)
    },
    showBottomBox (targetTab, row) {
+      console.log(targetTab, row)
      this.bottomBox.targetTab = targetTab
      this.bottomBox.object = JSON.parse(JSON.stringify(row))
      this.bottomBox.showSubList = true
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -132,9 +132,6 @@ export default {
    }
  },
  methods: {
-    showBottomBox (project) {
-      this.$store.commit('currentProjectChange', project)
-    }
  },
  computed: {}
 }
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -0,0 +1,522 @@
+<template>
+  <div class="full-width-height">
+    <el-table
+      id="endpointTable"
+      ref="dataTable"
+      :data="tableData"
+      v-loading="loading"
+      :height="'100%'"
+      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('project.endpoint.element')">
+        <template v-slot="scope">
+          <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
+            <div>
+              <ul>
+                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
+                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
+              </ul>
+            </div>
+            <span slot="reference"><i 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('project.endpoint.value')"
+        min-width="180">
+      </el-table-column>
+    </el-table>
+    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+               :title="$t('project.endpoint.dialogTitle')"
+               :visible.sync="graphShow"
+               width="90%"
+               height="80%"
+               :modal-append-to-body="false"
+               id="viewGraphDialog"
+               @close="dialogClose">
+      <div slot="title">
+        {{$t("project.endpoint.dialogTitle")}}
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
+          <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'panel_chart_add'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
+        </div>
+      </div>
+      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>
+    </el-dialog>
+    <transition name="right-box">
+      <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+import chartBox from '@/components/page/dashboard/chartBox'
+import axios from 'axios'
+import bus from '../../../../libs/bus'
+import chart from '@/components/page/dashboard/overview/chart'
+
+export default {
+  name: 'endpointTable',
+  components: {
+    chartBox,
+    chart
+  },
+  props: {
+    from: {},
+    obj: {},
+    formatTime: {},
+    hideSameLabels: {},
+    queryExpression: {}
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.currentEndpoint = JSON.parse(JSON.stringify(n))
+          this.queryEndpoint()
+        }
+      }
+    },
+    queryExpression (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    },
+    formatTime (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.queryEndpoint()
+      }, 100)
+    }
+  },
+  data () {
+    return {
+      tableData: [],
+      batchDeleteObjs: [],
+      currentEndpoint: {},
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      loading: false,
+      panelData: {},
+      graphShow: false,
+      chartUnit: 5,
+      rightBox: { show: false },
+      minusTime: 0,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()]
+    }
+  },
+  methods: {
+    selectChange (selection) { // selection 选中的row的数组
+      this.batchDeleteObjs = selection
+      this.$emit('changSelection', selection)
+    },
+    queryEndpoint () {
+      this.loading = true
+      this.queryElementTips()
+      this.queryData = []
+      this.tableData = []
+      this.tableDataCopy = ''
+      setTimeout(() => {
+        this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + new Date(this.formatTime).getTime()).then(response => {
+          this.loading = false
+          response = JSON.parse(localStorage.getItem('queryData'))
+          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.$nextTick(this.$refs.dataTable.doLayout())
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                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.currentEndpoint.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数据
+      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+        }
+      })
+    },
+    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
+      })
+    },
+    dragend () {
+      this.$nextTick(() => {
+        console.info(1)
+        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.chartDatas = []
+      this.legend = []
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.graphShow = true
+      this.$nextTick(() => {
+        this.$refs.endpointChart.startLoading()
+        this.queryChartDate()
+      })
+    },
+    chartUnitChange (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    queryChartDate () {
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      // end - start < 1 day : 15s
+      // end - start < 7 day : 5m
+      // end - start < 30 day : 10m
+      // end - start > 30 day : 30m
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      const axiosArr = []
+      for (const endpoint of this.batchDeleteObjs) {
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+      }
+      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+        const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        for (const endpoint of this.batchDeleteObjs) {
+          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
+        }
+      }
+      this.legend = []
+      this.chartDatas = []
+      axios.all(axiosArr).then(res => {
+        res.forEach((response, promIndex) => {
+          if (response.status == 200) {
+            if (response.data.status == 'success') {
+              const queryData = response.data.data.result[0]
+              if (queryData) {
+                const chartData = {
+                  type: 'line',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2,
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  }
+                }
+                chartData.name = queryData.metric.__name__
+                let alias = queryData.metric.__name__
+                delete queryData.metric.__name__
+                chartData.name += '{'
+                alias += '{'
+                Object.keys(queryData.metric).forEach((item, index) => {
+                  const label = item
+                  const value = queryData.metric[label]
+                  chartData.name += label + "='" + value + "',"
+                  if (!this.sameLabels.some((i) => { return i == label })) {
+                    alias += label + "='" + value + "',"
+                  }
+                })
+                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
+                chartData.name += '}'
+                alias += '}'
+                if (!/.+\{.+\}/.test(alias)) {
+                  alias = alias.substr(0, alias.length - 2)
+                }
+                const legend = {
+                  name: chartData.name,
+                  alias: alias,
+                  // showText:this.formatLegend(chartData.name),
+                  isGray: false
+                }
+                if (promIndex >= this.batchDeleteObjs.length) {
+                  legend.name = 'Previous ' + legend.name
+                  chartData.name = legend.name
+                  legend.alias = 'Previous ' + legend.alias
+                }
+                this.legend.push(legend)
+                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
+                })
+                this.chartDatas.push(chartData)
+              }
+            } else {
+              this.$message.error(response.data.error)
+              console.error(response.data)
+            }
+          }
+        })
+
+        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.batchDeleteObjs.length) {
+          const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+          this.minusTime = minusTime
+          let cutPoint = 0
+          res.forEach((item, index) => {
+            if (index < res.length / 2) {
+              cutPoint += res[index].data.data.result.length
+            }
+          })
+          this.chartDatas.forEach((item, index) => {
+            if (index >= cutPoint) {
+              this.chartDatas[index].data.forEach((item1, index1) => {
+                item1[0] = item1[0] + minusTime
+              })
+            }
+          })
+        }
+        this.$nextTick(() => {
+          if (this.$refs.endpointChart) {
+            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
+            this.$refs.endpointChart.setLegend(this.legend)
+            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
+            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
+            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
+            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
+            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
+            this.$refs.endpointChart.setSeries(this.chartDatas)
+            this.$refs.endpointChart.endLoading()
+          }
+          setTimeout(() => {
+            this.$refs.endpointChart.resize()
+          },100)
+        })
+      })
+    },
+    dialogClose () {
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.chartUnit = 5
+      this.graphShow = false
+    },
+    saveChart () { // 新增chart
+      const chart = {
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: this.chartUnit,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [],
+        panel: '',
+        sync: 0
+      }
+      for (let i = 0; i < this.batchDeleteObjs.length; i++) {
+        if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
+          chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+        }
+      }
+      this.chart = chart
+      this.rightBox.show = true
+    },
+    createSuccess (type, response, param, 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()
+          }
+        })
+      })
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.getPanelData()
+  }
+}
+</script>
+<style scoped>
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+  /deep/  .el-dialog__body{
+    height: calc(100% - 48px)!important;
+    padding-bottom: 0!important;
+    width: calc(100% - 40px)!important;
+  }
+</style>
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -504,6 +504,7 @@ export default {
    },
    endLoading: function () {
      this.$refs.loading.endLoading()
+      this.chart.resize();
      this.$emit('is-loading', false)
    },
    guid () {
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -40,7 +40,7 @@
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></endpoint-table>
+          @showBottomBox="(targetTab, item) => { $refs.dataList.showBottomBox(targetTab, item) }"></endpoint-table>
      </template>
      <template v-slot:pagination>
        <div class="endpoint-page">