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

NEZ-1965 feat : 补充 复制功能

Browse Source
This commit is contained in:
likexuan
2022-07-15 10:42:09 +08:00
parent e623431c99
commit 9d39d0231c
9 changed files with 230 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
View File

@@ -291,6 +291,9 @@
#alert .name-labe {
display: none;
}
#alert .asset-manageIp{
visibility: hidden !important;
}
.el-timeline {
.el-timeline-item {
.el-timeline-item__wrapper {

35
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -4,6 +4,8 @@
:style="calcPosition(that.position, that)"
class="alert-label__border"
ref="alertLabels"
@mouseenter="tipHover(true)"
@mouseleave="tipHover(false)"
>
<!-- user info -->
<template v-if="type === 'user'">
@@ -47,8 +49,11 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<!-- <div class="alert-label-box name-labe">
<div class="alert-label-title">Name</div>
@@ -56,15 +61,16 @@
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
</div> -->
<div class="alert-label-box">
<div class="alert-label-box document-copy-block">
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{
alertLabelData && alertLabelData.manageIp
? alertLabelData.manageIp
: "--"
}}
</div>
<i class="nz-icon nz-icon-override asset-manageIp" style="visibility: hidden" @click="onCopy(alertLabelData.manageIp)" :title="$t('overall.copyText')"></i>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.type") }}</div>
@@ -207,10 +213,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -300,10 +309,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.module") }}</div>
@@ -395,10 +407,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -527,10 +542,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("asset.location") }}</div>
@@ -955,6 +973,9 @@ export default {
}
return color
}
},
tipHover (tipLoading) {
this.$emit('tipHover', tipLoading)
}
},
mounted () {

32
nezha-fronted/src/components/common/alert/alertLabel3.vue
View File

@@ -28,8 +28,11 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<!-- <div class="alert-label-box name-labe">
<div class="alert-label-title">Name</div>
@@ -37,15 +40,16 @@
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
</div> -->
<div class="alert-label-box">
<div class="alert-label-box document-copy-block">
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{
alertLabelData && alertLabelData.manageIp
? alertLabelData.manageIp
: "--"
}}
</div>
<i class="nz-icon nz-icon-override asset-manageIp" style="visibility: hidden" @click="onCopy(alertLabelData.manageIp)" :title="$t('overall.copyText')"></i>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.type") }}</div>
@@ -188,9 +192,12 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.Name ? alertLabelData.Name : "--" }}
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
@@ -281,10 +288,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.module") }}</div>
@@ -376,10 +386,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("project.project.projectName") }}</div>
@@ -508,10 +521,13 @@
</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">
<div class="alert-label-value document-copy-text">
{{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("asset.location") }}</div>

12
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -1,5 +1,6 @@
<template>
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels">
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels" @mouseenter="tipHoverRule(true)"
@mouseleave="tipHoverRule(false)">
<div v-my-loading="loading">
<div class="alert-label-header-title">
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
@@ -15,8 +16,12 @@
<div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
</div>
<div class="alert-label-box name-labe">
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<div class="alert-label-value document-copy-text">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertRuleData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<!-- <div class="alert-label-box">-->
<!-- <div class="alert-label-title">{{$t('overall.name')}}</div>-->
@@ -173,6 +178,9 @@ export default {
}
return color
}
},
tipHoverRule (tipLoading) {
this.$emit('tipHoverRule', tipLoading)
}
},
mounted () {

7
nezha-fronted/src/components/common/alert/alertRuleInfo2.vue
View File

@@ -13,9 +13,12 @@
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
</div>
<div class="alert-label-box name-labe" style="display:flex">
<div class="alert-label-box name-labe">
<div class="document-copy-block" style="display:flex">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<div class="alert-label-value document-copy-text">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertRuleData.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<!-- <div class="alert-label-box">-->
<!-- <div class="alert-label-title">{{$t('overall.name')}}</div>-->

103
nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
View File

@@ -77,6 +77,109 @@
:alertDaysData="alertDaysData"
/>
</div>
<!-- asset -->
<div class="search-item-value-box" v-else-if="obj.type === 'asset'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<!-- item.key === manageIp -->
<div class="document-copy-block" v-else-if="item.key === 'manageIp'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- endpoint -->
<div class="search-item-value-box" v-else-if="obj.type === 'endpoint'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- project -->
<div class="search-item-value-box" v-else-if="obj.type === 'project'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- module -->
<div class="search-item-value-box" v-else-if="obj.type === 'module'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- datacenter -->
<div class="search-item-value-box" v-else-if="obj.type === 'datacenter'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<!-- alertrule -->
<div class="search-item-value-box" v-else-if="obj.type === 'alertrule'">
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<!-- item.key === name -->
<div class="document-copy-block" v-if="item.key === 'name'">
<span class="search-item-value document-copy-text" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(getPathContent(item.key))" :title="$t('overall.copyText')"></i>
</div>
<div v-else>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">
{{getPathContent(item.key)}}
</span>
</div>
</div>
<div class="search-item-value-box" v-else>
<i v-if="(item.icon && getPathContent(item.key)!=='--') || item.key === 'pingInfo.rtt'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
<span class="search-item-value" v-if="item.key !== 'pingInfo.rtt' || (item.key === 'pingInfo.rtt'&& alertLabelData.pingInfo&&alertLabelData.pingInfo.status == 1)">

16
nezha-fronted/src/components/common/mixin/alertLabelMixin.js
View File

@@ -8,12 +8,15 @@ export default {
alertLabelShow: false,
alertLabelId: '',
alertLabelObj: {},
alertLabelType: ''
alertLabelType: '',
timer: null,
flag: null
}
},
methods: {
// label 鼠标划入
labelHover (item, type, loading, isUseType = true, e) {
clearTimeout(this.timer)
if (this.labelToolTipDis(type)) {
return
}
@@ -36,9 +39,18 @@ export default {
this.alertLabelObj = item
this.alertLabelType = type
}
this.$set(item, 'loading', loading)
this.$set(item[type], 'loading', loading)
}
this.timer = setTimeout(() => {
this.alertLabelShow = loading
}, 500)
this.flag = loading
},
tipHover (tipLoading) {
clearTimeout(this.timer)
if (this.flag === false) {
this.alertLabelShow = tipLoading
}
},
// label tooltip是否显示
labelToolTipDis (labelType) {

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

@@ -129,13 +129,14 @@
<div v-else>&nbsp;</div>
</template>
</el-table>
<alertRuleInfo v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
<alertRuleInfo @tipHoverRule='tipHoverRule' v-if="alertRuleShow" :id="alertRuleId" :severity-data="severityData" :that="alertRuleObj.alertRule" @showText="$emit('showText',alertRuleObj)"></alertRuleInfo>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
:alert-table-dialog="chartAlertList"
@tipHover='tipHover'
></alertLabel>
</div>
</template>
@@ -520,6 +521,7 @@ export default {
},
// alertName鼠标划入
alertMessageHover (item, loading, e) {
clearTimeout(this.timer)
if (e) {
const dom = e.currentTarget
const position = dom.getBoundingClientRect()
@@ -528,7 +530,16 @@ export default {
this.alertRuleObj = item
}
this.$set(item.alertRule, 'loading', loading)
this.timer = setTimeout(() => {
this.alertRuleShow = loading
}, 500)
this.flag = loading
},
tipHoverRule (tipLoading) {
clearTimeout(this.timer)
if (this.flag === false) {
this.alertRuleShow = tipLoading
}
},
// Severity Label
returnSeverityLabel (key) {

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

@@ -180,6 +180,7 @@
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
@tipHover='tipHover'
></alertLabel>
</div>
</template>