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

NEZ-1080 style: 鼠标悬浮样式调整

Browse Source
This commit is contained in:
@changcode
2021-10-26 17:47:49 +08:00
parent 062bbaf58f
commit 5a831004f5
15 changed files with 242 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template> <template>
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" ref="alertLabels"> <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading"> <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
@@ -9,14 +9,14 @@
<div class="alert-label-title">Name</div> <div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">SN</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
</div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ManageIp</div> <div class="alert-label-title">ManageIp</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">type</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
</div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">State</div> <div class="alert-label-title">State</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
@@ -29,30 +29,29 @@
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Asset Type</div> <div class="alert-label-title">Data center</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Brand</div> <div class="alert-label-title">Cabinet</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Model</div> <div class="alert-label-title">Model</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
</div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Alert</div> <div class="alert-label-title">Alert</div>
<div class="alert-label-value"> <div class="alert-label-value">
<span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span> <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">DC</div> <div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div> <div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div>
</div> </div>
</div> </div>
@@ -69,6 +68,26 @@
<div class="alert-label-title">Project</div> <div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : '--'}}</span></div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Asset</div>
<div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Alert</div>
<div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Description</div> <div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
@@ -107,13 +126,48 @@
<div class="alert-label-title">Module</div> <div class="alert-label-title">Module</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">Asset</div>
<div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
</div>
</div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Alert</div> <div class="alert-label-title">Alert</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">State</div> <div class="alert-label-title">State</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}</div> <div class="alert-label-value" style="margin-left: 3px">
<span style="width: auto">
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0 || !alertLabelData.configs[0].state">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[0].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
<span style="width: auto">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0 || !alertLabelData.configs[1].state">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="alertLabelData && alertLabelData.configs[1].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
</div>
</div> </div>
</div> </div>
@@ -131,18 +185,30 @@
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Asset num</div> <div class="alert-label-title">Asset</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</div> <div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.assetName > 0 ? 'colorEF7458' : 'color23BF9A'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Cabinet</div>
<div class="alert-label-value">
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinet > 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
<span>{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Alert</div> <div class="alert-label-title">Alert</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</span></div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">State</div> <div class="alert-label-title">State</div>
<div class="alert-label-value"> <div class="alert-label-value" style="margin-left: 3px">
<div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'oFF'}" class="active-icon"></div> <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}} <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
<span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -157,7 +223,8 @@ export default {
id: {}, id: {},
type: {}, type: {},
// labelLoading:{}, // labelLoading:{},
that: {} that: {},
detailList: Boolean
}, },
/* watch:{ /* watch:{
labelLoading: { labelLoading: {
@@ -232,16 +299,20 @@ export default {
const self = this const self = this
return function (position) { return function (position) {
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
const leftOffSetView = this.detailList ? -80 : 10
const topOffSetView = this.detailList ? 0 : 0
const leftOffSet = this.detailList ? -80 : 10
const topOffSet = this.detailList ? 70 : 0
const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70) const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
if (position.top + elHeight > clientHeight) { if (position.top + elHeight > clientHeight) {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top - elHeight - 20}px` top: `${position.top - elHeight + topOffSet}px`
} }
} else { } else {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + leftOffSetView}px`,
top: `${position.top - 20}px` top: `${position.top + topOffSetView}px`
} }
} }
} }
@@ -341,6 +412,12 @@ export default {
border-radius: 4px; border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
} }
.alert-label__border {
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px 3px 3px 3px 0 0;
}
.alert-labelUp { .alert-labelUp {
position: fixed; position: fixed;
background-color: white; background-color: white;
@@ -357,9 +434,9 @@ export default {
overflow: hidden; overflow: hidden;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
border: 5px; /*border: 5px;*/
border-style: dashed solid dashed dashed; /*border-style: dashed solid dashed dashed;*/
border-color: transparent #fff transparent transparent; /*border-color: transparent #fff transparent transparent;*/
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 0; left: 0;
@@ -373,36 +450,46 @@ export default {
overflow: hidden; overflow: hidden;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
border: 5px; /*border: 5px;*/
border-style: dashed solid dashed dashed; /*border-style: dashed solid dashed dashed;*/
border-color: transparent #fff transparent transparent; /*border-color: transparent #fff transparent transparent;*/
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }
.alert-label-info{ .alert-label-info{
border: 1px solid #ebeef5; /*border: 1px solid #ebeef5;*/
border-bottom: none; border-bottom: none;
font-size: 13px; font-size: 13px;
line-height: 26px; line-height: 26px;
} }
.alert-label-box{ .alert-label-box{
display: flex; display: flex;
justify-content:space-between; flex-direction: row;
border-bottom: 1px solid #ebeef5; /*border-bottom: 1px solid #ebeef5;*/
} }
.alert-label-title{ .alert-label-title{
text-align: left; font-family: Roboto-Regular;
width: 110px; font-size: 14px;
border-right: 1px solid #ebeef5; color: #666666;
color: #666; letter-spacing: 0;
line-height: 23px;
font-weight: 400;
min-width: 100px;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
min-width: 100px;
} }
.alert-label-value{ .alert-label-value{
text-align: left; text-align: right;
width: 150px; height: 26px;
color: #1a1a1a; ont-family: Roboto-Regular;
overflow: hidden;
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 23px;
font-weight: 400;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
word-break: break-all; word-break: break-all;
} }
@@ -421,4 +508,7 @@ export default {
/deep/.active-icon{ /deep/.active-icon{
margin-top: 0; margin-top: 0;
} }
.colorFA901C{
color: #fa901c;
}
</style> </style>

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

@@ -1,41 +1,65 @@
<template> <template>
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" v-loading="loading"> <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" v-loading="loading">
<div class="alert-rule-info" > <div class="alert-rule-info" >
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">ID</div> <div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div> <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.alertName')}}</div> <div class="alert-rule-title">{{$t('alert.name')}}</div>
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div> <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div> <div class="alert-rule-title">{{$t('alert.type')}}</div>
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div> <div class="alert-rule-value">{{alertRuleData.type ? alertRuleData.type : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
<div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
<!-- <div class="alert-rule-value severity">
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
</span>
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
</span>
</div>-->
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.threshold')}}</div> <div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
<div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div> <div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.severity')}}</div> <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
<div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div> <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
<!-- <div class="alert-rule-value severity"> </div>
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1"> <div class="alert-rule-box">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}} <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
</span> <div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2"> <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}} <span>{{alertRuleData.alertNum ? alertRuleData.alertNum : 0}}</span>
</span> </div>
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
</span>
</div>-->
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div> <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju" style="color: #fa901c"></i></div> <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju" style="color: #fa901c"></i></div>
</div> </div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.state')}}</div>
<div class="alert-rule-value" style="margin-left: 3px">
<div v-if="alertRuleData.state === 1">
<i class="active-icon green-bg inline-block"></i>
{{ $t('overall.enabled') }}
</div>
<div v-else-if="alertRuleData.state === 0">
<i class="active-icon gray-bg inline-block"></i>
{{ $t('overall.disabled') }}
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -53,7 +77,8 @@ export default {
data () { data () {
return { return {
loading: true, loading: true,
alertRuleData: '' alertRuleData: '',
severityColor: ''
} }
}, },
components: { components: {
@@ -72,12 +97,12 @@ export default {
const elHeight = 50 const elHeight = 50
if (position.top + elHeight > clientHeight) { if (position.top + elHeight > clientHeight) {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + 200}px`,
top: `${position.top - elHeight - 80}px` top: `${position.top - elHeight - 80}px`
} }
} else { } else {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + 200}px`,
top: `${position.top - 80}px` top: `${position.top - 80}px`
} }
} }
@@ -113,12 +138,19 @@ export default {
}, },
trbShotShow () { trbShotShow () {
this.$emit('showText') this.$emit('showText')
},
severityDataColor () {
this.severityData.map(item => {
console.log(item.color)
this.severityColor = item.color
})
} }
}, },
mounted () { mounted () {
this.$get('/alert/rule/' + this.id).then((res) => { this.$get('/alert/rule/' + this.id).then((res) => {
if (res.msg === 'success') { if (res.msg === 'success') {
this.loading = false this.loading = false
this.severityDataColor()
this.alertRuleData = res.data this.alertRuleData = res.data
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)
@@ -193,26 +225,22 @@ export default {
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
} }
.alert-rule-info{ .alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none; border-bottom: none;
font-size: 13px; font-size: 13px;
line-height: 26px; line-height: 26px;
} }
.alert-rule-box{ .alert-rule-box{
display: flex; display: flex;
justify-content:space-between; flex-direction: row;
border-bottom: 1px solid #ebeef5;
} }
.alert-rule-title{ .alert-rule-title{
text-align: left; text-align: left;
width: 110px; width: 110px;
border-right: 1px solid #ebeef5;
color: #666; color: #666;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }
.alert-rule-value{ .alert-rule-value{
text-align: left; text-align: left;
width: 150px;
color: #1a1a1a; color: #1a1a1a;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
word-wrap: break-word; word-wrap: break-word;
@@ -240,6 +268,12 @@ export default {
color: #FFFFFF; color: #FFFFFF;
padding: 2px 6px; padding: 2px 6px;
} }
.alert-label__border {
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px 3px 3px 3px 0 0;
}
/* .alert-rule-info::after { /* .alert-rule-info::after {
content: ''; content: '';
display: block; display: block;

12
nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
View File

@@ -24,12 +24,12 @@
:class="item.id === detailViewRightObj.id ? 'selected' : ''" :class="item.id === detailViewRightObj.id ? 'selected' : ''"
@click="detailViewRightShow(item)"> @click="detailViewRightShow(item)">
<el-popover <el-popover
placement="right" placement="right-start"
popper-class="alert-message-tooltip" popper-class="alert-message-tooltip alert-rule-detail"
style="position: relative" style="position: relative"
@show="alertMessageHover(item, true)" @show="alertMessageHover(item, true)"
@hide="alertMessageHover(item, false)" @hide="alertMessageHover(item, false)"
trigger="click"> trigger="hover">
<alertRuleInfo v-if="item.loading" :id="item.id" :severity-data="severityData" :that="item" @showText="showText(item)"></alertRuleInfo> <alertRuleInfo v-if="item.loading" :id="item.id" :severity-data="severityData" :that="item" @showText="showText(item)"></alertRuleInfo>
<div class="detail-row-info" slot="reference"> <div class="detail-row-info" slot="reference">
<div class="asset-manageIp"> <div class="asset-manageIp">
@@ -227,7 +227,11 @@ export default {
} }
} }
</script> </script>
<style>
.alert-rule-detail {
left: 440px !important;
}
</style>
<style scoped lang="scss"> <style scoped lang="scss">
.order-box{ .order-box{
display: flex; display: flex;

1
nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
View File

@@ -40,6 +40,7 @@
v-if="item && item.loading" v-if="item && item.loading"
:id="item.id" :id="item.id"
:that="item" :that="item"
:detail-list="true"
:type="'asset'" :type="'asset'"
></alertLabel> ></alertLabel>
</li> </li>

1
nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
View File

@@ -38,6 +38,7 @@
v-if="item && item.loading" v-if="item && item.loading"
:id="item.id" :id="item.id"
:that="item" :that="item"
:detail-list="true"
:type="'dc'" :type="'dc'"
></alertLabel> ></alertLabel>
</li> </li>

1
nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
View File

@@ -38,6 +38,7 @@
v-if="item && item.loading" v-if="item && item.loading"
:id="item.id" :id="item.id"
:that="item" :that="item"
:detail-list="true"
:type="'endpoint'" :type="'endpoint'"
></alertLabel> ></alertLabel>
</li> </li>

1
nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
View File

@@ -38,6 +38,7 @@
v-if="item && item.loading" v-if="item && item.loading"
:id="item.id" :id="item.id"
:that="item" :that="item"
:detail-list="true"
:type="'module'" :type="'module'"
></alertLabel> ></alertLabel>
</li> </li>

4
nezha-fronted/src/components/common/language/cn.js
View File

@@ -1257,6 +1257,10 @@ const cn = {
notify: '通知', // "通知方式" notify: '通知', // "通知方式"
startAt: '开始时间', startAt: '开始时间',
endAt: '结束时间', endAt: '结束时间',
name: '名称',
state: '状态',
type: '类型',
alertNum: '告警数量',
list: { list: {
linked: '关联', linked: '关联',
type: '类别', type: '类别',

4
nezha-fronted/src/components/common/language/en.js
View File

@@ -1259,6 +1259,10 @@ const en = {
startAt: 'Start time', // "开始时间" startAt: 'Start time', // "开始时间"
notify: 'Notification', // "通知方式" notify: 'Notification', // "通知方式"
endAt: 'End time', // "结束时间" endAt: 'End time', // "结束时间"
name: 'Name',
state: 'State',
type: 'Type',
alertNum: 'Alert',
list: { list: {
// 表头 // 表头
linked: 'Linked', // "关联" linked: 'Linked', // "关联"

2
nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
View File

@@ -18,7 +18,7 @@
<!-- 第一级：Edit type = account --> <!-- 第一级：Edit type = account -->
<template v-if="editData.editType === assetConstants.editTypeData.account"> <template v-if="editData.editType === assetConstants.editTypeData.account">
<el-form-item :label="$t('asset.authProtocol')" prop="authProtocol"> <el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
<el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value"> <el-select v-model="editData.authProtocol" class="right-box__select" :placeholder="$t('overall.select')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
<el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/> <el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>

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

@@ -38,12 +38,12 @@
<template v-if="item.prop === 'alertRule'"> <template v-if="item.prop === 'alertRule'">
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" > <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
<el-popover <el-popover
placement="right" placement="right-start"
popper-class="alert-message-tooltip" popper-class="alert-message-tooltip"
style="position: relative" style="position: relative"
@show="alertMessageHover(scope.row.alertRule, true)" @show="alertMessageHover(scope.row.alertRule, true)"
@hide="alertMessageHover(scope.row.alertRule, false)" @hide="alertMessageHover(scope.row.alertRule, false)"
trigger="click"> trigger="hover">
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo> <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
<span slot="reference" class="data-column__span">{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span> <span slot="reference" class="data-column__span">{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
</el-popover> </el-popover>

24
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -63,14 +63,14 @@
<template v-else-if="item.prop === 'state'"> <template v-else-if="item.prop === 'state'">
<el-popover <el-popover
placement="right" placement="right"
trigger="click" trigger="hover"
:open-delay="300" :open-delay="300"
:width="225" :width="215"
popper-class="schedEnableTitle" popper-class="schedEnableTitle"
> >
<div> <div>
<div class="margin-b-10"> <div class="margin-b-10">
{{$t('alert.config.schedEnable')}} : {{$t('alert.config.schedEnable')}}
<el-switch <el-switch
style="margin-left: 14px" style="margin-left: 14px"
slot="reference" slot="reference"
@@ -82,12 +82,12 @@
/> />
</div> </div>
<div> <div>
<div class="margin-b-10">{{$t('alert.config.schedDays')}} :</div> <div class="margin-b-10">{{$t('alert.config.schedDays')}}</div>
<div class="margin-b-5" style="display: flex"> <div class="margin-b-5" style="display: flex">
<i class="nz-icon nz-icon-a-rilizhou"/> <i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
<span v-html="weekStr(scope.row.schedDays)"></span> <span v-html="weekStr(scope.row.schedDays)"></span>
</div> </div>
<div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div> <div ><i class="nz-icon nz-icon-dingshishijian" style="color: #FA901C;"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
</div> </div>
</div> </div>
<!-- <el-switch--> <!-- <el-switch-->
@@ -320,11 +320,17 @@ export default {
padding: 2px 6px; padding: 2px 6px;
} }
.schedEnableTitle{ .schedEnableTitle{
padding: 15px 20px; padding: 20px 15px;
margin-right: 0;
left: 1995px !important;
background: #FFFFFF;
border: 1px solid rgba(119,131,145,0.60);
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
border-radius: 3px;
} }
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{ .schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
font-size: 14px; font-size: 14px;
color: #FA901C; color: #666666;
margin-right: 12px; margin-right: 12px;
} }
.schedEnableTitle .week-item{ .schedEnableTitle .week-item{
@@ -332,7 +338,7 @@ export default {
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
opacity: 0.9; opacity: 0.9;
background: #F7F7FA; background: #F6F6FA;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;

2
nezha-fronted/src/components/common/table/settings/agentTable.vue
View File

@@ -41,7 +41,7 @@
</span> </span>
<span v-else-if="item.prop === 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span> <span v-else-if="item.prop === 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else-if="item.prop === 'status'"> <span v-else-if="item.prop === 'status'">
<el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="click" width="200"> <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
<div slot="reference" style="width: 20px"> <div slot="reference" style="width: 20px">
<div :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div> <div :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
</div> </div>

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

@@ -72,12 +72,6 @@
:type="'module'" :type="'module'"
></alertLabel> ></alertLabel>
</template> </template>
<template v-else-if="item.prop === 'alerts'">
<span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
{{scope.row.alertNum}}
</span>
</template>
<template v-else-if="item.prop === 'asset'"> <template v-else-if="item.prop === 'asset'">
<span <span
class="pointer" class="pointer"
@@ -94,6 +88,12 @@
:type="'asset'" :type="'asset'"
></alertLabel> ></alertLabel>
</template> </template>
<template v-else-if="item.prop === 'alerts'">
<span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
{{scope.row.alertNum}}
</span>
</template>
<template v-else-if="item.prop === 'configs'"> <template v-else-if="item.prop === 'configs'">
<!-- <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">--> <!-- <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
<!-- <span class="configs-endpoint metrics">{ Metrics }</span>--> <!-- <span class="configs-endpoint metrics">{ Metrics }</span>-->
@@ -119,7 +119,7 @@
</el-tooltip> </el-tooltip>
</template> </template>
<template v-else-if="item.prop === 'state'"> <template v-else-if="item.prop === 'state'">
<el-popover placement="left" trigger="click" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2"> <el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
<div> <div>
<div v-html="suspendedStr(scope.row.configs[0].state)"></div> <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
</div> </div>
@@ -136,7 +136,7 @@
</span> </span>
</span> </span>
</el-popover> </el-popover>
<el-popover placement="right" trigger="click" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2"> <el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
<div> <div>
<div v-html="suspendedStr(scope.row.configs[1].state)"></div> <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
</div> </div>

2
nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
View File

@@ -43,7 +43,7 @@
<el-popover <el-popover
placement="right-start" placement="right-start"
width="200" width="200"
trigger="click" trigger="hover"
:content="scope.row.uuid"> :content="scope.row.uuid">
<span slot="reference">{{scope.row.uuid.substring(0, 8).toUpperCase()}}</span> <span slot="reference">{{scope.row.uuid.substring(0, 8).toUpperCase()}}</span>
</el-popover> </el-popover>