feat：修改endpoint query为本地分页修改 endpointquery chart的样式问题

2021-05-10 16:36:06 +08:00
parent f56ca0fac5
commit 30b47d63c7
6 changed files with 117 additions and 55 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -6,6 +6,7 @@
      :search-msg="searchMsg"
      :tabs="tabs"
      :targetTab="targetTab"
+      :showPagination="false"
      @changeTab="changeTab"
      :customTool="true"
      class="full-width-height"
@@ -221,4 +222,10 @@ export default {
    width: 100%;
    height: 100%;
  }
+  /deep/ .nz-table2{
+    padding: 0 !important;
+  }
+  /deep/ .sub-container {
+    box-sizing: border-box;
+  }
 </style>
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -215,7 +215,8 @@ export const terminalLog = {
  dangerCmd: ['chmod', 'chown', 'kill', 'rm', 'su', 'sudo'],
  infoCmd: ['exit']
 }
-
+// 需要隐藏的内置label
+export const sameLabels = ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter', 'datacenter_id', 'endpoint_id', 'module_id', 'nz_agent_id', 'project_id']
 // 公共组件的跳转来源
 export const fromRoute = {
  panel: 'panel',
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -15,7 +15,7 @@
    line-height:28px;
    padding-left:5px;
    margin-left:0px;
-    margin-top: 0px !important;
+    margin-top: -3px !important;
    text-align:left;
    border-radius:2px;
    min-width:80px;
@@ -57,6 +57,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
+    margin-top: 4px;
  }
  .compare-box{
    /*line-height: 50px;*/
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -2,7 +2,7 @@
  <div class="interval-refresh">
    <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange"></time-picker>
    <multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
-    <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
+    <chart-unit v-model="unit" v-if="useChartUnit" style="margin-left: 10px"></chart-unit>
    <div v-show="useRefresh" class="top-tool-btn-group margin-r-10">
      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="refreshDataFunc">
        <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -3,7 +3,7 @@
    <el-table
      id="endpointTable"
      ref="dataTable"
-      :data="tableData"
+      :data="currentTableData"
      v-loading="loading"
      :height="'100%'"
      border
@@ -46,6 +46,9 @@
        min-width="180">
      </el-table-column>
    </el-table>
+    <div class="query-page-option">
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </div>
    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
               :title="$t('project.endpoint.dialogTitle')"
               :visible.sync="graphShow"
@@ -56,7 +59,7 @@
               @close="dialogClose">
      <div slot="title">
        {{$t("project.endpoint.dialogTitle")}}
-        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+        <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">
          <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>
@@ -74,6 +77,7 @@ import chartBox from '@/components/page/dashboard/chartBox'
 import axios from 'axios'
 import bus from '../../../../libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
+import { sameLabels } from '@/components/common/js/constants'

 export default {
  name: 'endpointTable',
@@ -115,16 +119,23 @@ export default {
  data () {
    return {
      tableData: [],
+      currentTableData: [],
      batchDeleteObjs: [],
      currentEndpoint: {},
-      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      sameLabels: sameLabels,
      loading: false,
      panelData: {},
      graphShow: false,
      chartUnit: 5,
      rightBox: { show: false },
      minusTime: 0,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()]
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      tableId: 'alertSilenceTable',
+      pageObj: {
+        pageSize: 10,
+        pageNo: 1,
+        total: 0
+      }
    }
  },
  methods: {
@@ -139,16 +150,18 @@ export default {
      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.$get("/prom/api/v1/query?query={endpoint_id='" + this.currentEndpoint.id + "'}&time=" + this.$stringTimeParseToUnix(new Date(this.formatTime).getTime())).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)
              })
@@ -253,6 +266,8 @@ export default {
        const element = temp.hideSameLabels ? item.simpleElement : item.element
        return element.indexOf(this.queryExpression) !== -1
      })
+      this.pageObj.pageNo = 1
+      this.handleCurrentChange()
    },
    dragend () {
      this.$nextTick(() => {
@@ -504,12 +519,29 @@ export default {
          }
        })
      })
+    },
+    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
+      )
    }
  },
  computed: {
  },
  created () {
    // this.getPanelData()
+    this.pageObj.pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
  }
 }
 </script>
@@ -523,4 +555,24 @@ export default {
    padding-bottom: 0!important;
    width: calc(100% - 40px)!important;
  }
+  .query-page-option{
+    width: 100%;
+    position: absolute;
+    background: #fff;
+    bottom: -34px;
+  }
+  /deep/ .pagination{
+    padding-top: 0;
+  }
+  /deep/ .top-tool-btn--text{
+    background: #fff;
+    border-radius: 2px 0 0 2px;
+    outline: none;
+    height: 32px;
+    border: 1px solid #d8dce1;
+    border-right: none;
+    line-height: 30px;
+    margin-right: -5px;
+    padding: 0 5px;
+  }
 </style>
