262 lines
8.6 KiB
Vue
262 lines
8.6 KiB
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>
|