238 lines
7.5 KiB
Vue
238 lines
7.5 KiB
Vue
<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}-${item.prop}`"
|
|
: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 ? scope.row.discoveredLabels.endpoint : '-'}}</template>
|
|
<template v-else-if="item.prop === 'lastScrape'">{{scope.row.lastScrape}}</template>
|
|
<template v-else-if="item.prop === 'labels'" class="labels">
|
|
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
|
|
<span>
|
|
<!-- @mouseenter="labelHover(scope.row, item.label, true, $event)"-->
|
|
<!-- @mouseleave="labelHover(scope.row, item.label, 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="'info'"
|
|
style="margin: 5px 0 5px 5px;"
|
|
:title="item.value"
|
|
>
|
|
{{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 red-bg inline-block"></div>DOWN
|
|
</div>
|
|
</template>
|
|
<template v-else-if="item.prop === 'lastScrapeDuration'">
|
|
<el-tooltip effect="light" placement="right">
|
|
<div slot="content">
|
|
<div><span>Interval: </span>{{ scope.row.discoveredLabels._scrape_interval_ ? scope.row.discoveredLabels._scrape_interval_ + 's' : '0s' }}</div>
|
|
<div><span>Timeout: </span>{{ scope.row.discoveredLabels._scrape_timeout_ ? scope.row.discoveredLabels._scrape_timeout_ + 's' : '0s'}}</div>
|
|
</div>
|
|
<span>{{ scope.row.lastScrapeDuration }}</span>
|
|
</el-tooltip>
|
|
</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> </div>
|
|
</template>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
import table from '@/components/common/mixin/table'
|
|
import nzAlertTag from '@/components/page/alert/nzAlertTag'
|
|
import alertLabel from '@/components/common/alert/alertLabel'
|
|
import bus from '@/libs/bus'
|
|
export default {
|
|
name: 'scrapeEndpointTab',
|
|
props: {
|
|
loading: Boolean,
|
|
currentTableData: Array
|
|
},
|
|
mixins: [table],
|
|
components: {
|
|
nzAlertTag,
|
|
alertLabel
|
|
},
|
|
data () {
|
|
return {
|
|
tableTitle: [
|
|
{
|
|
label: this.$t('asset.endpoint'),
|
|
prop: 'endpoint',
|
|
show: true
|
|
}, {
|
|
label: this.$t('project.endpoint.labels2'),
|
|
prop: 'labels',
|
|
NotSet: true,
|
|
show: true
|
|
}, {
|
|
label: this.$t('config.scrapeEndpoint.lastScrape'),
|
|
prop: 'lastScrape',
|
|
show: true,
|
|
sortable: 'custom'
|
|
}, {
|
|
label: this.$t('config.scrapeEndpoint.scrapeDuration'),
|
|
prop: 'lastScrapeDuration',
|
|
show: true,
|
|
sortable: 'custom'
|
|
}, {
|
|
label: this.$t('overall.state'),
|
|
prop: 'health',
|
|
show: true,
|
|
sortable: 'custom'
|
|
}, {
|
|
label: this.$t('ERROR'),
|
|
prop: 'lastError',
|
|
show: true
|
|
}
|
|
],
|
|
exclusiveLabels: ['_id', 'severity', '__name__'],
|
|
time: ''
|
|
}
|
|
},
|
|
computed: {
|
|
tagType () {
|
|
return (key) => {
|
|
if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') {
|
|
return 'normal'
|
|
} else {
|
|
return 'info'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// currentTableData: {
|
|
// immediate: true,
|
|
// deep: true,
|
|
// handler (n) {
|
|
// n.forEach(e => {
|
|
// const lastScrape = new Date(e.lastScrape).getTime()
|
|
// this.time = bus.timeFormate(lastScrape, this.timeFormatMain)
|
|
// })
|
|
// }
|
|
// }
|
|
},
|
|
methods: {
|
|
// 对于 labels 传入数据做处理
|
|
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]
|
|
})
|
|
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()
|
|
this.$set(item[type], 'position', position)
|
|
}
|
|
this.$set(item[type], 'loading', loading)
|
|
},
|
|
lastScrapeFormate (time) {
|
|
const lastScrape = new Date(time).getTime()
|
|
return bus.timeFormate(lastScrape, this.timeFormatMain)
|
|
},
|
|
tableDataSort (orderBy) {
|
|
this.$emit('orderBy', orderBy)
|
|
}
|
|
},
|
|
mounted () {
|
|
}
|
|
}
|
|
</script>
|