gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：处理 表格tooltip 调用两次接口的问题

Browse Source
This commit is contained in:
zhangyu
2022-03-09 19:32:04 +08:00
parent 2e7d217f0e
commit bb3e330d97
5 changed files with 334 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -263,7 +263,8 @@ export default {
chartData: { chartData: {
deep: true, deep: true,
handler (n) { handler (n) {
if (!this.isInit) { if (!this.isInit && this.chartOption.color) {
console.log(this.chartOption)
this.colorList = this.colorList.slice(0, 20) this.colorList = this.colorList.slice(0, 20)
this.chartOption.color = this.chartOption.color.slice(0, 20) this.chartOption.color = this.chartOption.color.slice(0, 20)
this.initChart(this.chartOption) this.initChart(this.chartOption)

52
nezha-fronted/src/components/common/mixin/alertLabelMixin.js Normal file
View File

@@ -0,0 +1,52 @@
export default {
data () {
return {
alertLabelShow: false,
alertLabelId: '',
alertLabelObj: {},
alertLabelType: ''
}
},
methods: {
// label 鼠标划入
labelHover (item, type, loading, isUseType = true, e) {
if (this.labelToolTipDis(type)) {
return
}
if (isUseType) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item[type], 'position', position)
this.alertLabelId = item[type].id
this.alertLabelObj = item[type]
this.alertLabelType = type
}
this.$set(item[type], 'loading', loading)
} else {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
this.alertLabelId = item.id
this.alertLabelObj = item
this.alertLabelType = type
}
this.$set(item, 'loading', loading)
}
this.alertLabelShow = loading
},
// label tooltip是否显示
labelToolTipDis (labelType) {
switch (labelType) {
case 'asset':
case 'module':
case 'endpoint':
case 'project':
case 'dc':
return false
default: return true
}
}
}
}

39
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -72,8 +72,8 @@
<template v-else-if="item.prop === 'labels'" class="labels"> <template v-else-if="item.prop === 'labels'" class="labels">
<span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i"> <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
<span <span
@mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseenter="labelHover(scope.row, item.label, true, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false)"> @mouseleave="labelHover(scope.row, item.label, false, true,)">
<nz-alert-tag <nz-alert-tag
v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'" v-if="item.label !== 'alertname' && item.label !== 'severity'" :key="item.label" :cursor-point="tagType(item.label) !== 'info'"
:label="item.label" :label="item.label"
@@ -145,6 +145,7 @@ import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel' import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools' import { calcDurationByStringTimeB } from '../../js/tools'
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants' import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'alertMessageTable', name: 'alertMessageTable',
components: { components: {
@@ -164,7 +165,7 @@ export default {
loading: Boolean, loading: Boolean,
chartAlertList: Boolean chartAlertList: Boolean
}, },
mixins: [table, bus], mixins: [table, bus, alertLabelMixin],
data () { data () {
return { return {
/* 二级列表相关 */ /* 二级列表相关 */
@@ -247,10 +248,6 @@ export default {
], ],
viewAssetState: false, viewAssetState: false,
tableDataInitNum: 0, tableDataInitNum: 0,
alertLabelShow: false,
alertLabelId: '',
alertLabelObj: {},
alertLabelType: '',
alertRuleShow: false, alertRuleShow: false,
alertRuleId: '', alertRuleId: '',
alertRuleObj: '' alertRuleObj: ''
@@ -572,18 +569,6 @@ export default {
this.$refs.moduleBox.show(false, false) this.$refs.moduleBox.show(false, false)
this.viewAssetState = false this.viewAssetState = false
}, },
// label tooltip是否显示
labelToolTipDis (labelType) {
switch (labelType) {
case 'asset':
case 'module':
case 'endpoint':
case 'project':
case 'dc':
return false
default: return true
}
},
// alertName鼠标划入 // alertName鼠标划入
alertMessageHover (item, loading, e) { alertMessageHover (item, loading, e) {
if (e) { if (e) {
@@ -596,22 +581,6 @@ export default {
this.$set(item.alertRule, 'loading', loading) this.$set(item.alertRule, 'loading', loading)
this.alertRuleShow = loading this.alertRuleShow = loading
}, },
// 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.alertLabelId = item[type].id
this.alertLabelObj = item[type]
this.alertLabelType = type
}
this.$set(item[type], 'loading', loading)
this.alertLabelShow = loading
},
// Severity Label // Severity Label
returnSeverityLabel (key) { returnSeverityLabel (key) {
return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label) return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)

35
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<div style="height: 100%">
<el-table <el-table
id="roleTable" id="roleTable"
ref="dataTable" ref="dataTable"
@@ -43,7 +44,7 @@
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span> <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
</template> </template>
<template v-else-if="item.prop === 'alertNum'"> <template v-else-if="item.prop === 'alertNum'">
<!-- v-my-loading:ldsFacebook="scope.row.trendLoading"--> <!-- v-my-loading:ldsFacebook="scope.row.trendLoading"-->
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"> <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
<i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i> <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
<div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}"> <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
@@ -77,15 +78,9 @@
<span <span
v-if="scope.row.parent" v-if="scope.row.parent"
style="cursor: pointer" style="cursor: pointer"
@mouseenter="labelHover(scope.row, 'asset', true, $event)" @mouseenter="labelHover(scope.row, 'asset', true, false, $event)"
@mouseleave="labelHover(scope.row, 'asset', false)"> @mouseleave="labelHover(scope.row, 'asset', false, false)">
{{scope.row.parent.name}} {{scope.row.parent.name}}
<alertLabel
v-if="scope.row.loading"
:id="scope.row.pid"
:that="scope.row"
:type="'asset'"
></alertLabel>
</span> </span>
<span v-else> - </span> <span v-else> - </span>
</template> </template>
@@ -93,7 +88,7 @@
<div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer"> <div @click="$emit('showBottomBox', 'assetSubTab', scope.row)" v-if="scope.row.childrenNum" style="cursor: pointer">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.childrenNum}}</div> {{scope.row.childrenNum}}</div>
<!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>--> <!-- <span v-else-if="scope.row.pid == -1"> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
<span v-else> - </span> <span v-else> - </span>
</template> </template>
<template v-else-if="item.prop === 'clientState'"> <template v-else-if="item.prop === 'clientState'">
@@ -161,6 +156,13 @@
<div v-else>&nbsp;</div> <div v-else>&nbsp;</div>
</template> </template>
</el-table> </el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template> </template>
<script> <script>
@@ -169,9 +171,10 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
// import bus from '@/libs/bus' // import bus from '@/libs/bus'
import alertLabel from '@/components/common/alert/alertLabel' import alertLabel from '@/components/common/alert/alertLabel'
import alertDaysInfo from '@/components/common/alert/alertDaysInfo' import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'assetTable', name: 'assetTable',
mixins: [table], mixins: [table, alertLabelMixin],
components: { components: {
alertLabel: alertLabel, alertLabel: alertLabel,
alertDaysInfo alertDaysInfo
@@ -337,16 +340,6 @@ export default {
this.bottomBox.targetTab = 'endpoint' this.bottomBox.targetTab = 'endpoint'
this.bottomBox.showSubList = true this.bottomBox.showSubList = true
}, },
// label 鼠标划入
labelHover (item, type, loading, e) {
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
this.$set(item, 'position', position)
}
this.$set(item, 'loading', loading)
// this.$set(this.tableData,index,item);// 调用父组件
},
returnCabinet (start, end) { // 返回机柜u位信息 returnCabinet (start, end) { // 返回机柜u位信息
if (!start || !end) { if (!start || !end) {
return '' return ''

49
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<div style="height: 100%">
<el-table <el-table
id="endpointTable" id="endpointTable"
ref="dataTable" ref="dataTable"
@@ -45,49 +46,31 @@
<template v-else-if="item.prop === 'project'"> <template v-else-if="item.prop === 'project'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
{{scope.row[item.prop].name}} {{scope.row[item.prop].name}}
</span> </span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'project'"
></alertLabel>
</template> </template>
<template v-else-if="item.prop === 'module'"> <template v-else-if="item.prop === 'module'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/> <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
{{scope.row[item.prop].name}} {{scope.row[item.prop].name}}
</span> </span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'module'"
></alertLabel>
</template> </template>
<template v-else-if="item.prop === 'asset'"> <template v-else-if="item.prop === 'asset'">
<span <span
class="pointer" class="pointer"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false)" @mouseleave="labelHover(scope.row, item.prop, false,true)"
> >
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.asset.name}} {{scope.row.asset.name}}
</span> </span>
<alertLabel
v-if="scope.row[item.prop] && scope.row[item.prop].loading"
:id="scope.row[item.prop].id"
:that="scope.row[item.prop]"
:type="'asset'"
></alertLabel>
</template> </template>
<template v-else-if="item.prop === 'alerts'"> <template v-else-if="item.prop === 'alerts'">
<span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)"> <span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)">
@@ -107,8 +90,8 @@
</template> </template>
<template v-else-if="item.prop === 'configs'"> <template v-else-if="item.prop === 'configs'">
<span class="configs-endpoint metrics" <span class="configs-endpoint metrics"
@mouseenter="labelHover(scope.row, item.prop, true, $event)" @mouseenter="labelHover1(scope.row, item.prop, true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false, $event, true)"> @mouseleave="labelHover1(scope.row, item.prop, false, $event, true)">
[{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}] [{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}]
</span> </span>
<nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop"> <nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
@@ -184,7 +167,7 @@
<i class="nz-icon nz-icon-more3"></i> <i class="nz-icon nz-icon-more3"></i>
</div> </div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top"> <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>--> <!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
<el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item> <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item> <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
@@ -203,19 +186,27 @@
<div v-else>&nbsp;</div> <div v-else>&nbsp;</div>
</template> </template>
</el-table> </el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
></alertLabel>
</div>
</template> </template>
<script> <script>
import table from '@/components/common/mixin/table' import table from '@/components/common/mixin/table'
import alertLabel from '../../alert/alertLabel' import alertLabel from '../../alert/alertLabel'
import nzTooltip from '../../alert/nzTooltip' import nzTooltip from '../../alert/nzTooltip'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'endpointTable', name: 'endpointTable',
components: { components: {
alertLabel, alertLabel,
nzTooltip nzTooltip
}, },
mixins: [table], mixins: [table, alertLabelMixin],
props: { props: {
showOption: { showOption: {
type: Boolean, type: Boolean,
@@ -325,7 +316,7 @@ export default {
return str return str
}, },
// label 鼠标划入 // label 鼠标划入
labelHover (item, type, loading, e, slow) { labelHover1 (item, type, loading, e, slow) {
if (e) { if (e) {
const dom = e.currentTarget const dom = e.currentTarget
const position = dom.getBoundingClientRect() const position = dom.getBoundingClientRect()