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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
chenjinsong
2020-10-15 19:28:54 +08:00
parent 1d0c8646f1 9ceb1ea692
commit 56cb4c5b29
9 changed files with 224 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -372,6 +372,9 @@ function asciiCompute2(num,ascii,units,dot=2,unitIndex=0){
* unit:设置的单位 * unit:设置的单位
* */ * */
function timeCompute(value,unit,dot=0){ function timeCompute(value,unit,dot=0){
if(Number.isInteger(value)) {
dot=0;
}
if(unit == 'year'){ if(unit == 'year'){
return `${value.toFixed(dot)} ${unit}`; return `${value.toFixed(dot)} ${unit}`;
} }

1
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -508,6 +508,7 @@
toolbox:{ toolbox:{
show:false, show:false,
top:'0', top:'0',
right:'18',
showTitle:true, showTitle:true,
feature:{ feature:{
dataZoom:{ dataZoom:{

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

@@ -1,98 +1,98 @@
<template> <template>
<div class="alert-label" :style="calcPosition(that.position)"> <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" 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>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">SN</div> <div class="alert-label-title">SN</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div> <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Host</div> <div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div> <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</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?(alertStateStr(alertLabelData.state)):''}}</div> <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Ping</div> <div class="alert-label-title">Ping</div>
<div class="alert-label-value"> <div class="alert-label-value">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div> <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span> <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Asset Type</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Vendor</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Model</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Alert</div>
<div class="alert-label-value">
<span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
</div> </div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">Asset Type</div> <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div> <div class="alert-label-box">
</div> <div class="alert-label-title">ID</div>
<div class="alert-label-box"> <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
<div class="alert-label-title">Vendor</div> </div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div> <div class="alert-label-box">
</div> <div class="alert-label-title">Name</div>
<div class="alert-label-box"> <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
<div class="alert-label-title">Model</div> </div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div> <div class="alert-label-box">
</div> <div class="alert-label-title">Project</div>
<div class="alert-label-box"> <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
<div class="alert-label-title">PingLastReply</div> </div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div> <div class="alert-label-box">
</div> <div class="alert-label-title">Description</div>
<div class="alert-label-box"> <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
<div class="alert-label-title">Alert</div>
<div class="alert-label-value">
<span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading"> <div class="alert-label-info" v-if="type==='project'" 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>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div> </div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='project'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -153,12 +153,36 @@
}, },
computed: { computed: {
calcPosition() { calcPosition() {
let self=this;
return function(position) { return function(position) {
return { let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
left: `${position.left + position.width + 20}px`, let elHeight=self.type==='asset'?370:(self.type==='project'?70:70);
top: `${position.top - 20}px`, console.log(elHeight);
if(position.top+elHeight>clientHeight){
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top -elHeight- 20}px`,
}
}else{
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top - 20}px`,
}
} }
} }
},
calcHeight(){
let self=this;
return function(position) {
let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
let elHeight=self.type==='asset'?370:(self.type==='project'?70:70);
if(position.top+elHeight>clientHeight){
return 'alert-labelUp'
}else{
return 'alert-label'
}
}
} }
}, },
methods:{ methods:{
@@ -185,10 +209,10 @@
}) })
} }
if(this.type==='project'){ if(this.type==='project'){
this.$get('/project/info?id='+this.id).then((res)=>{ this.$get('/project?id='+this.id).then((res)=>{
if(res.msg==='success'){ if(res.msg==='success'){
this.loading=false; this.loading=false;
this.alertLabelData=res.data.basic; this.alertLabelData=res.data.list[0];
} else{ } else{
this.$message.error(res.msg); this.$message.error(res.msg);
} }
@@ -218,6 +242,14 @@
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-labelUp {
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-label::after { .alert-label::after {
content: ''; content: '';
display: block; display: block;
@@ -234,6 +266,22 @@
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }
.alert-labelUp::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;
bottom: 20px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-label-info{ .alert-label-info{
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
border-bottom: none; border-bottom: none;

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

@@ -60,7 +60,10 @@
<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 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)">{{scope.row.alertRule.alertName}}</span> <span
@mouseenter="alertMessagehover(scope.row.alertRule, true, $event)"
@mouseleave="alertMessagehover(scope.row.alertRule, false)"
>{{scope.row.alertRule.alertName}}</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>
@@ -83,7 +86,9 @@
</span> </span>
<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)"> <span v-for="(item,i) in labelsSort(scope.row.labels)">
<span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)"> <span
@mouseenter="labelHover(scope.row, item.label, true, $event)"
@mouseleave="labelHover(scope.row, item.label, false)">
<nz-alert-tag <nz-alert-tag
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;" :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true" :cursor-point="tagType(item.label) == 'info' ? false : true"

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="alert-rule-tip" :style="calcPosition(that.position)" v-loading="loading"> <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" 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>
@@ -60,12 +60,36 @@
}, },
computed: { computed: {
calcPosition() { calcPosition() {
let self=this;
return function(position) { return function(position) {
return { let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
left: `${position.left + position.width + 20}px`, let elHeight=50;
top: `${position.top - 10}px`, console.log(elHeight);
if(position.top+elHeight>clientHeight){
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top -elHeight- 20}px`,
}
}else{
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top - 20}px`,
}
} }
} }
},
calcHeight(){
let self=this;
return function(position) {
let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
let elHeight=50;
if(position.top+elHeight>clientHeight){
return 'alert-rule-tip-Up'
}else{
return 'alert-rule-tip'
}
}
} }
}, },
methods:{ methods:{
@@ -117,6 +141,30 @@
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }
.alert-rule-tip-Up {
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-Up::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;
bottom: 20px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-rule-info{ .alert-rule-info{
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
border-bottom: none; border-bottom: none;

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

@@ -524,7 +524,9 @@ const cn = {
notInStock: "出库", notInStock: "出库",
principal: "负责人", principal: "负责人",
tel: "电话", tel: "电话",
featureTitle: "属性" featureTitle: "属性",
endpointUpNum:'代表正常的数量',
endpointNum:'代表总的数量',
}, },
config: { config: {
config: "设置", config: "设置",

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

@@ -437,6 +437,8 @@ const en = {
ping:'Ping', ping:'Ping',
}, },
featureTitle:'Attribute', featureTitle:'Attribute',
endpointUpNum:'It\'s a normal number',
endpointNum:'Represents the total quantity',
editAssetTab:{ editAssetTab:{
title:'New asset',//'新增资产' title:'New asset',//'新增资产'
sn:'SN',//SN sn:'SN',//SN

15
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -90,7 +90,13 @@
</el-popover> </el-popover>
</div> </div>
<template v-if="item.prop=='Module'"> <template v-if="item.prop=='Module'">
<span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span> <el-tooltip placement="right" effect="light">
<div slot="content">
{{scope.row.endpointNum-scope.row.endpointDownNum}}&nbsp;{{$t('asset.endpointUpNum')}}<br/>
{{scope.row.endpointNum}}&nbsp;{{$t('asset.endpointNum')}}
</div>
<span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointNum-scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
</el-tooltip>
</template> </template>
<template v-if="item.prop=='Alert'"> <template v-if="item.prop=='Alert'">
<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99"> <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
@@ -474,6 +480,13 @@
return 'success'; return 'success';
} }
} }
if(e.column.label == 'Module' || e.column.label == this.$t("asset.tableTitle.modules")){
if (e.row.endpointDownNum > 0) {
return 'danger';
} else {
return 'success';
}
}
return ''; return '';
}, },
edit(asset) { edit(asset) {

1
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -37,6 +37,7 @@
toolbox:{ toolbox:{
show:false, show:false,
top:'0', top:'0',
right:'18',
showTitle:true, showTitle:true,
tooltip:{ tooltip:{
show:false, show:false,