feat: agent 增加 scrape endpoint 二级页面

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

@@ -58,6 +58,8 @@
         <alertRuleEvalLog v-if="from === fromRoute.alertRule && targetTab === 'evalLog'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertRuleEvalLog>
         <!--model 下滑-->
         <asset-tab v-if="(from === fromRoute.model) && targetTab === 'asset'" :tabs="tabs.model" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></asset-tab>
+        <!-- agent 下滑-->
+        <scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'agent'" :from="from" :obj="obj" :tabs="tabs.agent" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
       </div>
     </div>
   </div>
@@ -81,10 +83,12 @@ import terminalLogTab from './tabs/terminalLogTab'
 import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
+import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 
 export default {
   name: 'bottomBox',
   components: {
+    scrapeEndpoint,
     LogBottomTab,
     cabinetTab,
     alertMessageTab,
@@ -239,8 +243,10 @@ export default {
             { prop: 'asset', name: this.$t('asset.assets'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
           ]
-        }
+        },
-
+        agent: [
+          { prop: 'agent', name: this.$t('config.agent.scrapeEndpoint'), active: true }
+        ]
       }
     }
   },

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

@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+      :targetTab.sync="targetTab"
+      :api="url"
+      style="height: 100%"
+      :custom-table-title.sync="tools.customTableTitle"
+      :layout="['elementSet']"
+      :search-msg="searchMsg"
+      :tabs="tabs"
+      @search="search"
+      @changeTab="changeTab"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot:top-tool-right>
+        <div class="top-tool-right">
+          <div style="margin-right: 15px;">
+            <el-input size="small" ref="inputDate" v-model="inputDate" id="inputDate" class="input-with" @focus="focus" @blur="blur">
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot>
+        <scrape-endpoint-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          :currentTableData="currentTableData"
+          :inputDate="inputDate"
+          @del="del"
+          @edit="edit"
+          @copy="copy"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></scrape-endpoint-table>
+      </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 nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import scrapeEndpointTable from '@/components/common/table/settings/scrapeEndpointTable'
+import subDataList from '@/components/common/mixin/subDataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import scrapeEndpoints from '@/components/common/bottomBox/tabs/scrapeEndpoints'
+export default {
+  name: 'scrapeEndpoint',
+  components: {
+    nzBottomDataList,
+    scrapeEndpointTable
+  },
+  mixins: [dataListMixin, subDataList, detailViewRightMixin, scrapeEndpoints],
+  data () {
+    return {
+      url: '/prom/api/v1/targets',
+      tableId: 'promTargetsTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          name: this.$t('config.scrapeEndpoint.endpoint'),
+          type: 'input',
+          label: 'endpointId',
+          disabled: false
+        }, {
+          name: this.$t('config.scrapeEndpoint.labels'),
+          type: 'input',
+          label: 'labels',
+          disabled: false
+        }, {
+          name: this.$t('config.scrapeEndpoint.lastScrape'),
+          type: 'input',
+          label: 'lastScrape',
+          disabled: false
+        }, {
+          name: this.$t('config.scrapeEndpoint.scrapeDuration'),
+          type: 'input',
+          label: 'lastScrapeDuration',
+          disabled: false
+        }, {
+          name: this.$t('config.scrapeEndpoint.state'),
+          type: 'select',
+          label: 'health',
+          disabled: false
+        }, {
+          name: this.$t('config.scrapeEndpoint.error'),
+          type: 'input',
+          label: 'lastError',
+          disabled: false
+        }]
+      },
+      currentTableData: [],
+      hideSameLabels: true,
+      inputDate: '',
+      tableDataCopy: '',
+      pageObj: {
+        pageSize: 20,
+        pageNo: 1,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    inputDate (n, o) {
+      this.handleCurrentChange()
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    }
+  },
+  methods: {
+    focus () {
+      let classVal = document.getElementById('inputDate').parentElement.getAttribute('class')
+      classVal = classVal.replace('input-with', 'input-with')
+      document.getElementById('inputDate').parentElement.setAttribute('class', classVal)
+      this.$refs.inputDate.focus()
+    },
+    blur () {
+      if (!this.inputDate || this.inputDate == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('inputDate').parentElement.getAttribute('class')
+          classVal = classVal.replace('input-with', 'input-with')
+          document.getElementById('inputDate').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    getTableData () {
+      this.$set(this.searchLabel, 'dcId', this.obj.dcId)
+      this.$set(this.searchLabel, 'agentId', this.obj.id)
+      this.$set(this.searchLabel, 'type', this.obj.type)
+      this.$get(this.url, { ...this.searchLabel }).then(response => {
+        this.tools.loading = false
+        this.tableData = response.data.activeTargets
+        // this.tableData = scrapeEndpoints[0].data.activeTargets
+        this.detailViewRightObj = this.tableData[0]
+        this.inputDateQuery = this.handlerTableData(this.tableData)
+        this.pageObj.total = this.tableData.length
+        if (!this.scrollbarWrap) {
+          this.$nextTick(() => {
+            this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+            this.toTopBtnHandler(this.scrollbarWrap)
+            this.handleCurrentChange()
+          })
+        }
+      })
+    },
+    handlerTableData (date) {
+      const tableDates = []
+      let endpoint = ''
+      let labelsType = ''
+      let lastScrape = ''
+      let lastScrapeDuration = ''
+      let health = ''
+      let lastError = ''
+      let tableDateAll = ''
+      date.map(e => {
+        endpoint = e.discoveredLabels.endpoint || ''
+        labelsType = e.labels.type || ''
+        lastScrape = e.lastScrape || ''
+        lastScrapeDuration = e.lastScrapeDuration || ''
+        health = e.health || ''
+        lastError = e.lastError || ''
+        tableDateAll = endpoint + labelsType + lastScrape + lastScrapeDuration + health + lastError + tableDateAll
+        const tableData = { endpoint, labelsType, lastScrape, lastScrapeDuration, health, lastError, tableDateAll }
+        tableDates.push(tableData)
+      })
+      return tableDates
+    },
+    tableFilter () {
+      const temp = this
+      const tableDatas = this.inputDateQuery
+      console.log(tableDatas)
+      this.tableData = tableDatas.filter((item) => {
+        const element = temp.hideSameLabels ? item.tableDateAll : item.endpoint
+        return element.indexOf(this.inputDate) !== -1
+      })
+      this.pageObj.pageNo = 1
+      this.handleCurrentChange()
+    },
+    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
+      )
+    }
+  },
+  mounted () {
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue

@@ -0,0 +1,205 @@
+<template>
+  <el-table
+  id="roleTable"
+  ref="dataTable"
+  :data="currentTableData"
+  :height="height"
+  border
+  @header-dragend="dragend"
+  @sort-change="tableDataSort"
+  @selection-change="selectionChange"
+  >
+  <el-table-column
+    :resizable="false"
+    align="center"
+    type="selection"
+    width="55">
+  </el-table-column>
+  <el-table-column
+    v-for="(item, index) in customTableTitle"
+    v-if="item.show"
+    :key="`col-${index}`"
+    :fixed="item.fixed"
+    :label="item.label"
+    :min-width="`${item.minWidth}`"
+    :prop="item.prop"
+    :resizable="true"
+    :sort-orders="['ascending', 'descending']"
+    :sortable="item.sortable"
+    :width="`${item.width}`"
+    class="data-column"
+  >
+    <template slot="header">
+      <span class="data-column__span">{{item.label}}</span>
+      <div class="col-resize-area"></div>
+    </template>
+    <template slot-scope="scope" :column="item">
+      <template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint}}</template>
+      <template v-else-if="item.prop === 'labels'" class="labels">
+          <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
+            <div> {{scope.row[item.prop]}}</div>
+            <span
+              @mouseenter="labelHover(scope.row, item, true, $event)"
+              @mouseleave="labelHover(scope.row, item, false)">
+              <nz-alert-tag
+                v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
+                :label="item.label"
+                :type="tagType(item.label)"
+                style="margin: 5px 0 5px 5px;"
+              >
+               {{item.value}}
+              </nz-alert-tag>
+            </span>
+            <alertLabel
+              v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project' || item.label === 'dc' ||item.label === 'endpoint' ||item.label === 'cpu' ||item.label === 'user' ||item.label === 'parent_asset') && scope.row[item.label] && scope.row[item.label].loading"
+              :id="scope.row[item.label].id"
+              :that="scope.row[item.label]"
+              :type="item.label"
+            ></alertLabel>
+          </span>
+      </template>
+      <template v-else-if="item.prop === 'health'">
+         <div slot="reference" v-if="scope.row[item.prop] === 'up'">
+              <div class="active-icon green-bg inline-block"></div>UP
+          </div>
+          <div slot="reference" v-else-if="scope.row[item.prop] === 'down'">
+            <div class="active-icon gray-bg inline-block"></div>DOWN
+          </div>
+      </template>
+      <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+      <template v-else>-</template>
+    </template>
+  </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>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+import nzAlertTag from '@/components/page/alert/nzAlertTag'
+import alertLabel from '@/components/common/alert/alertLabel'
+export default {
+  name: 'scrapeEndpointTab',
+  props: {
+    loading: Boolean,
+    currentTableData: Array
+  },
+  mixins: [table],
+  components: {
+    nzAlertTag,
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('config.scrapeEndpoint.endpoint'),
+          prop: 'endpoint',
+          show: true
+        }, {
+          label: this.$t('config.scrapeEndpoint.labels'),
+          prop: 'labels',
+          NotSet: true,
+          show: true
+        }, {
+          label: this.$t('config.scrapeEndpoint.lastScrape'),
+          prop: 'lastScrape',
+          show: true
+        }, {
+          label: this.$t('config.scrapeEndpoint.scrapeDuration'),
+          prop: 'lastScrapeDuration',
+          show: true
+        }, {
+          label: this.$t('config.scrapeEndpoint.state'),
+          prop: 'health',
+          show: true
+        }, {
+          label: this.$t('config.scrapeEndpoint.error'),
+          prop: 'lastError',
+          show: true
+        }
+      ],
+      exclusiveLabels: ['_id', 'severity', '__name__']
+    }
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
+      }
+    }
+  },
+  methods: {
+    labelsSort (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'datacenter', 'project', 'parent_asset', 'user']
+      if (typeof obj === 'string') obj = JSON.parse(obj)
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of this.exclusiveLabels) {
+        Object.keys(labels).forEach(labelsKey => {
+          if (labelsKey.indexOf(key) !== -1) {
+            delete labels[labelsKey]
+          }
+        })
+      }
+      for (const key of buildIn) {
+        if (key in labels) {
+          if (key === 'datacenter') {
+            result.push({ label: 'dc', value: labels.datacenter })
+            delete labels.datacenter
+          } else {
+            result.push({ label: key, value: labels[key] })
+          }
+          delete labels[key]
+        }
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+        delete labels[key]
+      })
+      console.log(result)
+      return result
+    },
+    // label tooltip是否显示
+    labelToolTipDis (labelType) {
+      switch (labelType) {
+        case 'asset':
+        case 'module':
+        case 'endpoint':
+        case 'project':
+        case 'dc':
+          return false
+        default: return true
+      }
+    },
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (this.labelToolTipDis(type)) {
+        return
+      }
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        console.log(type)
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+    }
+  },
+  mounted () {
+  }
+}
+</script>