NEZ-1390 feat: endpoint metric info 图标 hover 显示 metadata

This commit is contained in:
@changcode
2021-12-09 13:55:33 +08:00
parent 282ba512b6
commit 9fe9510999
2 changed files with 23 additions and 12 deletions

View File

@@ -1,12 +1,10 @@
<template> <template>
<div> <div>
<ul> <ul>
<li><span class="metric-tip-list">metric&nbsp;:&nbsp;</span><span>{{metricTip ? metricTip : '--'}}</span></li> <li><span class="metric-tip-list">metric&nbsp;:&nbsp;</span><span>{{metaName ? metaName : '--'}}</span></li>
</ul> <li><span class="metric-tip-list">help&nbsp;:&nbsp;</span><span>{{metricList.help}}</span></li>
<ul v-for="(item,index) in metaDataList" :key="index"> <li><span class="metric-tip-list">type&nbsp;:&nbsp;</span><span>{{metricList.type}}</span></li>
<li><span class="metric-tip-list">type&nbsp;:&nbsp;</span><span>{{item.type ? item.type : 'unknown'}}</span></li> <li><span class="metric-tip-list">unit&nbsp;:&nbsp;</span><span>{{metricList.unit}}</span></li>
<li><span class="metric-tip-list">help&nbsp;:&nbsp;</span><span>{{item.help ? item.help : '--'}}</span></li>
<li><span class="metric-tip-list">unit&nbsp;:&nbsp;</span><span>{{item.unit ? item.unit : '--'}}</span></li>
</ul> </ul>
</div> </div>
</template> </template>
@@ -16,10 +14,22 @@ export default {
name: 'metaData', name: 'metaData',
props: { props: {
metaDataList: Array, metaDataList: Array,
metricTip: String metaName: String
}, },
data () { data () {
return {} return {
metricList: {}
}
},
watch: {
metaDataList: {
deep: true,
handler (n) {
if (n) {
this.metricList = n[0]
}
}
}
} }
} }
</script> </script>

View File

@@ -25,7 +25,7 @@
:label="$t('project.endpoint.element')"> :label="$t('project.endpoint.element')">
<template v-slot="scope"> <template v-slot="scope">
<el-popover trigger="hover" placement="right"> <el-popover trigger="hover" placement="right">
<meta-data :metaDataList="metaDataList" :metricTip="scope.row.metricTip.metric" /> <meta-data :metaDataList="metaDataList" :metaName="scope.row.metricTip.metric" />
<span slot="reference"><i @mouseover="metricMetaData(scope.row)" class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span> <span slot="reference"><i @mouseover="metricMetaData(scope.row)" class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover> </el-popover>
<span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span> <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
@@ -149,8 +149,7 @@ export default {
pageNo: 1, pageNo: 1,
total: 0 total: 0
}, },
metaDataList: [], metaDataList: []
metaName: ''
} }
}, },
methods: { methods: {
@@ -552,7 +551,9 @@ export default {
}, },
metricMetaData (data) { metricMetaData (data) {
this.$get('/prom/api/v1/metadata?' + 'metric=' + data.metricTip.metric + '&limit=' + 1).then(res => { this.$get('/prom/api/v1/metadata?' + 'metric=' + data.metricTip.metric + '&limit=' + 1).then(res => {
this.metaDataList = res.data.jvm_gc_live_data_size_bytes if (res.code === 200) {
this.metaDataList = res.data[data.metricTip.metric]
}
}) })
} }
}, },