--- a/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
+++ b/nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
@@ -177,6 +177,7 @@
    </transition>
    <!--web-->
    <el-dropdown>
+      <el-dropdown-menu></el-dropdown-menu>
      <div id="header-open-cli" @click="cli">
      </div>
    </el-dropdown>
@@ -208,11 +209,11 @@
  </div>
 </template>
 <script>
-import DcBox from "@/components/common/rightBox/dcBox";
-import AgentBox from '../../common/rightBox/agentBox';
-import AssetBox from '../../common/rightBox/asset/assetBox';
-import dataListMixin from '@/components/common/mixin/dataList';
-import projectBox from '@/components/common/rightBox/projectBox';
+import DcBox from '@/components/common/rightBox/dcBox'
+import AgentBox from '../../common/rightBox/agentBox'
+import AssetBox from '../../common/rightBox/asset/assetBox'
+import dataListMixin from '@/components/common/mixin/dataList'
+import projectBox from '@/components/common/rightBox/projectBox'
 import moduleBox from '@/components/common/rightBox/moduleBox'
 import addEndpointBox from '@/components/common/rightBox/addEndpointBox'
 import alertRuleBox from '@/components/common/rightBox/alertRuleBox'
@@ -244,9 +245,9 @@ export default {
    addEndpointBox,
    alertRuleBox,
    cabinetBox,
-    'export-excel': exportXLSX,
+    'export-excel': exportXLSX
  },
-  mixins: [dataListMixin,table],
+  mixins: [dataListMixin, table],
  computed: {
    wgetUrl () {
      return 'wget -qO- --header="Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
@@ -255,7 +256,7 @@ export default {
      return 'curl -o- -H "Authorization:' + this.token + '" ' + this.ipAddr + '/agent/' + this.agentParam.dc + '/' + this.agentParam.type + '/install.sh | bash'
    }
  },
-  data() {
+  data () {
    return {
      // dc
      userData: [],
@@ -287,7 +288,7 @@ export default {
      agent2: agent2,
      showAgentDownload: false,
      // import
-      importBox: { show: false, title: this.$t('overall.importExcel') , type: 1},
+      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1 },
      importFile: null,
      importFileList: [],
      importResult: null,
@@ -453,11 +454,11 @@ export default {
        param: {
          url: '',
          threshold: ''
-        },
        }
-    };
+      }
+    }
  },
-   mounted() {
+  mounted () {
    this.getStateData()
    this.getTypeTreeData()
    this.getDcData()
@@ -466,67 +467,67 @@ export default {
  },
  methods: {
    // Datacenter
-    addDatacenter() {
+    addDatacenter () {
      this.rightBox.dc.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    addCabinet() {
+    addCabinet () {
      this.rightBox.cabinet.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
    // Angebt
-    addAgent() {
+    addAgent () {
      this.rightBox.agents.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    DownloadAgent() {
-      this.$emit("update:show", false);
+    DownloadAgent () {
+      this.$emit('update:show', false)
      this.toDownloadAgent()
    },
    // Asset
-    addAsset() {
+    addAsset () {
      this.rightBox.asset.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    importAsset() {
+    importAsset () {
      this.showImportBox(1)
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    webTerminal() {
+    webTerminal () {
      this.cli()
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
    // Monitor
-    addPeoject() {
+    addPeoject () {
      this.rightBox.project.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    addModule() {
+    addModule () {
      this.rightBox.module.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    addEndpoint() {
+    addEndpoint () {
      this.rightBox.endpoint.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    importEndpoint() {
+    importEndpoint () {
      this.showImportBox(1)
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
    // Visualization
-    addPanel() {
+    addPanel () {
      // this.rightBox.panel.show = true
      this.rightBox.charts.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
-    addCharts() {
+    addCharts () {
      this.rightBox.charts.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
    // Alert
-    addAlertRule() {
+    addAlertRule () {
      this.rightBox.alert.show = true
-      this.$emit("update:show", false);
+      this.$emit('update:show', false)
    },
    cli () {
      this.$store.commit('openConsole')
@@ -972,7 +973,7 @@ export default {
          }
        }
        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
-        if (this.assetimportUrl){
+        if (this.assetimportUrl) {
          this.$post(this.assetimportUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
            if (response.code == 200 && response.msg == 'success') {
              this.importResult = response.data
@@ -984,7 +985,7 @@ export default {
            }
            this.prevent_opt.import = false
          })
-        }else if (this.endpointimportUrl){
+        } else if (this.endpointimportUrl) {
          this.$post(this.endpointimportUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
            if (response.code == 200 && response.msg == 'success') {
              this.importResult = response.data
@@ -1069,7 +1070,7 @@ export default {
  watch: {

  }
-};
+}
 </script>
 <style lang="scss">
 .el-dialog__body {