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

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>

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',

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;*/

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;

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>

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 DcBox from '@/components/common/rightBox/dcBox'
-import AgentBox from '../../common/rightBox/agentBox';
+import AgentBox from '../../common/rightBox/agentBox'
-import AssetBox from '../../common/rightBox/asset/assetBox';
+import AssetBox from '../../common/rightBox/asset/assetBox'
-import dataListMixin from '@/components/common/mixin/dataList';
+import dataListMixin from '@/components/common/mixin/dataList'
-import projectBox from '@/components/common/rightBox/projectBox';
+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: [],
@@ -274,8 +275,8 @@ export default {
       },
       // agert
       osTypes: [{
-          label: 'Centos',
+        label: 'Centos',
-          name: 'centos'
+        name: 'centos'
       }],
       agentParam: {
         osType: 'centos',
@@ -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() {
+    DownloadAgent () {
-      this.$emit("update:show", false);
+      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')
@@ -756,7 +757,7 @@ export default {
       this.$refs.chartList.cleanData()
       this.getData(this.filter)
     },
-        panelReloadForDel: function () {
+    panelReloadForDel: function () {
       if (this.showPanel.id === this.panel.id) {
         this.showPanel.id = ''
       }
@@ -792,7 +793,7 @@ export default {
       this.chart.panelName = this.showPanel.name
       this.rightBox.chart.show = true
     },
-     delChartOk () {
+    delChartOk () {
       this.filter.panelId = this.showPanel.id
       this.getData(this.filter)
     },
@@ -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 {