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

<template>
  <div class="scrape-endpoint">
    <nz-bottom-data-list
      :showTitle='showTitle'
      :obj='obj'
      :targetTab.sync="targetTab"
      :api="url"
      style="height: 100%"
      :custom-table-title.sync="tools.customTableTitle"
      :layout="['elementSet']"
      :tabs="tabs"
      @changeTab="changeTab"
    >
      <template v-slot:title><span :title="obj.name || obj.dc.name">{{obj.name || obj.dc.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="inputDateSearch" @clear="clearInput" id="inputDate" class="input-with" @focus="focus" @blur="blur">
              <el-button slot="append" icon="el-icon-search" @click="focus"></el-button>
            </el-input>
          </div>
        </div>
      </template>
      <template v-slot>
        <scrape-endpoint-table
          ref="dataTable"
          :orderByFa="'id'"
          v-loading="tools.loading"
          :loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
          :height="mainTableHeight"
          :table-data="tableData"
          :currentTableData="currentTableData"
          :inputDateSearch="inputDateSearch"
          @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 bus from '@/libs/bus'
import { sameLabels } from '@/components/common/js/constants'
export default {
  name: 'scrapeEndpoint',
  components: {
    nzBottomDataList,
    scrapeEndpointTable
  },
  mixins: [dataListMixin, subDataList, detailViewRightMixin],
  data () {
    return {
      url: '/prom/api/v1/targets',
      tableId: 'promTargetsTable', // 需要分页的table的id，用于记录每页数量
      currentTableData: [],
      hideSameLabels: true,
      inputDateSearch: '',
      tableDataCopy: '',
      pageObj: {
        pageSize: 20,
        pageNo: 1,
        total: 0
      },
      timer: null,
      sameLabels: ['endpointLabels', 'labelsType', 'lastScrape', 'lastScrapeDuration', 'health', 'lastError']
    }
  },
  watch: {
    inputDateSearch (n, o) {
      const temp = this
      setTimeout(function () {
        temp.tableFilter()
      }, 500)
    },
    obj: {
      immediate: true,
      deep: true,
      handler (n, o) {
        if (n) {
          this.inputDateSearch = ''
          this.getTableData()
        }
      }
    }
  },
  methods: {
    // input 获取焦点时触发
    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()
    },
    // input 失去焦点时触发
    blur () {
      if (!this.inputDateSearch || this.inputDateSearch == '') {
        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)
      }
    },
    clearInput () {
      this.$refs.inputDate.focus()
    },
    // 数据请求
    getTableData () {
      this.timer = setTimeout(() => {
        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.map(item => {
            const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'dc', 'project', 'parent_asset', 'user']
            buildIn.forEach(label => {
              if (label === 'dc') {
                item[label] = {
                  id: item.labels['datacenter' + '_id'],
                  position: {},
                  loading: false
                }
              } else {
                item[label] = {
                  id: item.labels[label + '_id'],
                  position: {},
                  loading: false
                }
              }
            })
            return item
          })
          const globalSearchId = this.$store.getters.getGlobalSearchId
          let detailViewRightObj = ''
          if (globalSearchId) {
            detailViewRightObj = this.tableData.find(item => item.id === globalSearchId)
          } else {
            detailViewRightObj = this.tableData[0]
          }
          this.detailViewRightObj = detailViewRightObj
          this.inputDateQuery = this.handlerTableData(this.tableData)
          this.pageObj.total = this.tableData.length
          if (!this.scrollbarWrap) {
            this.$nextTick(() => {
              this.handleCurrentChange()
            })
          }
        })
      }, 500)
    },
    // 搜索字段的处理
    handlerTableData (dates) {
      const tableDates = []
      for (const date of dates) {
        const endpointLabels = date.discoveredLabels.endpoint || ''
        const labelsType = date.labels.type || ''
        const lastScrape = bus.timeFormate(date.lastScrape, this.timeFormatMain) || ''
        const lastScrapeDuration = date.lastScrapeDuration || ''
        const health = date.health || ''
        const lastError = date.lastError || ''
        const asset = date.asset
        const cpu = date.cpu
        const dc = date.dc
        const endpoint = date.endpoint
        const module = date.module
        const parent_asset = date.parent_asset
        const project = date.project
        const user = date.user
        const labels = date.labels
        const discoveredLabels = date.discoveredLabels
        const tableData = {
          endpointLabels,
          endpoint,
          labelsType,
          lastScrape,
          lastScrapeDuration,
          health,
          lastError,
          asset,
          dc,
          cpu,
          module,
          project,
          parent_asset,
          user,
          labels,
          discoveredLabels
        }
        let simpleTemp = ''
        const keys = Object.keys(tableData)
        for (const index in keys) {
          const key = keys[index]
          if (this.sameLabels.some((i) => { return i === key })) {
            if (tableData[key]) {
              simpleTemp += key + tableData[key]
            }
          }
        }
        if (simpleTemp.indexOf(',') !== -1) {
          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
        }
        tableData.tableDateAll = simpleTemp
        tableDates.push(tableData)
      }
      return tableDates
    },
    // 对字段进行匹配
    tableFilter () {
      const temp = this
      const tableDatas = this.inputDateQuery
      this.tableData = tableDatas.filter((item) => {
        if (item.endpoint) {
          const element = temp.hideSameLabels ? item.tableDateAll : item.endpoint
          return element.indexOf(this.inputDateSearch) !== -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 () {
  },
  beforeDestroy () {
    // 移除定时器
    clearInterval(this.timer)
  },
  created () {
    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
    this.pageObj.pageSize = pageSize || 20
  }
}
</script>