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

fix: alert-list样式调整、label悬停bug修复

Browse Source
This commit is contained in:
chenjinsong
2020-09-29 18:51:03 +08:00
parent ac835be958
commit f41d59a0a0
5 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -25,6 +25,9 @@ $content-left-text-color: #666; //左侧菜单默认字色
$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色 $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
$danger-color: #DE5D3F; //全局警告色红色
$success-color: #23BF9A; //全局正常色绿色
$left-menu-bgcolor:#FFF; $left-menu-bgcolor:#FFF;
@import './main.scss'; @import './main.scss';

10
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -635,7 +635,7 @@ li{
align-content: center; align-content: center;
} }
.has-sub-popper { .has-sub-popper {
color: red; color: $danger-color;
} }
.main-list { .main-list {
height: 100%; height: 100%;
@@ -785,13 +785,13 @@ li{
background-color: $content-right-background-color; background-color: $content-right-background-color;
} }
.nz-table td.danger .cell>span { .nz-table td.danger .cell>span {
background-color: #d64f40; background-color: $danger-color;
color: white; color: white;
padding:2px 5px; padding:2px 5px;
border-radius: 4px; border-radius: 4px;
} }
.nz-table td.success .cell>span { .nz-table td.success .cell>span {
background-color: #50d050; background-color: $success-color;
color: white; color: white;
padding:2px 5px; padding:2px 5px;
border-radius: 4px; border-radius: 4px;
@@ -1622,11 +1622,11 @@ li{
} }
.red { .red {
//background-color: #d64f40 !important; //background-color: #d64f40 !important;
background-color: #ec7f66 !important; background-color: $danger-color !important;
} }
.green { .green {
//background-color:#50d050 !important; //background-color:#50d050 !important;
background-color:#23bf9a !important; background-color:$success-color !important;
} }
.grey { .grey {
background-color:lightGrey; background-color:lightGrey;

9
nezha-fronted/src/components/charts/chartDataFormat.js
View File

@@ -19,12 +19,11 @@ function short(value,index,type=1,dot){
} }
function percent01(value,index){ function percent01(value,index){
value=parseFloat((value).toPrecision(12)); value=parseFloat(new Number(value).toPrecision(12));
return `${value} %`; return `${value} %`;
} }
function percent02(value,index){ function percent02(value,index){
console.log(value); value=parseFloat((new Number(value)*100).toPrecision(12));
value=parseFloat((value*100).toPrecision(12));
return `${value} %`; return `${value} %`;
} }
function localFormat(value,index){ function localFormat(value,index){
@@ -328,10 +327,10 @@ function asciiCompute(num,ascii,units,dot=2){
num = num / Math.pow(ascii,carry) num = num / Math.pow(ascii,carry)
} }
if(Number.isInteger(num)){ if(Number.isInteger(num)){
console.log(num +' '+units[carry],dot); //console.log(num +' '+units[carry],dot);
return num +' '+units[carry]; return num +' '+units[carry];
}else{ }else{
console.log(num.toFixed(dot) +' '+units[carry],dot); //console.log(num.toFixed(dot) +' '+units[carry],dot);
return num.toFixed(dot) +' '+units[carry]; return num.toFixed(dot) +' '+units[carry];
} }
} }

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

@@ -51,7 +51,7 @@
:minWidth="item.minWidth" :minWidth="item.minWidth"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:show-overflow-tooltip="item.prop != 'labels'" :show-overflow-tooltip="item.prop != 'labels' && item.prop != 'alertRule'"
min-width="110px" min-width="110px"
:sortable="$tableSet.sortableShow(item.prop,'alertMessage')" :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
:prop="$tableSet.propTitle(item.prop,'alertMessage')" :prop="$tableSet.propTitle(item.prop,'alertMessage')"
@@ -59,10 +59,8 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'"> <template v-if="item.prop == 'alertRule'">
<div class="too-long-split pointer"v-if="scope.row.alertRule.alertName" > <div v-if="scope.row.alertRule.alertName" >
<span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)"> <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
<span>{{scope.row.alertRule.alertName}}</span>
</span>
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo> <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
</div> </div>
<template v-else>-</template> <template v-else>-</template>
@@ -127,12 +125,10 @@
</el-tooltip>--> </el-tooltip>-->
</template> </template>
<div v-else-if="item.prop == 'state'"> <span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
<span class=""> {{scope.row['state'] == 1 ? "Pending" : ""}}
{{scope.row['state'] == 1 ? "Pending" : ""}} {{scope.row['state'] == 2 ? "Expired" : ""}}
{{scope.row['state'] == 2 ? "Expired" : ""}} </span>
</span>
</div>
<div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)"> <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
<span v-if="!scope.row.current">-</span> <span v-if="!scope.row.current">-</span>
<el-popover v-else placement="right" trigger="hover"> <el-popover v-else placement="right" trigger="hover">
@@ -707,6 +703,12 @@
labelsClassName(row) { labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) { if (row.column.label == this.$t("alert.list.labels")) {
return "alert-message-list-labels"; return "alert-message-list-labels";
} else if (row.column.label == this.$t("alert.list.state")) {
if (row.row.state == 1) {
return "danger";
} else if (row.row.state == 2) {
return "success";
}
} else { } else {
return ""; return "";
} }

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

@@ -1,23 +1,25 @@
<template> <template>
<div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading"> <div class="alert-rule-tip" :style="calcPosition(that.position)" v-loading="loading">
<div class="alert-rule-box"> <div class="alert-rule-info" >
<div class="alert-rule-title">ID</div> <div class="alert-rule-box">
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div> <div class="alert-rule-title">ID</div>
</div> <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
<!--<div class="alert-rule-box">--> </div>
<!--<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}}</div>--> <!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
<!--</div>--> <!--</div>-->
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">Expression</div> <div class="alert-rule-title">Expression</div>
<div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div> <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">Level</div> <div class="alert-rule-title">Level</div>
<div class="alert-rule-value"> <div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span> <span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'high'}).label}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span> <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'medium'}).label}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span> <span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'low'}).label}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -91,7 +93,55 @@
</script> </script>
<style scoped> <style scoped>
.alert-rule-info::after { .alert-rule-tip {
position: fixed;
background-color: white;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-tip::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 20px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alert-rule-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid #ebeef5;
}
.alert-rule-title{
text-align: left;
width: 90px;
border-right: 1px solid #ebeef5;
color: #666;
padding: 0 3px 0 13px;
}
.alert-rule-value{
text-align: left;
width: 150px;
color: #1a1a1a;
padding: 0 3px 0 13px;
}
/* .alert-rule-info::after {
content: ''; content: '';
display: block; display: block;
width:0; width:0;
@@ -112,9 +162,14 @@
border-bottom: none; border-bottom: none;
font-size: 13px; font-size: 13px;
line-height: 26px; line-height: 26px;
position: fixed; }*/
/* .alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
display: flex;
background-color: white; background-color: white;
z-index: 3000;
padding: 10px; padding: 10px;
transform: translateY(-50%); transform: translateY(-50%);
overflow-wrap: break-word; overflow-wrap: break-word;
@@ -136,5 +191,5 @@
text-align: left; text-align: left;
color: #1a1a1a; color: #1a1a1a;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }*/
</style> </style>